（转）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）中做了介绍，在此不再赘述，实现代码如下：

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6. <meta name="apple-mobile-web-app-capable" content="yes">
7. <title>OpenLayers MapQuest Demo</title>
8. <link rel="stylesheet" type="text/css" href="http://200.200.200.222/OpenLayers-2.12/theme/default/style.css"/>
9. <style type="text/css">
10. html, body, #map{
11. padding:0;
12. margin:0;
13. height:100%;
14. width:100%;
15. }
16. </style>
17. <script type="text/javascript" src="http://200.200.200.222/OpenLayers-2.12/OpenLayers.js"></script>
18. <script type="text/javascript">
19. var map;
20. function init(){
21. var vecLayer = new OpenLayers.Layer.XYZ("高德矢量", [
22. "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
23. "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
24. "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}",
25. "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x=${x}&y=${y}&z=${z}"
26. ], {
27. isBaseLayer: true,
28. visibility: true,
29. displayInLayerSwitcher: true
30. });
31. var imgLayer = new OpenLayers.Layer.XYZ("高德栅格", [
32. "http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
33. "http://webst02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
34. "http://webst03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}",
35. "http://webst04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x=${x}&y=${y}&z=${z}"
36. ], {
37. isBaseLayer: true,
38. visibility: true,
39. displayInLayerSwitcher: true
40. });
41. map = new OpenLayers.Map("map",{
42. projection: "EPSG:900913",
43. displayProjection: "EPSG:4326",
44. units: 'm',
45. layers: [vecLayer, imgLayer],
46. numZoomLevels:20,
47. center: [11858238.665397, 4762368.6569168],
48. zoom: 5
49. });
50. map.addControl(new OpenLayers.Control.LayerSwitcher());
51. map.addControl(new OpenLayers.Control.MousePosition());
52. var wms = new OpenLayers.Layer.WMS(
53. "省级行政区",
54. "http://200.200.200.220:8080/geoserver/wms",
55. {
56. LAYERS: "pro",
57. transparent:true
58. },
59. {
60. singleTile: false,
61. ratio: 1,
62. isBaseLayer: false,
63. visibility:true,
64. yx : {'EPSG:4326' : true}
65. }
66. );
67. map.addLayer(wms);
68. }
69. </script>
70. </head>
71. <body onload="init()">
72. <div id="map"></div>
73. </body>