How To Get Get Name Of Hospital Or Street In Particular Area When Draw Polyline Through Javascript ArcGIS Api?

November 14, 2022 Post a Comment

Actually I am using ArcGIS API for JavaScript 4.7. I want to get name of hospital or street in particular area when draw polyline . How to achieve that ? Suppose I draw a area thr

Solution 1:

Well, here I made an example for you merging some ArcGIS examples.

Just select the hospitals using a polygon. The selected hospitals are highlighted and the names display in the text section.

In your case do the same thing with any other layer you want to query to get features data.

Baca Juga

<html>

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=no'>
  <title>Select Feature With Polygon</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 400px;
      width: 100%;
    }
    #namesDiv {
      margin: 10px;
      height: 200px;
      width: 100%;
      font-style: italic;
      font-weight: bold;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 16px;
      color: green;
      overflow: auto;
    }
  </style>

  <link rel='stylesheet' href='https://js.arcgis.com/4.15/esri/css/main.css'>
  <script src='https://js.arcgis.com/4.15/'></script>

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/FeatureLayer',
      'esri/layers/GraphicsLayer',
      'esri/widgets/Sketch/SketchViewModel',
      'esri/Graphic',
      'esri/widgets/Expand'
    ], function (
      Map,
      MapView,
      FeatureLayer,
      GraphicsLayer,
      SketchViewModel,
      Graphic,
      Expand
    ) {
      let hospitalsLayerView = null;
      let highlight = null;

      const hospitals = new FeatureLayer({
        url: 'https://services.arcgis.com/fLeGjb7u4uXqeF9q/ArcGIS/rest/services/Hospitals/FeatureServer/0',
        renderer: {
          type: 'simple',
          symbol: {
            type: 'text',
            color: 'green',
            text: '\ue687',
            font: {
              size: 16,
              family: 'CalciteWebCoreIcons'
            },
            haloColor: 'white',
            haloSize: 2
          }
        },
        outFields: ['*']
      });

      const polygonGraphicsLayer = new GraphicsLayer();

      const map = new Map({
        basemap: 'streets',
        layers: [hospitals, polygonGraphicsLayer]
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        center: [-75.1683665, 39.951817],
        zoom: 14
      });

      const sketchViewModel = new SketchViewModel({
        view: view,
        layer: polygonGraphicsLayer,
        pointSymbol: {
          type: 'simple-marker',
          color: [255, 255, 255, 0],
          size: '1px',
          outline: {
            color: 'gray',
            width: 0
          }
        }
      });

      sketchViewModel.on('create', function (event) {
        if (event.state === 'complete') {
          polygonGraphicsLayer.remove(event.graphic);
          selectFeatures(event.graphic.geometry);
        }
      });

      hospitals.when(function () {
        view.whenLayerView(hospitals).then(function (layerView){
          hospitalsLayerView = layerView;
        })
      })
      .catch(errorCallback);

      const namesDiv = document.getElementById('namesDiv');

      view.ui.add('select-by-polygon', 'top-left');
      const selectButton = document.getElementById('select-by-polygon');

      selectButton.addEventListener('click', function () {
        clearUpSelection();
        sketchViewModel.create('polygon');
      });

      function selectFeatures(geometry) {
        view.graphics.removeAll();
        if (hospitalsLayerView) {
          const query = {
            geometry: geometry,
            outFields: ['*']
          };

          hospitalsLayerView
            .queryFeatures(query)
            .then(function (results) {
              const graphics = results.features;
              if (highlight) {
                highlight.remove();
              }
              highlight = hospitalsLayerView.highlight(graphics);
              namesDiv.innerHTML = graphics.map(g => g.attributes.HOSPITAL_NAME).join(',');
            })
            .catch(errorCallback);
        }
      }

      function clearUpSelection() {
        view.graphics.removeAll();
        namesDiv.innerHTML = null;
      }

      function errorCallback(error) {
        console.log('error:', error);
      }

    });
  </script>
</head>

<body>
  <div id='viewDiv'>
    <div
      id="select-by-polygon"
      class="esri-widget esri-widget--button esri-widget esri-interactive"
      title="Select hospitals by polygon"
    >
      <span class="esri-icon-checkbox-unchecked"></span>
    </div>
  </div>
  <div id="namesDiv"></div>
</body>

</html>

JavaScript Apprenticeships

How To Get Get Name Of Hospital Or Street In Particular Area When Draw Polyline Through Javascript ArcGIS Api?

Solution 1:

Post a Comment for "How To Get Get Name Of Hospital Or Street In Particular Area When Draw Polyline Through Javascript ArcGIS Api?"