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

原创

于 2024-09-03 09:31:43 发布

· 594 阅读

5 ·

版权

文章标签：

#typescript #javascript #前端 #地图

前景提要，在新建的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 _