Client Side Polyline

124
0
11-11-2019 08:53 AM
kawishabbas
New Contributor III

Hi

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>
0 Kudos
0 Replies