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. 2019字节跳动冬令营day7娱乐赛19题题解

    啊没去听讲题,也没发纸质题解,电子版题解也没有 为最后几个unsolve自闭了一段时间才全都A掉 3个队友写的我没看的题通过人数蛮多就不管了 题目地址:https://pan.baidu.com/s/ ...

  2. cogs 315. [POJ3255] 地砖RoadBlocks

    315. [POJ3255] 地砖RoadBlocks ★★★   输入文件:block.in   输出文件:block.out   简单对比时间限制:1 s   内存限制:128 MB Descri ...

  3. assign retain 和copy的区别

    assign 对基础数据类型 (NSInteger,CGFloat)和C数据类型(int, float, double, char)等 等. 此标记说明设置器直接进⾏行赋值,这也是默认值.在使⽤用垃圾 ...

  4. N天学习一个Linux命令之hostnamectl

    前言 安装了CentOS7,发现按照以前修改文件/etc/sysconfig/network HOSTNAME字段主机名的方式不生效了,查资料发现可以使用hostnamectl命令 用途 Contro ...

  5. MSSQL的表备份成INSERT脚本的存储过程

    USE [SupplyChain]GO/****** Object: StoredProcedure [dbo].[ExpData] Script Date: 2015-12-18 10:23:08 ...

  6. jquery ajax CORS 跨域訪问 WebService

    JS代码: var word = document.getElementById("word").value; $.ajax({ type: "POST", c ...

  7. leetcode中，代码怎样调试，创造本地执行环境

    初次接触leetcode,是我在一个招聘站点上看的,这个OJ真有那么厉害吗? 这几天在这个OJ上做了几道题,发现他的几个特点,1.题目不难(相对于ACM来说,我被ACM虐到至今无力),评判没那么苛刻, ...

  8. ubuntu系统启动qtceator时提示：Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库

    在ubuntu系统下安装好qt5.5后启动qtceator时提示:Qt5.5.1/Tools/QtCreator/lib/qtcreator/plugins/libHelp.so: 无法加载库Qt5. ...

  9. HTML文档基础

    一.HTML(Hyper Text Markup Language超文本标记语言)是一种用来制作超文本文档的简单标记语言,HTML在正文的文本中编写各种标记,通过Web浏览器进行编译和运行才干正确显示 ...

  10. C++ Development Library

    C/C++ 开发库 | C/C++ Development Library 这里收集一些著名的 C/C++ 开发库.SDK.类库.可复用类与结构代码 等信息,列举它们的介绍.参考和网站链接,为各位 C ...