AnsweredAssumed Answered

Add new Selection (Clone Graphics)

Question asked by vakhtang_zuba on Dec 23, 2019
Latest reply on Dec 24, 2019 by vakhtang_zuba

Hi Guys, i have Polygon Feature class. I want to make selection for multiple feature ( i use "hitTest", but code i have does not work. I took code from here jsapi 4.0 popup: set highlight graphic on feature layer click? .

I use simpleLineSymbol for graphicsLayer.

Help me please.

 

And if you can tell me how to unselect feature i do not need after selection.

 

Here is my code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GWP - მილი და სამისამართო ერთეული</title>

  <style>
    html,
    body,
    #viewDiv {
      padding0;
      margin0;
      height100%;
      width100%;
    }

    #info {
      background-colorblack;
      opacity0.75;
      colororange;
      font-size18pt;
      padding8px;
      visibilityhidden;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/renderers/UniqueValueRenderer",
      "esri/symbols/SimpleLineSymbol",
      
      "dojo/dom",
      "dojo/domReady!"
    ], function(
      Map,
      MapView,
      FeatureLayer,
      UniqueValueRenderer,
      SimpleLineSymbol,
      
      dom
    ) {

        

 

    const labelClass = {
          // autocasts as new LabelClass()
          symbol: {
            type: "text"// autocasts as new TextSymbol()
            color: "black",
            haloColor: "black",
            font: {
              // autocast as new Font()
              family: "Playfair Display",
              size: 12,
              weight: "bold"
            }
          },
          labelPlacement: "always-horizontal",
          labelExpressionInfo: {
    expression: "$feature.g_dasaxeleba_ka"
  }
      };

      var renderer = {
  type: "simple"// autocasts as new SimpleRenderer()
  symbol: {
    type: "simple-fill"// autocasts as new SimpleFillSymbol()
    outline: {
      // makes the outlines of all features consistently light gray
      color: "red",
      width: 0.5
    }
  }
};
         
     var linefeatureLayer = new FeatureLayer({ url:"http://xx.xx.xx.xx:6080/arcgis/rest/services/test/Tbilisi_wyalmomarageba_keti/MapServer/16",
     select: false
         });

      var layer = new FeatureLayer({
        url: "http://xx.xx.xx.xx:6080/arcgis/rest/services/test/samisamarTo/FeatureServer/0",
        outFields: ["*"],
        labelingInfo: [labelClass],
        renderer: renderer
      });

      var map = new Map({
        basemap: "dark-gray",
        layers: [layer/*linefeatureLayer*/]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [44.750241.725524],
          zoom: 12
      });

      
 

      view.ui.add("info""top-right");

      // Set up a click event handler and retrieve the screen x, y coordinates
      view.on("click"function(event) {
        // the hitTest() checks to see if any graphics in the view
        // intersect the given screen x, y coordinates
        view.hitTest(event)
          .then(getGraphics);
      });

      function getGraphics(response) {
        // the topmost graphic from the click location
        // and display select attribute values from the
        // graphic to the user
        var graphic = response.results[0].graphic;
        var attributes = graphic.attributes;
        var category = attributes.g_dasaxeleba_ka;
        var wind = attributes.kodi;
        var name = attributes.SE_ID_new;

        dom.byId("info").style.visibility = "visible";
        dom.byId("name").innerHTML = name;
        dom.byId("category").innerHTML = "დასახელება: " + category;
        

        // symbolize all line segments with the given
        // storm name with the same symbol
        var renderer = new UniqueValueRenderer({
          field: "SE_ID_new",
          defaultSymbol: layer.renderer.symbol || layer.renderer.defaultSymbol,
          
          uniqueValueInfos: [{
            value: name,
            symbol: new SimpleLineSymbol({
              color: "orange",
              width: 5,
              cap: "round",
            })
        
          }]
                    
         
        });  

        
        layer.renderer = renderer;    
        

      }
      

      view.graphics.removeAll();
                    if (graphic) {
                        var selectionGraphic = graphic.clone();
                        selectionGraphic.symbol = renderer;
                        view.graphics.add(selectionGraphic);
                    }
      

     
      
      
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="info">
    <span id="name"></span><br>
    <span id="category"></span><br>
    <span id="wind"></span>
  </div>
</body>

</html>

Outcomes