vue中，使用maptalks加载tileset.json格式的瓦片

首先在vue项目中引入maptalks包以及一些加载3D Tiles数据的包，具体参照官网：maptalks - examples

所用到的包下载示例

// npm install maptalks-gl  下载 maptalks-gl 包

// 引入其他需要的包，这里我的做法是直接在package.json中复制以下代码，然后npm install

  "@maptalks/transcoders.crn": "*",
  "@maptalks/transcoders.draco": "*",
  "@maptalks/transcoders.ktx2": "*",

/**
* package.json文件
**
//  "dependencies": {    
//    "maptalks-gl": "^0.105.3",
//    "@maptalks/transcoders.crn": "*",
//    "@maptalks/transcoders.draco": "*",
//    "@maptalks/transcoders.ktx2": "*",
//  },

页面代码

<template>
  <div id="map" style="width: 100vw;height:90vh;"></div>
  <el-button @click="removeLayer">点击删除</el-button>
</template>

<script setup>
import { onMounted, nextTick } from 'vue'
import 'maptalks-gl/dist/maptalks-gl.css';
import {
  Map,
  GroupGLLayer,
  VectorTileLayer,
  GLTFMarker,
  GLTFLayer,
  PolygonLayer,
  Geo3DTilesLayer,
  TileLayer, Coordinate, LineStringLayer, VectorLayer
} from 'maptalks-gl';
import '@maptalks/transcoders.draco';
import '@maptalks/transcoders.crn';
import '@maptalks/transcoders.ktx2';

let layer = null;
const baseLayer = new TileLayer("base", {
  urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
  subdomains: ["a", "b", "c", "d"],
  attribution: "&copy; <a href='http://osm.org'>OpenStreetMap</a> contributors, &copy; <a href='https://carto.com/'>CARTO</a>",
})

onMounted(() => {
  nextTick(() => {
    initMap();
  })
});

function initMap () {
  const map = new Map("map", {
    center: [108.960524, 34.219558],
    zoom: 13,
    pitch: 45,
    baseLayer: baseLayer
  });
  baseLayer.addTo(map);
  layer = new Geo3DTilesLayer("3dtiles", {
    services: [{
      url: "http://resource.dvgis.cn/data/3dtiles/dayanta/tileset.json",
      maximumScreenSpaceError: 1.0,
      pointOpacity: 0.5,
      pointSize: 3,
      heightOffset: -400
    }]
  });

  const groupGLLayer = new GroupGLLayer("gl", [layer], {
    sceneConfig: {
      environment: {
        enable: true,
        mode: 1,
        level: 1,
        brightness: 1
      },
      shadow: {
        enable: true,
        opacity: 0.5,
        color: [0, 0, 0]
      },
      postProcess: {
        enable: true,
        antialias: {
          enable: true
        },
        ssr: {
          enable: true
        },
        bloom: {
          enable: true
        },
        outline: {
          enable: true
        }
      },
      ground: {
        enable: true,
        renderPlugin: {
          type: "lit"
        },
        symbol: {
          polygonOpacity: 0.8,
          material: {
            baseColorFactor: [0.48235, 0.48235, 0.48235, 1],
            hsv: [0, 0, -0.532],
            roughnessFactor: 0.22,
            metallicFactor: 0.58
          }
        }
      }
    }
  }).addTo(map);

  /**start**/
  layer.once("loadtileset", (e) => {
    const extent = layer.getExtent(e.index);
    map.fitExtent(extent, 1, {
      animation: false
    });
  });

}

function removeLayer () { // 移除图层
  layer.remove();
}
</script>

<style lang="scss" scoped>
</style>