methods: {
initializeMap() {
var projection = getProjection(this.projection);
var projectionExtent = projection.getExtent();
var size = getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
const wmtsUrl_1 = "http://t{0-7}.tianditu.gov.cn/vec_c/wmts?tk=";
const wmtsUrl_2 = "http://t{0-7}.tianditu.gov.cn/cva_c/wmts?tk=";
var webKey = "9ac697d71f93e52eff098753a4bcee28";
this.view = new View({
center: [112.08, 27.79],
projection: projection,
zoom: 8.0
});
// Initialize map object
this.map = new Map({
controls: [],
layers: [
new TileLayer({
opacity: 0.7,
source: new WMTS({
url: wmtsUrl_1 + webKey,
layer: "vec",
matrixSet: "c",
format: "tiles",
projection: this.projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
}),
new TileLayer({
opacity: 0.7,
source: new WMTS({
url: wmtsUrl_2 + webKey,
layer: "cva",
matrixSet: "c",
format: "tiles",
projection: this.projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
wrapX: true
})
})
],
target: "map",
view: this.view
});
this.loadMVTLayer();
},
loadMVTLayer() {
const styleURL = "http://10.143.1.190:8090/iserver/services/map-mvt-GEO_WELL_P_R/restjsr/v1/vectortile/maps/GEO_WELL_P_R/style.json";
const layerSource = new ol.source.VectorTileSuperMapRest({
style: styleURL,
projection: this.projection,
format: new ol.format.MVT({
featureClass: ol.Feature,
}),
});
const style = new ol.supermap.MapboxStyles({
style: styleURL,
map: this.map,
});
style.on("styleloaded", () => {
this.vtLayer = new ol.layer.VectorTile({
declutter: true,
source: layerSource,
style: style.getStyleFunction(),
});
this.vtLayer.setZIndex(2);
this.map.addLayer(this.vtLayer);
});
}
},
