console
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css" rel="stylesheet" />
<link href='https://iclient.supermap.io/dist/ol/iclient-ol.min.css' rel='stylesheet' />
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"></script>
<script type="text/javascript" src="https://iclient.supermap.io/dist/ol/iclient-ol.min.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<script type="text/javascript">
let ua_token= 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ5c2JlZG8iLCJjcmVhdGVkIjoxNjYzNDg5NTE4OTUzLCJleHAiOjE4Mjc2NzY3OTl9.Mf1R3p_EM9YaRQURLVTtw9KVv8v8Li093qo07_US7ejlxofwKw24hpJnlr5ScKsbnjQypo9KkjOq5B7JBp4fvQ'
let projectionExtent = ol.proj.get('EPSG:4326').getExtent()
let projectionWidth = ol.extent.getWidth(projectionExtent) / 256
let resolutions = []
let matrixIds = []
for (var z = 0; z < 19; ++z) {
resolutions[z] = projectionWidth / Math.pow(2, z);
matrixIds[z] = z;
}
let map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: [106.42, 26.35],
zoom: 7,
projection: 'EPSG:4326',
multiWorld: true
}),
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
url:`http://61.243.3.133:9800/dem16m-proxy/Gis/rest/services/dem16m/MapServer/WMTS?ua_token=${ua_token}`,
layer: '1',
matrixSet: 'default028mm',
style:'default',
format: "image/png",
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
wrapX: true
})
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
url:`http://61.243.3.133:9800/ext/GZS2021DOM2-proxy/arcgis/rest/services/GZS2021DOM2/MapServer/WMTS?ua_token=${ua_token}`,
layer: 'GZS2021DOM2',
matrixSet: 'default028mm',
style:'default',
format: "image/jpgpng",
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
wrapX: true
})
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
url:`http://61.243.3.133:9800/ext/GZS2022DOM1-proxy/arcgis/rest/services/GZS2022DOM1/MapServer/WMTS?ua_token=${ua_token}`,
layer: 'GZS2022DOM1',
matrixSet: 'default028mm',
style:'default',
format: "image/jpgpng",
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
wrapX: true
})
})
],
});
map.addControl(new ol.supermap.control.ScaleLine());
</script>
</body>
</html>