【ArcGIS For JS】前端geojson渲染行政區劃圖層並加標籤

原理

透過DataV工具 生成行政區的geojson（得到各區的面元素資料）, 隨後使用手動繪製featureLayer與Label，並載入到地圖。

    //vue3載入geojson資料public/geojson/pt.json,在MapView渲染上載入geojson資料 type是"MultiPolygon"
      fetch(baseUrl+'/geojson/pt.json')
        .then(response => response.json())
        .then(data => {
          console.log(data)
          // debugger
          let graphics = data.features.map((feature) => {
            //Polygon 單個多邊形繪製
            let geometry = {
              type: 'polygon',
              rings: feature.geometry.coordinates[0]
            }
            return new Graphic({
              geometry: geometry,
              attributes: feature.properties
            })
          })
                      
          let featureLayer = new FeatureLayer({
            fields: [
              {
                name: 'ObjectID',
                alias: 'ObjectID',
                type: 'oid'
              },
              {
                name: 'name',
                alias: 'name',
                type: 'string'
              },
              {
                name: 'adcode',
                alias: 'adcode',
                type: 'integer'
              }
            ],
            objectIdField: 'ObjectID',
            geometryType: 'polygon',
            spatialReference: {
              wkid: 4326
            },
            source: graphics,
            renderer: {
              type: 'simple',
              symbol: {
                type: 'simple-fill',
                color: [227, 139, 79, 0.8],
                outline: {
                  color: [255, 255, 255],
                  width: 1
                }
              }
            },
            labelingInfo: [
              {
                labelExpressionInfo: {
                  expression: '$feature.name'
                },
                symbol: {
                  type: 'text',
                  color: [0, 0, 0, 1],
                  haloColor: [255, 255, 255, 1],
                  haloSize: 1,
                  font: {
                    size: 12
                  }
                }
              }
            ]
          })

          //地圖載入featureLayer
          view.map.layers.add(featureLayer)
        })

    })

原始碼地址

https://github.com/Billyas/AQICalculator-nuxt3

演示站點

https://billyas.github.io/arcgis-vue3-demo/

效果