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. 【[Offer收割]编程练习赛13 D】骑士游历(矩阵模板,乘法,加法,乘方)

    [题目链接]:http://hihocoder.com/problemset/problem/1504 [题意] [题解] 可以把二维的坐标转成成一维的; 即(x,y)->(x-1)*8+y 然 ...

  2. BUPT2017 springtraining(16) #2 ——基础数据结构

    题目在这里 A.似乎是个并查集+??? B.10W的范围,似乎可以暴力来一发二分+sort? 但我猜正解可以O(nlogn)? C.单调队列入门题目 #include <cstdio> ] ...

  3. web开发如何使用百度地图API（一）判断点是否在范围内

    准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...

  4. 利用fontforge制作自己的字体

    最近手伤了,写代码特别慢,索性就干干一些奇奇怪怪的事情. 发现我电脑上的中文字体很是奇怪,于是便去找了中英混合的等宽字体. 满足条件的只找到了YaHei Consolas Hybrid,是微软的Con ...

  5. 洛谷 P2023 [AHOI2009]维护序列

    P2023 [AHOI2009]维护序列 题目描述 老师交给小可可一个维护数列的任务,现在小可可希望你来帮他完成. 有长为N的数列,不妨设为a1,a2,…,aN .有如下三种操作形式: (1)把数列中 ...

  6. Hello, HTML5!

    一个典型的HTML5文档的基础结构如下: <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf ...

  7. Maven中的dependency的scope作用域详解

    1.test范围指的是测试范围有效,在编译和打包时都不会使用这个依赖 2.compile范围指的是编译范围有效,在编译和打包时都会将依赖存储进去 3.provided依赖:在编译和测试的过程有效,最后 ...

  8. Java 两个整数相除保留两位小数，将小数转化为百分数

    Java 两个整数相除保留两位小数,将小数转化为百分数 源于:http://blog.sina.com.cn/s/blog_624d755d0101cvuq.html 后来学习了:http://blo ...

  9. lzugis——Arcgis Server for JavaScript API之自己定义InfoWindow

    用过Arcgis Server for JavaScript API肯定知道InfoWIndow.你在用InfoWindow的时候会发现各种问题,比如不能全然显示的问题,遮盖对象的问题等等.所以呢我在 ...

  10. Resources.Theme

    public final class Resources.Theme extends Object java.lang.Object    ↳ android.content.res.Resource ...