（转）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，分别实现基础底图和标注图层，代码如下：
- function getBaseLayer(layername, layer){
- return new OpenLayers.Layer.XYZ(
- layername,
- [
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
- ],
- {
- isBaseLayer: true,
- displayInLayerSwitcher:true
- }
- );
- };
- function getAnnoLayer(layername, layer, visiable){
- return new OpenLayers.Layer.XYZ(
- layername,
- [
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
- ],
- {
- isBaseLayer: false,
- visibility:visiable,
- displayInLayerSwitcher:false
- }
- );
- };
调用方式为：
- var baseLayers = ["vec_c","img_c","ter_c"];
- var vecLayer = getBaseLayer("地图",baseLayers[0]);
- var imgLayer = getBaseLayer("影像",baseLayers[1]);
- var terLayer = getBaseLayer("地形",baseLayers[2]);
- var vecAnno = getAnnoLayer("地图标注", "cva_c", true);
完整代码如下：
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <title>OpenLayers MapQuest Demo</title>
- <link rel="stylesheet" type="text/css" href="http://200.200.200.222/OpenLayers-2.12/theme/default/style.css"/>
- <style type="text/css">
- html, body, #map{
- padding:0;
- margin:0;
- height:100%;
- width:100%;
- }
- </style>
- <script type="text/javascript" src="http://200.200.200.222/OpenLayers-2.12/OpenLayers.js"></script>
- <script type="text/javascript">
- var map;
- function init(){
- function getBaseLayer(layername, layer){
- return new OpenLayers.Layer.XYZ(
- layername,
- [
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
- ],
- {
- isBaseLayer: true,
- displayInLayerSwitcher:true
- }
- );
- };
- function getAnnoLayer(layername, layer, visiable){
- return new OpenLayers.Layer.XYZ(
- layername,
- [
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
- "http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
- ],
- {
- isBaseLayer: false,
- visibility:visiable,
- displayInLayerSwitcher:false
- }
- );
- };
- var baseLayers = ["vec_c","img_c","ter_c"];
- var vecLayer = getBaseLayer("地图",baseLayers[0]);
- var imgLayer = getBaseLayer("影像",baseLayers[1]);
- var terLayer = getBaseLayer("地形",baseLayers[2]);
- var vecAnno = getAnnoLayer("地图标注", "cva_c", true);
- map = new OpenLayers.Map({
- div: "map",
- projection: "EPSG:4326",
- layers: [vecLayer,imgLayer,terLayer],
- numZoomLevels:20,
- center: [103.847, 36.0473],
- zoom: 4
- });
- map.addControl(new OpenLayers.Control.LayerSwitcher());
- map.addControl(new OpenLayers.Control.MousePosition());
- var wms = new OpenLayers.Layer.WMS(
- "省级行政区",
- "http://200.200.200.220:8080/geoserver/wms",
- {
- LAYERS: "pro",
- transparent:true
- },
- {
- singleTile: false,
- ratio: 1,
- isBaseLayer: false,
- visibility:true,
- yx : {'EPSG:4326' : true}
- }
- );
- map.addLayer(wms);
- map.addLayers([vecAnno]);
- }
- </script>
- </head>
- <body onload="init()">
- <div id="map"></div>
- </body>
（转）Openlayers 2.X加载天地图的更多相关文章
- 使用openlayers 3 在线加载天地图及GeoServer发布的地图
使用openlayers3来加载天地图卫星图和标注图层,GeoServer发布地图,一并用openlayers测试加载出来,顺便实现了7种地图控件.下面直接贴代码: <!DOCTYPE html ...
- openlayers加载天地图过程中遇到跨域问题
// 采用openlayers加载天地图 var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ // crossOrigin: 'An ...
- （转）Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...
- 【ArcGis for javascript从零开始】之一 ArcGis加载天地图
最近做项目需要用到ArcGis来进行数据展示和数据分析.以前从来没有接触过与Gis有关的东西,一切需要从头开始学.没有时间从头系统地学习了,只能用到哪个学习哪里了,本系列只是对学习的路径进行记录.Ar ...
- ArcGis Javascript API (V3.6)加载天地图
Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...
- ArcGIS API for Javascript 加载天地图（经纬度投影）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- ArcGIS API for Javascript 加载天地图（墨卡托投影）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 18 ArcGIS API for JavaScript4.X 系列加载天地图（经纬度）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 36ArcGIS API for JavaScript3.X 系列加载天地图（经纬度）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- 【Codeforces 1114B】Yet Another Array Partitioning Task
[链接] 我是链接,点我呀:) [题意] 让你把数组分成k个连续的部分 使得每个部分最大的m个数字的和最大 [题解] 把原数组降序排序 然后选取前m*k个数字打标记 然后对于原数组 一直贪心地取 直到 ...
- MVC.Net：读取Web.config/App.config配置
需要读取Web.config/App.config的配置很简单,首先我们需要将配置写入到<appSettings>中,例如: <appSettings> <add key ...
- 【JavaScript】离开页面前提示
离开页面前的提示不能够用onunload去做,由于它仅仅是兼容IE,你要兼容Google与FireFox就蛋疼了. 并且这个事件还是关闭之后才会触发的. 取而代之能够用onbeforeunload去实 ...
- Vim技巧之四大模式_普通模式
Vim技巧之四大模式_普通模式 一见不钟情的普通模式 普通模式以下的强悍操作 什么是操作符 什么是动作命令 误操作怎么办 那种操作更划算 普通模式下的神奇大招 Vim技巧之四大模式_普通模式 众所周知 ...
- swift 雨燕 新手教程
Apple Swift编程语言新手教程 chox 2014-06-03 文件夹 简单介绍 入门 简单值 控制流 函数与闭包 对象与类 枚举与结构 1 简单介绍 今天凌晨Apple刚刚公布了Swif ...
- IE新发现
近期用thinkphp写的小程序在IE上測试的时候偶然发现原来IE不兼容的不止是样式啊!!! 震惊哭了~ 在火狐上面嗖嗖的一点bug也没有,在IE上面跟死水一样.. .. 那么问题来了:我的问题是出如 ...
- 一句话实现Mysql查询结果带行号
SELECT @rowno:=@rowno + 1 AS rowno,a.* FROM tableName a,(SELECT @rowno:=0) b
- [Contest Hunter#17-C] 舞动的夜晚
[题目链接] http://contest-hunter.org:83/contest/CH%20Round%20%2317/%E8%88%9E%E5%8A%A8%E7%9A%84%E5%A4%9C% ...
- TCP打开文件传输（服务器端并发code）
#include <stdio.h>#include <stdlib.h>#include <arpa/inet.h>#include <sys/types. ...
- Android多级目录树
本例中目录树的菜单数据是从json数据中获取,首先建立一个菜单实体类 MenuTree package com.gao.tree; /** * 菜单树的各级菜单实体类 * * @author tjs ...