Openlayers 2.X加载高德地图
生活随笔
收集整理的這篇文章主要介紹了
Openlayers 2.X加载高德地图
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
概述：
前面的有篇文章介紹了Openlayers 2.X下加載天地圖，本節(jié)介紹Openlayers 2.X下加載高德地圖。
實(shí)現(xiàn)效果：
高德地圖
高德影像
圖中：藍(lán)色的省市邊界為我本機(jī)發(fā)布的，能夠與高德地圖很好地結(jié)合在一起。
實(shí)現(xiàn)：
實(shí)現(xiàn)很簡(jiǎn)單的，主要是要獲取地圖的url，在Arcgis for js加載百度地圖一文（http://blog.csdn.net/gisshixisheng/article/details/44853709）中做了介紹，在此不再贅述，實(shí)現(xiàn)代碼如下：
<!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("省級(jí)行政區(qū)","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>轉(zhuǎn)載于:https://www.cnblogs.com/lzugis/p/6539834.html
總結(jié)
以上是生活随笔為你收集整理的Openlayers 2.X加载高德地图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HDU 3282 Running Med
- 下一篇： 移动端开发碰到一个坑