arcgis for js在客户端引入一个shape文件加载显示到地图上

1、引入相应的js文件（3个JS文件如下图），放在static路径下

2、在main.js中引用

3、使用input type="file" 打开本地shape文件

<input type="file" accept=".dbf, .shp" id="shpFile" name="file" ref="file" multiple="multiple" style="width: 70%;margin: 0px auto;" @change="_getShpFile($event)">

4、开始执行引入使用

//导入图层并加载显示
    _getShpFile(event) {
      let self = this
      let files = event.target.files

      if (self.mapView == null) {
        self.mapView = MapManager.getMapViewByID("mainMap");
      }
      let shpFile = null;
      let shpDbf = null;
      for (let item of files) {
        if (item.name.indexOf(".shp") != -1) {
          shpFile = item;
        }
        if (item.name.indexOf(".dbf") != -1) {
          shpDbf = item;
        }
      }

      if (shpFile == null) {
        self.$Message.error("导入失败，请选择shp文件！");
        return;
      }
      if (shpFile) {
        try {
          var opts = { shp: shpFile, dbf: shpDbf };
          shapefile = new Shapefile(opts, function (data) {
            console.log('data', data);//这里就可以看到导入的shape相关信息了


            //因为shapefile中的属性字段类型和几何信息和geometryJson不一样，所以后边需要转换一下。看个人需求了
            let fields = data.dbf.fields.map(field => {
              let type = field.type === 'Number' ? 'double' : 'string'
              return { name: field.name, alias: field.name, type: type }
            });
            fields.push({ name: 'OBJECTID', alias: 'OBJECTID', type: 'oid' })//可以没有object
            let features = data.geojson.features.map((f, fi) => {
              for (let fieldName in f.properties) {
                const find_field = fields.find(field => {
                  return field.name === fieldName
                })
                if (find_field && find_field.type === 'double') {
                  f.properties[fieldName] = parseFloat(f.properties[fieldName])
                }
              }
              f.properties['OBJECTID'] = fi
              return new self.Graphic({
                geometry: {
                  rings: f.geometry.coordinates[0],
                  type: 'polygon',
                  spatialReference: self.mapView.spatialReference
                },
                attributes: f.properties
              })
            });

            //这里是设置图层样式，按照自己的需要去写
            const renderer = {
              type: "simple",
              symbol: {
                type: "polygon-3d",
                symbolLayers: [
                  {
                    type: "extrude",
                    material: { color: "rgba(100, 149, 237, 0.8)" },
                    edges: {
                      type: "solid",
                      color: "rgba(200, 200, 200, 0.8)",
                      size: 1
                    }
                  }
                ]
              },
              visualVariables: [
                {
                  type: "size",
                  field: "HEIGHT",
                  valueUnit: "meters",
                  legendOptions: {
                    title: "建筑限高"
                  }
                }
              ]
            }
            //上述都完成以后，就可以新建一个矢量图层了，添加到地图即可
            self.temporaryLayer = new self.FeatureLayer({
              geometryType: 'polygon',
              fields: fields,
              source: features,
              objectIdField: 'OBJECTID',
              spatialReference: self.mapView.spatialReference,
              renderer: renderer,
              //   labelingInfo: [labelClass]
            });
            self.mapView.map.add(self.temporaryLayer)
            self.$forceUpdate()
          });
        } catch (error) {
        } finally { }
      }
    },