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.
1157 lines
36 KiB
1157 lines
36 KiB
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 { |
|
"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 { |
|
"success": false, |
|
"result": resTableData |
|
} |
|
} |
|
} |
|
else { |
|
resTableData = reqAxios; |
|
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 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){ |
|
|
|
return { |
|
"success": true, |
|
"result": result |
|
} |
|
} else { |
|
return { |
|
"success": false, |
|
"result": result |
|
} |
|
} |
|
} catch(err) { |
|
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) => { |
|
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 = ''; |
|
|
|
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++) { |
|
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 { |
|
"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({ |
|
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); |
|
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) { |
|
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 { |
|
"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); |
|
let payload = { |
|
"layer_name": layerName, |
|
"fid": fid, |
|
"column_value": column_value |
|
}; |
|
|
|
console.log('payload',payload); |
|
|
|
|
|
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'} |
|
}; |
|
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); |
|
|
|
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=" ">`; |
|
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>`; |
|
|
|
|
|
} |
|
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 |
|
} |
|
} |
|
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) { |
|
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) { |
|
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 { |
|
"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 result = null; |
|
let xmlDoc = null; |
|
|
|
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=" ">`; |
|
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>`; |
|
|
|
|
|
} |
|
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 |
|
} |
|
} |
|
coords += `</gml:coordinates> |
|
</gml:LinearRing> |
|
</gml:outerBoundaryIs> |
|
</gml:Polygon> |
|
</gml:polygonMember>`; |
|
} |
|
coords += `</gml:MultiPolygon>`; |
|
|
|
} |
|
|
|
|
|
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) { |
|
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 { |
|
"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 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) { |
|
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); |
|
|
|
|
|
if (resAxios.data) { |
|
let parser = new DOMParser(); |
|
xmlDoc = parser.parseFromString(resAxios.data, "text/xml"); |
|
let fillColor = ''; |
|
let cssParameter = xmlDoc.getElementsByTagName('sld:CssParameter'); |
|
for (let i=0; i<cssParameter.length; i++) { |
|
if (cssParameter[i].getAttribute('name') == 'fill') { |
|
fillColor = cssParameter[i].innerHTML; |
|
} |
|
else { |
|
if (cssParameter[i].getAttribute('name') == 'stroke') { |
|
fillColor = cssParameter[i].innerHTML; |
|
} |
|
|
|
} |
|
|
|
} |
|
result = fillColor; |
|
return { |
|
"success": true, |
|
"result": result |
|
} |
|
} |
|
else { |
|
result = resAxios; |
|
return { |
|
"success": false, |
|
"result": result |
|
} |
|
} |
|
} |
|
|
|
|
|
export const getImagePopup = async (type, id) => { |
|
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" |
|
} |
|
|
|
|
|
|
|
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. |
|
headers: { |
|
'Content-Type': 'application/json', |
|
'Authorization': 'Bearer '+window.localStorage.getItem('token') |
|
}, |
|
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 = {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); |
|
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; |
|
|
|
if (color.match(/^rgb/)) { |
|
|
|
color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/); |
|
|
|
r = color[1]; |
|
g = color[2]; |
|
b = color[3]; |
|
} |
|
else { |
|
|
|
color = +("0x" + color.slice(1).replace( |
|
color.length < 5 && /./g, '$&$&' |
|
) |
|
); |
|
|
|
r = color >> 16; |
|
g = color >> 8 & 255; |
|
b = color & 255; |
|
} |
|
|
|
hsp = Math.sqrt( |
|
0.299 * (r * r) + |
|
0.587 * (g * g) + |
|
0.114 * (b * b) |
|
); |
|
|
|
if (hsp>127.5) { |
|
|
|
return 'light'; |
|
} |
|
else { |
|
|
|
return 'dark'; |
|
} |
|
} |
|
|
|
export const numberWithCommas = (x) => { |
|
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); |
|
} |