[mapguide-commits] r9846 - in trunk/MgDev/Doc/samples/clientsamples: . mvt retina wms xyz
svn_mapguide at osgeo.org
svn_mapguide at osgeo.org
Tue Jun 8 04:59:20 PDT 2021
Author: jng
Date: 2021-06-08 04:59:20 -0700 (Tue, 08 Jun 2021)
New Revision: 9846
Added:
trunk/MgDev/Doc/samples/clientsamples/retina/
trunk/MgDev/Doc/samples/clientsamples/retina/index_ol.html
Modified:
trunk/MgDev/Doc/samples/clientsamples/mvt/index.html
trunk/MgDev/Doc/samples/clientsamples/wms/index.html
trunk/MgDev/Doc/samples/clientsamples/xyz/index_ol.html
Log:
#2810:
- Add retina tiles example
- Update WMS example to demonstrate ability to have client-side selection overlays via WMS GetFeatureInfo
Modified: trunk/MgDev/Doc/samples/clientsamples/mvt/index.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/mvt/index.html 2021-06-08 10:53:16 UTC (rev 9845)
+++ trunk/MgDev/Doc/samples/clientsamples/mvt/index.html 2021-06-08 11:59:20 UTC (rev 9846)
@@ -281,7 +281,7 @@
$(document).ready(function () {
//NOTE: Your map definition can be in any coordinate system as long as it it transformable to LL84
//
- //But the ol3 tile layer must remain as EPSG:3857
+ //But the tile layer must remain as EPSG:3857
var map = new ol.Map({
layers: [
Added: trunk/MgDev/Doc/samples/clientsamples/retina/index_ol.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/retina/index_ol.html (rev 0)
+++ trunk/MgDev/Doc/samples/clientsamples/retina/index_ol.html 2021-06-08 11:59:20 UTC (rev 9846)
@@ -0,0 +1,72 @@
+<html>
+ <head>
+ <title>Sheboygan map as XYZ retina tiles</title>
+ <link rel="stylesheet" href="../../viewerfiles/ol.css" />
+ <style type="text/css">
+ #error { color: red; }
+ #wrap { width: 900; }
+ #map { width: 400; height: 300; float: left; border: 1px solid black; }
+ </style>
+ <script type="text/javascript" src="../../viewerfiles/ol.js"></script>
+ <script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
+ <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";
+
+ $(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
+
+ var 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.Tile({
+ source: new ol.source.XYZ({
+ url: mapAgentUrl + "?OPERATION=GETTILEIMAGE&VERSION=1.2.0&CLIENTAGENT=OpenLayers&USERNAME=Anonymous&MAPDEFINITION=Library://Samples/Sheboygan/TileSets/SheboyganXYZRetina.TileSetDefinition&BASEMAPLAYERGROUPNAME=Base+Layer+Group&TILECOL={y}&TILEROW={x}&SCALEINDEX={z}",
+ tilePixelRatio: 2 // THIS IS IMPORTANT
+ })
+ })
+ ],
+ 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
+ })
+ });
+ });
+
+ </script>
+ </head>
+ <body>
+ <div id="main">
+ <div class="container">
+ <div class="alert alert-info">
+ <p>This example demonstrates a Map Definition being consumed as a <strong>XYZ layer</strong> with <a href="http://openlayers.org/">OpenLayers</a>.</p>
+ <p>The XYZ tileset is configured for HiDPI/Retina output. To consume this properly in OpenLayers you must configure the XYZ source with an appropriate <strong>tilePixelRatio</strong> value</p>
+ <p>An OpenStreetMap layer is included as a backdrop for context</p>
+ <strong>For maximum visual fidelity, your Map Definition should be in WGS84.PseudoMercator</strong>
+ <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">
+ <div id="map">
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
Modified: trunk/MgDev/Doc/samples/clientsamples/wms/index.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/wms/index.html 2021-06-08 10:53:16 UTC (rev 9845)
+++ trunk/MgDev/Doc/samples/clientsamples/wms/index.html 2021-06-08 11:59:20 UTC (rev 9846)
@@ -1,76 +1,149 @@
<html>
- <head>
- <title>Sheboygan WMS</title>
- <link rel="stylesheet" href="../../viewerfiles/ol.css" />
- <style type="text/css">
- #error { color: red; }
- #wrap { width: 900; }
- #map { width: 400; height: 300; float: left; border: 1px solid black; }
- </style>
- <script type="text/javascript" src="../../viewerfiles/ol.js"></script>
- <script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
- <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";
+<head>
+ <title>Sheboygan WMS</title>
+ <link rel="stylesheet" href="../../viewerfiles/ol.css" />
+ <style type="text/css">
+ #error {
+ color: red;
+ }
- $(document).ready(function() {
- //NOTE: Your map definition can be in any coordinate system as long as it it transformable to LL84
- //
- //But the ol3 tile layer must remain as EPSG:3857
+ #wrap {
+ width: 900;
+ }
- var 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.Image({
- source: new ol.source.ImageWMS({
- url: mapAgentUrl + "?REQUEST=GETMAP&SERVICE=WMS&VERSION=1.3.0",
- projection: "EPSG:4326",
- params: {
- "FORMAT": "image/png",
- "LAYERS": "Samples/Sheboygan/Layers/Parcels,Samples/Sheboygan/Layers/Hydrography,Samples/Sheboygan/Layers/Districts,Samples/Sheboygan/Layers/Roads",
- "TRANSPARENT": "TRUE"
- }
- })
- })
+ #map {
+ width: 400;
+ height: 300;
+ float: left;
+ border: 1px solid black;
+ }
+ </style>
+ <script type="text/javascript" src="../../viewerfiles/ol.js"></script>
+ <script type="text/javascript" src="../assets/jquery-1.10.2.min.js"></script>
+ <script type="text/javascript">
+
+ function buildTable(features) {
+ var html = "";
+ for (var i = 0; i < features.length; i++) {
+ html += "<table>";
+ html += "<thead>";
+ html += "<tr><td>Name</td><td>Value</td></tr>";
+ html += "</thead>";
+ html += "<tbody>";
+ var props = features[i].getProperties();
+ for (var k in props) {
+ if (k == features[i].getGeometryName()) {
+ continue;
+ }
+ html += "<tr><td>" + k + "</td><td>" + props[k] + "</td></tr>";
+ }
+ html += "</tbody>";
+ html += "</table>";
+ }
+ return html;
+ }
+
+ //This sample is assumed to be hosted at http://servername/mapguide/clientsamples/xyz/index_ol.html
+ var mapAgentUrl = "../../mapagent/mapagent.fcgi";
+ var wmsSource = new ol.source.ImageWMS({
+ url: mapAgentUrl,
+ projection: "EPSG:4326",
+ params: {
+ "LAYERS": "Samples/Sheboygan/Layers/Parcels",
+ "VERSION": "1.3.0",
+ "TRANSPARENT": "TRUE"
+ },
+ ratio: 1
+ });
+ var vectorSource = new ol.source.Vector();
+ var format = new ol.format.GeoJSON();
+
+ $(document).ready(function () {
+
+ var view = new ol.View({
+ center: ol.proj.transform([-87.7302542509315, 43.744459064634], 'EPSG:4326', 'EPSG:3857'),
+ minZoom: 10,
+ maxZoom: 19,
+ zoom: 12
+ });
+
+ //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
+
+ var 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
],
- 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
- })
+ url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+ })
+ }),
+ new ol.layer.Image({
+ source: wmsSource
+ }),
+ new ol.layer.Vector({
+ source: vectorSource
+ })
+ ],
+ renderer: 'canvas',
+ target: document.getElementById('map'),
+ view: view
+ });
+
+ map.on('singleclick', function (evt) {
+ document.getElementById('info').innerHTML = '';
+ var viewResolution = /** @type {number} */ (view.getResolution());
+ var url = wmsSource.getFeatureInfoUrl(
+ evt.coordinate,
+ viewResolution,
+ 'EPSG:3857', //view projection
+ {
+ 'INFO_FORMAT': 'application/json',
+ 'QUERY_LAYERS': 'Samples/Sheboygan/Layers/Parcels'
+ }
+ );
+ if (url) {
+ fetch(url)
+ .then(function (response) { return response.json(); })
+ .then(function (json) {
+ vectorSource.clear();
+ var features = format.readFeatures(json, {
+ featureProjection: "EPSG:3857" //view projection
+ });
+ vectorSource.addFeatures(features);
+ document.getElementById("info").innerHTML = buildTable(features);
});
- });
+ }
+ });
+ });
- </script>
- </head>
- <body>
- <div id="main">
- <div class="container">
- <div class="alert alert-info">
- <p>This example demonstrates a Map Definition being consumed as a <strong>XYZ layer</strong> with <a href="http://openlayers.org/">OpenLayers 3</a>.</p>
- <p>An OpenStreetMap layer is included as a backdrop for context</p>
- <strong>For maximum visual fidelity, your Map Definition should be in WGS84.PseudoMercator</strong>
- <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">
- <div id="map">
- </div>
- </div>
- </div>
+ </script>
+</head>
+
+<body>
+ <div id="main">
+ <div class="container">
+ <div class="alert alert-info">
+ <p>This example demonstrates the Parcels Layer Definition being consumed as a <strong>published WMS layer</strong> with <a href="http://openlayers.org/">OpenLayers</a>.</p>
+ <p>Features on this layer can be selected (via WMS GetFeatureInfo) and selections can be displayed as client-side vector overlays using the geometry of the GetFeatureInfo response</p>
+ <p>Make sure that the Parcels WMS layer is configured as <strong>Queryable</strong> and that <strong>Geometry is enabled</strong></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">
+ <div id="map">
</div>
- </body>
-</html>
+ <div id="info"></div>
+ </div>
+ </div>
+ </div>
+</body>
+
+</html>
\ No newline at end of file
Modified: trunk/MgDev/Doc/samples/clientsamples/xyz/index_ol.html
===================================================================
--- trunk/MgDev/Doc/samples/clientsamples/xyz/index_ol.html 2021-06-08 10:53:16 UTC (rev 9845)
+++ trunk/MgDev/Doc/samples/clientsamples/xyz/index_ol.html 2021-06-08 11:59:20 UTC (rev 9846)
@@ -17,7 +17,7 @@
$(document).ready(function() {
//NOTE: Your map definition can be in any coordinate system as long as it it transformable to LL84
//
- //But the ol3 tile layer must remain as EPSG:3857
+ //But the tile layer must remain as EPSG:3857
var map = new ol.Map({
layers: [
@@ -53,7 +53,7 @@
<div id="main">
<div class="container">
<div class="alert alert-info">
- <p>This example demonstrates a Map Definition being consumed as a <strong>XYZ layer</strong> with <a href="http://openlayers.org/">OpenLayers 3</a>.</p>
+ <p>This example demonstrates a Map Definition being consumed as a <strong>XYZ layer</strong> with <a href="http://openlayers.org/">OpenLayers</a>.</p>
<p>An OpenStreetMap layer is included as a backdrop for context</p>
<strong>For maximum visual fidelity, your Map Definition should be in WGS84.PseudoMercator</strong>
<p>Sample not loading? <a href="../data/load.php">Check that the required resources have been loaded</a></p>
More information about the mapguide-commits
mailing list