（转）Openlayers 2.X加载高德地图

http://blog.csdn.net/gisshixisheng/article/details/44853881

概述：

前面的有篇文章介绍了Openlayers 2.X下加载天地图，本节介绍Openlayers 2.X下加载高德地图。

实现效果：

高德地图

高德影像

图中：蓝色的省市边界为我本机发布的，能够与高德地图很好地结合在一起。

实现：

实现很简单的，主要是要获取地图的url，在Arcgis for js加载百度地图一文（http://blog.csdn.net/gisshixisheng/article/details/44853709）中做了介绍，在此不再赘述，实现代码如下：

[html] view plaincopy print?

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MapQuest Demo</title>
<link rel="stylesheet" type="text/css" href="http://200.200.200.222/OpenLayers-2.12/theme/default/style.css"/>
<style type="text/css">
html, body, #map{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
<script type="text/javascript" src="http://200.200.200.222/OpenLayers-2.12/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
var vecLayer = new OpenLayers.Layer.XYZ("高德矢量", [
"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
"http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
"http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
"http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}"
], {
isBaseLayer: true,
visibility: true,
displayInLayerSwitcher: true
});
var imgLayer = new OpenLayers.Layer.XYZ("高德栅格", [
"http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
"http://webst02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
"http://webst03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
"http://webst04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}"
], {
isBaseLayer: true,
visibility: true,
displayInLayerSwitcher: true
});
map = new OpenLayers.Map("map",{
projection: "EPSG:900913",
displayProjection: "EPSG:4326",
units: 'm',
layers: [vecLayer, imgLayer],
numZoomLevels:20,
center: [11858238.665397, 4762368.6569168],
zoom: 5
});
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
var wms = new OpenLayers.Layer.WMS(
"省级行政区",
"http://200.200.200.220:8080/geoserver/wms",
{
LAYERS: "pro",
transparent:true
},
{
singleTile: false,
ratio: 1,
isBaseLayer: false,
visibility:true,
yx : {'EPSG:4326' : true}
}
);
map.addLayer(wms);
}
</script>
</head>
<body οnlοad="init()">
<div id="map"></div>
</body>

转载于:https://www.cnblogs.com/telwanggs/p/6972814.html

（转）Openlayers 2.X加载高德地图相关推荐

Openlayers 2.X加载高德地图
概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍Openlayers 2.X下加载高德地图. 实现效果: 高德地图高德影像图中:蓝色的省市边界为我本机发布的,能够与高 ...
vue openlayers 加载高德地图等 gcj02 的图层偏移问题
vue openlayers 加载高德地图等 gcj02 的图层偏移问题这个问题是在使用 openlayers 地图引擎加载高德地图或者是谷歌地图都会遇到的问题,所以说呢这篇博文稍微说一下解决办法. ...
vue 项目安装 openlayer 加载高德地图
vue 项目安装 openlayer 今天呢,稍微说一下关于 vue 项目使用 openlayer 的一些操作,我也是刚开始学习,在摸索. 比较讨厌的一点就是他的官网说明文档啥的都是英文的,对英语不好 ...
ios 高德地图加载瓦片地图_OpenLayers加载高德地图离线瓦片地图
谷歌地球离线瓦片下载使用"迈高图-地图数据下载器"(以下简称:迈高图),演示数据以湖南省长沙市7~16级瓦片数据为例. 下载演示数据迈高图选择谷歌地球为当前地图源,地图图层选择为 ...
046：cesium加载高德地图（多种形式）
第046个点击查看专栏目录本示例的目的是介绍如何在vue+cesium中加载加载高德地图.这里区分了很多种形式,详情见核心分析和源代码. 直接复制下面的 vue+cesium源代码,操作2分钟即可 ...
020：Mapbox GL加载高德地图（影像瓦片图）
第020个点击查看专栏目录本示例的目的是介绍演示如何在vue+mapbox中加载高德地图(影像瓦片图). 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果文章目录示例效果 ...
Vue+OpenLayers入门（加载高德在线地图）
开发环境的搭建在上一篇教程中已有描述,如果不知道怎么搭建,请移步Vue+OpenLayers入门(加载OSM在线地图) 此代码为加载高德在线地图以及清除地图上的默认控件: <template&g ...
Openlayers案例1——加载OSM地图
1. 代码块 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
OpenLayers 3 之加载百度地图
虽然百度地图有自己的 JavaScript API,但是有时候,一个项目已经用 OpenLayers 做了很多功能,不可能弃之不用,同时,又想使用百度地图,该怎么办呢?所以很多人想使用 OpenLay ...

（转）Openlayers 2.X加载高德地图

（转）Openlayers 2.X加载高德地图相关推荐

最新文章

热门文章