本文介绍如何使用OpenLayers库加载天地图WMTS服务，实现从1级到14级的中国矢量地图及注记显示。通过设置投影、分辨率、矩阵ID等参数，实现了地图的在线调用，并提供了初始视图的中心点坐标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tianditu</title>
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<script src="./build/ol.js"></script>
<style type="text/css">
#map {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
var projection = ol.proj.get("EPSG:4326");
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = [];
for (var z = 2; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
}
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量1-14级",
url: "http://t{0-6}.tianditu.com/vec_c/wmts?tk=you token",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
//resolutions: res.slice(0, 15),
resolutions: resolutions,
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
})
}),
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量注记1-14级",
url: "http://t{0-6}.tianditu.com/cva_c/wmts?tk=you token",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
})
}),
})
],
target: "map",
view: new ol.View({
center: [118.236, 28.365],
projection: projection,
zoom: 3,
maxZoom: 19,
minZoom: 1
})
});
</script>
</body>
</html>
提示：在线天地图数据调用需申请个人token。
扫一扫
2086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
