You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1249 lines
42 KiB
1249 lines
42 KiB
3 years ago
|
import axios from 'axios';
|
||
|
import { wfsDispatcherUrl, appConfig } from './MapConst.js';
|
||
|
import { API_GET_COLUMN_TABLE, API_LOGIN, API_CREATE_NEW_LAYER, API_UPDATE_MAP, API_GET_IMAGE, API_UPDATE_FEATURE,
|
||
|
API_LAYER_ATTRIBUTE_BY_LAYERNAME, IMAGE_SEARCH } from './ApiConst.js';
|
||
|
import { findWhere } from 'underscore';
|
||
|
import { Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon } from 'ol/geom';
|
||
|
import { Circle as CircleStyle, Fill, Stroke, Style, Text } from 'ol/style';
|
||
|
import { Select } from 'ol/interaction';
|
||
|
import Feature from 'ol/Feature';
|
||
|
import {Vector as VectorLayer} from 'ol/layer';
|
||
|
import {Vector as VectorSource} from 'ol/source';
|
||
|
import {getArea, getLength} from 'ol/sphere';
|
||
|
|
||
|
export const reqTableData = async (typeName) => {
|
||
|
let xmlDoc = null;
|
||
|
let resTableData = null;
|
||
|
|
||
|
if (typeName === undefined) {
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
const config = {
|
||
|
headers: {'Content-Type': 'text/xml'}
|
||
|
};
|
||
|
|
||
|
const reqPayload = `<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:GetFeature service="WFS"
|
||
|
version="1.1.0"
|
||
|
outputFormat="JSON"
|
||
|
startIndex="0"
|
||
|
xmlns:wfs="http://www.opengis.net/wfs"
|
||
|
xmlns:ogc="http://www.opengis.net/ogc"
|
||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||
|
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
|
||
|
<wfs:Query typeName="${typeName}" srsName="EPSG:4326">
|
||
|
</wfs:Query>
|
||
|
</wfs:GetFeature>`;
|
||
|
|
||
|
let reqAxios = await axios.post(wfsDispatcherUrl, reqPayload, config).then((res) => { return res; }).catch(err => err.message);
|
||
|
console.log('reqAxios',reqAxios);
|
||
|
|
||
|
if (reqAxios.data !== undefined) {
|
||
|
console.log('typeof response', typeof(reqAxios.data));
|
||
|
if (typeof(reqAxios.data) == 'object') {
|
||
|
resTableData = reqAxios.data;
|
||
|
// return resTableData;
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": resTableData
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
let parser = new DOMParser();
|
||
|
if (reqAxios.data !== undefined) {
|
||
|
xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
|
||
|
resTableData = xmlDoc.getElementsByTagName('ows:ExceptionText')[0].childNodes[0].nodeValue;
|
||
|
}
|
||
|
console.log('xmlDoc',xmlDoc)
|
||
|
console.log('resTableData',resTableData);
|
||
|
// return resTableData;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": resTableData
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
resTableData = reqAxios;
|
||
|
// return resTableData;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": resTableData
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
/*export const getTableColumns = async (tableName) => {
|
||
|
|
||
|
let result = null;
|
||
|
|
||
|
let reqPayload = {
|
||
|
tableName: tableName
|
||
|
}
|
||
|
const config = {
|
||
|
headers: {
|
||
|
'Content-Type': 'application/json',
|
||
|
}
|
||
|
};
|
||
|
|
||
|
let reqAxios = await axios.post(API_GET_COLUMN_TABLE, reqPayload, config).then((res) => { return res; });
|
||
|
|
||
|
if (reqAxios.data !== undefined) {
|
||
|
result = reqAxios.data;
|
||
|
return result;
|
||
|
}
|
||
|
else {
|
||
|
result = reqAxios;
|
||
|
return result;
|
||
|
}
|
||
|
}*/
|
||
|
|
||
|
export const getTableColumns = async (tableName) => {
|
||
|
// let result = null;
|
||
|
let obj = {
|
||
|
tableName: tableName
|
||
|
}
|
||
|
const param = {
|
||
|
method: 'POST',
|
||
|
header: JSON.stringify({'Content-Type': 'application/json'}),
|
||
|
body: JSON.stringify(obj)
|
||
|
}
|
||
|
|
||
|
try {
|
||
|
const result = await fetch(API_GET_COLUMN_TABLE, param).then(response => response.json()).then(res => res)
|
||
|
if(result){
|
||
|
// result = result.data;
|
||
|
// return result;
|
||
|
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": result
|
||
|
}
|
||
|
} else {
|
||
|
// result = result;
|
||
|
// return result;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
} catch(err) {
|
||
|
// return err.message;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": err.message
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export const test = () => {
|
||
|
axios.get("http://localhost/osmap-php/index.php/siopas/user/test_user").then((res) => { console.log('test axios', res) });
|
||
|
}
|
||
|
|
||
|
export const loginSiopas = (username, password) => {
|
||
|
let result = null;
|
||
|
fetch(API_LOGIN, {
|
||
|
method: 'POST',
|
||
|
header: JSON.stringify({
|
||
|
'Content-Type': 'multipart/form-data'
|
||
|
}),
|
||
|
body: JSON.stringify({
|
||
|
username: username,
|
||
|
password: password
|
||
|
})
|
||
|
|
||
|
}).then((response) => {
|
||
|
console.log('response', response);
|
||
|
response.json();
|
||
|
}).then((responseJson) => {
|
||
|
console.log('responseJson login', responseJson)
|
||
|
return;
|
||
|
})
|
||
|
.catch((error) => {
|
||
|
console.log('error login', error)
|
||
|
});
|
||
|
}
|
||
|
|
||
|
export const getGeomType = async (layerName) => {
|
||
|
// The original url looks like this:
|
||
|
// let url = http://192.168.99.110/geoserver/rest/workspaces/bmd_denpasar/featuretypes/tanah_kantor_instansi_pemerintah.json
|
||
|
let url = appConfig.geoserver_host + 'rest/workspaces/' + appConfig.workspace_name + '/featuretypes/' + layerName + '.json';
|
||
|
let reqAxios = await axios.get(url).then((res) => { return res }).catch(err => err.message);
|
||
|
console.log('getGeomType reqAxios', reqAxios);
|
||
|
let geomType = '';
|
||
|
|
||
|
// check if return 404
|
||
|
if (reqAxios !== "Request failed with status code 404") {
|
||
|
if (reqAxios !== undefined) {
|
||
|
if (reqAxios.data !== undefined) {
|
||
|
if (reqAxios.data.featureType !== undefined) {
|
||
|
if (reqAxios.data.featureType.attributes !== undefined) {
|
||
|
if (reqAxios.data.featureType.attributes.attribute !== undefined) {
|
||
|
if (reqAxios.data.featureType.attributes.attribute.length > 0) {
|
||
|
let attribute = reqAxios.data.featureType.attributes.attribute;
|
||
|
for (let i=0; i < attribute.length; i++) {
|
||
|
// the attribute looks like this
|
||
|
// {
|
||
|
// "name": "the_geom",
|
||
|
// "minOccurs": 0,
|
||
|
// "maxOccurs": 1,
|
||
|
// "nillable": true,
|
||
|
// "binding": "com.vividsolutions.jts.geom.MultiPolygon"
|
||
|
// },
|
||
|
if (attribute[i].binding.includes('geom')) {
|
||
|
let str = attribute[i].binding;
|
||
|
let geomStr = str.substr(str.indexOf('geom')+5); // so I get the MultiPolygon (or other geom type provided in geoserver api)
|
||
|
geomType = geomStr;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
// return geomType;
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": geomType
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": reqAxios
|
||
|
};
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export const createNewLayer = async (reqPayload) => {
|
||
|
let payload = {
|
||
|
workspace_name: appConfig.workspace_name,
|
||
|
datastore_name: appConfig.datastore_name,
|
||
|
layer_name: reqPayload.layer_name,
|
||
|
layer_type: reqPayload.layer_type,
|
||
|
columns: reqPayload.columns
|
||
|
}
|
||
|
|
||
|
// let reqAxios = await axios.post(wfsDispatcherUrl, reqPayload, config).then((res) => { return res; });
|
||
|
|
||
|
let reqAxios = await axios({
|
||
|
method: 'post',
|
||
|
url: API_CREATE_NEW_LAYER,
|
||
|
headers: {
|
||
|
'Content-Type': 'application/json',
|
||
|
},
|
||
|
data: payload
|
||
|
}).then((res) => {
|
||
|
return res;
|
||
|
}).catch((error) => {
|
||
|
return error;
|
||
|
});
|
||
|
|
||
|
console.log('createNewLayer API',reqAxios);
|
||
|
|
||
|
return reqAxios;
|
||
|
}
|
||
|
|
||
|
|
||
|
export const updateFeature = async (layerName, fid, properties) => {
|
||
|
/*
|
||
|
Example:
|
||
|
|
||
|
Edit Attributes / Edit Feature
|
||
|
---------------------
|
||
|
URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
|
||
|
Method: POST
|
||
|
Request Payload:
|
||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
|
||
|
<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="geonode:test12" xmlns:feature="http://www.geonode.org/">
|
||
|
<wfs:Property>
|
||
|
<wfs:Name>nama_area</wfs:Name>
|
||
|
<wfs:Value>bandara3_edit</wfs:Value>
|
||
|
</wfs:Property>
|
||
|
<wfs:Property>
|
||
|
<wfs:Name>status_area</wfs:Name>
|
||
|
<wfs:Value>0</wfs:Value>
|
||
|
</wfs:Property>
|
||
|
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
|
||
|
<ogc:FeatureId fid="test12.3"/>
|
||
|
</ogc:Filter>
|
||
|
</wfs:Update>
|
||
|
</wfs:Transaction>
|
||
|
*/
|
||
|
|
||
|
console.log('layerName, fid, properties', layerName, fid, properties);
|
||
|
|
||
|
const config = {
|
||
|
headers: {'Content-Type': 'text/xml'}
|
||
|
};
|
||
|
let result = null;
|
||
|
let xmlDoc = null;
|
||
|
|
||
|
let xml_fid = `<ogc:FeatureId fid="${fid}"/>`;
|
||
|
let xml_properties = '';
|
||
|
|
||
|
for (let i=0; i<properties.length; i++) {
|
||
|
xml_properties += `
|
||
|
<wfs:Property>
|
||
|
<wfs:Name>${properties[i].label}</wfs:Name>
|
||
|
<wfs:Value>${properties[i].value}</wfs:Value>
|
||
|
</wfs:Property>`;
|
||
|
}
|
||
|
|
||
|
let payload = `<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:Transaction handle="Modified 1 feature" service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
|
||
|
<wfs:Update typeName="${appConfig.workspace_name}:${layerName}" xmlns:feature="http://siopas.co.id/bmd-denpasar">
|
||
|
${xml_properties}
|
||
|
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
|
||
|
${xml_fid}
|
||
|
</ogc:Filter>
|
||
|
</wfs:Update>
|
||
|
</wfs:Transaction>`;
|
||
|
|
||
|
let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message);
|
||
|
console.log('updateFeature reqAxios',reqAxios);
|
||
|
|
||
|
if (reqAxios.data !== undefined) {
|
||
|
console.log('typeof response', typeof(reqAxios.data));
|
||
|
let parser = new DOMParser();
|
||
|
xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
|
||
|
let status = xmlDoc.getElementsByTagName('wfs:Status')[0];
|
||
|
console.log('xml status', status);
|
||
|
// console.log('childNodes', xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0]);
|
||
|
let statusText = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName;
|
||
|
console.log('xml status text', xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName); // SUCCESS / FAILED
|
||
|
if (status !== undefined) {
|
||
|
// result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue;
|
||
|
// console.log('xml result', result);
|
||
|
if (statusText == 'SUCCESS') {
|
||
|
result = 'Success Update Feature';
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
else if (statusText == 'FAILED') {
|
||
|
result = 'Error Update Feature';
|
||
|
let errMessage = xmlDoc.getElementsByTagName('wfs:Message')[0].innerHTML;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": errMessage
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": "The entity name must immediately follow the entity reference."
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
result = reqAxios;
|
||
|
// return result;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
export const updateFeature2 = async (layerName, fid, column_value) => {
|
||
|
const config = {
|
||
|
headers: {'Content-Type': 'application/json'}
|
||
|
};
|
||
|
console.log('layerName', layerName);
|
||
|
console.log('fid', fid);
|
||
|
// console.log('properties',properties);
|
||
|
let payload = {
|
||
|
"layer_name": layerName,
|
||
|
"fid": fid,
|
||
|
"column_value": column_value
|
||
|
};
|
||
|
|
||
|
console.log('payload',payload);
|
||
|
|
||
|
// let reqAxios = await axios.post(API_UPDATE_FEATURE, payload, config).then(res => res).catch(err => err.message);
|
||
|
|
||
|
const param = {
|
||
|
method: 'POST',
|
||
|
header: JSON.stringify({'Content-Type': 'application/json'}),
|
||
|
body: JSON.stringify(payload)
|
||
|
}
|
||
|
|
||
|
const resFetch = await fetch(API_UPDATE_FEATURE, param).then(response => response.json()).then(res => res)
|
||
|
console.log('resFetch', resFetch);
|
||
|
|
||
|
|
||
|
console.log('updateFeature resFetch',resFetch);
|
||
|
if (resFetch !== undefined) {
|
||
|
if (resFetch.code_type == 'success') {
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": "Update Success"
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": "Update Failed"
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": resFetch
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export const updateMap = async (requestPayload) => {
|
||
|
|
||
|
/*let requestPayload = {
|
||
|
"map_title": "BMD Denpasar",
|
||
|
"map_zoom": 9,
|
||
|
"map_projection": "EPSG:3857",
|
||
|
"center_x": "12826670.196943447",
|
||
|
"center_y": "-967549.1600801547",
|
||
|
"map_layers": [
|
||
|
{
|
||
|
"idx": 0,
|
||
|
"layer_name": "OSM",
|
||
|
"layer_type": "base",
|
||
|
"layer_source": "OlSourceOsm",
|
||
|
"layer_visible": true,
|
||
|
"layer_position": 0
|
||
|
},
|
||
|
{
|
||
|
"idx": 1,
|
||
|
"layer_name": "point_tanah_kantor_desa_lurah0",
|
||
|
"layer_type": "Point",
|
||
|
"layer_source": {
|
||
|
"url": "http://192.168.99.110/geoserver/wms",
|
||
|
"params": {
|
||
|
"LAYERS": "bmd_denpasar:point_tanah_kantor_desa_lurah0",
|
||
|
"TILED": true,
|
||
|
"SLD": "http://192.168.99.110/geoserver/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetStyles&LAYERS=bmd_denpasar:point_tanah_kantor_desa_lurah0"
|
||
|
},
|
||
|
"serverType": "geoserver",
|
||
|
"transition": 0,
|
||
|
"crossOrigin": "anonymous"
|
||
|
},
|
||
|
"layer_visible": true,
|
||
|
"layer_position": 1
|
||
|
}
|
||
|
]
|
||
|
}*/
|
||
|
|
||
|
const config = {
|
||
|
headers: {'Content-Type': 'application/json'}
|
||
|
};
|
||
|
// console.log('requestPayload before axios', requestPayload);
|
||
|
let reqAxios = await axios.post(API_UPDATE_MAP, requestPayload, config).then(res => res ).catch(error => error);
|
||
|
return reqAxios;
|
||
|
}
|
||
|
|
||
|
|
||
|
export const getRandomColor = () => {
|
||
|
let letters = '0123456789ABCDEF';
|
||
|
let color = '#';
|
||
|
for (var i = 0; i < 6; i++) {
|
||
|
color += letters[Math.floor(Math.random() * 16)];
|
||
|
}
|
||
|
return color;
|
||
|
}
|
||
|
|
||
|
export const createNewFeature = async (obj) => {
|
||
|
/*
|
||
|
Create New Feature
|
||
|
-------------------
|
||
|
URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
|
||
|
Method: POST
|
||
|
Request Payload:
|
||
|
- layer name
|
||
|
- geom type (multi / single)
|
||
|
- map projection
|
||
|
- coordinates
|
||
|
- other feature atrributes (fields)
|
||
|
|
||
|
The obj example:
|
||
|
{
|
||
|
"layer_name": "test_bmd_2_point",
|
||
|
"layer_geom_type": "Point",
|
||
|
"map_projection": "EPSG:3857",
|
||
|
"coordinates": [
|
||
|
[12859380.865788266, -975611.0164268095]
|
||
|
],
|
||
|
"layer_attributes": [{
|
||
|
"idx": 0
|
||
|
"label": "nama_point"
|
||
|
"value": "nusa penida"
|
||
|
}]
|
||
|
}
|
||
|
|
||
|
Examples:
|
||
|
(Point)
|
||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
|
||
|
<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
|
||
|
<feature:test_bmd_2_point xmlns:feature="http://siopas.co.id/bmd-denpasar">
|
||
|
<feature:the_geom>
|
||
|
<gml:Point srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">11886499.833369536,-693527.4813667177</gml:coordinates>
|
||
|
</gml:Point>
|
||
|
</feature:the_geom>
|
||
|
<feature:nama_point>point1</feature:nama_point>
|
||
|
</feature:test_bmd_2_point>
|
||
|
</wfs:Insert>
|
||
|
</wfs:Transaction>
|
||
|
|
||
|
Full example documentation on src/assets/docs/wfs_example.txt file
|
||
|
*/
|
||
|
|
||
|
const config = {
|
||
|
headers: {'Content-Type': 'text/xml'}
|
||
|
};
|
||
|
let coords = ``;
|
||
|
let layer_attributes = ``;
|
||
|
let result = null;
|
||
|
let xmlDoc = null;
|
||
|
|
||
|
if (obj.layer_geom_type == "Point") {
|
||
|
let longitude = obj.coordinates[0][0];
|
||
|
let latitude = obj.coordinates[0][1];
|
||
|
coords = `<gml:Point srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">${longitude},${latitude}</gml:coordinates>
|
||
|
</gml:Point>`
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "MultiPoint") {
|
||
|
console.log('obj.coordinates', obj.coordinates);
|
||
|
/*coordinates: Array(2)
|
||
|
0: Array(1)
|
||
|
0: (2) [12854303.787587587, -955479.4157146217]
|
||
|
1: Array(1)
|
||
|
0: (2) [12855873.913617639, -955135.2785083359]*/
|
||
|
coords = `<gml:MultiPoint srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
|
||
|
for (let i=0; i<obj.coordinates.length; i++) {
|
||
|
let longitude = obj.coordinates[i][0][0];
|
||
|
let latitude = obj.coordinates[i][0][1];
|
||
|
coords += `<gml:pointMember>
|
||
|
<gml:Point>
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">${longitude},${latitude}</gml:coordinates>
|
||
|
</gml:Point>
|
||
|
</gml:pointMember>`;
|
||
|
}
|
||
|
coords += `</gml:MultiPoint>`;
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "LineString") {
|
||
|
console.log('obj.coordinates', obj.coordinates); // [ 0: (4) [Array(2), Array(2), Array(2), Array(2)] ]
|
||
|
|
||
|
coords = `<gml:LineString srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">`;
|
||
|
|
||
|
for(let i=0; i<obj.coordinates[0].length; i++) {
|
||
|
let longitude = obj.coordinates[0][i][0];
|
||
|
let latitude = obj.coordinates[0][i][1];
|
||
|
let lastLoop = obj.coordinates[0].length - 1;
|
||
|
if (i == lastLoop) {
|
||
|
coords += `${longitude},${latitude}`; // no space at the end of loop
|
||
|
} else {
|
||
|
coords += `${longitude},${latitude} `; // with space
|
||
|
}
|
||
|
}
|
||
|
|
||
|
coords += `</gml:coordinates>
|
||
|
</gml:LineString>`;
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "MultiLineString") {
|
||
|
console.log('obj.coordinates', obj.coordinates);
|
||
|
// coordinates: Array(2)
|
||
|
// 0: Array(1)
|
||
|
// 0: (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
|
||
|
// 1: Array(1)
|
||
|
// 0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
|
||
|
|
||
|
coords += `<gml:MultiLineString srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
|
||
|
|
||
|
for (let i=0; i < obj.coordinates.length; i++) {
|
||
|
coords += `<gml:lineMember>
|
||
|
<gml:LineString>
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">`;
|
||
|
for(let j=0; j < obj.coordinates[i][0].length; j++) {
|
||
|
let longitude = obj.coordinates[i][0][j][0];
|
||
|
let latitude = obj.coordinates[i][0][j][1];
|
||
|
let lastLoop = obj.coordinates[i][0].length - 1;
|
||
|
|
||
|
if (j == lastLoop) {
|
||
|
coords += `${longitude},${latitude}`; // no space at the end of loop
|
||
|
} else {
|
||
|
coords += `${longitude},${latitude} `; // with space
|
||
|
}
|
||
|
}
|
||
|
coords += `</gml:coordinates>
|
||
|
</gml:LineString>
|
||
|
</gml:lineMember>`;
|
||
|
}
|
||
|
|
||
|
coords += `</gml:MultiLineString>`;
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "Polygon") {
|
||
|
console.log('obj.coordinates', obj.coordinates);
|
||
|
/*coordinates: Array(1)
|
||
|
0: Array(1)
|
||
|
0: (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
|
||
|
*/
|
||
|
coords = `<gml:Polygon srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
|
||
|
<gml:outerBoundaryIs>
|
||
|
<gml:LinearRing>
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">`;
|
||
|
// 11885890.360625308,-693614.4345447493 11886066.325063715,-693607.6666826681 11886047.016727008,-693545.3625436059 11885890.360625308,-693556.9077170598 11885891.754008677,-693576.0169747006 11885881.005051253,-693576.0169747006 11885890.360625308,-693614.4345447493
|
||
|
for (let i=0; i < obj.coordinates[0][0].length; i++) {
|
||
|
let longitude = obj.coordinates[0][0][i][0];
|
||
|
let latitude = obj.coordinates[0][0][i][1];
|
||
|
let lastLoop = obj.coordinates[0][0].length - 1;
|
||
|
if (i == lastLoop) {
|
||
|
coords += `${longitude},${latitude}`; // no space at the end of loop
|
||
|
} else {
|
||
|
coords += `${longitude},${latitude} `; // with space
|
||
|
}
|
||
|
}
|
||
|
coords += `</gml:coordinates>
|
||
|
</gml:LinearRing>
|
||
|
</gml:outerBoundaryIs>
|
||
|
</gml:Polygon>`;
|
||
|
|
||
|
// console.log('coords', coords);
|
||
|
// return;
|
||
|
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "MultiPolygon") {
|
||
|
console.log('obj.coordinates', obj.coordinates);
|
||
|
/*coordinates: Array(2)
|
||
|
0: Array(1)
|
||
|
0: [Array(5)]
|
||
|
0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
|
||
|
1: Array(1)
|
||
|
0: [Array(5)]
|
||
|
0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
|
||
|
*/
|
||
|
|
||
|
coords += `<gml:MultiPolygon srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
|
||
|
for(let i=0; i<obj.coordinates.length; i++) {
|
||
|
coords += `
|
||
|
<gml:polygonMember>
|
||
|
<gml:Polygon>
|
||
|
<gml:outerBoundaryIs>
|
||
|
<gml:LinearRing>
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">`;
|
||
|
for (let j=0; j<obj.coordinates[i][0][0].length; j++) {
|
||
|
let longitude = obj.coordinates[i][0][0][j][0];
|
||
|
let latitude = obj.coordinates[i][0][0][j][1];
|
||
|
let lastLoop = obj.coordinates[i][0][0].length - 1;
|
||
|
if (j == lastLoop) {
|
||
|
coords += `${longitude},${latitude}`; // no space at the end of loop
|
||
|
} else {
|
||
|
coords += `${longitude},${latitude} `; // with space
|
||
|
}
|
||
|
}
|
||
|
// 11886589.213954791,-694367.2474235861 11886875.42730794,-694519.1158225475 11887167.481749926,-694495.7515563164 11887161.640661087,-694805.3290865673 11886729.400086945,-694787.805820048 11886612.57831015,-694700.1894874518 11886589.213954791,-694367.2474235861
|
||
|
coords += `</gml:coordinates>
|
||
|
</gml:LinearRing>
|
||
|
</gml:outerBoundaryIs>
|
||
|
</gml:Polygon>
|
||
|
</gml:polygonMember>`;
|
||
|
}
|
||
|
coords += `
|
||
|
</gml:MultiPolygon>`;
|
||
|
|
||
|
}
|
||
|
|
||
|
if (obj.layer_attributes) {
|
||
|
if (obj.layer_attributes.length > 0) {
|
||
|
for(let i=0; i<obj.layer_attributes.length; i++) {
|
||
|
layer_attributes += `<feature:${obj.layer_attributes[i].label}>${obj.layer_attributes[i].value}</feature:${obj.layer_attributes[i].label}>`;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
let payload = `<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:Transaction handle="Added 1 feature to '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
|
||
|
<wfs:Insert handle="Added 1 feature to '' via MapLoom.">
|
||
|
<feature:${obj.layer_name} xmlns:feature="http://siopas.co.id/bmd-denpasar">
|
||
|
<feature:the_geom>
|
||
|
${coords}
|
||
|
</feature:the_geom>
|
||
|
${layer_attributes}
|
||
|
</feature:${obj.layer_name}>
|
||
|
</wfs:Insert>
|
||
|
</wfs:Transaction>`;
|
||
|
|
||
|
console.log('payload', payload);
|
||
|
|
||
|
let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message);
|
||
|
console.log('createNewFeature reqAxios',reqAxios);
|
||
|
|
||
|
if (reqAxios.data !== undefined) {
|
||
|
// <?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult handle="Added 1 feature to '' via MapLoom."><ogc:FeatureId fid="test_bmd_2_point.3"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:SUCCESS/> </wfs:Status> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
|
||
|
console.log('typeof response', typeof(reqAxios.data));
|
||
|
let parser = new DOMParser();
|
||
|
xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
|
||
|
let status = xmlDoc.getElementsByTagName('wfs:Status')[0];
|
||
|
console.log('xml status', status);
|
||
|
let statusText = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName;
|
||
|
console.log('xml status text', xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nextSibling.localName); // SUCCESS / FAILED
|
||
|
if (status !== undefined) {
|
||
|
// result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue;
|
||
|
// console.log('xml result', result);
|
||
|
if (statusText == 'SUCCESS') {
|
||
|
result = 'Successfully create new feature!';
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
else if (statusText == 'FAILED') {
|
||
|
result = 'Error create new feature';
|
||
|
let errMessage = xmlDoc.getElementsByTagName('wfs:Message')[0].innerHTML;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": errMessage
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
result = reqAxios;
|
||
|
// return result;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
export const updateFeatureGeometry = async (obj) => {
|
||
|
|
||
|
/*
|
||
|
Edit Geometry
|
||
|
-----------------
|
||
|
URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
|
||
|
Method: POST
|
||
|
Request Payload:
|
||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
|
||
|
<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="bmd_denpasar:test_bmd_2_point" xmlns:feature="http://siopas.co.id/bmd-denpasar">
|
||
|
<wfs:Property>
|
||
|
<wfs:Name>the_geom</wfs:Name>
|
||
|
<wfs:Value>
|
||
|
<gml:Point srsName="EPSG:3857" xmlns:gml="http://www.opengis.net/gml">
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">12630296.161275087,-871501.5712076114</gml:coordinates>
|
||
|
</gml:Point>
|
||
|
</wfs:Value>
|
||
|
</wfs:Property>
|
||
|
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
|
||
|
<ogc:FeatureId fid="test_bmd_2_point.1"/>
|
||
|
</ogc:Filter>
|
||
|
</wfs:Update>
|
||
|
</wfs:Transaction>
|
||
|
Response:
|
||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
|
||
|
<wfs:InsertResult>
|
||
|
<ogc:FeatureId fid="none"/>
|
||
|
</wfs:InsertResult>
|
||
|
<wfs:TransactionResult handle="Modified 1 feature in '' via MapLoom.">
|
||
|
<wfs:Status>
|
||
|
<wfs:SUCCESS/>
|
||
|
</wfs:Status>
|
||
|
</wfs:TransactionResult>
|
||
|
</wfs:WFS_TransactionResponse>
|
||
|
*/
|
||
|
|
||
|
const config = {
|
||
|
headers: {'Content-Type': 'text/xml'}
|
||
|
};
|
||
|
let coords = ``;
|
||
|
// let layer_attributes = ``;
|
||
|
let result = null;
|
||
|
let xmlDoc = null;
|
||
|
|
||
|
// Note: obj.layer_name == fid, ex: test_bmd.3
|
||
|
let splittedLayerName = obj.layer_name.toString().split(".");
|
||
|
let layer_name = splittedLayerName[0];
|
||
|
let fid = splittedLayerName[1];
|
||
|
|
||
|
if (obj.layer_geom_type == "Point") {
|
||
|
let longitude = obj.coordinates[0][0];
|
||
|
let latitude = obj.coordinates[0][1];
|
||
|
coords = `<gml:Point srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">${longitude},${latitude}</gml:coordinates>
|
||
|
</gml:Point>`
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "MultiPoint") {
|
||
|
console.log('obj.coordinates', obj.coordinates);
|
||
|
/*coordinates: Array(2)
|
||
|
0: Array(1)
|
||
|
0: (2) [12854303.787587587, -955479.4157146217]
|
||
|
1: Array(1)
|
||
|
0: (2) [12855873.913617639, -955135.2785083359]*/
|
||
|
coords = `<gml:MultiPoint srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
|
||
|
for (let i=0; i<obj.coordinates.length; i++) {
|
||
|
let longitude = obj.coordinates[i][0][0];
|
||
|
let latitude = obj.coordinates[i][0][1];
|
||
|
coords += `<gml:pointMember>
|
||
|
<gml:Point>
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">${longitude},${latitude}</gml:coordinates>
|
||
|
</gml:Point>
|
||
|
</gml:pointMember>`;
|
||
|
}
|
||
|
coords += `</gml:MultiPoint>`;
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "LineString") {
|
||
|
console.log('obj.coordinates', obj.coordinates); // [ 0: (4) [Array(2), Array(2), Array(2), Array(2)] ]
|
||
|
|
||
|
coords = `<gml:LineString srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">`;
|
||
|
|
||
|
for(let i=0; i<obj.coordinates[0].length; i++) {
|
||
|
let longitude = obj.coordinates[0][i][0];
|
||
|
let latitude = obj.coordinates[0][i][1];
|
||
|
let lastLoop = obj.coordinates[0].length - 1;
|
||
|
if (i == lastLoop) {
|
||
|
coords += `${longitude},${latitude}`; // no space at the end of loop
|
||
|
} else {
|
||
|
coords += `${longitude},${latitude} `; // with space
|
||
|
}
|
||
|
}
|
||
|
|
||
|
coords += `</gml:coordinates>
|
||
|
</gml:LineString>`;
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "MultiLineString") {
|
||
|
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "Polygon") {
|
||
|
console.log('obj.coordinates', obj.coordinates);
|
||
|
/*coordinates: Array(1)
|
||
|
0: Array(1)
|
||
|
0: (6) [Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)]
|
||
|
*/
|
||
|
coords = `<gml:Polygon srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">
|
||
|
<gml:outerBoundaryIs>
|
||
|
<gml:LinearRing>
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">`;
|
||
|
// 11885890.360625308,-693614.4345447493 11886066.325063715,-693607.6666826681 11886047.016727008,-693545.3625436059 11885890.360625308,-693556.9077170598 11885891.754008677,-693576.0169747006 11885881.005051253,-693576.0169747006 11885890.360625308,-693614.4345447493
|
||
|
for (let i=0; i < obj.coordinates[0][0].length; i++) {
|
||
|
let longitude = obj.coordinates[0][0][i][0];
|
||
|
let latitude = obj.coordinates[0][0][i][1];
|
||
|
let lastLoop = obj.coordinates[0][0].length - 1;
|
||
|
if (i == lastLoop) {
|
||
|
coords += `${longitude},${latitude}`; // no space at the end of loop
|
||
|
} else {
|
||
|
coords += `${longitude},${latitude} `; // with space
|
||
|
}
|
||
|
}
|
||
|
coords += `</gml:coordinates>
|
||
|
</gml:LinearRing>
|
||
|
</gml:outerBoundaryIs>
|
||
|
</gml:Polygon>`;
|
||
|
|
||
|
// console.log('coords', coords);
|
||
|
// return;
|
||
|
|
||
|
}
|
||
|
else if (obj.layer_geom_type == "MultiPolygon") {
|
||
|
console.log('obj.coordinates', obj.coordinates);
|
||
|
/*coordinates: Array(2)
|
||
|
0: Array(1)
|
||
|
0: [Array(5)]
|
||
|
0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
|
||
|
1: Array(1)
|
||
|
0: [Array(5)]
|
||
|
0: (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]
|
||
|
*/
|
||
|
|
||
|
coords += `<gml:MultiPolygon srsName="${obj.map_projection}" xmlns:gml="http://www.opengis.net/gml">`;
|
||
|
for(let i=0; i<obj.coordinates.length; i++) {
|
||
|
coords += `<gml:polygonMember>
|
||
|
<gml:Polygon>
|
||
|
<gml:outerBoundaryIs>
|
||
|
<gml:LinearRing>
|
||
|
<gml:coordinates cs="," decimal="." ts=" ">`;
|
||
|
for (let j=0; j<obj.coordinates[i][0][0].length; j++) {
|
||
|
let longitude = obj.coordinates[i][0][0][j][0];
|
||
|
let latitude = obj.coordinates[i][0][0][j][1];
|
||
|
let lastLoop = obj.coordinates[i][0][0].length - 1;
|
||
|
if (j == lastLoop) {
|
||
|
coords += `${longitude},${latitude}`; // no space at the end of loop
|
||
|
} else {
|
||
|
coords += `${longitude},${latitude} `; // with space
|
||
|
}
|
||
|
}
|
||
|
// 11886589.213954791,-694367.2474235861 11886875.42730794,-694519.1158225475 11887167.481749926,-694495.7515563164 11887161.640661087,-694805.3290865673 11886729.400086945,-694787.805820048 11886612.57831015,-694700.1894874518 11886589.213954791,-694367.2474235861
|
||
|
coords += `</gml:coordinates>
|
||
|
</gml:LinearRing>
|
||
|
</gml:outerBoundaryIs>
|
||
|
</gml:Polygon>
|
||
|
</gml:polygonMember>`;
|
||
|
}
|
||
|
coords += `</gml:MultiPolygon>`;
|
||
|
|
||
|
}
|
||
|
|
||
|
// if (obj.layer_attributes) {
|
||
|
// if (obj.layer_attributes.length > 0) {
|
||
|
// for(let i=0; i<obj.layer_attributes.length; i++) {
|
||
|
// layer_attributes += `<feature:${obj.layer_attributes[i].label}>${obj.layer_attributes[i].value}</feature:${obj.layer_attributes[i].label}>`;
|
||
|
// }
|
||
|
// }
|
||
|
// }
|
||
|
|
||
|
let payload = `<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:Transaction handle="Modified 1 feature in '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
|
||
|
<wfs:Update handle="Modified 1 feature in '' via MapLoom." typeName="${appConfig.workspace_name}:${layer_name}" xmlns:feature="http://siopas.co.id/bmd-denpasar">
|
||
|
<wfs:Property>
|
||
|
<wfs:Name>the_geom</wfs:Name>
|
||
|
<wfs:Value>
|
||
|
${coords}
|
||
|
</wfs:Value>
|
||
|
</wfs:Property>
|
||
|
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
|
||
|
<ogc:FeatureId fid="${fid}"/>
|
||
|
</ogc:Filter>
|
||
|
</wfs:Update>
|
||
|
</wfs:Transaction>`;
|
||
|
|
||
|
console.log('payload', payload);
|
||
|
|
||
|
let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message);
|
||
|
console.log('createNewFeature reqAxios',reqAxios);
|
||
|
|
||
|
if (reqAxios.data !== undefined) {
|
||
|
// <?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult handle="Added 1 feature to '' via MapLoom."><ogc:FeatureId fid="test_bmd_2_point.3"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:SUCCESS/> </wfs:Status> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
|
||
|
console.log('typeof response', typeof(reqAxios.data));
|
||
|
let parser = new DOMParser();
|
||
|
xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
|
||
|
let status = xmlDoc.getElementsByTagName('wfs:Status')[0];
|
||
|
console.log('xml status', status);
|
||
|
result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue;
|
||
|
console.log('xml result', result);
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
result = reqAxios;
|
||
|
// return result;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
export const deleteFeature = async (layerName, fid) => {
|
||
|
/*
|
||
|
Delete Feature
|
||
|
-------------------------------
|
||
|
URL: http://192.168.99.110/geoserver/wfs/WfsDispatcher
|
||
|
Method: POST
|
||
|
Request Payload:
|
||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:Transaction handle="Removed 1 feature from '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
|
||
|
<wfs:Delete handle="Removed 1 feature from '' via MapLoom." typeName="bmd_denpasar:test_bmd_2_point" xmlns:feature="http://siopas.co.id/bmd-denpasar">
|
||
|
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
|
||
|
<ogc:FeatureId fid="test_bmd_2_point.1"/>
|
||
|
</ogc:Filter>
|
||
|
</wfs:Delete>
|
||
|
</wfs:Transaction>
|
||
|
Response:
|
||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:WFS_TransactionResponse version="1.0.0" xmlns:ogc="http://www.opengis.net/ogc" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd">
|
||
|
<wfs:InsertResult>
|
||
|
<ogc:FeatureId fid="none"/>
|
||
|
</wfs:InsertResult>
|
||
|
<wfs:TransactionResult handle="Removed 1 feature from '' via MapLoom.">
|
||
|
<wfs:Status>
|
||
|
<wfs:SUCCESS/>
|
||
|
</wfs:Status>
|
||
|
</wfs:TransactionResult>
|
||
|
</wfs:WFS_TransactionResponse>
|
||
|
*/
|
||
|
const config = {
|
||
|
headers: {'Content-Type': 'text/xml'}
|
||
|
};
|
||
|
let result = null;
|
||
|
let xmlDoc = null;
|
||
|
// let xml_fid = `<ogc:FeatureId fid="${fid}"/>`;
|
||
|
let payload = `<?xml version="1.0" encoding="UTF-8"?>
|
||
|
<wfs:Transaction handle="Removed 1 feature from '' via MapLoom." service="WFS" version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/wfs.xsd">
|
||
|
<wfs:Delete handle="Removed 1 feature from '' via MapLoom." typeName="${appConfig.workspace_name}:${layerName}" xmlns:feature="http://siopas.co.id/bmd-denpasar">
|
||
|
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
|
||
|
<ogc:FeatureId fid="${fid}"/>
|
||
|
</ogc:Filter>
|
||
|
</wfs:Delete>
|
||
|
</wfs:Transaction>`;
|
||
|
let reqAxios = await axios.post(wfsDispatcherUrl, payload, config).then(res => res).catch(err => err.message);
|
||
|
console.log('deleteFeature reqAxios',reqAxios);
|
||
|
|
||
|
if (reqAxios.data !== undefined) {
|
||
|
// <?xml version="1.0" encoding="UTF-8"?><wfs:WFS_TransactionResponse version="1.0.0" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://192.168.99.110:80/geoserver/schemas/wfs/1.0.0/WFS-transaction.xsd"><wfs:InsertResult handle="Added 1 feature to '' via MapLoom."><ogc:FeatureId fid="test_bmd_2_point.3"/></wfs:InsertResult> <wfs:TransactionResult handle="Added 1 feature to '' via MapLoom."> <wfs:Status> <wfs:SUCCESS/> </wfs:Status> </wfs:TransactionResult></wfs:WFS_TransactionResponse>
|
||
|
let parser = new DOMParser();
|
||
|
xmlDoc = parser.parseFromString(reqAxios.data, "text/xml");
|
||
|
let status = xmlDoc.getElementsByTagName('wfs:Status')[0];
|
||
|
console.log('xml status', status);
|
||
|
result = xmlDoc.getElementsByTagName('wfs:Status')[0].childNodes[0].nodeValue;
|
||
|
console.log('xml result', result);
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
result = reqAxios;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
export const getLayerColor = async (SLD_URL) => {
|
||
|
|
||
|
let result = null;
|
||
|
let xmlDoc = null;
|
||
|
let resAxios = await axios.get(SLD_URL).then(res => res).catch(err => err.message);
|
||
|
|
||
|
// console.log('getLayerColor resAxios', resAxios);
|
||
|
|
||
|
if (resAxios.data) {
|
||
|
let parser = new DOMParser();
|
||
|
xmlDoc = parser.parseFromString(resAxios.data, "text/xml");
|
||
|
let fillColor = '';
|
||
|
let cssParameter = xmlDoc.getElementsByTagName('sld:CssParameter');
|
||
|
// console.log('cssParameter', cssParameter);
|
||
|
for (let i=0; i<cssParameter.length; i++) {
|
||
|
// console.log('getFill ?', cssParameter[i].getAttribute('name') == 'fill');
|
||
|
if (cssParameter[i].getAttribute('name') == 'fill') {
|
||
|
fillColor = cssParameter[i].innerHTML;
|
||
|
}
|
||
|
else {
|
||
|
if (cssParameter[i].getAttribute('name') == 'stroke') {
|
||
|
fillColor = cssParameter[i].innerHTML;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
}
|
||
|
// console.log('fillColor', fillColor);
|
||
|
result = fillColor;
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
result = resAxios;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
export const getImagePopup = async (type, id) => {
|
||
|
// console.log("type", type);
|
||
|
let category = '';
|
||
|
if(type==="m_sales"){
|
||
|
category = "m_sales";
|
||
|
}else if(type==="m_office"){
|
||
|
category = "office";
|
||
|
}else if(type==="m_customer"){
|
||
|
category = "customer";
|
||
|
}else if(type==="m_employee"){
|
||
|
category = "employee"
|
||
|
}else if(type==="realisasi"){
|
||
|
category = "laporan-planning"
|
||
|
}
|
||
|
else if (type==="report_activity") {
|
||
|
category = "report_activity"
|
||
|
}
|
||
|
|
||
|
// const config = {
|
||
|
// headers: {
|
||
|
// 'Content-type': `application/json`,
|
||
|
// 'Authorization': `Bearer ${window.localStorage.getItem('token')}`
|
||
|
// }
|
||
|
// };
|
||
|
|
||
|
// let token = window.localStorage.getItem('token');
|
||
|
// let config = {
|
||
|
// headers:
|
||
|
// {
|
||
|
// Authorization: `Bearer ${token}`,
|
||
|
// "Content-type": `application/json`
|
||
|
// }
|
||
|
// };
|
||
|
|
||
|
let payload = {
|
||
|
"paging": {"start": 0, "length": -1},
|
||
|
"columns": [
|
||
|
{"name":"category", "logic_operator": "=", "value": category.toString(), "operator": "and"},
|
||
|
{"name": "ref_id", "logic_operator": "=", "value": id.toString(), "operator": "and"}
|
||
|
],
|
||
|
"orders": {"columns": ["image"], "ascending": true}
|
||
|
}
|
||
|
|
||
|
let config = {
|
||
|
method: 'POST', // *GET, POST, PUT, DELETE, etc.
|
||
|
// mode: 'cors', // no-cors, *cors, same-origin
|
||
|
// cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
|
||
|
// credentials: 'same-origin', // include, *same-origin, omit
|
||
|
headers: {
|
||
|
'Content-Type': 'application/json',
|
||
|
'Authorization': 'Bearer '+window.localStorage.getItem('token')
|
||
|
// 'Content-Type': 'application/x-www-form-urlencoded',
|
||
|
},
|
||
|
// redirect: 'follow', // manual, *follow, error
|
||
|
// referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
|
||
|
body: JSON.stringify(payload) // body data type must match "Content-Type" header
|
||
|
}
|
||
|
|
||
|
let resFetch = await fetch(IMAGE_SEARCH, config).then(response => response.json()).then(res => res);
|
||
|
// let resAxios = await axios.post(IMAGE_SEARCH, requestPayload, config).then(res => res ).catch(error => error);
|
||
|
let resAxios = {data: resFetch} // karena pake fetch return api nya gak di dalam data.data
|
||
|
return resAxios;
|
||
|
}
|
||
|
|
||
|
|
||
|
export const getLayerAttribute = async (layerName) => {
|
||
|
const param = {
|
||
|
method: 'GET',
|
||
|
header: JSON.stringify({'Content-Type': 'application/json'}),
|
||
|
}
|
||
|
|
||
|
try {
|
||
|
const result = await fetch(API_LAYER_ATTRIBUTE_BY_LAYERNAME+layerName, param).then(response => response.json()).then(res => res)
|
||
|
|
||
|
if (result.code_type == 'success') {
|
||
|
return {
|
||
|
"success": true,
|
||
|
"result": result
|
||
|
}
|
||
|
}
|
||
|
else {
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": result.code_message
|
||
|
}
|
||
|
}
|
||
|
} catch(err) {
|
||
|
console.log(err);
|
||
|
// alert(err.message.toString());
|
||
|
// return err;
|
||
|
return {
|
||
|
"success": false,
|
||
|
"result": err.message.toString()
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
|
||
|
/**
|
||
|
* Format length output.
|
||
|
* @param {LineString} line The line.
|
||
|
* @return {string} The formatted length.
|
||
|
*/
|
||
|
export const formatLength = (line) => {
|
||
|
var length = getLength(line);
|
||
|
var output;
|
||
|
if (length > 100) {
|
||
|
output = (Math.round(length / 1000 * 100) / 100) +
|
||
|
' ' + 'km';
|
||
|
} else {
|
||
|
output = (Math.round(length * 100) / 100) +
|
||
|
' ' + 'm';
|
||
|
}
|
||
|
return output;
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* Format area output.
|
||
|
* @param {Polygon} polygon The polygon.
|
||
|
* @return {string} Formatted area.
|
||
|
*/
|
||
|
export const formatArea = (polygon) => {
|
||
|
var area = getArea(polygon);
|
||
|
console.log('area', area);
|
||
|
var output;
|
||
|
if (area > 10000) {
|
||
|
output = (Math.round(area / 1000000 * 100) / 100) +
|
||
|
' ' + 'km2';
|
||
|
} else {
|
||
|
output = (Math.round(area * 100) / 100) +
|
||
|
' ' + 'm2';
|
||
|
}
|
||
|
return output;
|
||
|
};
|
||
|
|
||
|
export const lightOrDark = (color) => {
|
||
|
let r, g, b, hsp;
|
||
|
|
||
|
// Check the format of the color, HEX or RGB?
|
||
|
if (color.match(/^rgb/)) {
|
||
|
|
||
|
// If HEX --> store the red, green, blue values in separate variables
|
||
|
color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
|
||
|
|
||
|
r = color[1];
|
||
|
g = color[2];
|
||
|
b = color[3];
|
||
|
}
|
||
|
else {
|
||
|
|
||
|
// If RGB --> Convert it to HEX: http://gist.github.com/983661
|
||
|
color = +("0x" + color.slice(1).replace(
|
||
|
color.length < 5 && /./g, '$&$&'
|
||
|
)
|
||
|
);
|
||
|
|
||
|
r = color >> 16;
|
||
|
g = color >> 8 & 255;
|
||
|
b = color & 255;
|
||
|
}
|
||
|
|
||
|
// HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html
|
||
|
hsp = Math.sqrt(
|
||
|
0.299 * (r * r) +
|
||
|
0.587 * (g * g) +
|
||
|
0.114 * (b * b)
|
||
|
);
|
||
|
|
||
|
// Using the HSP value, determine whether the color is light or dark
|
||
|
if (hsp>127.5) {
|
||
|
|
||
|
return 'light';
|
||
|
}
|
||
|
else {
|
||
|
|
||
|
return 'dark';
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export const numberWithCommas = (x) => {
|
||
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||
|
}
|