josemvidal/arcgis-intersect.markdown

## arcgis-intersect.markdown

      
    Raw
  

              arcgis-intersect.markdown
            
          
    arcgis intersect

A Pen by Jose M Vidal on CodePen.
License.

  
## index.html
<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 streamsLayer, adds them to
      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>
	<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 streamsLayer, adds them to
	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>