（转）Openlayers 2.X加载天地图

http://blog.csdn.net/gisshixisheng/article/details/44621923

概述：

在前面的章节，讲到了Arcgis for js加载天地图，在本节讲述如何在Openlayers 2.X的版本中加载天地图，并添加自己的wms服务。

效果：

地图

影像

地形

去掉本地wms

实现：

1、天地图服务

在天地图的官方网站上，我们可以看到如下所示的：

页面上列出了我们可调用的图的url，网站地址为：http://www.tianditu.com/guide/index.html。

2、加载天地图

在openlayers中加载天地图可用OpenLayers.Layer.XYZ来实现，在此，我将之封装成了两个函数，getBaseLayer和getAnnoLayer，分别实现基础底图和标注图层，代码如下：

[javascript] view plain copy
 
 print?
  1. function getBaseLayer(layername, layer){  
  2.     return new OpenLayers.Layer.XYZ(  
  3.             layername,  
  4.             [  
  5.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  6.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  7.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  8.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  9.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  10.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  11.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  12.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"  
  13.   
  14.             ],  
  15.             {  
  16.                 isBaseLayer: true,  
  17.                 displayInLayerSwitcher:true  
  18.             }  
  19.     );  
  20. };  
  21. function getAnnoLayer(layername, layer, visiable){  
  22.     return new OpenLayers.Layer.XYZ(  
  23.             layername,  
  24.             [  
  25.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  26.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  27.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  28.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  29.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  30.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  31.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
  32.                 "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"  
  33.   
  34.             ],  
  35.             {  
  36.                 isBaseLayer: false,  
  37.                 visibility:visiable,  
  38.                 displayInLayerSwitcher:false  
  39.             }  
  40.     );  
  41. };  

调用方式为：

[javascript] view plain copy
 
 print?
  1. var baseLayers = ["vec_c","img_c","ter_c"];  
  2. var vecLayer = getBaseLayer("地图",baseLayers[0]);  
  3. var imgLayer = getBaseLayer("影像",baseLayers[1]);  
  4. var terLayer = getBaseLayer("地形",baseLayers[2]);  
  5.   
  6. var vecAnno = getAnnoLayer("地图标注", "cva_c", true);  


完整代码如下：

[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.             function getBaseLayer(layername, layer){  
    22.                 return new OpenLayers.Layer.XYZ(  
    23.                         layername,  
    24.                         [  
    25.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    26.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    27.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    28.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    29.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    30.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    31.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    32.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"  
    33.   
    34.                         ],  
    35.                         {  
    36.                             isBaseLayer: true,  
    37.                             displayInLayerSwitcher:true  
    38.                         }  
    39.                 );  
    40.             };  
    41.             function getAnnoLayer(layername, layer, visiable){  
    42.                 return new OpenLayers.Layer.XYZ(  
    43.                         layername,  
    44.                         [  
    45.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    46.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    47.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    48.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    49.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    50.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    51.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",  
    52.                             "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"  
    53.   
    54.                         ],  
    55.                         {  
    56.                             isBaseLayer: false,  
    57.                             visibility:visiable,  
    58.                             displayInLayerSwitcher:false  
    59.                         }  
    60.                 );  
    61.             };  
    62.   
    63.             var baseLayers = ["vec_c","img_c","ter_c"];  
    64.             var vecLayer = getBaseLayer("地图",baseLayers[0]);  
    65.             var imgLayer = getBaseLayer("影像",baseLayers[1]);  
    66.             var terLayer = getBaseLayer("地形",baseLayers[2]);  
    67.   
    68.             var vecAnno = getAnnoLayer("地图标注", "cva_c", true);  
    69.   
    70.   
    71.             map = new OpenLayers.Map({  
    72.                 div: "map",  
    73.                 projection: "EPSG:4326",  
    74.                 layers: [vecLayer,imgLayer,terLayer],  
    75.                 numZoomLevels:20,  
    76.                 center: [103.847, 36.0473],  
    77.                 zoom: 4  
    78.             });  
    79.             map.addControl(new OpenLayers.Control.LayerSwitcher());  
    80.             map.addControl(new OpenLayers.Control.MousePosition());  
    81.   
    82.             var wms = new OpenLayers.Layer.WMS(  
    83.                     "省级行政区",  
    84.                     "http://200.200.200.220:8080/geoserver/wms",  
    85.                     {  
    86.                         LAYERS: "pro",  
    87.                         transparent:true  
    88.                     },  
    89.                     {  
    90.                         singleTile: false,  
    91.                         ratio: 1,  
    92.                         isBaseLayer: false,  
    93.                         visibility:true,  
    94.                         yx : {'EPSG:4326' : true}  
    95.                     }  
    96.             );  
    97.             map.addLayer(wms);  
    98.             map.addLayers([vecAnno]);  
    99.         }  
    100.     </script>  
    101. </head>  
    102. <body onload="init()">  
    103.     <div id="map"></div>  
    104. </body>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/telwanggs/p/6972830.html