arcgis for js 4.x GeoJSONLayer 加载

方式一：url直接加载

require(["esri/layers/GeoJSONLayer"], function(GeoJSONLayer){
  // points to the states layer in a service storing U.S. census data
  const geojsonlayer = new GeoJSONLayer({
    url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson", // url:"./data/bj.json"
    copyright: "USGS Earthquakes"
  });
  map.add(geojsonlayer);  // adds the layer to the map
});

方式二：geojson数据加载

// create a geojson layer from geojson feature collection
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",
      }
    }
  ]
};

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

// URL reference to the blob
const url = URL.createObjectURL(blob);
// create new geojson layer using the blob url
const layer = new GeoJSONLayer({
  url
});

 

render
// 分级渲染
   const less25 = {
      type: 'picture-marker', // autocasts as new SimpleFillSymbol()
      url: png1,
      height: 12,
      width: 10
   };

   const less50 = {
      type: 'picture-marker', // autocasts as new SimpleFillSymbol()
      url: png2,
      height: 12,
      width: 10
   };

   const less75 = {
      type: 'picture-marker', // autocasts as new SimpleFillSymbol()
      url: png3,
      height: 12,
      width: 10
   };

   const less100 = {
      type: 'picture-marker', // autocasts as new SimpleFillSymbol()
      url: png4,
      height: 12,
      width: 10
   };
   const renderer = {
       type: 'class-breaks', // autocasts as new ClassBreaksRenderer()
       field: 'dz_rank',
       classBreakInfos: [
            {
              minValue: 0,
              maxValue: 0.25,
              symbol: less25,
              label: '无震感'
            },
            {
              minValue: 0.25,
              maxValue: 0.5,
              symbol: less100,
              label: '轻微震感'
            },
            {
              minValue: 0.5,
              maxValue: 0.75,
              symbol: less75,
              label: '明显震感'
            },
            {
              minValue: 0.75,
              maxValue: 1.0,
              symbol: less50,
              label: '强烈震感'
            }
       ],
       legendOptions: {
            title: '震感级别'
       }
    };

layer.renderer = renderer

 

 

 

GeoJSONLayer可参考在线api