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>

（转）Openlayers 2.X加载高德地图的更多相关文章

  1. OpenLayers加载高德地图离线瓦片地图

    本文使用OpenLayers最新版本V5.3.0演示:如何使用OpenLayer加载谷歌地球离线瓦片地图.OpenLayers 5.3.0下载地址为:https://github.com/openla ...

  2. arcgis 加载高德地图 es6的方式

    目前很多arcgis 加载高德地图是dojo的方式 外部引入文件,现在改成这种方式 /** * Created by Administrator on 2018/5/14 0014. */ impor ...

  3. Vue异步加载高德地图API

    项目中用到了高德地图的API以及UI组件库,因为是直接把引入script写在index.html中,项目打包后运行在服务器,用浏览器访问加载第一次时会非常慢,主要原因是加载高德地图相关的js(近一分钟 ...

  4. vue 里面异步加载高德地图

    前言 关于Vue 里面使用异步加载高德地图 项目中其实只有几处需要用到地图,不需要全局引入 在index文件中引入js会明显拖慢首屏加载速度,虽然可以使用异步加载script的方式解决,但是始终觉得不 ...

  5. openLayers加载高德地图

    之前用openlayers对高德,百度,腾讯,bing,supermap,天地图,arcgis,google等地图进行了对接,今天简单介绍一下openlayers+高德: 在Openlayers.La ...

  6. Arcgis api For silverlight 加载高德地图

    原文 http://www.cnblogs.com/thinkaspx/archive/2012/11/13/2767752.html 地图仅供演示,研究使用.如要商用 请联系厂商. public c ...

  7. iOS unity 互相调用加载高德地图时

    需要增加 mapView.delegate = self 这是一种设计模式,有的人称为代理,有的人称为委托,比如有A,B两个控制器,由A可以push到B,B可以pop回A,现在有一种情况,A中有一个l ...

  8. Leaflet 测试加载高德地图

    <!DOCTYPE html> <html> <head>  <title>Leaflet Quick Start Guide Example</ ...

  9. ArcGIS加载高德、OSM和谷歌等地图

    1. 引言 网络地图对于我们来说已经不是什么新鲜事了,上面有各大互联网公司收集的海量的地理空间数据.一般网络地图的地图是以切片形式存在的,因此,本文重点讲述如何将这些网络切片地图加载并显示再ArcGI ...

随机推荐

  1. java中Long 和long的区别

    Java的数据类型分两种:1.基本类型:long,int,byte,float,double,char2. 对象类型(类): Long,Integer,Byte,Float,Double,Char,S ...

  2. 浏览器最小字体小于12px解决方案

    <style> p{font-size:10px;-webkit-transform:scale(0.8);} /*这里的数字0.8,是缩放比例,可以根据情况变化.*/ </styl ...

  3. MySql解压版使用

    1.解压 2.配置环境变量 3.新建空目录data,修改ini配置文件,修改basedir和datadir 4.管理员运行cmd,进入bin目录 5.mysql -install,如果提示错误,先my ...

  4. hdu3371 Connect the Cities (MST)

    Connect the Cities Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  5. Codeforces Round #277 (Div. 2)C.Palindrome Transformation 贪心

    C. Palindrome Transformation     Nam is playing with a string on his computer. The string consists o ...

  6. 虚函数的特点就是执行的时候会下降到子类去执行同名覆盖函数 good

    var t: TBitBtn;begin t:=TBitBtn.Create(nil); t.Name:='BitBtn100'; t.parent :=Self; // 这里下断点end; 一路跟踪 ...

  7. Android系统Recovery工作原理之使用update.zip升级过程分析（六）---Recovery服务流程细节【转】

    本文转载自:http://blog.csdn.net/mu0206mu/article/details/7465439  Android系统Recovery工作原理之使用update.zip升级过程分 ...

  8. Entity Framework Utility .ttinclude File

    https://msdn.microsoft.com/en-us/library/ff477603(v=vs.100).aspx This topic provides an overview of ...

  9. 通过Ajax和SpringBoot交互的示例

    转自:https://blog.csdn.net/oppo5630/article/details/52093898/

  10. (Go)06. Printf格式化输出、Scanf格式化输入详解

    Print.Println .Printf .Sprintf .Fprintf都是fmt 包中的公共方法,在需要打印信息时需要用到这些函数,那么这些函数有什么区别呢? Print: 输出到控制台(不接 ...