openlayers学习（八）加载天地图各种底图

加载天地图的各种在线地图资源

天地图在线地图资源地址：http://lbs.tianditu.gov.cn/server/MapService.html

1、初始化地图

var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: ‘http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G’
}) //加载谷歌影像地图
});

var view = new ol.View({
center: [113, 23],//设置地图默认中心点
projection: ‘EPSG:4326’,//坐标系
zoom: 10//默认缩放级别
});
map = new ol.Map({
layers: [rootLayer],
target: ‘map’,
view: view
});
2、加载天地图

let img_w_url = “http://t0.tianditu.gov.cn/img_w/wmts?” +
“SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles” +
“&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key”;

let img_w = new ol.layer.Tile({
source: new ol.source.XYZ({
url: img_w_url
}) //
});
map.addLayer(img_w);
每次只需要修改地址就可以了

3、加载0到7二级域名的地址的地图

完整代码;

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Draw Shapes</title>
<script src=”https://unpkg.com/elm-pep”></script>
<style>
.map {
width: 100%;
height: 400px;
}
</style>
<link rel=”stylesheet” href=”../lib/openlayerv6.4.3/css/ol.css”>
<script src=”../lib/openlayerv6.4.3/build/ol.js”></script>
</head>
<script>
var map;
function init() {
var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: ‘http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G’
}) //加载谷歌影像地图
});

function addLayer1() {

let img_w = new ol.layer.Tile({
source: new ol.source.XYZ({
url: img_w_url
}) //
});
map.addLayer(img_w);
}

function addLayer2() {
var imageURL = “http://t0.tianditu.gov.cn/cia_w/wmts?” +
“SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles” +
“&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key”;

var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: imageURL
}) //加载谷歌影像地图
});

map.addLayer(rootLayer);

}

function addLayer4() {
var imageURL = “http://t0.tianditu.gov.cn/ter_w/wmts?” +
“SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles” +
“&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key”;

var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: imageURL
}) //加载谷歌影像地图
});

map.addLayer(rootLayer);

}

function addLayer5() {
var imageURL = “http://t0.tianditu.gov.cn/ibo_w/wmts?” +
“SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ibo&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles” +
“&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=自己的key”;
var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: imageURL
}) //加载谷歌影像地图
});

map.addLayer(rootLayer);

}

function addLayer3() {

var imageURL = “http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=自己的key”;

var rootLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: imageURL
}) //加载谷歌影像地图
});

map.addLayer(rootLayer);

}

map.addLayer(rootLayer);

}

</script>
<body οnlοad=”init()”>
<div id=”map” class=”map”></div>
<button οnclick=”addLayer1()”>影像地图</button>
<button οnclick=”addLayer2()”>影像注记</button>
<button οnclick=”addLayer3()”>矢量注记</button>
<button οnclick=”addLayer4()”>地形晕渲</button>
<button οnclick=”addLayer5()”>全球境界</button>
<button οnclick=”addLayer6()”>矢量底图</button>
<button οnclick=”addLayer7()”>影像地图使用0-7二级域名</button>
</body>
</html>

————————————————
版权声明：本文为CSDN博主「mylove10086」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u014572215/article/details/109382398

openlayers学习（八）加载天地图各种底图

相关文章

归档