zoukankan      html  css  js  c++  java

  • （转）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>  
  • 相关阅读:
    8-6实战蒙版
    8-5渐变及半透明蒙版
    8-4修改蒙版
    8-3建立蒙版
    imageNamed、imageWithContentsOfFile、imageWithData
    #import、#include、@class、@protocol、@interface
    JSON解析
    控制器的生命周期
    纯代码方式实现九宫格布局
    KVC笔记
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972830.html
Copyright © 2011-2022 走看看