मैंने इस लिंक से शुरुआत की:

आर्कगिस नमूने - जियोसन परत

मैं नीचे दिए गए लिंक के अनुसार शेक इंटेंसिटी दिखाना चाहूंगा:

नमूना

सेवा

मैंने इसे लागू करने की कोशिश की है। कृपया एक नज़र डालें:

कोडपेन

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the layers-geojson sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/layers-geojson/index.html
  -->
<title>GeoJSONLayer - 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/layers/GeoJSONLayer",
        "esri/views/MapView",
        "esri/widgets/Legend"
      ], function(Map, GeoJSONLayer, MapView, Legend) {
        // If GeoJSON files are not on the same domain as your website, a CORS enabled server
        // or a proxy is required.
        const url =
          //"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime&minlatitude=33.387&minlongitude=-127.134&maxlatitude=40.457&maxlongitude=-115.994&minlatitude=33.387&minlongitude=-127.134&maxlatitude=40.457&maxlongitude=-115.994&producttype=shakemap";
              "https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/query?where=1=1&geometry=-122.40,37.76&geometryType=esriGeometryPoint&inSR=4326&distance=100&units=esriSRUnit_StatuteMile&outFields=*&returnGeometry=true&geometryPrecision=4&outFields=*&f=pgeojson";

        // Paste the url into a browser's address bar to download and view the attributes
        // in the GeoJSON file. These attributes include:
        // * mag - magnitude
        // * type - earthquake or other event such as nuclear test
        // * place - location of the event
        // * time - the time of the event
        // Use the Arcade Date() function to format time field into a human-readable format

        const template = {
          title: "Earthquake Info",
          content: "Magnitude {mag} {type} hit {place} on {time}",
          fieldInfos: [
            {
              fieldName: "time",
              format: {
                dateFormat: "short-date-short-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: "4px"
                },
                {
                  value: 8,
                  size: "40px"
                  
                }
              ]
            }
          ]
        };

        const geojsonLayer = new GeoJSONLayer({
          url: url,
          title: "MMI",
          copyright: "USGS Earthquakes",
          popupTemplate: template,
          renderer: renderer //optional
        });

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

        const view = new MapView({
          container: "viewDiv",
          center: [-122, 37],
          zoom: 6,
          map: map
        });
        view.ui.add(
          new Legend({
            view: view
          }),
          "bottom-left"
        );
      });
    </script>
  </head>

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

Url एक बहु-बहुभुज सुविधा देता है:

सेवा क्वेरी प्रयास

नक्शा कोई बहुभुज नहीं दिखाता है। कृपया आप मेरी मदद कर सकते हैं?

0
Fraeli78 3 जून 2020, 21:45

1 उत्तर

सबसे बढ़िया उत्तर

क्वेरी वास्तव में बहुभुज लौटा रही है, आपके पास जो समस्या है वह गलत रेंडरर है। यही कारण है कि आप अंक के रूप में देख रहे हैं।

यहां आपका उदाहरण काम कर रहा है, मैं उस सेवा में परिभाषित रेंडरर का उपयोग करता हूं जिसे आप इसे कस्टम करना चाहते हैं,

<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%;
    }
  </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/layers/GeoJSONLayer",
      "esri/views/MapView",
      "esri/widgets/Legend",
      "esri/renderers/support/jsonUtils"
    ], function (Map, GeoJSONLayer, MapView, Legend, rendererJsonUtils) {
      const url =
"https://services9.arcgis.com/RHVPKKiFTONKtxq3/arcgis/rest/services/USGS_Seismic_Data_v1/FeatureServer/1/query?where=1=1&geometry=-122.40,37.76&geometryType=esriGeometryPoint&inSR=4326&distance=100&units=esriSRUnit_StatuteMile&outFields=*&returnGeometry=true&geometryPrecision=4&outFields=*&f=pgeojson";

      const template = {
        title: "Shake Intensity",
        content: [
          {
            type: "fields",
            fieldInfos: [
            {
                fieldName: "grid_value",
                label: "Grid Value"
              },
              {
                fieldName: "mag",
                label: "Magnitude"
              },
              {
                fieldName: "eventTime",
                label: "Event Time",
                format: {
                  dateFormat: "short-date-short-time"
                }
              },
              {
                fieldName: "updated",
                label: "Updated",
                format: {
                  dateFormat: "short-date-short-time"
                }
              },
              {
                fieldName: "url",
                label: "Url"
              }
            ]
          }
        ]
      };
      const rendererJSON = {
        "field": "grid_value",
        "classificationMethod": "esriClassifyManual",
        "classBreakInfos": [
          {
            "classMaxValue": 1.9999,
            "symbol": {
              "color": [
                0,
                0,
                0,
                0
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "I (Not Felt)"
          },
          {
            "classMaxValue": 3.9999,
            "symbol": {
              "color": [
                0,
                0,
                0,
                0
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "II - III (Weak)"
          },
          {
            "classMaxValue": 4.9999,
            "symbol": {
              "color": [
                140,
                250,
                230,
                255
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "IV (Light)"
          },
          {
            "classMaxValue": 5.9999,
            "symbol": {
              "color": [
                140,
                250,
                140,
                255
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "V (Moderate)"
          },
          {
            "classMaxValue": 6.9999,
            "symbol": {
              "color": [
                255,
                220,
                20,
                255
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "VI (Strong)"
          },
          {
            "classMaxValue": 7.9999,
            "symbol": {
              "color": [
                255,
                180,
                0,
                255
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "VII (Very Strong)"
          },
          {
            "classMaxValue": 8.9999,
            "symbol": {
              "color": [
                255,
                120,
                20,
                255
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "VIII (Severe) "
          },
          {
            "classMaxValue": 9.9999,
            "symbol": {
              "color": [
                255,
                0,
                0,
                255
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "IX (Violent)"
          },
          {
            "classMaxValue": 12,
            "symbol": {
              "color": [
                143,
                0,
                0,
                255
              ],
              "style": "esriSFSSolid",
              "type": "esriSFS",
              "outline": {
                "color": [
                  0,
                  0,
                  0,
                  0
                ],
                "width": 0.4,
                "style": "esriSLSSolid",
                "type": "esriSLS"
              }
            },
            "description": "",
            "label": "X+ (Extreme)"
          }
        ],
        "type": "classBreaks",
        "minValue": 0
      };
      const renderer = rendererJsonUtils.fromJSON(rendererJSON);

      const geojsonLayer = new GeoJSONLayer({
        url: url,
        title: "MMI",
        copyright: "USGS Earthquakes",
        popupTemplate: template,
        renderer
      });

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

      const view = new MapView({
        container: "viewDiv",
        center: [-122, 37],
        zoom: 6,
        map: map
      });
      view.ui.add(
        new Legend({
          view: view
        }),
        "bottom-left"
      );
    });
  </script>
</head>

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

</html>

एक आखिरी बात, मुझे पूरा यकीन नहीं है कि आप GeoJSONLayer से पूछताछ और उपयोग क्यों कर रहे हैं, याद रखें कि आप FeatureLayer का उपयोग कर सकते हैं जो वास्तव में कई क्वेरी संचालन का समर्थन करता है और आपको जेसन डेटा प्राप्त करने की आवश्यकता नहीं है यह करता है आपके लिए।

1
cabesuon 4 जून 2020, 11:02