Community

Plot path with spatial reference conversion

276
1
09-13-2020 10:22 AM
JasonWood
by
New Contributor II
‎09-13-2020 10:22 AM

JS & ArcGIS newb here.

I have a working example (thanks to this forum) that translates from an alternate spatial reference and plots a point on a map. As you can see from the commented out lines below - I am trying to adapt this to plot a path, but I'm not having luck.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Basic Map</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>
  
  <script>  
    //Style point
    var simpleMarkerSymbol = {
        type: "simple-marker",
        color: [226, 119, 40],  // orange
        outline: {
            color: [255, 255, 255], // white
            width: 1
        }
    };
    //style line
    var simpleLineSymbol = {
        type: "simple-line",
        color: [226, 119, 40], // orange
        width: 2
    };
    
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Point",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "esri/geometry/SpatialReference"
    ], function(Map, MapView, Graphic, GraphicsLayer, Point, GeometryService, ProjectParameters, SpatialReference)  {

        var sr = new SpatialReference({
            wkid: 2953
        });
        
        var map = new Map({
            basemap: "topo-vector"
        });

        var graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        
        var point = Point({
            type: "point",
            x: 2637779.94,
            y: 7418399.63,
            spatialReference: sr
        });

        var parcelOutline = {
            type: "polyline",
            paths: [[2637816.5,7418383.95],[2637788.4,7418370.9],[2637760.75,7418357.95],[2637743.65,7418416.45],[2637799.35,7418440.55],[2637816.5,7418383.95]],
            spatialReference: sr
        };

        var geomSer = new GeometryService({url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'});

        var params = new ProjectParameters({
            //geometries: [point],
            geometries: [parcelOutline],
            outSpatialReference: new SpatialReference({wkid:102100})
        });

        geomSer.project(params).then(function(results){

            //var pointGraphic = new Graphic({
            //   geometry: results[0],
            //    symbol: simpleMarkerSymbol
            //});
            var parcelOutlineGraphic = new Graphic({
                geometry: results[0],
                symbol: simpleLineSymbol
            });

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

            //graphicsLayer.add(pointGraphic);
            graphicsLayer.add(parcelOutlineGraphic);

        });


    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
1 Reply
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎09-16-2020 09:18 AM

Jason,

   Couple of issues.

  1. You are trying to give the geometry service an simple object and not an actual geometry class object.
  2. You are trying to set the views center to a line when it only takes points.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Basic Map</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.15/"></script>
  
  <script>  
    //style line
    var simpleLineSymbol = {
        type: "simple-line",
        color: [226, 119, 40], // orange
        width: 2
    };
    
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/geometry/Polyline",
      "esri/tasks/GeometryService",
      "esri/tasks/support/ProjectParameters",
      "esri/geometry/SpatialReference"
    ], function(Map, MapView, Graphic, GraphicsLayer, Polyline, GeometryService, ProjectParameters, SpatialReference)  {

        var sr = new SpatialReference({
            wkid: 2953
        });
        
        var map = new Map({
            basemap: "topo-vector"
        });

        var graphicsLayer = new GraphicsLayer();
        map.add(graphicsLayer);

        var parcelOutline = Polyline({
            type: "polyline",
            paths: [[2637816.5,7418383.95],[2637788.4,7418370.9],[2637760.75,7418357.95],[2637743.65,7418416.45],[2637799.35,7418440.55],[2637816.5,7418383.95]],
            spatialReference: sr
        });

        var geomSer = new GeometryService({url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'});

        var params = new ProjectParameters({
            geometries: [parcelOutline],
            outSpatialReference: new SpatialReference({wkid:102100})
        });

        geomSer.project(params).then(function(results){
            var parcelOutlineGraphic = new Graphic({
                geometry: results[0],
                symbol: simpleLineSymbol
            });

            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: results[0].extent.center,
                zoom: 13
            });
            graphicsLayer.add(parcelOutlineGraphic);
        });


    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos