思享工具箱

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

摘要：
T="+layer+"&X=${x}&Y=${y}&L=${z}"],{isBaseLayer:false,visibility:visiable,displayInLayerSwitcher:false});};调用方式为：[javascript]viewplaincopyprint?varbaseLayers=["vec_c","img_c","ter_c"];varvecLayer=getBaseLayer;varimgLayer=getBaseLayer;varterLayer=getBaseLayer;varvecAnno=getAnnoLayer;完整代码如下：[html]viewplaincopyprint?

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

概述：

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

效果：

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

地图

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

影像

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

地形

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

去掉本地wms

实现：

1、天地图服务

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

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

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

2、加载天地图

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

  1. functiongetBaseLayer(layername,layer){
  2. returnnewOpenLayers.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}"
  14. ],
  15. {
  16. isBaseLayer:true,
  17. displayInLayerSwitcher:true
  18. }
  19. );
  20. };
  21. functiongetAnnoLayer(layername,layer,visiable){
  22. returnnewOpenLayers.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}"
  34. ],
  35. {
  36. isBaseLayer:false,
  37. visibility:visiable,
  38. displayInLayerSwitcher:false
  39. }
  40. );
  41. };

调用方式为：

  1. varbaseLayers=["vec_c","img_c","ter_c"];
  2. varvecLayer=getBaseLayer("地图",baseLayers[0]);
  3. varimgLayer=getBaseLayer("影像",baseLayers[1]);
  4. varterLayer=getBaseLayer("地形",baseLayers[2]);
  6. varvecAnno=getAnnoLayer("地图标注","cva_c",true);

完整代码如下：

    1. <!DOCTYPEhtml>
    2. <html>
    3. <head>
    4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
    5. <metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    6. <metaname="apple-mobile-web-app-capable"content="yes">
    7. <title>OpenLayersMapQuestDemo</title>
    8. <linkrel="stylesheet"type="text/css"href="http://200.200.200.222/OpenLayers-2.12/theme/default/style.css"/>
    9. <styletype="text/css">
    10. html,body,#map{
    11. padding:0;
    12. margin:0;
    13. height:100%;
    14. 100%;
    15. }
    16. </style>
    17. <scripttype="text/javascript"src="http://200.200.200.222/OpenLayers-2.12/OpenLayers.js"></script>
    18. <scripttype="text/javascript">
    19. varmap;
    20. functioninit(){
    21. functiongetBaseLayer(layername,layer){
    22. returnnewOpenLayers.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}"
    34. ],
    35. {
    36. isBaseLayer:true,
    37. displayInLayerSwitcher:true
    38. }
    39. );
    40. };
    41. functiongetAnnoLayer(layername,layer,visiable){
    42. returnnewOpenLayers.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}"
    54. ],
    55. {
    56. isBaseLayer:false,
    57. visibility:visiable,
    58. displayInLayerSwitcher:false
    59. }
    60. );
    61. };
    63. varbaseLayers=["vec_c","img_c","ter_c"];
    64. varvecLayer=getBaseLayer("地图",baseLayers[0]);
    65. varimgLayer=getBaseLayer("影像",baseLayers[1]);
    66. varterLayer=getBaseLayer("地形",baseLayers[2]);
    68. varvecAnno=getAnnoLayer("地图标注","cva_c",true);
    71. map=newOpenLayers.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(newOpenLayers.Control.LayerSwitcher());
    80. map.addControl(newOpenLayers.Control.MousePosition());
    82. varwms=newOpenLayers.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. <bodyonload="init()">
    103. <divid="map"></div>
    104. </body>

标签：#openlayers#地图 | 浏览：929 | 发布日期：

免责声明：文章转载自《（转）Openlayers 2.X加载天地图》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Debussy的安装与使用Lua的require小结下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

百度地图在项目中的使用(JS)

废话先： 这个项目是使用ASP.NET MVC 写的，而关于百度地图在项目中的应用不限于ASP.NET MVC 因为我大部分的API的使用是通过Javascript，想在项目中使用百度地图，你得先成为百度的开发者，具体的步骤，在本篇博文中不多叙述。 主题： 在使用百度地图的时候，你得先要获得一个ak 这里就是点击创建应用，它提供了几个类别1.for...

chinaMap

中国地图 基本地图 import pandas as pd from matplotlib.colors import rgb2hex from mpl_toolkits.basemap import Basemap import matplotlib.pyplot as plt ### 1. 中国基本地图 map = Basemap( llcrnrlo...

VINS-Mono运行

修改 修改地图保存的路径因为我们现在跑的是euroc数据集，所以我们要修改的地方有两处。 euroc_config.yaml中的pose_graph_save_path项pose_graph_save_path: "/home/kk/自己的路径/" euroc_config.yaml中的output_path项output_path: "/home/kk/...

openlayers3 基础（常见方法，类及实现）

　　　　ol3接口大全1.ol.Map类：（地图容器类） 　　　　实现： ol.Map(参数) 　　参数说明：1.1 target，说明地图所在的html元素、 　　　　　　　　如果没有指定，必须调用ol.Map类的setTarget（）方法以便绘制地图； 　　　　　　1.2 layers,指定加载的图层。 　　　　　　　　如果未定义，则将呈现不包含图层...

tableau-空间分析（tableau入门day-5）

目录 1.场景一---背景地图添加和使用 2.场景二---双轴图流动地图的使用 场景一 使用场景：与分析相关联的背景地图插入，可与分析信息结合更紧密，方便用户理解，可以是公司内部人员分布，工厂平面图设备位置，及学校教学楼分布等信息，也可是人体图研究容易受伤部位等 知识点① 背景地图的添加 知识点② 页面的使用 知识点③ 高亮笔的用法 背景地图添加 地图...

OpenLayers 3 入门教程

OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。 最初的版本旨在支持第2版提供的功能，提供大量商业或免费的瓦片资源以及最流行的开源矢量数据格式。与版本2一样，...

最新文章

随机推荐

思享工具箱导航