Hi,
I am trying to create buffer over feature layer on the basis of earth quake depth.
Here is what I have been trying, but it is not working.
could you please help me to find a solution?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Quetta Locations</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.3/"></script>
</head>
<body>
<!-- http://dservices3.arcgis.com/8rJe0yoNOfCTVYEj/arcgis/services/QuettaLayer/WFSServer?service=wfs&requ... -->
<div id="viewDiv"></div>
<img id="loadingImg" src="images/loading.gif"
style="position:absolute; right:50%; top:50%; z-index:100; display:none;" />
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/geometryEngine",
"esri/geometry/Point",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Graphic",
"dojo/dom",
"dojo/dom-style",
"esri/PopupTemplate",
"dojo/domReady!"
], function (
Map,
MapView,
FeatureLayer,
GraphicsLayer,
geometryEngine,
Point,
QueryTask,
Query,
SimpleRenderer,
SimpleMarkerSymbol,
Graphic,
dom,
domStyle,
PopupTemplate
) {
var map = new Map({
basemap: "gray"
});
var view = new MapView({
center: [66, 35],
container: "viewDiv",
map: map,
zoom: 4
});
var fl = new FeatureLayer({
title: "QuettaLocation",
id:0,
url: "http://services3.arcgis.com/8rJe0yoNOfCTVYEj/arcgis/rest/services/QuettaLocationD/FeatureServer/0?to....."//"http://services3.arcgis.com/8rJe0yoNOfCTVYEj/arcgis/rest/services/QuettaLocation/FeatureServer"
});
map.add(fl);
fl.then(function () {
view.extent = fl.fullExtent;
});
// helper functions
function showLoadingSpinner() {
var spinnerNode = dom.byId(loadingImg);
domStyle.set(spinnerNode, "display", "block");
}
function hideLoadingSpinner() {
var spinnerNode = dom.byId(loadingImg);
domStyle.set(spinnerNode, "display", "none");
}
function displayMyPolygon(polygonGeometry, aColorString, anOpacity) {
var aGraphic = new Graphic({
geometry: polygonGeometry,
symbol: new SimpleFillSymbol({ color: aColorString, style: "solid" })
});
// if opacity was not specified, default to 1.0
if (anOpacity) {
} else {
anOpacity = 1.0;
}
aGraphic.symbol.color.a = anOpacity;
graphicsLayer.graphics.add(aGraphic);
}
var graphicsLayer = new GraphicsLayer({
graphics: []
});
map.add(graphicsLayer);
//Buffer analysis function
var myGeometry;
function bufferbyDistance(depth)
{
var q = fl.createQuery();
q.where = "depth ='" + depth + "'";
q.returnGeometry = true;
var depthTask = new QueryTask({
url: "http://services3.arcgis.com/8rJe0yoNOfCTVYEj/arcgis/rest/services/QuettaLocation/FeatureServer"
});
return depthTask.execute(q).then(function (response){
return response.FeatureLayer[0].geometry;
}).then(function (geometry) {
myGeometry = geometryEngine.buffer(
geometry,
2,
"km"
);
displayMyPolygon(myGeometry , "red");
});
}
//showLoadingSpinner();
view.then(fl
.then(bufferbyDistance)
.then(hideLoadingSpinner)
);
});
</script>
</body>
</html>
