0

I am using the ArcGIS JavaScript API with the geometryEngine.intersect() method but I cannot get it to work on feature layers.

In my code you can see how I can create and intersect 2 square geometries I created.

But, in that same code, I also try to intersect one of the squares with every one of the 271 features in the featureLayer and the intersect() method returns null for every single one of them, even thought the map clearly shows some of them intercept the square.

What am I doing wrong?

My code is below an also in this codepen, is:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Buffer and intersect geometry</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

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

  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/Graphic",
      "esri/geometry/geometryEngine",
      "esri/geometry/geometryEngineAsync"
    ], function(Map, MapView, FeatureLayer, Graphic, geometryEngine,
                 geometryEngineAsync) {
      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

      // Trails (lines)
      var featureLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails_Styled/FeatureServer/0"
      });

      map.add(featureLayer);

      let squareShape1 = {
        type: "polygon",
        rings: [
                [-118.8, 34.05],
                [-118.8, 34],
                [-118.9, 34],
                [-118.9, 34.05]
           ],
        spatialReference: featureLayer.spatialReference
        };
        let squareShape2 = {
        type: "polygon",
        rings: [
                [-118.75, 34.08],
                [-118.75, 34.03],
                [-118.85, 34.03],
                [-118.85, 34.08]
           ],
        spatialReference: featureLayer.spatialReference          
        };
        let redOutline = {
            type: "simple-fill",
            color: [227, 139, 79, 0.1],
            outline: {
                color: [255, 0, 0],
                width: 1
            }
        };
        let blueOutline = {
            type: "simple-fill",
            color: [0, 79, 200, 0.1],
            outline: {
                color: [0, 0, 255],
                width: 1
            }
        };      
        let squareA = new Graphic({
            geometry: squareShape1,
            symbol: redOutline
        }); 
        let squareB = new Graphic({
            geometry: squareShape2,
            symbol: redOutline
        });  

      view.graphics.add(squareA);
      view.graphics.add(squareB);

      // intersect the 2 squares, this works      
      geometryEngineAsync.intersect(squareA.geometry,squareB.geometry).then(
           function (result) {
               if (result) {
                   console.log("Found an Intersection among the squares!");
                   console.log(result);
                   let intersectionGraphic = new Graphic({
                       geometry: result,
                       symbol: blueOutline
                     });
                   view.graphics.add(intersectionGraphic); //show the intersection}
                } 
                else {
                    console.log("No Intersection");
                };
                }).catch(function (error) {
                            console.log("Error");
                            console.log(error);
       });  //intersect.catch

      // Intersect the features in the featureLayer with one of the squares
      // DOES NOT WORK. instersect() always returns null, but is should not.
      // Queries for all the features in the featureLayer, so we can intersect each one
      featureLayer.queryFeatures().then(function (results) {
          console.log("Got results");
          console.log(results);
          let layerGeometries = results.features.map(function (feature) {
              return feature.geometry;
          });
          console.log("Num geometries=" + layerGeometries.length);
          layerGeometries.forEach(function (geometry) {
//            console.log("g=");
//            console.log(geometry);
            geometryEngineAsync.intersect(squareA.geometry,geometry).then(
                function (result) {
                    if (result) {
                     console.log("Found an Intersection!");
                     console.log(result);
                     let intersectionGraphic = new Graphic({
                         geometry: result,
                         symbol: blueOutline
                         });
                     view.graphics.add(intersectionGraphic); //show the intersection}
                     } 
                     else {
                         console.log("No Intersection");
                     };
                 }).catch(function (error) {
                            console.log("Error");
                            console.log(error);
                      });  //catch         
              }); //forEach
              console.log("Done forEach");
       }); //queryFeatures.then
      console.log("Done queryFeatures");
    });    
  </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

When I run the code above I expect it to print out "Found and Intersection!" a few times, but it never prints that out. It prints "No Intersection" 271 times instead.

  • So you left out the most important part: How the squares were created. Without a common spatial reference, geometry operators always return false. – Vince Jun 25 at 12:11
  • You can see the full code in the codepen codepen.io/josemvidal/pen/OejPwx?editors=1000 I am setting their spatialRerence to be the same as the one used by the featureLayer, lines 54 and 64. Is that wrong? – Jose M Vidal Jun 25 at 14:34
  • Third party links fail over time. If it's not in the question, it's not in the question. – Vince Jun 25 at 14:59
  • Ok, I updated the question with the full code. – Jose M Vidal Jun 25 at 15:38
  • I would say that the problem could be here: geometryEngineAsync.intersect(squareA.geometry,geometry) what does geometry belong to? For the function that works you have defined squareA and squareB. It seems to me that you want to use -- layerGeometries.geometry as a passed value. So geometryEngineAsync.intersect(squareA.geometry,layerGeometries.geometry) – enolan Jun 25 at 19:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.