Получить экстент файла geo JSON - PullRequest
Новая
       62

Получить экстент файла geo JSON

0 голосов
/ 08 мая 2020

Я использую следующий код, чтобы вычислить размер файла KML. Как мне сделать это с файлом Geo JSON? 

    let layer=new KMLLayer({ url:url });    
    map.add(app.layer);     

    app.mapView.whenLayerView(layer).then(function(layerView) {
        watchUtils.whenFalseOnce(layerView, "updating", function() {
            let polygons=layerView.allVisiblePolygons;
            let lines=layerView.allVisiblePolylines;
            let points=layerView.allVisiblePoints;
            let images=layerView.allVisibleMapImages;

            let extent=polygons.concat(lines).concat(points).concat(images)
            .map(graphic => (graphic.extent ? graphic.extent : graphic.geometry.extent))
                .reduce((previous, current) => previous.union(current));
            });

1 Ответ

0 голосов
/ 09 мая 2020

Вам просто нужно использовать queryExtent из GeoJSONLayerView. Взгляните на пример, который я сделал для вас на основе одного из ArcGIS. 

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      p {
          font: 1rem 'Fira Sans', sans-serif;
      }
      #extentSpan {
        color:crimson;
        font-style: italic;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
    />
  </head>
  <body>
    <p>Extent: <span id="extentSpan">...</span></p>
    <div id="viewDiv"></div>

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

    <script>
      require([
        "esri/Map",
        "esri/layers/GeoJSONLayer",
        "esri/views/MapView"
      ], function(Map, GeoJSONLayer, MapView) {

        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: "4px"
                },
                {
                  value: 8,
                  size: "40px"
                }
              ]
            }
          ]
        };

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

        const map = new Map({
          basemap: "gray",
          layers: [geojsonLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          center: [-168, 46],
          zoom: 3,
          map: map
        });

        view.whenLayerView(geojsonLayer).then(function(layerView) {
          layerView.watch("updating", function(val) {
            if (!val) {
              layerView.queryExtent().then(function(response) {
                const e = response.extent;
                view.goTo(e);
                document.querySelector('#extentSpan').textContent =
                  `${e.xmin} ${e.ymin} ${e.xmax} ${e.ymax}`;
              });
            }
          });
        });

      });
    </script>
  </body>
</html>
...