mfajri
/
gis_app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

buffer layer option

master
Choirul Fajri 2 years ago
parent
f54ab8452b
commit
1ac28eba6b
2 changed files with 68 additions and 341 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      index.html
  2. 389
      main.js

20
index.html
Unescape View File

@ -62,7 +62,7 @@
<div class="row"> <div class="row">
<div class="col-3"> <div class="col-3">
<button class="btn btn-ligth btn-md active" role="button" aria-pressed="true"> <button class="btn btn-ligth btn-md active" role="button" aria-pressed="true">
<span class="h5">Clip & Buffer</span> <span class="h5">Buffer</span>
</button> </button>
</div> </div>
<div class="col-2"> <div class="col-2">
@ -85,7 +85,12 @@
<div class="card ml-3"> <div class="card ml-3">
<div class="card-body"> <div class="card-body">
<form> <form>
<legend>Clip & Buffer Proccess</legend> <legend>Buffer Proccess</legend>
<div class="form-group">
<label for="exampleFormControlSelect">Select Feature Layer</label>
<select class="form-control" id="Layer" required>
</select>
</div>
<div class="form-group"> <div class="form-group">
<label for="exampleFormControlSelect1">Radius Distance</label> <label for="exampleFormControlSelect1">Radius Distance</label>
<input type="number" class="form-control" id="radiusDistance" value="100"> <input type="number" class="form-control" id="radiusDistance" value="100">
@ -93,12 +98,19 @@
<div class="form-group"> <div class="form-group">
<label for="exampleFormControlSelect2">Linear Unit</label> <label for="exampleFormControlSelect2">Linear Unit</label>
<select multiple class="form-control" id="Unit" required> <select multiple class="form-control" id="Unit" required>
<option value="meters">Meter</option> <option value="meters" selected>Meter</option>
<option value="kilometers">Kilometer</option> <option value="kilometers">Kilometer</option>
<option value="miles">Miles</option> <option value="miles">Miles</option>
</select> </select>
</div> </div>
<button id="procces" type="button" class="btn btn-ligth">Submit</button> <div class="row">
<div class="col">
<button id="procces" type="button" class="btn btn-ligth">Submit</button>
</div>
<div class="col">
<button id="reset" type="button" class="btn btn-ligth">Reset</button>
</div>
</div>
</form> </form>
</div> </div>
</div> </div>

389
main.js
Unescape View File

@ -11,7 +11,8 @@ $(document).ready(function () {
"esri/Graphic", "esri/Graphic",
"esri/rest/support/LinearUnit", "esri/rest/support/LinearUnit",
"esri/rest/geoprocessor", "esri/rest/geoprocessor",
], (esriConfig, WebMap, MapView, Home, LayerList, GraphicsLayer, Graphic, LinearUnit, geoprocessor) => { "esri/layers/FeatureLayer"
], (esriConfig, WebMap, MapView, Home, LayerList, GraphicsLayer, Graphic, LinearUnit, geoprocessor, FeatureLayer) => {
esriConfig.portalUrl = "https://dev.gisportal.id/portal"; esriConfig.portalUrl = "https://dev.gisportal.id/portal";
const gpUrl = "https://dev.gisportal.id/server/rest/services/mfajri/Buffer_Sample_Geoprocessing/GPServer/Buffer"; const gpUrl = "https://dev.gisportal.id/server/rest/services/mfajri/Buffer_Sample_Geoprocessing/GPServer/Buffer";
@ -22,7 +23,7 @@ $(document).ready(function () {
} }
}); });
const view = new MapView({ let view = new MapView({
container: "content", container: "content",
map: webmap, map: webmap,
zoom: 16, zoom: 16,
@ -58,6 +59,7 @@ $(document).ready(function () {
} }
} }
}); });
view.ui.add(layerList, { view.ui.add(layerList, {
position: "top-right" position: "top-right"
@ -78,347 +80,31 @@ $(document).ready(function () {
graphicsLayer.removeAll(); graphicsLayer.removeAll();
let radius = document.getElementById("radiusDistance").value; let radius = document.getElementById("radiusDistance").value;
let unit = document.getElementById("Unit").value; let unit = document.getElementById("Unit").value;
const params = { let source = document.getElementById("Layer").value;
Pipeline_Inspection: { const featureLayer = new FeatureLayer({
"displayFieldName": "", url: source
"geometryType": "esriGeometryPoint", });
"spatialReference": { let query = featureLayer.createQuery()
"wkid": 4326, query.where = "1=1"
"latestWkid": 4326 featureLayer.queryFeatures(query).then((result)=>{
}, const params = {
"fields": [ Pipeline_Inspection: result,
{ Distance__value_or_field_: {
"name": "OBJECTID", "distance": radius,
"type": "esriFieldTypeOID", "units": unit
"alias": "OBJECTID" },
}, f: "pjson"
{ };
"name": "globalid", geoprocessor.execute(gpUrl, params).then(drawResultData);
"type": "esriFieldTypeGlobalID", })
"alias": "GlobalID",
"length": 38
},
{
"name": "easting",
"type": "esriFieldTypeDouble",
"alias": "EASTING"
},
{
"name": "northing",
"type": "esriFieldTypeDouble",
"alias": "NORTHING"
},
{
"name": "anomaly_category",
"type": "esriFieldTypeString",
"alias": "ANOMALY_CATEGORY",
"length": 255
},
{
"name": "functional_location",
"type": "esriFieldTypeString",
"alias": "FUNCTIONAL_LOCATION",
"length": 500
},
{
"name": "anomaly_name",
"type": "esriFieldTypeString",
"alias": "ANOMALY_NAME",
"length": 255
},
{
"name": "anomaly_code",
"type": "esriFieldTypeString",
"alias": "ANOMALY_CODE",
"length": 100
},
{
"name": "sap_notification",
"type": "esriFieldTypeString",
"alias": "SAP_NOTIFICATION",
"length": 255
},
{
"name": "anomaly_reff_number",
"type": "esriFieldTypeString",
"alias": "ANOMALY_REFF_NUMBER",
"length": 100
},
{
"name": "anomaly_close",
"type": "esriFieldTypeString",
"alias": "ANOMALY_CLOSE",
"length": 10
},
{
"name": "anomaly_date_created",
"type": "esriFieldTypeDate",
"alias": "ANOMALY_DATE_CREATED",
"length": 8
},
{
"name": "anomaly_created_by",
"type": "esriFieldTypeString",
"alias": "ANOMALY_CREATED_BY",
"length": 100
},
{
"name": "anomaly_desc",
"type": "esriFieldTypeString",
"alias": "ANOMALY_DESC",
"length": 255
},
{
"name": "anomaly_risk",
"type": "esriFieldTypeString",
"alias": "ANOMALY_RISK",
"length": 100
},
{
"name": "anomaly_status",
"type": "esriFieldTypeString",
"alias": "ANOMALY_STATUS",
"length": 50
},
{
"name": "anomaly_comment",
"type": "esriFieldTypeString",
"alias": "ANOMALY_COMMENT",
"length": 500
},
{
"name": "action_assign_to",
"type": "esriFieldTypeString",
"alias": "ACTION_ASSIGN_TO",
"length": 100
},
{
"name": "action_comment",
"type": "esriFieldTypeString",
"alias": "ACTION_COMMENT",
"length": 500
},
{
"name": "kp",
"type": "esriFieldTypeString",
"alias": "KP",
"length": 255
},
{
"name": "survey_date",
"type": "esriFieldTypeDate",
"alias": "SURVEY_DATE",
"length": 8
},
{
"name": "status_validated",
"type": "esriFieldTypeString",
"alias": "Status Validated",
"length": 255
},
{
"name": "created_date",
"type": "esriFieldTypeDate",
"alias": "created_date",
"length": 8
},
{
"name": "created_user",
"type": "esriFieldTypeString",
"alias": "created_user",
"length": 255
},
{
"name": "last_edited_date",
"type": "esriFieldTypeDate",
"alias": "last_edited_date",
"length": 8
},
{
"name": "last_edited_user",
"type": "esriFieldTypeString",
"alias": "last_edited_user",
"length": 255
}
],
"features": [
{
"attributes": {
"OBJECTID": 809,
"EASTING": 479156.0,
"NORTHING": 9864462.0,
"ANOMALY_CATEGORY": "Row Walking Survey",
"FUNCTIONAL_LOCATION": "HDL/CPA /OIL/TRANS/8_CPA_TO_SNP",
"ANOMALY_NAME": "Corrosion Eviden",
"ANOMALY_CODE": "RWW-CE",
"SAP_NOTIFICATION": null,
"ANOMALY_REFF_NUMBER": "RWW-CE-8",
"ANOMALY_CLOSE": "No",
"ANOMALY_DATE_CREATED": 1678161600000,
"ANOMALY_CREATED_BY": "Rascal",
"ANOMALY_DESC": "Test drive",
"ANOMALY_RISK": "1 (High) - Immediate Action",
"ANOMALY_STATUS": "Open",
"ANOMALY_COMMENT": "No comment aku",
"ACTION_ASSIGN_TO": "PO/OSF/INS/PIM",
"ACTION_COMMENT": null,
"KP": null,
"SURVEY_DATE": 1678161600000,
"STATUS_VALIDATED": "Validated",
"STATUS_REVIEW": null,
"REVIEWED_BY": null,
"GlobalID": "{0AC28FE4-B997-4B36-A96F-F72AAA38E013}"
},
"geometry": {
"x": 116.81264485400004,
"y": -1.2262399559999722
}
},
{
"attributes": {
"OBJECTID": 1609,
"EASTING": 479156.0,
"NORTHING": 9864462.0,
"ANOMALY_CATEGORY": "Row Walking Survey",
"FUNCTIONAL_LOCATION": "HDL/CPA /OIL/TRANS/8_CPA_TO_SNP",
"ANOMALY_NAME": "3rd Party Activity",
"ANOMALY_CODE": "RWW-3PA",
"SAP_NOTIFICATION": null,
"ANOMALY_REFF_NUMBER": "RWW-3PA-7",
"ANOMALY_CLOSE": "No",
"ANOMALY_DATE_CREATED": 1678161600000,
"ANOMALY_CREATED_BY": "Rascal",
"ANOMALY_DESC": "Test drive",
"ANOMALY_RISK": "2 (Medium) - Non-Standard Condition",
"ANOMALY_STATUS": "Open",
"ANOMALY_COMMENT": "No comment aku",
"ACTION_ASSIGN_TO": "PO/OSF/INS/PIM",
"ACTION_COMMENT": null,
"KP": null,
"SURVEY_DATE": 1678161600000,
"STATUS_VALIDATED": "Validated",
"STATUS_REVIEW": null,
"REVIEWED_BY": null,
"GlobalID": "{AC962425-CF81-4A62-AC94-2A322E4C0579}"
},
"geometry": {
"x": 116.81264485400004,
"y": -1.2262399559999722
}
},
{
"attributes": {
"OBJECTID": 1610,
"EASTING": 479156.0,
"NORTHING": 9864462.0,
"ANOMALY_CATEGORY": "Row Walking Survey",
"FUNCTIONAL_LOCATION": "HDL/CPA /OIL/TRANS/8_CPA_TO_SNP",
"ANOMALY_NAME": "3rd Party Activity",
"ANOMALY_CODE": "RWW-3PA",
"SAP_NOTIFICATION": null,
"ANOMALY_REFF_NUMBER": "RWW-3PA-7",
"ANOMALY_CLOSE": "No",
"ANOMALY_DATE_CREATED": 1678161600000,
"ANOMALY_CREATED_BY": "Rascal",
"ANOMALY_DESC": "Test drive",
"ANOMALY_RISK": "2 (Medium) - Non-Standard Condition",
"ANOMALY_STATUS": "Open",
"ANOMALY_COMMENT": "No comment aku",
"ACTION_ASSIGN_TO": "PO/OSF/INS/PIM",
"ACTION_COMMENT": null,
"KP": null,
"SURVEY_DATE": 1678161600000,
"STATUS_VALIDATED": "Validated",
"STATUS_REVIEW": null,
"REVIEWED_BY": null,
"GlobalID": "{016D9D44-CA20-4EA5-8DEA-B526A4A3F538}"
},
"geometry": {
"x": 116.81264485400004,
"y": -1.2262399559999722
}
},
{
"attributes": {
"OBJECTID": 3208,
"EASTING": 479156.0,
"NORTHING": 9864462.0,
"ANOMALY_CATEGORY": "Row Walking Survey",
"FUNCTIONAL_LOCATION": "HDL/CPA /OIL/TRANS/8_CPA_TO_SNP",
"ANOMALY_NAME": "Corrosion Eviden",
"ANOMALY_CODE": "RWW-CE",
"SAP_NOTIFICATION": null,
"ANOMALY_REFF_NUMBER": "RWW-CE-8",
"ANOMALY_CLOSE": "No",
"ANOMALY_DATE_CREATED": 1678161600000,
"ANOMALY_CREATED_BY": "Rascal",
"ANOMALY_DESC": "Test drive",
"ANOMALY_RISK": "1 (High) - Immediate Action",
"ANOMALY_STATUS": "Open",
"ANOMALY_COMMENT": "No comment aku",
"ACTION_ASSIGN_TO": "PO/OSF/INS/PIM",
"ACTION_COMMENT": null,
"KP": null,
"SURVEY_DATE": 1678161600000,
"STATUS_VALIDATED": "Validated",
"STATUS_REVIEW": null,
"REVIEWED_BY": null,
"GlobalID": "{49D3D5C9-B644-4868-B522-F687E6968167}"
},
"geometry": {
"x": 116.81264485400004,
"y": -1.2262399559999722
}
},
{
"attributes": {
"OBJECTID": 3608,
"EASTING": 479156.0,
"NORTHING": 9864462.0,
"ANOMALY_CATEGORY": "Row Walking Survey",
"FUNCTIONAL_LOCATION": "HDL/CPA /OIL/TRANS/8_CPA_TO_SNP",
"ANOMALY_NAME": "Marker/Sign",
"ANOMALY_CODE": "RWW-SMS",
"SAP_NOTIFICATION": null,
"ANOMALY_REFF_NUMBER": "RWW-SMS-6",
"ANOMALY_CLOSE": "No",
"ANOMALY_DATE_CREATED": 1678161600000,
"ANOMALY_CREATED_BY": "Rascal",
"ANOMALY_DESC": "Test drive",
"ANOMALY_RISK": "3 (Low) - Monitoring/Observation",
"ANOMALY_STATUS": "Open",
"ANOMALY_COMMENT": "No comment aku",
"ACTION_ASSIGN_TO": "PO/OSF/INS/PIM",
"ACTION_COMMENT": null,
"KP": "kp 123",
"SURVEY_DATE": 1659326400000,
"STATUS_VALIDATED": "Validated",
"STATUS_REVIEW": null,
"REVIEWED_BY": null,
"GlobalID": "{E12BD9BE-FFDF-4D94-A39F-A4FECD8E7717}"
},
"geometry": {
"x": 116.81264485400004,
"y": -1.2262399559999722
}
}
],
"exceededTransferLimit": false
},
Distance__value_or_field_: {
"distance": radius,
"units": unit
},
f: "pjson"
};
geoprocessor.execute(gpUrl, params).then(drawResultData);
} }
const drawResultData = function (result) { const drawResultData = function (result) {
const resultFeatures = result.results[0].value.features; const resultFeatures = result.results[0].value.features;
const viewshedGraphics = resultFeatures.map((feature) => { const viewshedGraphics = resultFeatures.map((feature) => {
feature.symbol = fillSymbol; feature.symbol = fillSymbol;
console.log(feature); // console.log(feature);
return feature; return feature;
}); });
@ -436,6 +122,35 @@ $(document).ready(function () {
}); });
} }
view.when( ()=> {
view.map.loadAll().then(() => {
view.map.layers.forEach((layer) => {
let url = layer.url
let layerId = layer.layerId
let layerSource = url+"/"+layerId
$('#Layer').append('<option value="'+layerSource+'">'+layer.title+'</option>')
})
})
})
document.getElementById('reset').addEventListener('click', e => {
resetClipnBuffer()
})
const resetClipnBuffer = function() {
graphicsLayer.removeAll();
const foundLayer = webmap.allLayers.find(function(layer) {
return layer.title === "PIPELINE INSPECTION";
});
// console.log("Layer",foundLayer)
}
}); });

Write Preview
Loading…
Cancel
Save