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.
