An error occurred while loading the file. Please try again.
bbox-wfs.html 9.02 KiB
<!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>