[mapguide-commits] r9847 - in trunk/MgDev/Doc/samples/clientsamples: . geoprocessing
svn_mapguide at osgeo.org
svn_mapguide at osgeo.org
Tue Jun 8 06:39:46 PDT 2021
Author: jng
Date: 2021-06-08 06:39:46 -0700 (Tue, 08 Jun 2021)
New Revision: 9847
Added:
trunk/MgDev/Doc/samples/clientsamples/geoprocessing/
trunk/MgDev/Doc/samples/clientsamples/geoprocessing/index_ol.html
Log:
#2810: Add geoprocessing example
Added: trunk/MgDev/Doc/samples/clientsamples/geoprocessing/index_ol.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/geoprocessing/index_ol.html (rev 0)
+++ trunk/MgDev/Doc/samples/clientsamples/geoprocessing/index_ol.html 2021-06-08 13:39:46 UTC (rev 9847)
@@ -0,0 +1,240 @@
+<html>
+
+<head>
+ <title>Geo-Processing Example</title>
+ <link rel="stylesheet" href="../../viewerfiles/ol.css" />
+ <style type="text/css">
+ #error {
+ color: red;
+ }
+
+ #wrap {
+ width: 900;
+ }
+
+ #map {
+ width: 800;
+ height: 600;
+ float: left;
+ border: 1px solid black;
+ }
+
+ #status {
+ clear: both;
+ }
+ </style>
+ <script type="text/javascript" src="../../viewerfiles/ol.js"></script>
+ <script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
+</head>
+
+<body>
+ <div id="main">
+ <div class="container">
+ <div class="alert alert-info">
+ <p>This example demonstrates using Geo-Processing APIs in the mapagent</p>
+ <p>Geo-Processing APIs require one or two selected geometries as input. This map has tools to allow you to draw and select said
+ geometries. To select multiple geometries, hold down <strong>SHIFT</strong> when selecting geometries</p>
+ <p>An OpenStreetMap layer is included as a backdrop for context</p>
+ <p>Sample not loading? <a href="../data/load.php">Check that the required resources have been loaded</a>
+ </p>
+ </div>
+ <div id="error">
+ </div>
+ <div id="wrap">
+ <label for="type">Type </label>
+ <select id="type">
+ <option value="Point">Point</option>
+ <option value="LineString">LineString</option>
+ <option value="Polygon">Polygon</option>
+ </select>
+ <input type="radio" name="mode" value="draw" checked="checked" onchange="updateUI()" /> Draw Geometries
+ <input type="radio" name="mode" value="select" onchange="updateUI()" /> Select Geometries
+ <br />
+ <br />
+ <button id="btnBuffer" onclick="cmdBuffer()">Buffer</button>
+ <button id="btnConvexHull" onclick="cmdConvexHull()">Convex Hull</button>
+ <button id="btnUnion" onclick="cmdUnion()">Union</button>
+ <button id="btnIntersection" onclick="cmdIntersection()">Intersection</button>
+ <button onclick="clearDrawn()">Clear Drawn Geometries</button>
+ <button onclick="clearResult()">Clear Result Geometries</button>
+ <br />
+ <div id="map">
+ </div>
+ <div id="status"></div>
+ </div>
+ </div>
+ </div>
+ <script type="text/javascript">
+
+ //This sample is assumed to be hosted at http://servername/mapguide/clientsamples/xyz/index_ol.html
+ var mapAgentUrl = "../../mapagent/mapagent.fcgi";
+
+ var featureA;
+ var featureB;
+ var wktFormat = new ol.format.WKT();
+ var gjFormat = new ol.format.GeoJSON();
+
+ function cmdBuffer() {
+ var wkt = wktFormat.writeFeature(featureA);
+ var dist = prompt("Enter the distance to buffer (meters):");
+ if (dist && !isNaN(parseInt(dist, 10))) {
+ $.getJSON(mapAgentUrl + "?OPERATION=GEO.BUFFER&VERSION=4.0.0&LOCALE=en&GEOMETRY=" + wkt + "&DISTANCE=" + dist + "&UNITS=m&COORDINATESYSTEM=WGS84.PseudoMercator&FORMAT=GEOJSON&USERNAME=Anonymous")
+ .then(function(r) {
+ var f = gjFormat.readFeature(r);
+ resultsSource.addFeature(f);
+ });
+ }
+ }
+
+ function cmdConvexHull() {
+ var wkt = wktFormat.writeFeature(featureA);
+ $.getJSON(mapAgentUrl + "?OPERATION=GEO.CONVEXHULL&VERSION=4.0.0&LOCALE=en&GEOMETRY=" + wkt + "&COORDINATESYSTEM=WGS84.PseudoMercator&FORMAT=GEOJSON&USERNAME=Anonymous")
+ .then(function(r) {
+ var f = gjFormat.readFeature(r);
+ resultsSource.addFeature(f);
+ });
+ }
+
+ function binaryOp(wktA, op, wktB) {
+ $.getJSON(mapAgentUrl + "?OPERATION=GEO.BINARYOPERATION&VERSION=4.0.0&LOCALE=en&OPERATOR=" + op.toUpperCase() + "&GEOMETRYA=" + wktA + "&GEOMETRYB=" + wktB + "&FORMAT=GEOJSON&USERNAME=Anonymous")
+ .then(function(r) {
+ var f = gjFormat.readFeature(r);
+ resultsSource.addFeature(f);
+ });
+ }
+
+ function cmdUnion() {
+ var wktA = wktFormat.writeFeature(featureA);
+ var wktB = wktFormat.writeFeature(featureB);
+ binaryOp(wktA, "union", wktB);
+ }
+
+ function cmdIntersection() {
+ var wktA = wktFormat.writeFeature(featureA);
+ var wktB = wktFormat.writeFeature(featureB);
+ binaryOp(wktA, "intersection", wktB);
+ }
+
+ var selectedFeatures = new ol.Collection();
+
+ function updateSelectionState() {
+ if (selectedFeatures.getLength() > 0) {
+ featureA = selectedFeatures.item(0);
+ if (selectedFeatures.getLength() == 2) {
+ featureB = selectedFeatures.item(1);
+ }
+ document.getElementById("status").innerHTML = "Selected: " + selectedFeatures.getLength();
+ } else {
+ featureA = null;
+ featureB = null;
+ document.getElementById("status").innerHTML = "";
+ }
+
+ document.getElementById("btnBuffer").disabled = featureA ? null : "disabled";
+ document.getElementById("btnConvexHull").disabled = featureA ? null : "disabled";
+ document.getElementById("btnUnion").disabled = (featureA && featureB) ? null : "disabled";
+ document.getElementById("btnIntersection").disabled = (featureA && featureB) ? null : "disabled";
+ }
+
+ selectedFeatures.on("add", function() {
+ updateSelectionState();
+ });
+ selectedFeatures.on("remove", function() {
+ updateSelectionState();
+ });
+
+ var resultsSource = new ol.source.Vector();
+ var vectorSource = new ol.source.Vector();
+
+ function clearDrawn() {
+ vectorSource.clear();
+ }
+
+ function clearResult() {
+ resultsSource.clear();
+ }
+
+ var modify = new ol.interaction.Modify({
+ source: vectorSource
+ });
+ var selectInter = new ol.interaction.Select({
+ features: selectedFeatures
+ });
+ var draw, snap, map;
+ var typeSelect = document.getElementById('type');
+
+ function addInteractions() {
+ draw = new ol.interaction.Draw({
+ source: vectorSource,
+ type: typeSelect.value,
+ });
+ map.addInteraction(draw);
+ snap = new ol.interaction.Snap({ source: vectorSource });
+ map.addInteraction(snap);
+ }
+
+ function getRadioValue(theRadioGroup) {
+ var elements = document.getElementsByName(theRadioGroup);
+ for (var i = 0, l = elements.length; i < l; i++) {
+ if (elements[i].checked) {
+ return elements[i].value;
+ }
+ }
+ }
+
+ function updateUI() {
+ map.removeInteraction(selectInter);
+ map.removeInteraction(draw);
+ map.removeInteraction(snap);
+ if (getRadioValue("mode") == "draw") {
+ addInteractions();
+ } else {
+ map.addInteraction(selectInter);
+ }
+ }
+
+ $(document).ready(function () {
+ //NOTE: Your map definition can be in any coordinate system as long as it it transformable to LL84
+ //
+ //But the tile layer must remain as EPSG:3857
+
+ map = new ol.Map({
+ layers: [
+ new ol.layer.Tile({
+ source: new ol.source.OSM({
+ attributions: [
+ 'Tiles © <a href="http://www.openstreetmap.org/">OpenStreetMap</a>',
+ ol.source.OSM.ATTRIBUTION
+ ],
+ url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+ })
+ }),
+ new ol.layer.Vector({
+ source: vectorSource
+ }),
+ new ol.layer.Vector({
+ source: resultsSource
+ })
+ ],
+ renderer: 'canvas',
+ target: document.getElementById('map'),
+ view: new ol.View({
+ center: ol.proj.transform([-87.7302542509315, 43.744459064634], 'EPSG:4326', 'EPSG:3857'),
+ minZoom: 10,
+ maxZoom: 19,
+ zoom: 12
+ })
+ });
+
+ typeSelect.onchange = function () {
+ updateUI();
+ };
+
+ updateUI();
+ updateSelectionState();
+ });
+
+ </script>
+</body>
+
+</html>
\ No newline at end of file
More information about the mapguide-commits
mailing list