基于vue-tianditu实现瓦片数据层添加

效果

 瓦片TileJson

包下载

pnpm add vue-tianditu

main.ts 

 import VueTianditu from "vue-tianditu";

const app = createApp(App);

app.use(VueTianditu, {

  v: "4.0", //目前只支持4.0版本

  tk: "0b58ed11713850170e0d643e06be225e",

});

拿到瓦片Tilejson数据

遇到的问题：

 调用后会发现有很多错误图片；

 解决方案（并不是最优解）：

可用透明图代替

代码逻辑

<template>
  <div class="mapDiv">
    <tdt-map :center="state.center" :zoom="state.zoom">
      <tdt-tilelayer-tdt :url="state.url" :zIndex="2" :errorTileUrl="state.errorTileUrl">tdt-tilelayer-tdt>
      <tdt-tilelayer-tdt :url="state.url2" :zIndex="2" :errorTileUrl="state.errorTileUrl" >tdt-tilelayer-tdt>
      <tdt-tilelayer-tdt :url="state.url1" :zIndex="1">tdt-tilelayer-tdt>
       
    tdt-map>
  div>
template>
 
<script lang="ts" 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?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=7f013d0186775b063d6a046977bbefc6",
  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>

主要是通过层级关系来控制瓦片的展示