From 64366e862dd1b2638a7fd7e1c04e707d8f69ae97 Mon Sep 17 00:00:00 2001
From: JOE XMG <thunyathep.s@outlook.com>
Date: Tue, 12 Apr 2022 13:13:19 +0200
Subject: [PATCH] update
---
public/bbox-finder.html | 38 ++++++-
public/bbox-wfs.html | 212 ++++++++++++++++++++++++++++++++++++++++
2 files changed, 247 insertions(+), 3 deletions(-)
create mode 100644 public/bbox-wfs.html
diff --git a/public/bbox-finder.html b/public/bbox-finder.html
index 09de292..323bdb1 100644
--- a/public/bbox-finder.html
+++ b/public/bbox-finder.html
@@ -53,7 +53,8 @@
<body>
<style>
.calculation-box {
- height: 90px;
+ min-height: 90 px;
+ height: auto;
width: 600px;
position: absolute;
bottom: 25px;
@@ -155,7 +156,7 @@
var p_min = new proj4.toPoint([tmp_layer._bounds._southWest.lng, tmp_layer._bounds._southWest
.lat
]); //any object will do as long as it has 'x' and 'y' properties
- var p_max = new proj4.toPoint([tmp_layer._bounds._southWest.lng, tmp_layer._bounds._southWest
+ var p_max = new proj4.toPoint([tmp_layer._bounds._northEast.lng, tmp_layer._bounds._northEast
.lat
]); //any object will do as long as it has 'x' and 'y' properties
p_dest_min = proj4.transform(source, dest,
@@ -164,7 +165,7 @@
p_max); //do the transformation. x and y are modified in place
answer.innerHTML = `
BBOX (4326):
- <input type="text" value="${tmp_layer._bounds._southWest.lng.toFixed(6)},${tmp_layer._bounds._southWest.lat.toFixed(6)},${tmp_layer._bounds._northEast.lng.toFixed(6)},${tmp_layer._bounds._northEast.lat.toFixed(6)}" id="4326" size="60">
+ <input type="text" value="${tmp_layer._bounds._southWest.lng.toFixed(10)},${tmp_layer._bounds._southWest.lat.toFixed(10)},${tmp_layer._bounds._northEast.lng.toFixed(10)},${tmp_layer._bounds._northEast.lat.toFixed(10)}" id="4326" size="60">
<button class="badge bg-secondary" onclick="clickToCopy('4326')">click to copy</button>
@@ -173,6 +174,14 @@
BBOX (31463):
<input type="text" value="${p_dest_min.x.toFixed(4)},${p_dest_min.y.toFixed(4)},${p_dest_max.x.toFixed(4)},${p_dest_max.y.toFixed(4)}" id="31463" size="60">
<button class="badge bg-secondary" onclick="clickToCopy('31463')">click to copy</button>
+
+ <hr>
+
+ Try other epsg:
+ <input type="number" placeholder="e.g. 31464, 3857" id="input_epsg"/> <button class="badge bg-secondary" onclick="convert_epsg()">convert</button>
+
+ <span id="conversion_result"></span>
+
`;
});
@@ -200,6 +209,29 @@
/* Alert the copied text */
alert("BBox Copied:<br>" + copyText.value);
}
+
+ function convert_epsg() {
+ var input_epsg= $("#input_epsg").val()
+ var bbox_latlng =
+ `${tmp_layer._bounds._southWest.lng},${tmp_layer._bounds._southWest.lat};${tmp_layer._bounds._northEast.lng},${tmp_layer._bounds._northEast.lat}`
+ var conversion_service =
+ `https://epsg.io/trans?data=${bbox_latlng}&s_srs=4326&t_srs=${input_epsg}`
+ console.log(`request to ${conversion_service}...`)
+ $.getJSON(conversion_service, function (data) {
+ if (data.status) {
+ $("#conversion_result").html("ESPG Code not support or invalid EPSG Code.")
+ } else {
+ var result = `
+ <br>
+ BBOX (${input_epsg}):
+ <input type="text" value="${parseFloat(data[0]["x"]).toFixed(4)}, ${parseFloat(data[0]["y"]).toFixed(4)},${parseFloat(data[1]["x"]).toFixed(4)}, ${parseFloat(data[1]["y"]).toFixed(4)}" id="${input_epsg}" size="60">
+ <button class="badge bg-secondary" onclick="clickToCopy('31463')">click to copy</button>
+ `
+ $("#conversion_result").html(result)
+
+ }
+ });
+ }
</script>
</body>
diff --git a/public/bbox-wfs.html b/public/bbox-wfs.html
new file mode 100644
index 0000000..2b12ed7
--- /dev/null
+++ b/public/bbox-wfs.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <title>Joe BBOX Finder</title>
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
+ integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
+ <link rel="stylesheet" href="libs/leaflet.css" />
+ <link rel="stylesheet" href="./src/leaflet.draw.css" />
+
+ <script src="libs/leaflet-src.js"></script>
+
+ <script src="./src/Leaflet.draw.js"></script>
+ <script src="./src/Leaflet.Draw.Event.js"></script>
+
+ <script src="./src/edit/handler/Edit.Poly.js"></script>
+ <script src="./src/edit/handler/Edit.SimpleShape.js"></script>
+ <script src="./src/edit/handler/Edit.Rectangle.js"></script>
+ <script src="./src/edit/handler/Edit.Marker.js"></script>
+ <script src="./src/edit/handler/Edit.CircleMarker.js"></script>
+ <script src="./src/edit/handler/Edit.Circle.js"></script>
+
+ <script src="./src/draw/handler/Draw.Feature.js"></script>
+ <script src="./src/draw/handler/Draw.Polyline.js"></script>
+ <script src="./src/draw/handler/Draw.Polygon.js"></script>
+ <script src="./src/draw/handler/Draw.SimpleShape.js"></script>
+ <script src="./src/draw/handler/Draw.Rectangle.js"></script>
+ <script src="./src/draw/handler/Draw.Circle.js"></script>
+ <script src="./src/draw/handler/Draw.Marker.js"></script>
+ <script src="./src/draw/handler/Draw.CircleMarker.js"></script>
+
+ <script src="./src/ext/TouchEvents.js"></script>
+ <script src="./src/ext/LatLngUtil.js"></script>
+ <script src="./src/ext/GeometryUtil.js"></script>
+ <script src="./src/ext/LineUtil.Intersect.js"></script>
+ <script src="./src/ext/Polyline.Intersect.js"></script>
+ <script src="./src/ext/Polygon.Intersect.js"></script>
+
+ <script src="./src/Control.Draw.js"></script>
+ <script src="./src/Tooltip.js"></script>
+ <script src="./src/Toolbar.js"></script>
+
+ <script src="./src/draw/DrawToolbar.js"></script>
+ <script src="./src/edit/EditToolbar.js"></script>
+ <script src="./src/edit/handler/EditToolbar.Edit.js"></script>
+ <script src="./src/edit/handler/EditToolbar.Delete.js"></script>
+
+ <link rel="shortcut icon" href="joeicon.png" />
+
+</head>
+
+<body>
+ <style>
+ .calculation-box {
+ height: 100px;
+ width: 800px;
+ position: absolute;
+ bottom: 25px;
+ left: 25px;
+ background-color: rgba(255, 255, 255, 0.9);
+ padding: 15px;
+ /* text-align: center; */
+ z-index: 1000;
+ }
+
+ p {
+ /* font-family: 'Open Sans'; */
+ margin: 0;
+ font-size: 13px;
+ font-weight: 600;
+ }
+ </style>
+ <div id="map" style="width: 100%; height: 100vh;"></div>
+ <div class="calculation-box text-left">
+ <p class="text-bold text-wrap"> <b>
+ <img src="joeicon.png" alt="" width="20px">
+ BBOX Finder <i class="bi bi-bounding-box"></i></b>
+ <br>
+ <span id="calculated_area">[Hint: Draw a bbox using tool on the right-bottom menu.]</span>
+ </p>
+ </div>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
+ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
+ </script>
+ <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+ <script src="./libs/proj4js.min.js"></script>
+ <script>
+ var Stadia_Outdoors = L.tileLayer('https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.png', {
+ maxZoom: 20,
+ attribution: '© <a href="https://stadiamaps.com/">Stadia Maps</a>, © <a href="https://openmaptiles.org/">OpenMapTiles</a> © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
+ });
+ var Esri_WorldTopoMap = L.tileLayer(
+ 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
+ attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community'
+ });
+ var tmp_layer
+ var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+ osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+ osm = L.tileLayer(osmUrl, {
+ maxZoom: 18,
+ attribution: osmAttrib
+ }),
+ map = new L.Map('map', {
+ layers: [Esri_WorldTopoMap],
+ center: new L.LatLng(48.7758, 9.1829),
+ zoom: 15
+ });
+
+ var drawnItems = new L.FeatureGroup();
+ map.addLayer(drawnItems);
+
+ // Set the title to show on the polygon button
+ L.drawLocal.draw.toolbar.buttons.polygon = 'Draw a polygon!';
+
+ var drawControl = new L.Control.Draw({
+ position: 'bottomright',
+ draw: {
+ polyline: false,
+ polygon: false,
+ circle: false,
+ marker: false,
+ circlemarker: false
+
+ },
+ edit: {
+ featureGroup: drawnItems,
+ remove: true
+ }
+ });
+ map.addControl(drawControl);
+
+ map.on(L.Draw.Event.CREATED, function (e) {
+ if (tmp_layer !== undefined) {
+ try {
+ map.removeLayer(tmp_layer)
+ } catch (error) {}
+ }
+ var type = e.layerType,
+ layer = e.layer;
+ tmp_layer = layer
+ if (type === 'marker') {
+ layer.bindPopup('A popup!');
+ }
+
+ drawnItems.addLayer(layer);
+ const answer = document.getElementById('calculated_area');
+ // $("#")
+ var source = new proj4.Proj('EPSG:4326'); //source coordinates will be in Longitude/Latitude
+ proj4.defs("EPSG:31463",
+ "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0 +ellps=bessel +towgs84=598.1,73.7,418.2,0.202,0.045,-2.455,6.7 +units=m +no_defs"
+ );
+ var dest = new proj4.Proj('EPSG:31463'); //source coordinates will be in Longitude/Latitude
+
+ var p_min = new proj4.toPoint([tmp_layer._bounds._southWest.lng, tmp_layer._bounds._southWest
+ .lat
+ ]); //any object will do as long as it has 'x' and 'y' properties
+ var p_max = new proj4.toPoint([tmp_layer._bounds._southWest.lng, tmp_layer._bounds._southWest
+ .lat
+ ]); //any object will do as long as it has 'x' and 'y' properties
+ p_dest_min = proj4.transform(source, dest,
+ p_min); //do the transformation. x and y are modified in place
+ p_dest_max = proj4.transform(source, dest,
+ p_max); //do the transformation. x and y are modified in place
+ var wfs_request = `http://193.196.137.147:8080/wfs?SERVICE=WFS&VERSION=2.0.0&REQUEST=GetFeature&typeNames=bldg:Building&bbox=${p_dest_min.x.toFixed(4)},${p_dest_min.y.toFixed(4)},${p_dest_max.x.toFixed(4)},${p_dest_max.y.toFixed(4)}&srsName=EPSG:31463`
+ answer.innerHTML = `
+ BBOX (4326):
+ <input type="text" value="${tmp_layer._bounds._southWest.lng.toFixed(6)},${tmp_layer._bounds._southWest.lat.toFixed(6)},${tmp_layer._bounds._northEast.lng.toFixed(6)},${tmp_layer._bounds._northEast.lat.toFixed(6)}" id="4326" size="50">
+
+ <button class="badge bg-secondary" onclick="clickToCopy('4326')">click to copy</button>
+
+ <br>
+
+ BBOX (31463):
+ <input type="text" value="${p_dest_min.x.toFixed(4)},${p_dest_min.y.toFixed(4)},${p_dest_max.x.toFixed(4)},${p_dest_max.y.toFixed(4)}" id="31463" size="50">
+ <button class="badge bg-secondary" onclick="clickToCopy('31463')">click to copy</button>
+ <a class="badge bg-secondary" href="${wfs_request}" target="_blank">WFS Request</a>
+
+ <br>
+
+
+ `;
+
+ });
+
+ map.on(L.Draw.Event.EDITED, function (e) {
+ var layers = e.layers;
+ var countOfEditedLayers = 0;
+ layers.eachLayer(function (layer) {
+ countOfEditedLayers++;
+ });
+ console.log("Edited " + countOfEditedLayers + " layers");
+ });
+
+ function clickToCopy(id) {
+ /* Get the text field */
+ var copyText = document.getElementById(id);
+
+ /* Select the text field */
+ copyText.select();
+ copyText.setSelectionRange(0, 99999); /* For mobile devices */
+
+ /* Copy the text inside the text field */
+ navigator.clipboard.writeText(copyText.value);
+
+ /* Alert the copied text */
+ alert("BBox Copied:" + copyText.value);
+ }
+ </script>
+</body>
+
+</html>
\ No newline at end of file
--
GitLab