Client Side Polyline

kawishabbas — Sun, 12 Dec 2021 00:47:10 GMT
Any one can please guide me or give me a sample to understand how can create Polyline feature layer with web service(JSON).
I have created Point feature layer with web service but i am stuck to create line feature that how can i loop path/segments.
Following is the code of my Polyline feature layer......robert scheitlin
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>JSON</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

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

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/request",
        "esri/Graphic",
        "esri/geometry/Polyline",
        "esri/layers/FeatureLayer",
        "esri/widgets/Search",
        "esri/widgets/Legend",
        "esri/tasks/support/Query",
        "esri/tasks/QueryTask",
        "esri/geometry/projection",
        "esri/geometry/SpatialReference"
      ], function(Map, MapView, esriRequest, Graphic,Polyline, FeatureLayer,Search, Legend, Query,QueryTask, projection, SpatialReference) {

      projection.load()

      let url ="http://172.16.6.28:2019/geojson"

       let myData = []

      let fields = [
        {
          name: "ObjectID",
          alias: "ObjectID",
          type: "oid"
        },
        {
          name: "Capacity",
          alias: "Capacity",
          type: "string"
        },
        {
          name: "POP",
          alias: "POP",
          type: "long"
        },
         {
          name: "Placement",
          alias: "Placement",
          type: "string"
        },
         {
          name: "Comment",
          alias: "Comment",
          type: "string"
        }
      ];

      let pTemplate = {
        title: "{title}",
        content: [
          {
            type: "fields",
            fieldInfos: [
              {
                fieldName: "OBJECTID",
                label: "OBJECTID",
                visible: true
              },
              {
                fieldName: "Capacity",
                label: "Capacity",
                visible: true
              },
              {
                fieldName: "POP",
                label: "POP",
                visible: true
              },
              {
                fieldName: "Placement",
                label: "Placement",
                visible: true
              },
              {
                fieldName: "Comment",
                label: "Comment",
                visible: true
              }
            ]
          }
        ]
      };

/*      var rendererCheck = {
        type: "unique-value",  // autocasts as new UniqueValueRenderer()
        field: "POP",
        defaultSymbol: {
          type: "simple-marker",
          color: "black",
          size: 4,
           outline: {  // autocasts as new SimpleLineSymbol()
              width: 0.5,
              color: "white"
            }
          },  // autocasts as new SimpleFillSymbol()
        uniqueValueInfos: [{
          // All features with value of "North" will be blue
          value: 21001,
          symbol: {
            type: "simple-marker",  // autocasts as new SimpleFillSymbol()
            color: "blue",
            size: 4,
             outline: {  // autocasts as new SimpleLineSymbol()
              width: 0.5,
              color: "white"
            }
          }
        }, {
          // All features with value of "East" will be green
          value: 21003,
          symbol: {
            type: "simple-marker",  // autocasts as new SimpleFillSymbol()
            color: "green",
            size: 4,
             outline: {  // autocasts as new SimpleLineSymbol()
              width: 0.5,
              color: "white"
            }
          }
        }, {
          // All features with value of "South" will be red
          value: 21004,
          symbol: {
            type: "simple-marker",  // autocasts as new SimpleFillSymbol()
            color: "red",
            size: 4,
             outline: {  // autocasts as new SimpleLineSymbol()
              width: 0.5,
              color: "white"
            }
          }
        }, {
          // All features with value of "West" will be yellow
          value: 21005,
          symbol: {
            type: "simple-marker",  // autocasts as new SimpleFillSymbol()
            color: "yellow",
            size: 4,
             outline: {  // autocasts as new SimpleLineSymbol()
              width: 0.5,
              color: "black"
            }
          }
        } ,
        {
          // All features with value of "West" will be yellow
          value: 21006,
          symbol: {
            type: "simple-marker",  // autocasts as new SimpleFillSymbol()
            color: "#ba0af3",
            size: 4,
             outline: {  // autocasts as new SimpleLineSymbol()
              width: 0.5,
              color: "white"
            }
          }
        }]
      };
*/
      let map = new Map({
        basemap: "satellite",
      });

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

       let options = {
        query: {
          f: "json"
        },
        responseType: "json"
      };

    let fetchData = () => esriRequest(url, options).then(response => response.data)

    let webservice = res => {

          res.map(function(result, i){

             let resultPnts = result.Shape.points.map(function(point){

             return new Polyline({
                paths:[point.x, point.y],
                hasZ: false,
                hasM: false,
                spatialReference : result.Shape.srid
              });
 
            })

              let atts = {
                "ObjectID": i,
                "Name": result.Capacity,
                "POP": result.POP,
                "Placement": result.Placement,
                "Comment": result.Comment
               
              };

              let graArr = resultPnts.map(function(pnt){

              let projectedPoint = projection.project(pnt,view.spatialReference);

               let markerSymbol = {
                    type: "simple-line",  // autocasts as SimpleLineSymbol()
                    color: [226, 119, 40],
                    width: 8
                  };

                let g =  new Graphic({
                  geometry:projectedPoint,
                  symbol: markerSymbol,
                  attributes: atts
                })
                
                myData.push(g)   
              
              })

              return graArr
          })
          console.log(myData)
        let layer = new FeatureLayer({
            geometryType: "polyline",
            source: myData,
            fields: fields,
            objectIdField: "ObjectID",
            //renderer: rendererCheck,
            popupTemplate: pTemplate,
            //definitionExpression: "CATEGORY= '2 Wheeler'"
        });
        
        map.add(layer)

       /* var searchWidget = new Search({
        view: view,
        sources:[
          {
            layer: layer,
            searchFields: ["ID"],
            displayField: "ID",
            exactMatch: false,
            outFields: ["*"],
            name: "ID",
            placeholder: "2100103",
            scale: 10,
            maxResults: 6,
            maxSuggestions: 6,
            minSuggestCharacters: 0,
            resultSymbol: {
                type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
                color: [239, 25, 25],
                size: 10,
                width: 30,
                height: 30,
                xoffset: 0,
                yoffset: 0
            }
          }
        ]
      });*/

      var legend = new Legend({
        view: view,
        layerInfos: [{
          layer: layer,
          title: "Legend"
        }]
      });

      view.ui.add(legend, "bottom-right");
          
      view.ui.add(searchWidget, {
        position: "top-right",
        index: 2
      });
        
    }
 
    view.when(() =>{
      fetchData()
      .then(webservice)
    })
    

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
topic Client Side Polyline in ArcGIS JavaScript Maps SDK Questions

Client Side Polyline
