shp文件读取并利用cesium进行可视化

1.shp文件读取

目前网上有很多种shp文件读取方式，目前shapefile（参考文章：https://blog.csdn.net/weixin_45390762/article/details/127531717）的文件读取效果较好，我暂时采用了这种方法进行读取。

方法缺点：丢弃了shp中的投影信息、属性信息。

1.1 shapefile安装

在项目中采用如下命令安装shapefile插件。

npm install shapefile

1.2shp读取

读取的resgeojson即为shp转化为geojson的结果。之后就可以采用cesium进行可视化。

注：在方法中需要注意this的作用域，读取shp的方法中具有this.result，因此如果要将读取的geojson保存为全局变量，需要采用const that = this进行区别。

  if ('.shp'.includes(format)) {
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(file);
      const that = this
      fileReader.onload = function () {
        const shapefile = require('shapefile');
        shapefile.read(this.result).then((resgeojson) => {
          console.log("shp加载2", resgeojson);
          that.geojson = resgeojson
        });
      }
    }

2.cesium可视化

geojson即为上一节中在shp读取的结果，直接放到cesium的Cesium.GeoJsonDataSource方法中即可。

        CesiumMap.Map.dataSources
            .add(
              Cesium.GeoJsonDataSource.load(geojson, {
                stroke: Cesium.Color.fromCssColorString(color),
                fill: Cesium.Color.fromCssColorString(color).withAlpha(0.3),
                strokeWidth: 6,
              })
            )
            .then((res) => {
              this.dataSource = res;
              this.dataSource.name = "region";
              CesiumMap.Map.flyTo(this.dataSource);
            });

3.结果

采用上述方法读取的海口市shp数据，能完整显示到地图上。