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，分别实现基础底图和标注图层，代码如下：

  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. isBaseLayer: true,
  16. displayInLayerSwitcher:true
  17. }
  18. );
  19. };
  20. function getAnnoLayer(layername, layer, visiable){
  21. return new OpenLayers.Layer.XYZ(
  22. layername,
  23. [
  24. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  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. ],
  33. {
  34. isBaseLayer: false,
  35. visibility:visiable,
  36. displayInLayerSwitcher:false
  37. }
  38. );
  39. };

调用方式为：

  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. var vecAnno = getAnnoLayer("地图标注", "cva_c", true);

完整代码如下：

    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. width: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. isBaseLayer: true,
    36. displayInLayerSwitcher:true
    37. }
    38. );
    39. };
    40. function getAnnoLayer(layername, layer, visiable){
    41. return new OpenLayers.Layer.XYZ(
    42. layername,
    43. [
    44. "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
    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. ],
    53. {
    54. isBaseLayer: false,
    55. visibility:visiable,
    56. displayInLayerSwitcher:false
    57. }
    58. );
    59. };
    60. var baseLayers = ["vec_c","img_c","ter_c"];
    61. var vecLayer = getBaseLayer("地图",baseLayers[0]);
    62. var imgLayer = getBaseLayer("影像",baseLayers[1]);
    63. var terLayer = getBaseLayer("地形",baseLayers[2]);
    64. var vecAnno = getAnnoLayer("地图标注", "cva_c", true);
    65. map = new OpenLayers.Map({
    66. div: "map",
    67. projection: "EPSG:4326",
    68. layers: [vecLayer,imgLayer,terLayer],
    69. numZoomLevels:20,
    70. center: [103.847, 36.0473],
    71. zoom: 4
    72. });
    73. map.addControl(new OpenLayers.Control.LayerSwitcher());
    74. map.addControl(new OpenLayers.Control.MousePosition());
    75. var wms = new OpenLayers.Layer.WMS(
    76. "省级行政区",
    77. "http://200.200.200.220:8080/geoserver/wms",
    78. {
    79. LAYERS: "pro",
    80. transparent:true
    81. },
    82. {
    83. singleTile: false,
    84. ratio: 1,
    85. isBaseLayer: false,
    86. visibility:true,
    87. yx : {'EPSG:4326' : true}
    88. }
    89. );
    90. map.addLayer(wms);
    91. map.addLayers([vecAnno]);
    92. }
    93. </script>
    94. </head>
    95. <body onload="init()">
    96. <div id="map"></div>
    97. </body>

（转）Openlayers 2.X加载天地图的更多相关文章

  1. 使用openlayers 3 在线加载天地图及GeoServer发布的地图

    使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件.下面直接贴代码: <!DOCTYPE html ...

  2. openlayers加载天地图过程中遇到跨域问题

    // 采用openlayers加载天地图 var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ // crossOrigin: 'An ...

  3. （转）Openlayers 2.X加载高德地图

    http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

  4. 【ArcGis for javascript从零开始】之一 ArcGis加载天地图

    最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...

  5. ArcGis Javascript API (V3.6)加载天地图

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

  6. ArcGIS API for Javascript 加载天地图（经纬度投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. ArcGIS API for Javascript 加载天地图（墨卡托投影）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 18 ArcGIS API for JavaScript4.X 系列加载天地图（经纬度）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 36ArcGIS API for JavaScript3.X 系列加载天地图（经纬度）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Java基础学习总结（24）——Java单元测试之JUnit4详解

    Java单元测试之JUnit4详解 与JUnit3不同,JUnit4通过注解的方式来识别测试方法.目前支持的主要注解有: @BeforeClass 全局只会执行一次,而且是第一个运行 @Before  ...

  2. Postman做http接口功能测试

    首先,做接口测试前要有明确的接口文档(e.g. http://test.nnzhp.cn/wiki/index.php?doc-view-59) ,假设已经在PC上安装好了Postman. 1. 普通 ...

  3. 新的HTML5语义元素

    先看一个传统的HTML4的文档: <div class="header"> <h1>My Site Name</h1> <h2>My ...

  4. Apache模块开发指南-APR池

    转:原文: http://blog.csdn.net/zmxiangde_88/article/details/8038150 ------------------------------------ ...

  5. Linux网络编程——浅谈 TCP 三次握手和四次挥手

    一.tcp协议格式 二.三次握手 在 TCP/IP 协议中.TCP 协议提供可靠的连接服务,採用三次握手建立一个连接. 第一次握手:建立连接时,client发送 syn 包(tcp协议中syn位置1. ...

  6. CSS制作响应式正方形及其应用

    CSS制作响应式正方形?什么鬼?干嘛用的?干嘛用的没人有每人的需求,本人也正好是由于公司正在做的业务须要,想做个照片展示的功能(当然得符合响应式了).而这个照片展示必须符合下面几点功能:1.用三张图片 ...

  7. 小白学开发（iOS）OC_ 字符串写入文件（2015-08-13）

    // //  main.m //  字符串写入文件 // //  Created by admin on 15/8/13. //  Copyright (c) 2015年 admin. All rig ...

  8. yum install mysql（转载）

    linux下使用yum安装mysql 1.安装查看有没有安装过:          yum list installed mysql*          rpm -qa | grep mysql* 查 ...

  9. oc32--构造方法1

    // // Person.h #import <Foundation/Foundation.h> @interface Person : NSObject @property int ag ...

  10. hdu4738Caocao's Bridges

    什么?有人要炸我的桥?!D飞他(心疼周瑜大都督) 这个就是求割边/桥了. #include<cstdio> #include<iostream> #include<cst ...