NOTE: Measure is done in simple way on projected plane. Earth curvature is not taken into account
diff --git a/examples/measure.js b/examples/measure.js index 5b624f9934..eed52b6e94 100644 --- a/examples/measure.js +++ b/examples/measure.js @@ -1,4 +1,5 @@ goog.require('ol.Map'); +goog.require('ol.Overlay'); goog.require('ol.View'); goog.require('ol.geom.LineString'); goog.require('ol.geom.Polygon'); @@ -40,38 +41,85 @@ var vector = new ol.layer.Vector({ /** - * Currently drawed feature + * Currently drawn feature. * @type {ol.Feature} */ var sketch; /** - * Element for currently drawed feature + * The help tooltip element. * @type {Element} */ -var sketchElement; +var helpTooltipElement; /** - * handle pointer move - * @param {Event} evt + * Overlay to show the help messages. + * @type {ol.Overlay} + */ +var helpTooltip; + + +/** + * The measure tooltip element. + * @type {Element} + */ +var measureTooltipElement; + + +/** + * Overlay to show the measurement. + * @type {ol.Overlay} + */ +var measureTooltip; + + +/** + * Message to show when the user is drawing a polygon. + * @type {string} + */ +var continuePolygonMsg = 'Click to continue drawing the polygon'; + + +/** + * Message to show when the user is drawing a line. + * @type {string} + */ +var continueLineMsg = 'Click to continue drawing the line'; + + +/** + * Handle pointer move. + * @param {ol.MapBrowserEvent} evt */ var pointerMoveHandler = function(evt) { if (evt.dragging) { return; } + /** @type {string} */ + var helpMsg = 'Click to start drawing'; + /** @type {ol.Coordinate|undefined} */ + var tooltipCoord = evt.coordinate; + if (sketch) { var output; var geom = (sketch.getGeometry()); if (geom instanceof ol.geom.Polygon) { output = formatArea(/** @type {ol.geom.Polygon} */ (geom)); - + helpMsg = continuePolygonMsg; + tooltipCoord = geom.getInteriorPoint().getCoordinates(); } else if (geom instanceof ol.geom.LineString) { output = formatLength( /** @type {ol.geom.LineString} */ (geom)); + helpMsg = continueLineMsg; + tooltipCoord = geom.getLastCoordinate(); } - sketchElement.innerHTML = output; + measureTooltipElement.innerHTML = output; + measureTooltip.setPosition(tooltipCoord); } + + helpTooltipElement.innerHTML = helpMsg; + helpTooltip.setPosition(evt.coordinate); }; @@ -97,29 +145,64 @@ function addInteraction() { }); map.addInteraction(draw); + createMeasureTooltip(); + createHelpTooltip(); + draw.on('drawstart', function(evt) { // set sketch sketch = evt.feature; - sketchElement = document.createElement('li'); - var outputList = document.getElementById('measureOutput'); - - if (outputList.childNodes) { - outputList.insertBefore(sketchElement, outputList.firstChild); - } else { - outputList.appendChild(sketchElement); - } }, this); draw.on('drawend', function(evt) { + measureTooltipElement.className = 'tooltip tooltip-static'; + measureTooltip.setOffset([0, -7]); // unset sketch sketch = null; - sketchElement = null; + // unset tooltip so that a new one can be created + measureTooltipElement = null; + createMeasureTooltip(); }, this); } +/** + * Creates a new help tooltip + */ +function createHelpTooltip() { + if (helpTooltipElement) { + helpTooltipElement.parentNode.removeChild(helpTooltipElement); + } + helpTooltipElement = document.createElement('div'); + helpTooltipElement.className = 'tooltip'; + helpTooltip = new ol.Overlay({ + element: helpTooltipElement, + offset: [15, 0], + positioning: 'center-left' + }); + map.addOverlay(helpTooltip); +} + + +/** + * Creates a new measure tooltip + */ +function createMeasureTooltip() { + if (measureTooltipElement) { + measureTooltipElement.parentNode.removeChild(measureTooltipElement); + } + measureTooltipElement = document.createElement('div'); + measureTooltipElement.className = 'tooltip tooltip-measure'; + measureTooltip = new ol.Overlay({ + element: measureTooltipElement, + offset: [0, -15], + positioning: 'bottom-center' + }); + map.addOverlay(measureTooltip); +} + + /** * Let user change the geometry type. * @param {Event} e Change event.