前端使用arcgis api 加载本地shp文件显示在底图上

整体思路

利用fileReader读取文件成ArrayBuffer，再将这种格式文件用过插件shapefile的open函数读取文件内部的数据，最后将读取的内容生成geojson数据进行加载

实现过程

1. 安装shapefile库，并引入open方法

npm install shapefile --save

// 引入
import { open } from 'shapefile'

2. 通过input标签读取文件， type="file"

<input type="file" ref="fileBox" id="shpfile" @input="upload" />

3. 通过FileReader读取文件为ArrayBuffer格式

const files = this.$refs.fileBox.files[0];
let reader = new FileReader();
const type = files.name.slice(files.name.lastIndexOf(".") + 1);
reader.readAsArrayBuffer(files);

4. 利用shapefile的open函数读取文件生成geojson数据

let geojson = {
          type: "FeatureCollection",
          name: "enterpriseLocation1",
          crs: {
            type: "name",
            properties: { name: "urn:ogc:def:crs:OGC:1.3:CRS84" },
          },
          features: [],
        };
        const _this = this
        reader.onload = (evt) => {
          let fileData = evt.target.result;
          open(fileData).then((source) => {
            source.read().then(function log(result) {
              if (result.done) {
                let blob = new Blob([JSON.stringify(geojson)]);
                let url = URL.createObjectURL(blob);
                const layer = new GeoJSONLayer({
                  url: url,
                });
                layer.when(
                  (success) => {
                    _this.fileLayerList.push({
                      name: files.name,
                      visible: true,
                      layer,
                    });
                  },
                  (error) => {
                    console.log("error", error);
                  }
                );
                _this.map.add(layer);
                return;
              }
              geojson.features.push(result.value);
              return source.read().then(log);
            });
          });
        };

5. 完成代码

upload(event) {
      const files = this.$refs.fileBox.files[0];
      let reader = new FileReader();
      const type = files.name.slice(files.name.lastIndexOf(".") + 1);
      reader.readAsArrayBuffer(files);
      if (type === "geojson" || type === "json") {
        reader.onload = (evt) => {
          let fileData = evt.target.result;
          let blob = new Blob([fileData]);
          let url = URL.createObjectURL(blob);
          const layer = new GeoJSONLayer({
            url: url,
          });
          layer.when(
            (success) => {
              this.fileLayerList.push({
                name: files.name,
                visible: true,
                layer,
              });
            },
            (error) => {
              console.log("error", error);
            }
          );
          this.map.add(layer);
        };
      }
      if (type === "shp") {
        let geojson = {
          type: "FeatureCollection",
          name: "enterpriseLocation1",
          crs: {
            type: "name",
            properties: { name: "urn:ogc:def:crs:OGC:1.3:CRS84" },
          },
          features: [],
        };
        const _this = this
        reader.onload = (evt) => {
          let fileData = evt.target.result;
          open(fileData).then((source) => {
            source.read().then(function log(result) {
              if (result.done) {
                let blob = new Blob([JSON.stringify(geojson)]);
                let url = URL.createObjectURL(blob);
                const layer = new GeoJSONLayer({
                  url: url,
                });
                layer.when(
                  (success) => {
                    _this.fileLayerList.push({
                      name: files.name,
                      visible: true,
                      layer,
                    });
                  },
                  (error) => {
                    console.log("error", error);
                  }
                );
                _this.map.add(layer);
                return;
              }
              geojson.features.push(result.value);
              return source.read().then(log);
            });
          });
        };
      }
    },