Skip to content
GitLab
Commit 64366e86 authored by Santhanavanich's avatar Santhanavanich
Browse files

update

parent 922dc492
master
No related merge requests found
Pipeline #6178 passed with stage
in 6 seconds
Hide whitespace changes
Inline Side-by-side
Showing
with 247 additions and 3 deletions
+247 -3
public/bbox-finder.html
+ 35
- 3
View file @ 64366e86
......@@ -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>
......
public/bbox-wfs.html 0 → 100644
+ 212
- 0
View file @ 64366e86
<!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: '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <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 &copy; Esri &mdash; 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 = '&copy; <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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal