I have been a running Web Map system with 'Geoserver 2.2.5 - Openlayers - 2.8 - PostGIS 9.2 - QGIS 2.8' with 'Measure Length / Area tool' (As available [here])1.
Recently I have upgraded to Geoserver 2.7. All other functionalities are OK but, 'Measure Length / Area tool' is not working.
I have checked all codes but failed to identify the problem. Is this an issue with css used or with the WMS.
Kindly advice..
Below are my 'Measure Length / Area tool' code details..
CSS Part -
controlToggle li {
list-style: none; } p { width: 1024px; } #options { position: relative; width: 1600px; font-weight: bold; font-size: large; vertical-align: middle; color: cyan; } #output { position:center; float: left; font-weight: bold; font-size: 22px; vertical-align: middle; color: #C3FDB8; } /* avoid pink tiles */ .olImageLoadError { background-color: transparent !important; }Map Distance script..
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition());
// style the sketch fancy var sketchSymbolizers = { "Point": { pointRadius: 4, graphicName: "circle", fillColor: "red", fillOpacity: 1, strokeWidth: 1, strokeOpacity: 1, strokeColor: "#333333" }, "Line": { strokeWidth: 3, strokeOpacity: 1, strokeColor: "#668866", strokeDashstyle: "dashdot" }, "Polygon": { strokeWidth: 2, strokeOpacity: 0.5, strokeColor: "#663366", strokeDashstyle: "dot", fillColor: "grey", fillOpacity: 0.3 } }; var style = new OpenLayers.Style(); style.addRules([ new OpenLayers.Rule({symbolizer: sketchSymbolizers}) ]); var styleMap = new OpenLayers.StyleMap({"default": style}); // allow testing of specific renderers via "?renderer=Canvas", etc var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; measureControls = { line: new OpenLayers.Control.Measure( OpenLayers.Handler.Path, { persist: true, handlerOptions: { layerOptions: { renderers: renderer, styleMap: styleMap } } } ), polygon: new OpenLayers.Control.Measure( OpenLayers.Handler.Polygon, { persist: true, handlerOptions: { layerOptions: { renderers: renderer, styleMap: styleMap } } } ) }; var control; for(var key in measureControls) { control = measureControls[key]; control.events.on({ "measure": handleMeasurements, "measurepartial": handleMeasurements }); map.addControl(control); }//map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true; } //end of map program function handleMeasurements(event) { var geometry = event.geometry; var units = event.units; var order = event.order; var measure = event.measure; var element = document.getElementById('output'); var out = ""; if(order == 1) { out += "Distance Measured: " + measure.toFixed(3) + " " + units; } else { out += "Area Measured: " + measure.toFixed(3) + " " + units + "2"; } element.innerHTML = out; } function toggleControl(element) { for(key in measureControls) { var control = measureControls[key]; if(element.value == key && element.checked) { control.activate(); } else { control.deactivate(); } } } function toggleGeodesic(element) { for(key in measureControls) { var control = measureControls[key]; control.geodesic = element.checked; } } function toggleImmediate(element) { for(key in measureControls) { var control = measureControls[key]; control.setImmediate(element.checked); } }HTML Part --
Measure Distance / Area Tool Measure Distance Measure Area Return to Map Please help to solve this problem...
أكثر...
Recently I have upgraded to Geoserver 2.7. All other functionalities are OK but, 'Measure Length / Area tool' is not working.
I have checked all codes but failed to identify the problem. Is this an issue with css used or with the WMS.
Kindly advice..
Below are my 'Measure Length / Area tool' code details..
CSS Part -
controlToggle li {
list-style: none; } p { width: 1024px; } #options { position: relative; width: 1600px; font-weight: bold; font-size: large; vertical-align: middle; color: cyan; } #output { position:center; float: left; font-weight: bold; font-size: 22px; vertical-align: middle; color: #C3FDB8; } /* avoid pink tiles */ .olImageLoadError { background-color: transparent !important; }Map Distance script..
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition());
// style the sketch fancy var sketchSymbolizers = { "Point": { pointRadius: 4, graphicName: "circle", fillColor: "red", fillOpacity: 1, strokeWidth: 1, strokeOpacity: 1, strokeColor: "#333333" }, "Line": { strokeWidth: 3, strokeOpacity: 1, strokeColor: "#668866", strokeDashstyle: "dashdot" }, "Polygon": { strokeWidth: 2, strokeOpacity: 0.5, strokeColor: "#663366", strokeDashstyle: "dot", fillColor: "grey", fillOpacity: 0.3 } }; var style = new OpenLayers.Style(); style.addRules([ new OpenLayers.Rule({symbolizer: sketchSymbolizers}) ]); var styleMap = new OpenLayers.StyleMap({"default": style}); // allow testing of specific renderers via "?renderer=Canvas", etc var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; measureControls = { line: new OpenLayers.Control.Measure( OpenLayers.Handler.Path, { persist: true, handlerOptions: { layerOptions: { renderers: renderer, styleMap: styleMap } } } ), polygon: new OpenLayers.Control.Measure( OpenLayers.Handler.Polygon, { persist: true, handlerOptions: { layerOptions: { renderers: renderer, styleMap: styleMap } } } ) }; var control; for(var key in measureControls) { control = measureControls[key]; control.events.on({ "measure": handleMeasurements, "measurepartial": handleMeasurements }); map.addControl(control); }//map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true; } //end of map program function handleMeasurements(event) { var geometry = event.geometry; var units = event.units; var order = event.order; var measure = event.measure; var element = document.getElementById('output'); var out = ""; if(order == 1) { out += "Distance Measured: " + measure.toFixed(3) + " " + units; } else { out += "Area Measured: " + measure.toFixed(3) + " " + units + "2"; } element.innerHTML = out; } function toggleControl(element) { for(key in measureControls) { var control = measureControls[key]; if(element.value == key && element.checked) { control.activate(); } else { control.deactivate(); } } } function toggleGeodesic(element) { for(key in measureControls) { var control = measureControls[key]; control.geodesic = element.checked; } } function toggleImmediate(element) { for(key in measureControls) { var control = measureControls[key]; control.setImmediate(element.checked); } }HTML Part --
Measure Distance / Area Tool Measure Distance Measure Area Return to Map Please help to solve this problem...
أكثر...