<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="st ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/openlayers/4.6.5/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-4級",
url: "http://t{0-6}.tianditu.com/vec_c/wmts?tk=",
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-4級",
url: "http://t{0-6}.tianditu.com/cva_c/wmts?tk=",
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: [120.14805, 30.26971],
projection: projection,
zoom: 3,
maxZoom: 17,
minZoom: 1
})
});
</script>
</body>
</html>
註意：添加token信息，地圖才會顯示
