geotoolsconnector
Version:
Fast and reliable way to analize geospatial data.
1,102 lines (1,013 loc) • 49.5 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>GeoTools</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./logo.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"
integrity="sha512-yFjZbTYRCJodnuyGlsKamNE/LlEaEAxSUDe5+u61mV8zzqJVFOH7TnULE2/PP/l5vKWpUNnF4VGVkXh3MjgLsg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<style>
html, body {
overflow: auto;
min-height:100%;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.file-upload {
height: 200px;
width: 200px;
border-radius: 100px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border: 4px solid #FFFFFF;
overflow: hidden;
background-image: linear-gradient(to bottom, #2590EB 50%, #FFFFFF 50%);
background-size: 100% 200%;
transition: all 1s;
color: #FFFFFF;
font-size: 100px;
}
input[type='file'] {
height: 200px;
width: 200px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}
.file-upload:hover {
background-position: 0 -100%;
color: #2590EB;
}
#layerList {
background-color: darkgrey;
z-index: 2;
position: absolute;
top: 50px;
right: 20px;
width: max-content;
padding: 20px;
}
.layerListBtn {
float: right;
}
</style>
<body style="height: 100vh;">
<div id="sidebar" class="d-flex flex-column flex-shrink-0 p-3 text-white" style="width: 280px; background-color: #2590EB; height: 100%; position: absolute;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="./logo.png" alt="" srcset="">
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<p>Drop your .geojson file here:</p>
<hr>
<div class="wrapper">
<div class="file-upload">
<input id="fileInput" type="file" accept=".geojson" />
<i class="fa fa-arrow-up"></i>
</div>
</div>
</li>
<hr>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#dissolveModal">
Dissolve
</a>
</li>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#intersectionModal">
Intersection
</a>
</li>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#centroidModal">
Centroid
</a>
</li>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#differenceModal">
Difference
</a>
</li>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#polygonizeModal">
Polygonize
</a>
</li>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#contoursModal">
Contours
</a>
</li>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#simplifyModal">
Simplify
</a>
</li>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#multiparttosinglepartsModal">
Multipart to singleparts
</a>
</li>
<li>
<a href="#" class="nav-link text-white" data-toggle="modal" data-target="#pipeModal">
Pipe
</a>
</li>
</ul>
</div>
<div style="width: calc(100% - 280px); float: right; padding: 20px;">
<div id="layerList" class="rounded">
<div>
<span>Layer list:</span>
</div><br>
</div>
<div id="map" style="position: fixed; top: 0; left: 280px; bottom: 0; right: 0%;"></div>
</div>
<div id="dissolveModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Dissolve</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelection" id="dissolveSelection"></select>
<br>
<hr>
<p>Dissolve by:</p>
<input type="text" id="dissolveBy">
<br>
<small>Seperate different properties with a comma (first, second, third)</small>
</div>
<div class="modal-footer">
<button id="dissolveModalProcess" type="button" class="btn btn-primary" data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
<div id="intersectionModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Intersection</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer 1:</p>
<select class="layerSelection" id="intersectionSelection1"></select>
<br>
<hr>
<p>Input layer 2:</p>
<select class="layerSelection" id="intersectionSelection2"></select>
</div>
<div class="modal-footer">
<button id="intersectionModalProcess" type="button" class="btn btn-primary"data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
<div id="centroidModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centroid</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelection" id="centroidSelection"></select>
</div>
<div class="modal-footer">
<button id="centroidModalProcess" type="button" class="btn btn-primary" data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
<div id="differenceModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Difference</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer 1:</p>
<select class="layerSelection" id="differenceSelection1"></select>
<br>
<hr>
<p>Input layer 2:</p>
<select class="layerSelection" id="differenceSelection2"></select>
</div>
<div class="modal-footer">
<button id="differenceModalProcess" type="button" class="btn btn-primary"data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
<div id="polygonizeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Polygonize</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelection" id="polygonizeSelection"></select>
</div>
<div class="modal-footer">
<button id="polygonizeModalProcess" type="button" class="btn btn-primary" data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
<div id="contoursModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Generate contours</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelection" id="contoursSelection"></select>
</div>
<div class="modal-footer">
<button id="contoursModalProcess" type="button" class="btn btn-primary" data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
<div id="simplifyModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Simplify</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelection" id="simplifySelection"></select>
<br>
<hr>
<p>Geometry type:</p>
<select id="simplifySelectionType">
<option value="linestring">Line</option>
<option value="Polygon">Polygon</option>
</select>
</div>
<div class="modal-footer">
<button id="simplifyModalProcess" type="button" class="btn btn-primary" data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
<div id="multiparttosinglepartsModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Multipart to singleparts</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelection" id="multiparttosinglepartsSelection"></select>
<br>
<hr>
<p>Geometry type:</p>
<select id="multiparttosinglepartsSelectionType">
<option value="linestring">Line</option>
<option value="Polygon">Polygon</option>
</select>
</div>
<div class="modal-footer">
<button id="multiparttosinglepartsModalProcess" type="button" class="btn btn-primary" data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
<div id="dissolvePipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Dissolve</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelectionPipe" id="dissolveSelectionPipe"></select>
<br>
<hr>
<p>Dissolve by:</p>
<input type="text" id="dissolveByPipe"></select>
<br>
<small>Seperate different properties with a comma (first, second, third)</small>
<br>
<hr>
<input type="text" id="dissolvePipeModalResultTag">
<br>
<small>Insert a tag for the result (for an example: "C")</small>
</div>
<div class="modal-footer">
<button id="dissolveModalAddToPipe" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#pipeModal">Add to Pipe</button>
</div>
</div>
</div>
</div>
<div id="intersectionPipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Intersection</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer 1:</p>
<select class="layerSelectionPipe" id="intersectionSelection1Pipe"></select>
<br>
<hr>
<p>Input layer 2:</p>
<select class="layerSelectionPipe" id="intersectionSelection2Pipe"></select>
<br>
<hr>
<input type="text" id="intersectionPipeModalResultTag">
<br>
<small>Insert a tag for the result (for an example: "C")</small>
</div>
<div class="modal-footer">
<button id="intersectionModalAddToPipe" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#pipeModal">Add to Pipe</button>
</div>
</div>
</div>
</div>
<div id="centroidPipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centroid</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelectionPipe" id="centroidSelectionPipe"></select>
<br>
<hr>
<input type="text" id="centroidPipeModalResultTag">
<br>
<small>Insert a tag for the result (for an example: "C")</small>
</div>
<div class="modal-footer">
<button id="centroidModalAddToPipe" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#pipeModal">Add to Pipe</button>
</div>
</div>
</div>
</div>
<div id="differencePipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Difference</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer 1:</p>
<select class="layerSelectionPipe" id="differenceSelection1Pipe"></select>
<br>
<hr>
<p>Input layer 2:</p>
<select class="layerSelectionPipe" id="differenceSelection2Pipe"></select>
<br>
<hr>
<input type="text" id="differencePipeModalResultTag">
<br>
<small>Insert a tag for the result (for an example: "C")</small>
</div>
<div class="modal-footer">
<button id="differenceModalAddToPipe" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#pipeModal">Add to Pipe</button>
</div>
</div>
</div>
</div>
<div id="polygonizePipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Polygonize</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelectionPipe" id="polygonizeSelectionPipe"></select>
<br>
<hr>
<input type="text" id="polygonizePipeModalResultTag">
<br>
<small>Insert a tag for the result (for an example: "C")</small>
</div>
<div class="modal-footer">
<button id="polygonizeModalAddToPipe" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#pipeModal">Add to Pipe</button>
</div>
</div>
</div>
</div>
<div id="contoursPipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Contours</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelectionPipe" id="contoursSelectionPipe"></select>
<br>
<hr>
<input type="text" id="contoursPipeModalResultTag">
<br>
<small>Insert a tag for the result (for an example: "C")</small>
</div>
<div class="modal-footer">
<button id="contoursModalAddToPipe" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#pipeModal">Add to Pipe</button>
</div>
</div>
</div>
</div>
<div id="simplifyPipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Simplify</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelectionPipe" id="simplifySelectionPipe"></select>
<br>
<hr>
<p>Geometry type:</p>
<select id="simplifySelectionTypePipe">
<option value="linestring">Line</option>
<option value="Polygon">Polygon</option>
</select>
<br>
<hr>
<input type="text" id="simplifyPipeModalResultTag">
<br>
<small>Insert a tag for the result (for an example: "C")</small>
</div>
<div class="modal-footer">
<button id="simplifyModalAddToPipe" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#pipeModal">Add to Pipe</button>
</div>
</div>
</div>
</div>
<div id="multiparttosinglepartsPipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Multipart to singleparts</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layer:</p>
<select class="layerSelectionPipe" id="multiparttosinglepartsSelectionPipe"></select>
<br>
<hr>
<p>Geometry type:</p>
<select id="multiparttosinglepartsSelectionTypePipe">
<option value="linestring">Line</option>
<option value="Polygon">Polygon</option>
</select>
<br>
<hr>
<input type="text" id="multiparttosinglepartsPipeModalResultTag">
<br>
<small>Insert a tag for the result (for an example: "C")</small>
</div>
<div class="modal-footer">
<button id="multiparttosinglepartsModalAddToPipe" type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" href="#pipeModal">Add to Pipe</button>
</div>
</div>
</div>
</div>
<div id="pipeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Pipe</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Input layers:</p>
<div id="pipeLayersCheckBoxes"></div>
<button class="btn btn-primary" id="addCheckedLayersToPipe">Add to pipe</button>
<hr>
<div id="pipeLayersWithTags"></div>
<hr>
<div class="btn-group" role="group" id="pipeProcessesButtonGroup">
<a data-dismiss="modal" data-toggle="modal" href="#dissolvePipeModal" type="button" class="btn btn-primary btn-sm" id="pipeDissolve">Dissolve</a>
<a data-dismiss="modal" data-toggle="modal" href="#intersectionPipeModal" type="button" class="btn btn-primary btn-sm" id="pipeInteresection">Interesection</a>
<a data-dismiss="modal" data-toggle="modal" href="#centroidPipeModal" type="button" class="btn btn-primary btn-sm" id="pipeCentroid">Centroid</a>
<a data-dismiss="modal" data-toggle="modal" href="#differencePipeModal" type="button" class="btn btn-primary btn-sm" id="pipeDifference">Difference</a>
<a data-dismiss="modal" data-toggle="modal" href="#polygonizePipeModal" type="button" class="btn btn-primary btn-sm" id="pipePolygonize">Polygonize</a>
<a data-dismiss="modal" data-toggle="modal" href="#contoursPipeModal" type="button" class="btn btn-primary btn-sm" id="pipeContours">Contours</a>
<a data-dismiss="modal" data-toggle="modal" href="#simplifyPipeModal" type="button" class="btn btn-primary btn-sm" id="pipeSimplify">Simplify</a>
<a data-dismiss="modal" data-toggle="modal" href="#multiparttosinglepartsPipeModal" type="button" class="btn btn-primary btn-sm" id="pipeMultiparttosingleparts">Multipart to singleparts</a>
</div>
<br>
<br>
<div id="pipeProcessesTagAssign"></div>
<br>
<hr>
<div>
Which layers do you want as results?
<input type="text" id="pipeResults">
<br>
<small>Insert only tags of layers you want as results. (Example: "C, D, E")</small>
</div>
</div>
<div class="modal-footer">
<button id="pipeModalProcess" type="button" class="btn btn-primary" data-dismiss="modal">Process</button>
</div>
</div>
</div>
</div>
</body>
<script>
const map = new ol.Map({
layers: [],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
}),
});
var inputFileText = null;
var pipeLayerTagArray = [];
var pipeProcessTagArray = [];
var defaultStyle = {
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(0, 234, 255, 0.51)'
}),
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(0, 205, 255, 1)',
width: 1
})
})
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 205, 255, 1)',
width: 3
})
}),
'Polygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 234, 255, 0.51)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 205, 255, 1)',
width: 1
})
}),
'MultiPoint': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(0, 234, 255, 0.51)'
}),
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(0, 205, 255, 1)',
width: 1
})
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 205, 255, 1)',
width: 3
})
}),
'MultiPolygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 234, 255, 0.51)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(0, 205, 255, 1)',
width: 1
})
})
};
var resultStyle = {
'Point': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.68)'
}),
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 1)',
width: 1
})
})
}),
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 1)',
width: 3
})
}),
'Polygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.68)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 1)',
width: 1
})
}),
'MultiPoint': new ol.style.Style({
image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.68)'
}),
radius: 5,
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 1)',
width: 1
})
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 1)',
width: 3
})
}),
'MultiPolygon': new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 0, 0, 0.68)'
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 0, 0, 1)',
width: 1
})
})
};
var defaultStyleFunction = function(feature, resolution) {
var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
return featureStyleFunction.call(feature, resolution);
}
else {
return defaultStyle[feature.getGeometry().getType()];
}
};
var resultStyleFunction = function(feature, resolution) {
var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
return featureStyleFunction.call(feature, resolution);
}
else {
return resultStyle[feature.getGeometry().getType()];
}
};
$("#fileInput").on("change", function() {
var file = $('#fileInput').prop('files');
const reader = new FileReader();
reader.readAsText(file[0]);
reader.onload = function(e) {
inputFileText = reader.result;
const inputVectorSource = new ol.source.Vector({});
const inputVectorLayer = new ol.layer.Vector({
source: inputVectorSource,
style: defaultStyleFunction,
properties: {
name: file[0].name,
rawFile: inputFileText
}
});
map.addLayer(inputVectorLayer);
addLayerToLayerList(file[0].name);
$(".layerSelection").append($('<option>', {
value: file[0].name,
text: file[0].name
}));
$("#pipeLayersCheckBoxes").append($('<input/>').attr({
type: "checkbox",
id: file[0].name,
value: file[0].name,
class: "pipeLayerCheckBox"
}));
$("#pipeLayersCheckBoxes").append(' <label for="'+ file[0].name +'">'+ file[0].name +'</label><br>');
var features = new ol.format.GeoJSON().readFeatures(inputFileText);
inputVectorSource.addFeatures(features);
map.getView().fit(inputVectorSource.getExtent());
};
});
function addLayerToLayerList(name) {
$("#layerList").append(
`<div>
${name}
<div id="${name}" class="btn-group layerListBtn" role="group">
<button class="btn btn-sm eye"><i class="fa-solid fa-eye"></i></button>
<button class="btn btn-sm dow"><i class="fa-solid fa-download"></i></button>
</div>
</div><br>`
);
var eye = document.querySelectorAll(".eye");
eye[eye.length-1].addEventListener('click', function() { toggleLayer(this); });
var download = document.querySelectorAll(".dow");
download[download.length-1].addEventListener('click', function() { downloadLayer(this) });
}
function toggleLayer(element) {
element.children[0].classList.toggle("fa-eye-slash");
element.children[0].classList.toggle("fa-eye");
var layer = getLayerByName(element.parentElement.id);
layer.getVisible() ? layer.setVisible(false) : layer.setVisible(true);
}
function downloadLayer(element) {
var layer = getLayerByName(element.parentElement.id);
var textToSave = new ol.format.GeoJSON().writeFeatures(layer.getSource().getFeatures());
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:attachment/text,' + encodeURI(textToSave);
hiddenElement.target = '_blank';
hiddenElement.download = 'layer.geojson';
hiddenElement.click();
}
function getLayerByName(name) {
return map.getAllLayers().find(layer => layer.get('name') == name);
}
var outputLayersCount = 0;
function addFeaturesToMap(FeatureCollection) {
if (FeatureCollection === true) { return; }
else if (Array.isArray(FeatureCollection)) {
FeatureCollection.forEach(feature => {
addFeaturesToMap(feature.Value);
});
}
else {
console.log(FeatureCollection)
const resultVectorSource = new ol.source.Vector({
features: new ol.format.GeoJSON().readFeatures(FeatureCollection)
});
const resultVectorLayer = new ol.layer.Vector({
source: resultVectorSource,
style: resultStyleFunction,
properties: {name: 'output_'+outputLayersCount}
});
addLayerToLayerList('output_'+outputLayersCount);
outputLayersCount++;
map.addLayer(resultVectorLayer);
}
}
function sendAjaxRequest(path, data) {
console.log(path, data);
$.ajax({
url: path,
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
success: function(res) { console.log(res); addFeaturesToMap(res); },
error: function(err) { console.log(err); }
});
}
function getGeometryByLayerName(layerName) {
var geometryByLayerName = null;
map.getLayers().getArray().forEach(layer => {
if (layer.getProperties().name === layerName) {
geometryByLayerName = layer.getProperties().rawFile;
}
});
return geometryByLayerName;
}
function updatePipeModalProcesses(data) {
pipeProcessTagArray.push(data);
pipeLayerTagArray.push({Tag: data.Result, Layer: data.Result});
if (data.Type === 'Intersection' || data.Type === 'Difference' || data.Type === 'Dissolve' || data.Type === 'Simplify' || data.Type === 'Multiparttosingleparts') {
$("#pipeProcessesTagAssign").append('<div>Process: '+ data.Type +', Input1: '+ data.Input1 +', Input2: '+ data.Input2 +', Result: '+ data.Result +'</div>')
}
else {
$("#pipeProcessesTagAssign").append('<div>Process: '+ data.Type +', Input: '+ data.Input +', Result: '+ data.Result +'</div>')
}
$(".layerSelectionPipe").append($('<option>', {
value: data.Result,
text: data.Result
}));
}
function clearPipe() {
$("#pipeLayersWithTags").empty();
$("#pipeProcessesTagAssign").empty();
$("#pipeResults").val('');
}
$("#addCheckedLayersToPipe").on('click', function() {
pipeLayerTagArray = [];
$("#pipeLayersWithTags").empty();
var checkedLayers = $('.pipeLayerCheckBox:checkbox:checked');
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
for (var i = 0; i < checkedLayers.length; i++) {
$("#pipeLayersWithTags").append('<div>'+ checkedLayers[i].value +' , Tag: '+ alphabet[i] +'</div>');
$(".layerSelectionPipe").append($('<option>', {
value: checkedLayers[i].value,
text: checkedLayers[i].value
}));
pipeLayerTagArray.push({Tag: alphabet[i], Layer: checkedLayers[i].value});
sendAjaxRequest('/adddatapipe', {Tag: alphabet[i], Value: JSON.parse(getGeometryByLayerName(checkedLayers[i].value))});
}
});
$("#dissolveModalAddToPipe").on('click', async function() {
var selection = $("#dissolveSelectionPipe").val();
var by = $("#dissolveByPipe").val();
var byArray = by.split(', ');
var layer = pipeLayerTagArray.find(e => e.Layer === selection);
var resultTag = $("#dissolvePipeModalResultTag").val();
let randomTag = (Math.random() + 1).toString(36).substring(7);
await sendAjaxRequest('/adddatapipe', {Tag: randomTag, Value: byArray});
updatePipeModalProcesses({Type: "Dissolve", Input1: layer.Tag, Input2: randomTag, Result: resultTag });
sendAjaxRequest('/addprocesspipe', {Type: "Dissolve", Input1: layer.Tag, Input2: randomTag, Result: resultTag });
});
$("#intersectionModalAddToPipe").on('click', function() {
var selection1 = $("#intersectionSelection1Pipe").val();
var selection2 = $("#intersectionSelection2Pipe").val();
var layer1 = pipeLayerTagArray.find(e => e.Layer === selection1);
var layer2 = pipeLayerTagArray.find(e => e.Layer === selection2);
var resultTag = $("#intersectionPipeModalResultTag").val();
updatePipeModalProcesses({Type: "Intersection", Input1: layer1.Tag, Input2: layer2.Tag, Result: resultTag });
sendAjaxRequest('/addprocesspipe', {Type: "Intersection", Input1: layer1.Tag, Input2: layer2.Tag, Result: resultTag });
});
$("#centroidModalAddToPipe").on('click', function() {
var selection = $("#centroidSelectionPipe").val();
var layer = pipeLayerTagArray.find(e => e.Layer === selection);
var resultTag = $("#centroidPipeModalResultTag").val();
updatePipeModalProcesses({Type: "Centroid", Input: layer.Tag, Result: resultTag });
sendAjaxRequest('/addprocesspipe', {Type: "Centroid", Input: layer.Tag, Result: resultTag });
});
$("#differenceModalAddToPipe").on('click', function() {
var selection1 = $("#differenceSelection1Pipe").val();
var selection2 = $("#differenceSelection2Pipe").val();
var layer1 = pipeLayerTagArray.find(e => e.Layer === selection1);
var layer2 = pipeLayerTagArray.find(e => e.Layer === selection2);
var resultTag = $("#differencePipeModalResultTag").val();
updatePipeModalProcesses({Type: "Difference", Input1: layer1.Tag, Input2: layer2.Tag, Result: resultTag });
sendAjaxRequest('/addprocesspipe', {Type: "Difference", Input1: layer1.Tag, Input2: layer2.Tag, Result: resultTag });
});
$("#polygonizeModalAddToPipe").on('click', function() {
var selection = $("#polygonizeSelectionPipe").val();
var layer = pipeLayerTagArray.find(e => e.Layer === selection);
var resultTag = $("#polygonizePipeModalResultTag").val();
updatePipeModalProcesses({Type: "Polygonize", Input: layer.Tag, Result: resultTag });
sendAjaxRequest('/addprocesspipe', {Type: "Polygonize", Input: layer.Tag, Result: resultTag });
});
$("#contoursModalAddToPipe").on('click', function() {
var selection = $("#contoursSelectionPipe").val();
var layer = pipeLayerTagArray.find(e => e.Layer === selection);
var resultTag = $("#contoursPipeModalResultTag").val();
updatePipeModalProcesses({Type: "Contours", Input: layer.Tag, Result: resultTag });
sendAjaxRequest('/addprocesspipe', {Type: "Contours", Input: layer.Tag, Result: resultTag });
});
$("#simplifyModalAddToPipe").on('click', async function() {
var selection = $("#simplifySelectionPipe").val();
var type = $("#simplifySelectionTypePipe").val();
var layer = pipeLayerTagArray.find(e => e.Layer === selection);
var resultTag = $("#simplifyPipeModalResultTag").val();
let randomTag = (Math.random() + 1).toString(36).substring(7);
await sendAjaxRequest('/adddatapipe', {Tag: randomTag, Value: type});
updatePipeModalProcesses({Type: "Simplify", Input1: layer.Tag, Input2: randomTag, Result: resultTag });
sendAjaxRequest('/addprocesspipe', {Type: "Simplify", Input1: layer.Tag, Input2: randomTag, Result: resultTag });
});
$("#multiparttosinglepartsModalAddToPipe").on('click', async function() {
var selection = $("#multiparttosinglepartsSelectionPipe").val();
var type = $("#multiparttosinglepartsSelectionTypePipe").val();
var layer = pipeLayerTagArray.find(e => e.Layer === selection);
var resultTag = $("#multiparttosinglepartsPipeModalResultTag").val();
let randomTag = (Math.random() + 1).toString(36).substring(7);
console.log(selection, type, resultTag, randomTag);
console.log(layer)
await sendAjaxRequest('/adddatapipe', {Tag: randomTag, Value: type});
updatePipeModalProcesses({Type: "Multiparttosingleparts", Input1: layer.Tag, Input2: randomTag, Result: resultTag });
sendAjaxRequest('/addprocesspipe', {Type: "Multiparttosingleparts", Input1: layer.Tag, Input2: randomTag, Result: resultTag });
});
$("#dissolveModalProcess").on('click', function() {
var selection = $("#dissolveSelection").val();
var layer = map.getLayers().getArray().find(e => e.getProperties().name === selection);
var by = $("#dissolveBy").val();
var byArray = by.split(', ');
sendAjaxRequest('/dissolve', {DATA: JSON.parse(layer.getProperties().rawFile), BY: byArray});
});
$("#intersectionModalProcess").on('click', function() {
var selection1 = $("#intersectionSelection1").val();
var selection2 = $("#intersectionSelection2").val();
var layer1 = map.getLayers().getArray().find(e => e.getProperties().name === selection1);
var layer2 = map.getLayers().getArray().find(e => e.getProperties().name === selection2);
sendAjaxRequest('/intersection', {DATA1: JSON.parse(layer1.getProperties().rawFile), DATA2: JSON.parse(layer2.getProperties().rawFile)});
});
$("#centroidModalProcess").on('click', function() {
var selection = $("#centroidSelection").val();
var layer = map.getLayers().getArray().find(e => e.getProperties().name === selection);
sendAjaxRequest('/centroid', {DATA: JSON.parse(layer.getProperties().rawFile)});
});
$("#differenceModalProcess").on('click', function() {
var selection1 = $("#differenceSelection1").val();
var selection2 = $("#differenceSelection2").val();
var layer1 = map.getLayers().getArray().find(e => e.getProperties().name === selection1);
var layer2 = map.getLayers().getArray().find(e => e.getProperties().name === selection2);
sendAjaxRequest('/difference', {DATA1: JSON.parse(layer1.getProperties().rawFile), DATA2: JSON.parse(layer2.getProperties().rawFile)});
});
$("#polygonizeModalProcess").on('click', function() {
var selection = $("#polygonizeSelection").val();
var layer = map.getLayers().getArray().find(e => e.getProperties().name === selection);
sendAjaxRequest('/polygonize', {DATA: JSON.parse(layer.getProperties().rawFile)});
});
$("#contoursModalProcess").on('click', function() {
var selection = $("#contoursSelection").val();
var layer = map.getLayers().getArray().find(e => e.getProperties().name === selection);
sendAjaxRequest('/contours', {DATA: JSON.parse(layer.getProperties().rawFile)});
});
$("#simplifyModalProcess").on('click', function() {
var selection = $("#simplifySelection").val();
var layer = map.getLayers().getArray().find(e => e.getProperties().name === selection);
var type = $("#simplifySelectionType").val();
sendAjaxRequest('/simplify', {DATA: JSON.parse(layer.getProperties().rawFile), GEOMETRY_TYPE: type});
});
$("#multiparttosinglepartsModalProcess").on('click', function() {
var selection = $("#multiparttosinglepartsSelection").val();
var layer = map.getLayers().getArray().find(e => e.getProperties().name === selection);
var type = $("#multiparttosinglepartsSelectionType").val();
sendAjaxRequest('/multiparttosingleparts', {DATA: JSON.parse(layer.getProperties().rawFile), GEOMETRY_TYPE: type});
});
$("#pipeModalProcess").on('click', async function() {
var results = $("#pipeResults").val().split(', ');
sendAjaxRequest('/addresultspipe', results);
sendAjaxRequest('/pipe', []);
// clearPipe();
});
</script>
</html>