Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About kawishabbas
kawishabbas
Regular Contributor
since
09-25-2017
01-02-2024
92
Posts created
11
Kudos given
1
Solutions
5
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by kawishabbas
|
POST
|
Hello, I am working on react and I want to show the Line feature at a given scale with definitionExpression. For example, if the scale is less than 20000 then show only network 1 while scale is greater than 20000 then show all records on map. The following statement is not working well. Is anyone can help me? if (_this.state.scale < 20000){
geojsonServiceFiber.definitionExpression = "network = 1"
}
if (_this.state.scale > 20000){
geojsonServiceFiber.definitionExpression = "1=1"
}
... View more
09-30-2020
06:02 AM
|
0
|
0
|
673
|
|
POST
|
Hi I am going to show centroid points of the polygon as a textSymbol on the map but an issue that I am facing, the total features of the polygon are 69048 but 14570 centroid points are displaying on the map. For better understanding, I have created the point symbol of centroids, as you can see in the attached image the centroid points of some polygons are not showing. Anyone can help me? Robert Scheitlin, GISPEgge-Jan Pollé let parcelSDE = new FeatureLayer({
url: "Service URL",
title: "Parcel",
labelsVisible: true,
legendEnabled: true,
})
map.add(parcelSDE)
var parcel = parcelSDE.createQuery();
parcel.where = "1=1"
parcelSDE.queryFeatures(parcel).then(function (response) {
response.features.map((e, i) => {
console.log(i)
//69048 features
var points = {
type: "point",
x: e.geometry.centroid.x,
y: e.geometry.centroid.y,
spatialReference: { wkid: 32642 }
};
var textSymbol = {
type: "text",
color: "black",
haloColor: "white",
text: e.attributes.house_no,
haloSize: 1,
font: {
family: "Arial",
size: 6,
weight: "bold"
}
};
/* let symbol = {
type: "simple-marker",
size: 5,
color: [0, 255, 255],
outline: null
} */
var pointGraphic = new Graphic({
geometry: points,
symbol: textSymbol
});
console.log(pointGraphic)
// 14570 centroid points
view.graphics.add(pointGraphic)
})
})
... View more
08-18-2020
02:55 AM
|
0
|
0
|
790
|
|
POST
|
Thanks Undral Batsukh Its working now, but still i have a problem that the textsymbol is not parallel to line feature can you please guide me how we can align text symbol?
... View more
12-12-2019
09:06 PM
|
0
|
0
|
1412
|
|
POST
|
Hi, I want to add length measurement on polyline graphic for that i use text symbol but its not working.Following is the sample code. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Draw polyline - 4.13</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/views/draw/Draw",
"esri/Graphic",
"esri/geometry/geometryEngine",
"esri/geometry/projection",
"esri/geometry/SpatialReference"
], function(Map, MapView, Draw, Graphic, geometryEngine,projection, SpatialReference) {
projection.load()
let cs1 = new SpatialReference({
wkid: 4326 //PE_GCS_ED_1950
})
const map = new Map({
basemap: "satellite"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 12,
center: [67.060943, 24.837139]
});
// add the button for the draw tool
view.ui.add("line-button", "top-left");
const draw = new Draw({
view: view
});
// draw polyline button
document.getElementById("line-button").onclick = function() {
view.graphics.removeAll();
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polyline");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVertices
);
};
// Checks if the last vertex is making the line intersect itself.
function updateVertices(event) {
let result
// create a polyline from returned vertices
if (event.vertices.length > 1) {
result = createGraphic(event);
// if the last vertex is making the line intersects itself,
// prevent the events from firing
if (result.selfIntersects) {
event.preventDefault();
}
}
}
// create a new graphic presenting the polyline that is being drawn on the view
function createGraphic(event) {
const vertices = event.vertices;
view.graphics.removeAll();
let polyline = {
type: "polyline",
paths: vertices,
spatialReference: view.spatialReference
}
// a graphic representing the polyline that is being drawn
const graphic = new Graphic({
geometry:polyline ,
symbol: {
type: "simple-line", // autocasts as new SimpleFillSymbol
color: [4, 90, 141],
width: 4,
cap: "round",
join: "round"
}
});
var polylineLength = geometryEngine.geodesicLength(graphic.geometry, "meters");
if (polylineLength < 0) {
// simplify the polygon if needed and calculate the polylineLength again
var simplifiedPolygon = geometryEngine.simplify(graphic.geometry);
if (simplifiedPolygon) {
polylineLength = geometryEngine.geodesicLength(simplifiedPolygon, "meters");
}
}
length.innerHTML = polylineLength.toFixed(4) + "meter"
let textSymbol = {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "black",
haloSize: 2,
text: polylineLength.toFixed(4) + "meter",
xoffset: 3,
yoffset: 3,
font: { // autocasts as new Font()
size: 8,
family: "sans-serif",
weight: "bold"
}
}
let graphicLabel = new Graphic({
geometry: polyline,
//attributes: item.attributes,
symbol: textSymbol,
})
view.graphics.add(graphicLabel)
// check if the polyline intersects itself.
const intersectingSegment = getIntersectingSegment(graphic.geometry);
// Add a new graphic for the intersecting segment.
if (intersectingSegment) {
view.graphics.addMany([graphic, intersectingSegment]);
}
// Just add the graphic representing the polyline if no intersection
else {
view.graphics.add(graphic);
}
// return intersectingSegment
return {
selfIntersects: intersectingSegment
};
// start displaying the area of the polygon
}
// function that checks if the line intersects itself
function isSelfIntersecting(polyline) {
if (polyline.paths[0].length < 3) {
return false;
}
const line = polyline.clone();
//get the last segment from the polyline that is being drawn
const lastSegment = getLastSegment(polyline);
line.removePoint(0, line.paths[0].length - 1);
// returns true if the line intersects itself, false otherwise
return geometryEngine.crosses(lastSegment, line);
}
// Checks if the line intersects itself. If yes, change the last
// segment's symbol giving a visual feedback to the user.
function getIntersectingSegment(polyline) {
if (isSelfIntersecting(polyline)) {
return new Graphic({
geometry: getLastSegment(polyline),
symbol: {
type: "simple-line", // autocasts as new SimpleLineSymbol
style: "short-dot",
width: 3.5,
color: "yellow"
}
});
}
return null;
}
// Get the last segment of the polyline that is being drawn
function getLastSegment(polyline) {
const line = polyline.clone();
const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
const existingLineFinalPoint = line.getPoint(
0,
line.paths[0].length - 1
);
return {
type: "polyline",
spatialReference: view.spatialReference,
hasZ: false,
paths: [
[
[existingLineFinalPoint.x, existingLineFinalPoint.y],
[lastXYPoint.x, lastXYPoint.y]
]
]
};
}
});
</script>
</head>
<body>
<div id="viewDiv">
<div
id="line-button"
class="esri-widget esri-widget--button esri-interactive"
title="Draw polyline"
>
<span class="esri-icon-polyline"></span>
</div>
</div>
</body>
</html>
... View more
12-11-2019
09:25 PM
|
0
|
2
|
1565
|
|
POST
|
Wao its wonderful Egge-Jan thank you so much and yes i have tested labeling with 4.12 version its working properly. Basically i find such type of stuff that you had shared in which we can use button to LayerList widget for labeling. Again thank you Egge-Jan
... View more
11-27-2019
09:16 PM
|
0
|
1
|
2287
|
|
POST
|
Hi I am using GeoJSON service to plots my point on map and want to label them and for that purpose i create a check box. when event perform on checkbox feature should be labeled but when unchecked label should be hidden from map. In following code when i checked to checkbox labeling is showing but when unchecked it is not remove/hide from map. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Geojson Label</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.13/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GeoJSONLayer",
], function(
Map,
MapView,
GeoJSONLayer,
) {
const map = new Map({
basemap: "satellite",
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [67.050987, 24.894766],
scale: 288895,
});
let labelClassDC = {
// autocasts as new LabelClassFAT()
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "white",
haloColor: "black",
haloSize: 2,
font: { // autocast as new Font()
family: "Playfair Display",
size: 10,
weight: "bold"
}
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.f1"
}
}
let feature = new GeoJSONLayer({
url: "http://localhost:3000/fat",
labelsVisible: false,
labelingInfo: [labelClassDC],
})
map.add(feature)
view.ui.add(document.getElementById('label'), 'top-right')
document.getElementById('show').addEventListener('click', (e)=>{
feature.labelsVisible = e.target.checked
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="label">
<label>Dc</label>
<input type="checkbox" id="show">
</div>
</body>
</html>
... View more
11-22-2019
02:31 AM
|
0
|
4
|
2456
|
|
POST
|
Yes you are right but i am confused to loop groups of point in polygon graphic. This code loop single set of points in line #151
... View more
11-20-2019
05:03 AM
|
0
|
0
|
3180
|
|
POST
|
Joshua I have Plotted point features with JSON service and the Syntax/Format of point and polygon service is same as i shared polygon service with you. Here is Question that i asked before https://community.esri.com/thread/240873-use-webservices-with-arcgis-api Following is sample of my point service. [
{
"OBJECTID": 146,
"Splitter": "64",
"Comment": "DHA Phase05",
"Name": "Plaza POP ODB 02",
"ID": "2100604",
"Placement": "Aerial",
"POP": 21006,
"Shape": {
"srid": 32642,
"version": 1,
"points": [
{
"x": 301997.6824000003,
"y": 2746232.8489999995,
"z": null,
"m": null
}
],
"figures": [
{
"attribute": 1,
"pointOffset": 0
}
],
"shapes": [
{
"parentOffset": -1,
"figureOffset": 0,
"type": 1
}
],
"segments": []
}
},
{
"OBJECTID": 147,
"Splitter": "64",
"Comment": "DHA Phase06",
"Name": "Badar POP ODB Muhafiz",
"ID": "2100502",
"Placement": "Aerial",
"POP": 21005,
"Shape": {
"srid": 32642,
"version": 1,
"points": [
{
"x": 302831.8328999998,
"y": 2742953.342599999,
"z": null,
"m": null
}
],
"figures": [
{
"attribute": 1,
"pointOffset": 0
}
],
"shapes": [
{
"parentOffset": -1,
"figureOffset": 0,
"type": 1
}
],
"segments": []
}
}
]
... View more
11-17-2019
09:28 PM
|
0
|
2
|
3180
|
|
POST
|
Joshua I attached JSON file of my service and following is the response that i receive in my console.
... View more
11-17-2019
02:38 AM
|
0
|
4
|
3180
|
|
POST
|
Hi I have created JSON service with Node.js and use it to display polygons on map but Geometry is not showing while Legend is working properly as shown in attached image. <!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/Polygon",
"esri/widgets/Editor",
"esri/widgets/Legend",
"esri/layers/FeatureLayer",
"esri/geometry/projection",
"esri/geometry/SpatialReference"
], function(Map, MapView, esriRequest, Graphic,Polygon,Editor, Legend,FeatureLayer, projection, SpatialReference) {
projection.load()
let url ="http://localhost:7001/polygon"
let myData = []
let fields = [
{
name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{
name: "CATEGORY",
alias: "CATEGORY",
type: "string"
},
{
name: "TYPE",
alias: "TYPE",
type: "string"
},
{
name: "TOWN",
alias: "TOWN",
type: "string"
},
{
name: "BLOCK_PHASE_SECTOR",
alias: "BLOCK_PHASE_SECTOR",
type: "string"
},
{
name: "STREET",
alias: "STREET",
type: "string"
},
{
name: "DATE",
alias: "DATE",
type: "string"
}
];
let pTemplate = {
title: "{title}",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "CATEGORY",
label: "CATEGORY",
visible: true
},
{
fieldName: "TYPE",
label: "TYPE",
visible: true
},
{
fieldName: "TOWN",
label: "TOWN",
visible: true
},
{
fieldName: "BLOCK_PHASE_SECTOR",
label: "BLOCK_PHASE_SECTOR",
visible: true
},
{
fieldName: "STREET",
label: "STREET",
visible: true
},
{
fieldName: "DATE",
label: "DATE",
visible: true,
format: {
digitSeparator: true,
places: 0
}
}
]
}
]
};
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 Polygon({
rings:point,
spatialReference : {
wkid: 102100
}
});
})
let atts = {
"ObjectID": i,
"CATEGORY": result.CATEGORY,
"TYPE": result.TYPE,
"TOWN": result.TOWN,
"BLOCK_PHASE_SECTOR": result.BLOCK_PHASE_SECTOR,
"STREET": result.STREET,
"DATE": result.DATE
};
let graArr = resultPnts.map(function(pnt){
//let projectedPoint = projection.project(pnt,view.spatialReference);
let markerSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [100, 139, 79],
outline: {
// autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
let g =new Graphic({
geometry:pnt,
symbol: markerSymbol,
attributes: atts
})
myData.push(g)
})
return graArr
})
console.log(myData)
let layer = new FeatureLayer({
geometryType: "polygon",
source: myData,
fields: fields,
objectIdField: "ObjectID",
//renderer: dataRenderer,
popupTemplate: pTemplate
});
map.add(layer)
var legend = new Legend({
view: view,
layerInfos: [
{
layer: layer,
title: "Town"
}
]
});
view.ui.add(legend, 'bottom-left')
}
view.when(() =>{
fetchData()
.then(webservice)
view.popup.autoOpenEnabled = true; //disable popups
/* // Create the Editor
let editor = new Editor({
view: view
});
// Add widget to top-right of the view
view.ui.add(editor, "top-right");*/
})
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
11-16-2019
06:58 AM
|
0
|
6
|
3472
|
|
POST
|
Hi I am using esri-loader for React App. When i pass graphic to state it is not showing in my console it give blank array. can any one guide me where i am going to mistake. Consider line N0. 102 and 176 import React from 'react'
import { loadModules } from 'esri-loader';
import Axios from 'axios';
export default class Database extends React.Component {
constructor(props) {
super(props);
this.state = {
capacity: ['96F'],
comment: ['kawish'],
placement: ['buried'],
pop: ['2100360'],
geom:[]
}
this.button = React.createRef()
this.line_button = React.createRef()
}
componentDidMount() {
let view = this.props.view
let graphic
loadModules(["esri/widgets/Sketch","esri/tasks/support/Query", "esri/tasks/QueryTask", 'esri/widgets/Expand',
"esri/Graphic", "esri/views/draw/Draw", "esri/geometry/geometryEngine", "esri/layers/GraphicsLayer"
])
.then(([Sketch, Query, QueryTask, Expand, Graphic, Draw, geometryEngine, GraphicsLayer]) => {
view.ui.add(this.button.current, 'top-left')
// add the button for the draw tool
view.ui.add(this.line_button.current, "top-left");
const draw = new Draw({
view: view
});
// draw polyline button
this.buttonClick = (e) =>{
// view.graphics.removeAll();
// creates and returns an instance of PolyLineDrawAction
const action = draw.create("polyline");
// focus the view to activate keyboard shortcuts for sketching
view.focus();
// listen polylineDrawAction events to give immediate visual feedback
// to users as the line is being drawn on the view.
action.on(
[
"vertex-add",
"vertex-remove",
"cursor-update",
"redo",
"undo",
"draw-complete"
],
updateVertices
);
}
// Checks if the last vertex is making the line intersect itself.
function updateVertices(event) {
// create a polyline from returned vertices
if (event.vertices.length > 1) {
const result = createGraphic(event);
// if the last vertex is making the line intersects itself,
// prevent the events from firing
if (result.selfIntersects) {
event.preventDefault();
}
}
}
// create a new graphic presenting the polyline that is being drawn on the view
const createGraphic = (event) =>{
const vertices = event.vertices;
view.graphics.removeAll();
// a graphic representing the polyline that is being drawn
graphic = new Graphic({
geometry: {
type: "polyline",
paths: vertices,
spatialReference: view.spatialReference
},
symbol: {
type: "simple-line", // autocasts as new SimpleFillSymbol
color: [4, 90, 141],
width: 4,
cap: "round",
join: "round"
}
});
this.setState({
geom:graphic.geometry
})
// check if the polyline intersects itself.
const intersectingSegment = getIntersectingSegment(graphic.geometry);
// Add a new graphic for the intersecting segment.
if (intersectingSegment) {
view.graphics.addMany([graphic, intersectingSegment]);
}
// Just add the graphic representing the polyline if no intersection
else {
view.graphics.add(graphic);
}
// return intersectingSegment
return {
selfIntersects: intersectingSegment
};
}
// function that checks if the line intersects itself
function isSelfIntersecting(polyline) {
if (polyline.paths[0].length < 3) {
return false;
}
const line = polyline.clone();
//get the last segment from the polyline that is being drawn
const lastSegment = getLastSegment(polyline);
line.removePoint(0, line.paths[0].length - 1);
// returns true if the line intersects itself, false otherwise
return geometryEngine.crosses(lastSegment, line);
}
// Checks if the line intersects itself. If yes, change the last
// segment's symbol giving a visual feedback to the user.
function getIntersectingSegment(polyline) {
if (isSelfIntersecting(polyline)) {
return new Graphic({
geometry: getLastSegment(polyline),
symbol: {
type: "simple-line", // autocasts as new SimpleLineSymbol
style: "short-dot",
width: 3.5,
color: "yellow"
}
});
}
return null;
}
// Get the last segment of the polyline that is being drawn
function getLastSegment(polyline) {
const line = polyline.clone();
const lastXYPoint = line.removePoint(0, line.paths[0].length - 1);
const existingLineFinalPoint = line.getPoint(
0,
line.paths[0].length - 1
);
return {
type: "polyline",
spatialReference: view.spatialReference,
hasZ: false,
paths: [
[
[existingLineFinalPoint.x, existingLineFinalPoint.y],
[lastXYPoint.x, lastXYPoint.y]
]
]
};
}
console.log(this.state.geom)
});
}
save = async (e) =>{
//console.log(e)
const params = new URLSearchParams();
params.append('capacity', 'haseeb');
params.append('comment', this.state.comment);
params.append('placement', this.state.placement);
params.append('pop', this.state.pop);
// params.append('geom', this.state.geom);
await Axios.post("http://localhost:8080/post", params)
.then(response => console.log(response.data))
.catch((err) => console.log(err));
}
render() {
return (
<div>
<div
ref={this.line_button}
class="esri-widget esri-widget--button esri-interactive"
title="Draw polyline"
onClick={(e) => this.buttonClick(e)}
>
<span class="esri-icon-polyline"></span>
</div>
<form>
<label>Capacity</label>
<input type="text" />
<label>Comment</label>
<input type="text" />
<label>Placement</label>
<input type="text" />
<label>POP</label>
<input type="text" />
<label>Geometry</label>
<input type="text" /><br />
<button ref={this.button} onClick={this.save}>Save</button>
</form>
</div>
)
}
}
... View more
11-14-2019
05:21 AM
|
0
|
0
|
1093
|
|
POST
|
Is there any process to update GeoJSON on server.....???
... View more
11-13-2019
09:15 AM
|
0
|
2
|
2875
|
|
POST
|
Hi I have geojson service but when i use Editor widget to add feature on map. The problem is that feature shows on map after editing but not save into database... Can any one guide me to solve this problem... <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>GeoJSONLayer - 4.13</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.13/"></script>
<script>
require([
"esri/Map",
"esri/layers/GeoJSONLayer",
"esri/views/MapView",
"esri/widgets/Editor"
], function(Map, GeoJSONLayer, MapView, Editor) {
const url =
"http://localhost:3000/data";
const geojsonLayer = new GeoJSONLayer({
url: url
});
const map = new Map({
basemap: "gray",
layers: [geojsonLayer]
});
const view = new MapView({
container: "viewDiv",
center: [68.589073, 26.092168],
zoom: 8,
map: map
});
view.when(() => {
let editor = new Editor({
view:view
})
view.ui.add(editor, 'top-right')
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
... View more
11-13-2019
04:02 AM
|
0
|
4
|
3206
|
|
POST
|
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>
... View more
11-11-2019
08:53 AM
|
0
|
0
|
731
|
|
POST
|
Hi I am confused to calculate total length of line feature with arcgis API for java script. any one can help me...??? I found following code but it's not working. let geometryService = new GeometryService({
url:url
})
geometryService.simplify([line]).then(function (line) {
var areasAndLengthParams = new LengthsParameters({
lengthUnit: "kilometers",
polylines: line
});
console.log(areasAndLengthParams)
/* geometryService.Length(areasAndLengthParams).then(function (results) {
console.log("area: ", results.areas[0]);
console.log("length: ", results.lengths[0]);
}); */
});
... View more
11-11-2019
02:47 AM
|
0
|
1
|
2220
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 11-11-2021 01:04 AM | |
| 2 | 11-22-2022 01:18 AM | |
| 1 | 07-15-2021 08:05 AM | |
| 1 | 07-21-2019 03:12 AM |
Activity Feed
- Posted Optimization of GeoJSON layer on ArcGIS JavaScript Maps SDK Questions. 07-17-2023 01:59 AM
- Tagged Socket.io is crashing the page as the applyEdits() method calls to get data in near real-time on ArcGIS JavaScript Maps SDK Questions. 02-14-2023 09:41 PM
- Tagged Socket.io is crashing the page as the applyEdits() method calls to get data in near real-time on ArcGIS JavaScript Maps SDK Questions. 02-14-2023 09:41 PM
- Posted Socket.io is crashing the page as the applyEdits() method calls to get data in near real-time on ArcGIS JavaScript Maps SDK Questions. 02-14-2023 09:40 PM
- Got a Kudo for Failed to create layerview by using @arcgis/core 4.19.3 (React). 01-06-2023 12:10 AM
- Got a Kudo for Visualize the Points on basis of time difference of 5 minutes. 11-22-2022 01:21 AM
- Got a Kudo for Visualize the Points on basis of time difference of 5 minutes. 11-22-2022 01:21 AM
- Posted Visualize the Points on basis of time difference of 5 minutes on ArcGIS JavaScript Maps SDK Questions. 11-22-2022 01:18 AM
- Posted Timeout Error during loading of Geojson Layer on ArcGIS JavaScript Maps SDK Questions. 12-15-2021 03:58 AM
- Posted Re: Failed to create layerview by using @arcgis/core 4.19.3 (React) on ArcGIS JavaScript Maps SDK Questions. 11-24-2021 09:44 PM
- Posted Re: Failed to create layerview by using @arcgis/core 4.19.3 (React) on ArcGIS JavaScript Maps SDK Questions. 11-23-2021 10:53 PM
- Posted Re: Failed to create layerview by using @arcgis/core 4.19.3 (React) on ArcGIS JavaScript Maps SDK Questions. 11-18-2021 09:40 PM
- Posted Re: Failed to create layerview by using @arcgis/core 4.19.3 (React) on ArcGIS JavaScript Maps SDK Questions. 11-18-2021 09:38 PM
- Posted Re: Failed to create layerview by using @arcgis/core 4.19.3 (React) on ArcGIS JavaScript Maps SDK Questions. 11-16-2021 10:26 PM
- Posted Failed to create layerview by using @arcgis/core 4.19.3 (React) on ArcGIS JavaScript Maps SDK Questions. 11-11-2021 01:04 AM
- Posted Re: Checkbox in dropdown to select multiple attribute values on ArcGIS JavaScript Maps SDK Questions. 08-14-2021 06:25 AM
- Posted Re: Checkbox in dropdown to select multiple attribute values on ArcGIS JavaScript Maps SDK Questions. 08-11-2021 11:16 AM
- Posted Checkbox in dropdown to select multiple attribute values on ArcGIS JavaScript Maps SDK Questions. 08-10-2021 03:34 AM
- Got a Kudo for Re: Arcade expression in Uniquevalue. 07-15-2021 08:06 AM
- Posted Re: Arcade expression in Uniquevalue on ArcGIS JavaScript Maps SDK Questions. 07-15-2021 08:05 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
01-02-2024
04:00 PM
|