GeoJSONLayer

官网链接：https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-GeoJSONLayer.html

简单示例

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer"

const map = new Map({
  basemap: 'dark-gray',
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
})

const geojsonlayer = new GeoJSONLayer({
  url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
  copyright: "USGS Earthquakes"
})

map.add(geojsonlayer)

自定义URL

import Map from "@arcgis/core/Map"
import MapView from "@arcgis/core/views/MapView"
import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer"

const geojson = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      id: 1,
      geometry: {
        type: "Polygon",
        coordinates: [
          [
            [100.0, 0.0],
            [101.0, 0.0],
            [101.0, 1.0],
            [100.0, 1.0],
            [100.0, 0.0]
          ]
        ]
      },
      properties: {
        prop0: "value0",
      }
    }
  ]
}

const blob = new Blob([JSON.stringify(geojson)], {
  type: "application/json"
})

const geojsonlayer = new GeoJSONLayer({
  url: URL.createObjectURL(blob)
})

const mapView = new MapView({
  map,
  container: 'js_map',
  center: [102.92934063304513, 25.102234987110343],
  zoom: 3,
})

map.add(geojsonlayer)

结合图层URL服务

new GeoJSONLayer({
  url: 'https://xxx.com/geoserver/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=xxx&outputformat=application/json',
  labelingInfo: {
    labelExpressionInfo: { expression: "$feature.name" },
    symbol: {
      type: "text",
      color: "#fff",
    },
  },
  renderer: {
    type: "simple",
    symbol: {
      type: "simple-marker",
      size: 0,
      color: "#f00",
      outline: {
        width: 0,
        color: "#000",
      },
    },
  }
})