效果瓦片TileJson包下载pnpm add vue-tianditumain.tsimport VueTianditu from vue-tianditu;const app createApp(App);app.use(VueTianditu, {v: 4.0, //目前只支持4.0版本tk: 0b58ed11713850170e0d643e06be225e,});拿到瓦片Tilejson数据遇到的问题调用后会发现有很多错误图片解决方案并不是最优解可用透明图代替代码逻辑template div classmapDiv tdt-map :centerstate.center :zoomstate.zoom tdt-tilelayer-tdt :urlstate.url :zIndex2 :errorTileUrlstate.errorTileUrl/tdt-tilelayer-tdt tdt-tilelayer-tdt :urlstate.url2 :zIndex2 :errorTileUrlstate.errorTileUrl /tdt-tilelayer-tdt tdt-tilelayer-tdt :urlstate.url1 :zIndex1/tdt-tilelayer-tdt /tdt-map /div /template script langts setup import { reactive } from vue-demi; const state reactive({ center: [105.40298334,26.25116874], zoom: 14, url1: http://t0.tianditu.gov.cn/img_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERimgSTYLEdefaultTILEMATRIXSETwFORMATtilesTILEMATRIX{z}TILEROW{y}TILECOL{x}tk7f013d0186775b063d6a046977bbefc6, url:http://111.123.20.116:28000/gisserver/xyz/mjjs/{z}/{x}/{y}.png, url2:http://111.123.20.116:28000/gisserver/xyz/xr/{z}/{x}/{y}.png, bounds:[105.39719776,26.25687308,105.41903408,26.26620587], errorTileUrl:/1.png, tiles: [ http://111.123.20.116:28000/gisserver/xyz/mjjs/{z}/{x}/{y}.png ] }); /script style scoped .mapDiv { width: 100%; height: 100vh; } /style主要是通过层级关系来控制瓦片的展示