How to get value for selected place in particular area when draw polyline or polygon through Javascript ArcGIS Api from TileLayer?

Question

Actually I am using ArcGIS API for JavaScript 4.7 and i have a custom internal layer . I want to get name of place particular area when draw polyline the column name is (PLC_NAME) . How to achieve that ? Suppose I draw a area through polyline. In this area there are places . Now I need to get name of these places .

you can find the using code in below i am using the TileLayer.

require([
"esri/views/MapView",
"esri/Map",
"esri/Basemap",
"esri/layers/TileLayer",
"esri/layers/MapImageLayer",
"esri/widgets/Sketch/SketchViewModel",
"esri/geometry/geometryEngine",
"esri/widgets/CoordinateConversion",
"esri/geometry/support/webMercatorUtils",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/config",
"esri/core/urlUtils",
"esri/widgets/Search",
"esri/tasks/Locator",
"esri/layers/FeatureLayer",
"esri/widgets/Expand",
"dojo/domReady!" 

], function (
MapView, Map, Basemap, TileLayer, MapImageLayer,
SketchViewModel,
 geometryEngine,
 CoordinateConversion, 
 webMercatorUtils,
 Graphic, GraphicsLayer, esriConfig, urlUtils,Search,Locator,FeatureLayer,Expand
) {

esriConfig.request.proxyUrl = "xxxxxxxxxxxxxxx";
    
urlUtils.addProxyRule({
    urlPrefix: "xxxxxxxxxxxxxxxxxxx",
    proxyUrl: "xxxxxxxxxxxxxxxxxx"

});

var tempGraphicsLayer = new GraphicsLayer();
var saveGraphicsLayer = new GraphicsLayer();    
var updateGraphic;
let highlight = null;
    'xxxxxxxxxxxxxxxxxxxxxxxxx';        
var myMap;

    var layer = new TileLayer({
        url: mapUrl            
    });
    var towerLayer = new MapImageLayer({
        url: 'xxxxxxxxxxxxxxxxxxxxxxx'
    });
    myMap = new Map({
        layers: [layer, tempGraphicsLayer, saveGraphicsLayer]
    });        
    myMap.add(towerLayer);
 

view = new MapView({
    center: [-55.1683665, 39.951817],
    container: "viewDiv",
    map: myMap,
    zoom: 14
});


var ccWidget = new CoordinateConversion({
    view: view
});


 // Adds the search widget below other elements in
// the top left corner of the view
view.ui.add(searchWidget, {
           position: "top-right",
           index: 1
            });

view.ui.add(ccWidget, "bottom-left");
view.ui.add("topbar", "top-right");
var pointSymbol = { // symbol used for points
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    style: "square",
    color: "#8A2BE2",
    size: "16px",
    outline: { // autocasts as new SimpleLineSymbol()
        color: [255, 255, 255],
        width: 3 // points
    }
}
var polylineSymbol = { // symbol used for polylines
    type: "simple-line", // autocasts as new SimpleLineSymbol()
    color: "#8A2BE2",
    width: "4",
    style: "dash"
}
var polygonSymbol = { // symbol used for polygons
    type: "simple-fill", // autocasts as new SimpleFillSymbol()
    color: "rgba(138,43,226, 0.8)",
    style: "solid",
    outline: {
        color: "white",
        width: 1
    }
}

 var polygonBoundrySymbol = { // symbol used for polygons
    type: "simple-line", // autocasts as new SimpleFillSymbol()
    color: "red"
 }    
// ################## U R HERE ################## ################## U R HERE ################## 
################## U R HERE ################## 

let drawBoundry = function(){
    //let boundryJson = '&G_GEO_LIMITS.';
    let boundryJson = $v('P0_USER_LIMITS');
    if(boundryJson){
//            let boundry = Graphic.fromJSON(JSON.parse('&G_GEO_LIMITS.'));
        let boundry = Graphic.fromJSON(JSON.parse(boundryJson));            
        boundry.symbol = polygonBoundrySymbol;

        tempGraphicsLayer.add(boundry);
        return boundry;
    }         
}
/*
let boundry = drawBoundry();
    */


view.when(function () {
    $('.esri-view-root').on('click', '.esri-print__export-button', function(e){
        //console.log('event bubbling', e);
        //console.log('event bubbling this', this);
        e.preventDefault();
        saveExportedImg();
    });

    // create a new sketch view model
    var sketchViewModel = new SketchViewModel({
        view: view,
        layer: tempGraphicsLayer,
        pointSymbol: pointSymbol,
        polylineSymbol: polylineSymbol,
        polygonSymbol: polygonSymbol
    });
    

    //setUpClickHandler();
    // ************************************************************
    // Get the completed graphic from the event and add it to view.
    // This event fires when user presses
    // * "C" key to finish sketching point, polygon or polyline.
    // * Double-clicks to finish sketching polyline or polygon.
    // * Clicks to finish sketching a point geometry.
    // ***********************************************************
    sketchViewModel.on("draw-complete", addGraphic);
    sketchViewModel.on("update-complete", addGraphic);
    sketchViewModel.on("update-cancel", addGraphic);
    sketchViewModel.on("vertex-add", addGraphic);

    function addGraphic(evt) {
       // console.log ('graphic.geometry',evt.geometry)
        //let currentGraphic = popActiveGraphic(tempGraphicsLayer);
        let currentGraphic = saveGraphicsLayer.graphics.items.pop();
        
        var geometry = evt.geometry;
        var vertices = evt.vertices;
        var symbol;
        var attr = {
            Name: "Selected Area",
            X: $v('P24_X'),
            Y: $v('P24_Y')
        };
        // Choose a valid symbol based on return geometry
        switch (geometry.type) {
            case "point":
                symbol = pointSymbol;
                break;
            case "polyline":
                symbol = polylineSymbol;
                break;
            default:
                symbol = polygonSymbol;
                break;
        }
        // Create a new graphic; add it to the GraphicsLayer
       // console.log("b4 graphic");
        geometry =  webMercatorUtils.webMercatorToGeographic(geometry)
        /*if(boundry){
            var contains = geometryEngine.contains(boundry.geometry, geometry);
            var within = geometryEngine.within(geometry, boundry.geometry);                
        } else {*/
            var within = true;
        //}
                    
        if(within){
            
            let graphic = new Graphic({
                    geometry: geometry,
                    symbol: symbol,
                    //attributes: attr,
                    popupTemplate: {
                        title: "{Name}",
                        content: [{
                            type: "fields",
                            fieldInfos: [{
                                fieldName: "X"
                            }, {
                                fieldName: "Y"
                            }]
                        }]
                   }
            });                          
            tempGraphicsLayer.add(graphic);
            if(currentGraphic){
                //currentGraphic.geometry.rings.push(geometry.rings[0]);
                geometry.rings.forEach( ring => currentGraphic.geometry.addRing(ring));
                //currentGraphic.geometry.addRing(geometry.rings);
                //console.log('current active', geometry);
               // console.log('current graphic', currentGraphic.geometry);
                graphic = currentGraphic;                    
            }                 
            var saveObj = graphic.toJSON();                        
           // console.log('saveObj', saveObj);
            $x('P24_JSON').value = JSON.stringify(saveObj);
          
        } else {
            apex.message.alert('&G_MAP_BOUNDRY_MSG.');
        }
        updateGraphic = null;
    }
    
   
   function addMultiGraph(evt1) {
       
        //let currentGraphic = popActiveGraphic(tempGraphicsLayer);
        let currentGraphic = saveGraphicsLayer.graphics.items.pop();
        
        var geometry = evt1.geometry;
        var vertices = evt1.vertices;
        var symbol;
     
        // Choose a valid symbol based on return geometry
        switch (geometry.type) {
            case "point":
                symbol = pointSymbol;
                break;
            case "polyline":
                symbol = polylineSymbol;
                break;
            default:
                symbol = polygonSymbol;
                break;
        }
       //console.log("ring",geometry.rings )
            let graphic = new Graphic({
                    geometry: geometry,
                    symbol: symbol,
                    //attributes: attr,
                    popupTemplate: {
                        title: "{Name}",
                        content: [{
                            type: "fields",
                            fieldInfos: [{
                                fieldName: "X"
                            }, {
                                fieldName: "Y"
                            }]
                        }]
                   }
            });                       
            tempGraphicsLayer.add(graphic);
            if(currentGraphic){
                
                geometry.rings.forEach( ring => currentGraphic.geometry.addRing(ring));
                
            }              
            var saveObj1 = graphic.toJSON();                        
            //console.log('saveObj', graphic);
            $x('P24_JSON').value = JSON.stringify(saveObj1);
             
           
        
        updateGraphic = null;
    }

    window.loadGraphic = function(polygon){
        if(polygon===undefined || polygon === ''){
            console.error('no polygon');
        } else {
            
            
            var graphic = Graphic.fromJSON(JSON.parse(polygon));  
            if (graphic.geometry){
             
            
             
              addMultiGraph(graphic);
        
            //*********************************************************************
               view.center.longitude = graphic.geometry.centroid.longitude;
               view.center.latitude = graphic.geometry.centroid.latitude;
               view.center = [graphic.geometry.centroid.longitude, 
       graphic.geometry.centroid.latitude];
                view.zoom = 12;
            }
        }
        
    }
    

    
    // *************************************
    // activate the sketch to create a point
    // *************************************
    var drawPointButton = document.getElementById("pointButton");
    drawPointButton.onclick = function () {
        // set the sketch to create a point geometry
        sketchViewModel.create("point");
        setActiveButton(this);
    };
    // ****************************************
    // activate the sketch to create a polyline
    // ****************************************
    var drawLineButton = document.getElementById("polylineButton");
    drawLineButton.onclick = function () {
        // set the sketch to create a polyline geometry
        sketchViewModel.create("polyline");
        setActiveButton(this);
    };

    var drawPolygonButton = document.getElementById("polygonButton&quot

Answer 1

OK, you can resolve the queries on the client or on the server. Depends on your task what options you can pick on.

If you are going to use a spatial query, like the one you mention, and you will apply it on a FeatureLayer, you could solve it on the client. This is a good solution because you already have the features, you are seeing them. Here you have a question whis this situation, how-to-get-get-name-of-hospital-or-street-in-particular-area-when-draw-polyline.

Now, If you need to query something that might not be in your extent (you don't have the features) or you are not using a FeatureLayer, you probably will need to command the server to do this. But don't worry the library has several tools to work with, like QueryTask.

Here you have the same example of the answer link before but using QueryTask.

<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/MapImageLayer',
      'esri/layers/GraphicsLayer',
      'esri/widgets/Sketch/SketchViewModel',
      'esri/Graphic',
      'esri/widgets/Expand',
      'esri/tasks/QueryTask',
      'esri/tasks/support/Query'
    ], function (
      Map,
      MapView,
      MapImageLayer,
      GraphicsLayer,
      SketchViewModel,
      Graphic,
      Expand,
      QueryTask,
      Query
    ) {
      let highlight = null;

      const states = new MapImageLayer({
        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer'
      });

      const queryTask = new QueryTask({
        url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2'
      });

      const polygonGraphicsLayer = new GraphicsLayer();

      const selected = new GraphicsLayer();

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

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

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

      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) {
        selected.removeAll();
        const query = new Query();
        query.returnGeometry = true;
        query.outFields = ['*'];
        query.geometry = geometry;
        queryTask
          .execute(query)
          .then(function (results) {
            const graphics = results.features.map(r => {
              r.symbol = {
                type: 'simple-fill',
                fill: 'none',
                outline: {
                  color: 'cyan',
                  width: 2
                }
              };
              return r;
            });
            selected.addMany(graphics);
            namesDiv.innerHTML = graphics.map(g => g.attributes.NAME).join(',');
          })
          .catch(errorCallback);
      }

      function clearUpSelection() {
        selected.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 counties by polygon"
    >
      <span class="esri-icon-checkbox-unchecked"></span>
    </div>
  </div>
  <div id="namesDiv"></div>
</body>

</html>