Vue3+TypeScript+Vite集成mars3d.layer.WeiVectorTileLayer加载本地shp文件

前景提要，在新建的vite项目中，想要实现mars3d的矢量瓦片方式加载geojson数据。加载本地shp文件。

代码说明：

1.在项目中集成mars3d后，构造map后开始在map上增加读取数据的操作：

mars3d.Util.fetchJson({ url: "//data.mars3d.cn/file/geojson/areas/340000_full.json" })
    .then(function (geojson) {
      showBJXLine(geojson.features[0])
    })

2.然后使用集成的第三方let CesiumVectorTile的js文件，转换成矢量瓦片的方式geojson。

3.转换时，需要按照mars3d的格式封装好这个js文件，参考以下代码：

1.src\assets\js\CesiumVectorTile.js

---

 2.src\assets\js\WeiVectorTileLayer.js

//按mars3d规范，将CesiumVectorTile封装下
import { CesiumVectorTile } from "./CesiumVectorTile.js";
import * as mars3d from "mars3d";

class WeiVectorTileLayer extends mars3d.layer.BaseTileLayer {
  //构建ImageryProvider
  async _createImageryProvider(options) {
    return createImageryProvider(options);
  }
}
async function createImageryProvider(options) {
  let provider = new CesiumVectorTile.VectorTileImageryProvider(options); //CesiumVectorTile.js中
  await provider.readyPromise;
  return provider;
}
WeiVectorTileLayer.createImageryProvider = createImageryProvider;

//注册下
const layerType = "weiVectorTile"; //图层类型
mars3d.LayerUtil.register(layerType, WeiVectorTileLayer);
mars3d.LayerUtil.registerImageryProvider(layerType, createImageryProvider);

//对外接口
mars3d.layer.WeiVectorTileLayer = WeiVectorTileLayer;

3. 在map中addLayer，实现相关效果。

加载本地shp文件

完整的工程参考：

通过百度网盘分享的文件：mars3d-weiVectorTileLayer.zip
链接：https://pan.baidu.com/s/1-szMP0R35CgGzfUvL33d_w?pwd=28ol
提取码：28ol