JavaScript ArcGIS GeoJSONLayer用法及代码示例

AMD: require(["esri/layers/GeoJSONLayer"], (GeoJSONLayer) => { /* code goes here */ });

ESM: import GeoJSONLayer from "@arcgis/core/layers/GeoJSONLayer";

类： esri/layers/GeoJSONLayer

继承: GeoJSONLayer > Layer > Accessor

自从：用于 JavaScript 4.11 的 ArcGIS API

• Overview
• 创建GeoJSONLayer

概述

GeoJSONLayer 类用于基于 GeoJSON 创建图层。 GeoJSON 是一种用于编码各种地理数据结构的格式。 GeoJSON 数据必须符合 RFC 7946 specification ，其中指出坐标在 SpatialReference.WGS84 中。请参阅 FeatureLayer 的 querying your data 部分以了解有关如何查询 geojson 数据的更多信息，并参阅 data visualization 部分以了解如何更改 GeoJSONLayer 的可视化。

请参阅下表以了解GeoJSON 中支持的几何对象及其对应的几何类型：

GeoJSON 几何对象	API 几何类型
Point	Point
MultiPoint	Multipoint
线串/多线串	Polyline
多边形/多多边形	Polygon

创建GeoJSONLayer

GeoJSONLayer 是通过将其 url 属性设置为指向 geojson feed 或内存中 geojson 数据的 blob url 来创建的。

引用 geojson 提要 URL

要从 geojson feed 创建 GeoJSONLayer 实例，您必须将 url 属性设置为 geojson feed 的 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",
    copyright: "USGS Earthquakes"
  });
  map.add(geojsonlayer);  // adds the layer to the map
});

通过 blob url 引用内存 geojson 数据

您还可以通过将 blob url 传递给图层的 url 属性，从内存中的 geojson 数据创建 GeoJSONLayer。以下代码片段展示了如何从 blob url 创建新的GeoJSONLayer。

// 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
});