<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script>
var $ = function(t, e) {
return t
}
var layer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
maxZoom: 17,
url: 'https://minedata.cn/service/data/mvt-layer?datasource=merge&z={z}&x={x}&y={y}&request=GetTile&key=16be596e00c44c86bb1569cb53424dc9&solu=12877',
tileLoadFunction: (tile, url) => {
var coord = tile.getTileCoord();
let key = [coord[0], coord[1], -(coord[2] + 1)].join();
tile.setLoader(function () {
var format = tile.getFormat();
fetch(url,{responseType:'arraybuffer'})
//.then(r => r.blob())
.then(r => r.arrayBuffer())
.then(r => {
var data = $(r, { url: url });
tile.setProjection(format.readProjection(data));
tile.setFeatures(format.readFeatures(data, {
featureProjection: map.getView().getProjection()
}));
tile.setExtent(format.getLastExtent());
});
})
}
})
});
const map = new ol.Map({
layers: [
layer
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([123.0064, 34.7142]),
maxZoom: 19,
zoom: 15,
}),
});
</script>
</html>