<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenLayers OGC服务 - 加载WMTS</title>
<link rel="stylesheet" href="./include/ol.css" />
<script src="./include/ol.js"></script>
</head>
<body>
<div id="menu">
<button class="add">加载WMTS</button>
<button class="remove">移除WMTS</button>
</div>
<div id="map"></div>
<script>
var wmtsLayer;
var projection = ol.proj.get("EPSG:4326");
var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256;
var resolutions = new Array(14);
var matrixIds = new Array(14);
for (var z = 0; z < 14; z++) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
var attribution = new ol.control.Attribution({
html: 'Tiles ©<a href="http://t0.tianditu.cn/cva_c/wmts?LAYER=cva">天地图矢量标记</a>',
});
wmtsLayer = new ol.layer.Tile({
opacity: 1,
source: new ol.source.WMTS({
attributions: [attribution],
url: "http://t0.tianditu.gov.cn/cva_c/wmts?LAYER=cva&tk=您的天地图密钥",
matrixSet: "c",
format: "png",
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: "default",
wrapX: true,
}),
});
var map = new ol.Map({
target: "map",
view: new ol.View({
center: [114.2905, 30.5607],
projection: "EPSG:4326",
minZoom: 2,
zoom: 12,
}),
});
/**
* 手动控制 加载 or 移除WMTS
*/
document.querySelector(".add").addEventListener("click", function () {
map.addLayer(wmtsLayer);
});
document.querySelector(".remove").addEventListener("click", function () {
map.removeLayer(wmtsLayer);
});
</script>
</body>
</html>
扫一扫
7578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
