（转）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 plaincopy print?

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
}
);
};

调用方式为：

[javascript] view plaincopy print?

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);

完整代码如下：

[html] view plaincopy print?

<!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 οnlοad="init()">
<div id="map"></div>
</body>

转载于:https://www.cnblogs.com/telwanggs/p/6972830.html

（转）Openlayers 2.X加载天地图相关推荐

Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
OpenLayers 加载天地图模糊的问题 OpenLayers 地图缩放模糊
openlayers 加载天地图模糊的问题,OpenLayers 地图缩放几次之后模糊 2021年12月20日纠正模糊原因: 地图加载瓦片实质上还是图片,一般来说是256&256,将一个静态 ...
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
openlayers学习——1、openlayers加载天地图
openlayers加载天地图前言:基于Vue,学习openlayers,根据官网demo,记录常用功能写法.本人不是专业GIS开发,只是记录,方便后续查找. 参考资料: openlayers官网: ...
OpenLayers 加载天地图
要使用 OpenLayers 3 加载天地图,首先要弄清楚天地图发布的原理,以及遵循的发布规范,上一篇中我们提到了使用 OpenLayers 3 加载百度地图,我们提到一般网络地图为了加快访问速度,都 ...
openlayers加载天地图及天地图地形图影像图
openlayer加载天地图.天地图地形图.天地图影像图,相关代码有注释. 加载效果: 天地图底图天地图地形图天地图影像图相关代码: import {XYZ,TileImage} from 'o ...
Openlayers 2.X加载高德地图
概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍Openlayers 2.X下加载高德地图. 实现效果: 高德地图高德影像图中:蓝色的省市边界为我本机发布的,能够与高 ...
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...
（转）Openlayers 2.X加载高德地图
http://blog.csdn.net/gisshixisheng/article/details/44853881 概述: 前面的有篇文章介绍了Openlayers 2.X下加载天地图,本节介绍O ...

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

（转）Openlayers 2.X加载天地图相关推荐

最新文章

热门文章