使用 javascript 4.15 api 无法使用来自 webapi core 3.1 rest 的 geojson 集合功能创建功能层答案

【问题标题】：usin javascript 4.15 api unable to creating featurelayer using geojson collection feature from webapi core 3.1 rest使用 javascript 4.15 api 无法使用来自 webapi core 3.1 rest 的 geojson 集合功能创建功能层
【发布时间】：2020-09-19 00:56:24
【问题描述】：

请注意，我能够轻松使用 geojson 数据并在传单地图上创建图层。此外，尝试使用 lib arcgis-to-geojson-utils 但无法使其正常工作。这是我的代码。

非常感谢您的帮助。

view.when()
        .then(fetchData)
        .then(createGraphics)
        .then(createLayer)
        .then(addToView)
        .catch(function(e) {
                console.error("Creating FeatureLayer   failed", e);
        })

 function fetchData() {
    return  fetch(url,options)
    .then(response =>   {
      return response.json()
    });       
}

 function createGraphics(schoolsGeoData) {
  const geoData = JSON.parse(schoolsGeoData);
  return geoData.features.map((school, i) => {
        let schoolAttr = {
                    OBJECTID: school.properties["id"],
                    name: school.properties["name"]
        }
            return new Graphic({
                      //  type: "point",
                        attributes: schoolAttr,
                        geometry: new Point({
                          x: school.geometry.coordinates[0],
                          y: school.geometry.coordinates[1]
                        }),
                     });
           })
}

 function createLayer(graphics) {
   return new FeatureLayer({
            source: graphics,
            objectIdField: "OBJECTID",
            fields: schoolFeilds(),
            popupTemplate: schoolTemplate(),
            renderer: myRenderer(),
            geometryType: "point" ,
            spatialReference: {
              wkid: 4326
            },
        });
}

 function addToView(layer) {
  if(layer) {
     view.map.add(layer);
   }
}

【问题讨论】：

标签： esri arcgis-js-api

【解决方案1】：

你的代码有一个合理的逻辑，当然还有一些我不知道它们正在工作的东西。例如，我不知道您在fetch 操作中添加了哪些选项，但默认情况下它会正确获取数据，并且您不必转换为JSON，因为它会意识到这一点。

我实际上是想问你更多的代码，或者你的问题到底是什么，但我决定提醒你，你实际上有一个特定的层来处理 GeoJSON 数据，GeoJSONLayer。

但是，无论如何，我将在这里为您留下一个运行示例，说明您正在尝试做什么，获取数据并使用FeatureLayer，使用我提到的示例中的数据，

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>GeoJSON with FeatureLayer - 4.15</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />

    <script src="https://js.arcgis.com/4.15/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "esri/Graphic"
      ], function(Map, MapView, FeatureLayer, Graphic) {
        const map = new Map({
          basemap: "gray"
        });

        const view = new MapView({
          center: [-80, 35],
          zoom: 8,
          map,
          container: "viewDiv"
        });

        view.when()
          .then(fetchData)
          .then(createGraphics)
          .then(createLayer)
          .then(addToView)
          .catch(function(e) {
            console.error("Creating FeatureLayer   failed", e);
        })

        function fetchData() {
          return fetch(
            'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
          )
          .then(response =>   {
            return response.json()
          });       
        }

        function createGraphics(data) {
          // const geoData = JSON.parse(data);
          return data.features.map((feature, i) => {
            return new Graphic({
              attributes: {
                OBJECTID: i,
                title: feature.properties["title"],
                mag: feature.properties["mag"],
                type: feature.properties["type"],
                place: feature.properties["place"],
                time: feature.properties["time"]
              },
              geometry: {
                type: "point",
                x: feature.geometry.coordinates[0],
                y: feature.geometry.coordinates[1]
              },
            });
          })
        }

        function createLayer(graphics) {
          const popupTemplate = {
            title: "{title}",
            content: "Magnitude {mag} {type} hit {place} on {time}",
            fieldInfos: [
              {
                fieldName: "time",
                format: {
                  dateFormat: "short-date-short-time"
                }
              }
            ],
            outFields: ["title", "mag", "type", "place", "time"]
          }
          const renderer = {
            type: "simple",
            field: "mag",
            symbol: {
              type: "simple-marker",
              color: "orange",
              outline: {
                color: "white"
              }
            },
            visualVariables: [
              {
                type: "size",
                field: "mag",
                stops: [
                  {
                    value: 2.5,
                    size: "10px"
                  },
                  {
                    value: 8,
                    size: "40px"
                  }
                ]
              }
            ]
          };
          return new FeatureLayer({
            source: graphics,
            fields: [{
              name: "OBJECTID",
              alias: "ObjectID",
              type: "oid"
            }, {
              name: "title",
              alias: "Title",
              type: "string"
            }
            , {
              name: "mag",
              alias: "Magnitude",
              type: "double"
            }
            , {
              name: "type",
              alias: "Type",
              type: "string"
            }, {
              name: "place",
              alias: "Place",
              type: "string"
            }, {
              name: "time",
              alias: "Time",
              type: "date"
            }],
            objectIdField: "OBJECTID",
            popupTemplate,
            renderer
          });
        }

        function addToView(layer) {
          if(layer) {
            view.map.add(layer);
          }
        }

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

【讨论】：