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>  
  • 相关阅读:
    POJ 1811 Prime Test 素性测试 分解素因子
    sysbench的安装与使用
    电脑中已有VS2005和VS2010安装.NET3.5失败的解决方案
    I.MX6 show battery states in commandLine
    RPi 2B Raspbian system install
    I.MX6 bq27441 driver porting
    I.MX6 隐藏电池图标
    I.MX6 Power off register hacking
    I.MX6 Goodix GT9xx touchscreen driver porting
    busybox filesystem httpd php-5.5.31 sqlite3 webserver
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972814.html
Copyright © 2011-2022 走看看