这个是我用天地图公司写的但是出现了全屏展示的时候出现了底部流黑,查看流黑是因为他默认给了900多的高度,我们加上这两句就可以了
document.getElementsByClassName("mapboxgl-canvas")[0].style.height = "100%";
document.getElementsByClassName("mapboxgl-canvas")[0].style.width = "100%";
methods: {
initmap(mapId, zoom) {
if (!window.havevec) {
window.STYLE.layers.unshift(window.layerVec);
window.STYLE.layers.unshift(window.layerTer); //地形
window.STYLE.layers.unshift(window.layerImg); //影像
window.havevec = true;
}
let initMap = new mapboxgl.Map({
container: mapId,
style: window.STYLE,
zoom: zoom,
center: [116.28076521512813, 39.85685373066069],
preserveDrawingBuffer: true,
trackResize: false
});
return initMap;
}
},
mounted() {
window.map = this.initmap(map, 6);
window.map.on("load", function() {
map.addLayer({
id: "annotation",
type: "raster",
source: {
type: "raster",
tiles: [
"http://t0.tianditu.gov.cn" +
"/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=" +
window.gpmToken
]
// tileSize: 256
},
paint: {}
});
});
document.getElementsByClassName("mapboxgl-canvas")[0].style.height = "100%";
document.getElementsByClassName("mapboxgl-canvas")[0].style.width = "100%";
map.addControl(new mapboxgl.FullscreenControl(), "top-right");
map.addControl(new mapboxgl.NavigationControl(), "top-right");
}