zoukankan      html  css  js  c++  java

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

    [html] view plain copy
     
     print?
    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.             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.   
    42.             map = new OpenLayers.Map("map",{  
    43.                 projection: "EPSG:900913",  
    44.                 displayProjection: "EPSG:4326",  
    45.                 units: 'm',  
    46.                 layers: [vecLayer, imgLayer],  
    47.                 numZoomLevels:20,  
    48.                 center: [11858238.665397, 4762368.6569168],  
    49.                 zoom: 5  
    50.             });  
    51.             map.addControl(new OpenLayers.Control.LayerSwitcher());  
    52.             map.addControl(new OpenLayers.Control.MousePosition());  
    53.   
    54.             var wms = new OpenLayers.Layer.WMS(  
    55.              "省级行政区",  
    56.              "http://200.200.200.220:8080/geoserver/wms",  
    57.              {  
    58.              LAYERS: "pro",  
    59.              transparent:true  
    60.              },  
    61.              {  
    62.              singleTile: false,  
    63.              ratio: 1,  
    64.              isBaseLayer: false,  
    65.              visibility:true,  
    66.              yx : {'EPSG:4326' : true}  
    67.              }  
    68.              );  
    69.              map.addLayer(wms);  
    70.         }  
    71.     </script>  
    72. </head>  
    73. <body onload="init()">  
    74.     <div id="map"></div>  
    75. </body>  
  • 相关阅读:
    获取各种高度宽度方法总结
    关于float、absolute，fixed谁的z-index大！
    一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
    clientHeight的纠结之处
    js和jq的获取元素偏移位置
    js的一些使用
    微信 ios的问题
    jQuery事件之鼠标事件
    遇到的问题
    css
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972814.html
Copyright © 2011-2022 走看看