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

December 27, 2023 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.

<html><head><metacharset='utf-8'><metaname='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><linkrel='stylesheet'href='https://js.arcgis.com/4.15/esri/css/main.css'><scriptsrc='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 = newFeatureLayer({
        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 = newGraphicsLayer();

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

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

      const sketchViewModel = newSketchViewModel({
        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');
      });

      functionselectFeatures(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);
        }
      }

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

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

    });
  </script></head><body><divid='viewDiv'><divid="select-by-polygon"class="esri-widget esri-widget--button esri-widget esri-interactive"title="Select hospitals by polygon"
    ><spanclass="esri-icon-checkbox-unchecked"></span></div></div><divid="namesDiv"></div></body></html>

JavaScript Sample

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?"