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. ajax学习----json，前后端交互，ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  2. CF410div2 A. Mike and palindrome

    /* CF410div2 A. Mike and palindrome http://codeforces.com/contest/798/problem/A 水题 */ #include <c ...

  3. hdu 1273最大流

    #include<stdio.h> #include<string.h> #define inf 1000000000 #include<queue> #defin ...

  4. [cogs731] [网络流24题#6] 最长递增子序列 [网络流，最大流]

    [转hzwer]第一问是LIS,动态规划求解,第二问和第三问用网络最大流解决.首先动态规划求出F[i],表示以第i位为开头的最长上升序列的长度,求出最长上升序列长度K.1.把序列每位i拆成两个点< ...

  5. UVA 10905

    这题一开始比较错了.两字符串比较应该是 ab和ba两字符串连接起来比较,谁在前面大就排前面. #include <iostream> #include <cstdio> #in ...

  6. linux下环境变量C_INCLUDE_PATH

    环境变量定义一般都是/etc/profile文件(对所有用户有效),或者在Home目录下的.bashrc或.profile(只对当前用户有效)一般系统安装了编译工具之后无需设置这些变量编译都不会出现问 ...

  7. POJ2777 Count Color 线段树区间更新

    题目描写叙述: 长度为L个单位的画板,有T种不同的颜料.现要求按序做O个操作,操作分两种: 1."C A B C",即将A到B之间的区域涂上颜色C 2."P A B&qu ...

  8. OpenGL ES2.0 基本编程

    1. EGL OpenGL ES命令须要一个rendering context和一个drawing surface. Rendering Context: 保存当前的OpenGL ES状态. Draw ...

  9. UVA 12683 Odd and Even Zeroes（数学—找规律）

    Time Limit: 1000 MS In mathematics, the factorial of a positive integer number n is written as n! an ...

  10. ADS-B显示终端6.8

    更新日志; 本次更新依旧主要注重是BUG修正. 1 改动鼠标移动时地图重绘的BUG 鼠标移动时地图即发生重绘,占用了CPU资源,修正后仅仅当鼠标点击选中对象或拖动对象时地图才会发生重绘.极大程度上节省 ...