Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Client Side Polyline
Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Client Side Polyline
Subscribe
416
0
11-11-2019 08:53 AM
11-11-2019
08:53 AM
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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 Replies
