下面使用高德为底图,使用WMTS为上层图层,WMTS提供地图可以放大到21级,但高德只到18级,调试追踪源码发现是可以通过指dataZooms,使用更大缩放级别。
下面还实现两个图层叠加,当底层到最大级别18级时不再放大,WMTS继续放大。
使用Geoserver 提供WMTS服务,查看我别一篇文章,修改过GeoServer的TileMatrix参数解析。
const defaultZoom = 20;
let offineMapLayer = new AMap.TileLayer.WMTS({
url: mapUrl, // "http://xxx.xxx.xxx.xxx:9090/geoserver/gwc/service/wmts",
blend: true,
tileSize: 256,
zooms: [10, 22],
dataZooms: [1, 22],
opacity: 1,
zIndex: 100,
visible: true,
params: {
layer: "yuhua:test",
VERSION: "1.1.1",
// TileMatrixSet: "EPSG:3857", // EPSG:3857
// TileMatrix: "EPSG:3857:" + defaultZoom, // 不能写,会自动计算;
},
});
let baseLayer = new AMap.TileLayer({
getTileUrl: function (x, y, z) {
return `https://webst01.is.autonavi.com/appmaptile?style=6&x=${x}&y=${y}&z=${z}`;
},
opacity: 1,
zooms: [10, 22],
dataZooms: [1, 18],
zIndex: 99,
});
this.offineMap = new AMap.Map("mapContainer", {
viewMode: "3D", // 是否为3D地图模式
animateEnable: true,
buildingAnimation: true,
center: [118.727413, 31.041544], // 初始化地图中心点位置
zoom: defaultZoom,
zooms: [10, 22],
resizeEnable: true,
expandZoomRange: true,
layers: [baseLayer, offineMapLayer],
});