414 lines
11 KiB
JavaScript
414 lines
11 KiB
JavaScript
/**
|
|
* @module ol/control/MessureControl
|
|
*/
|
|
import Control from 'ol/control/Control.js';
|
|
import {CLASS_CONTROL, CLASS_UNSELECTABLE, CLASS_UNSUPPORTED} from 'ol/css.js';
|
|
import {replaceNode} from 'ol/dom.js';
|
|
import {listen} from 'ol/events.js';
|
|
import EventType from 'ol/events/EventType.js';
|
|
import {Vector as VectorSource} from 'ol/source';
|
|
import Overlay from 'ol/Overlay.js';
|
|
import {LineString, Polygon} from 'ol/geom.js';
|
|
import Draw from 'ol/interaction/Draw.js';
|
|
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
|
|
import {getArea, getLength} from 'ol/sphere.js';
|
|
import {unByKey} from 'ol/Observable.js';
|
|
|
|
/**
|
|
* @typedef {Object} Options
|
|
* @property {string} [className='ol-full-screen'] CSS class name.
|
|
* @property {string|Text} [label='\u2922'] Text label to use for the button.
|
|
* Instead of text, also an element (e.g. a `span` element) can be used.
|
|
* @property {string|Text} [labelActive='\u00d7'] Text label to use for the
|
|
* button when full-screen is active.
|
|
* Instead of text, also an element (e.g. a `span` element) can be used.
|
|
* @property {string} [tipLabel='Toggle full-screen'] Text label to use for the button tip.
|
|
* @property {boolean} [keys=false] Full keyboard access.
|
|
* @property {HTMLElement|string} [target] Specify a target if you want the
|
|
* control to be rendered outside of the map's viewport.
|
|
* @property {HTMLElement|string} [source] The element to be displayed
|
|
* fullscreen. When not provided, the element containing the map viewport will
|
|
* be displayed fullscreen.
|
|
*/
|
|
|
|
|
|
/**
|
|
* @classdesc
|
|
* Provides a button that when clicked fills up the full screen with the map.
|
|
* The full screen source element is by default the element containing the map viewport unless
|
|
* overridden by providing the `source` option. In which case, the dom
|
|
* element introduced using this parameter will be displayed in full screen.
|
|
*
|
|
* When in full screen mode, a close button is shown to exit full screen mode.
|
|
* The [Fullscreen API](http://www.w3.org/TR/fullscreen/) is used to
|
|
* toggle the map in full screen mode.
|
|
*
|
|
* @api
|
|
*/
|
|
var MessureControl = /*@__PURE__*/(function (Control) {
|
|
function MessureControl(opt_options) {
|
|
|
|
var self = this;
|
|
var options = opt_options ? opt_options : {};
|
|
|
|
Control.call(this, {
|
|
element: document.createElement('div'),
|
|
target: options.target
|
|
});
|
|
|
|
this.active_ = options.active ? options.active : false;
|
|
|
|
/**
|
|
* @private
|
|
* @type {string}
|
|
*/
|
|
this.cssClassName_ = options.className !== undefined ? options.className :
|
|
'ol-messure';
|
|
|
|
var label = options.label !== undefined ? options.label : '\ud83d\udccf';
|
|
|
|
/**
|
|
* @private
|
|
* @type {Text}
|
|
*/
|
|
this.labelNode_ = typeof label === 'string' ?
|
|
document.createTextNode(label) : label;
|
|
|
|
var labelActive = options.labelActive !== undefined ? options.labelActive : '\ud83d\udccf';
|
|
|
|
/**
|
|
* @private
|
|
* @type {Text}
|
|
*/
|
|
this.labelActiveNode_ = typeof labelActive === 'string' ?
|
|
document.createTextNode(labelActive) : labelActive;
|
|
|
|
/**
|
|
* @private
|
|
* @type {HTMLElement}
|
|
*/
|
|
this.button_ = document.createElement('button');
|
|
|
|
var tipLabel = options.tipLabel ? options.tipLabel : 'messure distance';
|
|
this.setClassName_(this.button_, this.active_);
|
|
this.button_.setAttribute('type', 'button');
|
|
this.button_.title = tipLabel;
|
|
this.button_.appendChild(this.labelNode_);
|
|
|
|
listen(this.button_, EventType.CLICK,
|
|
this.handleClick_, this);
|
|
|
|
var cssClasses = this.cssClassName_ + ' ' + CLASS_UNSELECTABLE +
|
|
' ' + CLASS_CONTROL;
|
|
var element = this.element;
|
|
element.className = cssClasses;
|
|
element.appendChild(this.button_);
|
|
|
|
/**
|
|
* @private
|
|
* @type {boolean}
|
|
* /
|
|
this.keys_ = options.keys !== undefined ? options.keys : false;*/
|
|
|
|
/**
|
|
* @private
|
|
* @type {HTMLElement|string|undefined}
|
|
*/
|
|
this.source_ = options.source ? options.source : new VectorSource();
|
|
|
|
|
|
/**
|
|
* Currently drawn feature.
|
|
* @type {module:ol/Feature~Feature}
|
|
*/
|
|
this.sketch;
|
|
|
|
|
|
/**
|
|
* The help tooltip element.
|
|
* @type {Element}
|
|
*/
|
|
this.helpTooltipElement;
|
|
|
|
|
|
/**
|
|
* Overlay to show the help messages.
|
|
* @type {module:ol/Overlay}
|
|
*/
|
|
this.helpTooltip;
|
|
|
|
|
|
/**
|
|
* The measure tooltip element.
|
|
* @type {Element}
|
|
*/
|
|
this.measureTooltipElement;
|
|
|
|
|
|
/**
|
|
* Overlay to show the measurement.
|
|
* @type {module:ol/Overlay}
|
|
*/
|
|
this.measureTooltip;
|
|
|
|
|
|
/**
|
|
* Message to show when the user is drawing a polygon.
|
|
* @type {string}
|
|
*/
|
|
this.continuePolygonMsg = 'Click to continue drawing the polygon';
|
|
|
|
|
|
/**
|
|
* Message to show when the user is drawing a line.
|
|
* @type {string}
|
|
*/
|
|
this.continueLineMsg = 'Click to continue drawing the line</br>Doubleclick to end path';
|
|
|
|
var type = (false ? 'Polygon' : 'LineString');
|
|
this.draw_ = new Draw({
|
|
source: this.source_,
|
|
type: type,
|
|
style: new Style({
|
|
fill: new Fill({
|
|
color: 'rgba(255, 255, 255, 0.2)'
|
|
}),
|
|
stroke: new Stroke({
|
|
color: 'rgba(0, 0, 0, 0.5)',
|
|
lineDash: [10, 10],
|
|
width: 2
|
|
}),
|
|
image: new CircleStyle({
|
|
radius: 5,
|
|
stroke: new Stroke({
|
|
color: 'rgba(0, 0, 0, 0.7)'
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(255, 255, 255, 0.2)'
|
|
})
|
|
})
|
|
})
|
|
});
|
|
|
|
var listener;
|
|
this.draw_.on('drawstart',
|
|
function(evt) {
|
|
// set sketch
|
|
self.sketch = evt.feature;
|
|
|
|
/** @type {module:ol/coordinate~Coordinate|undefined} */
|
|
var tooltipCoord = evt.coordinate;
|
|
|
|
listener = self.sketch.getGeometry().on('change', function(evt) {
|
|
var geom = evt.target;
|
|
var output;
|
|
if (geom instanceof Polygon) {
|
|
output = formatArea(geom);
|
|
tooltipCoord = geom.getInteriorPoint().getCoordinates();
|
|
} else if (geom instanceof LineString) {
|
|
output = self.formatLength(geom);
|
|
tooltipCoord = geom.getLastCoordinate();
|
|
}
|
|
self.measureTooltipElement.innerHTML = output;
|
|
self.measureTooltip.setPosition(tooltipCoord);
|
|
});
|
|
});
|
|
|
|
this.draw_.on('drawend',
|
|
function() {
|
|
self.measureTooltipElement.className = 'tooltip tooltip-static';
|
|
self.measureTooltip.setOffset([0, -7]);
|
|
// unset sketch
|
|
self.sketch = null;
|
|
// unset tooltip so that a new one can be created
|
|
self.measureTooltipElement = null;
|
|
self.createMeasureTooltip();
|
|
unByKey(listener);
|
|
});
|
|
|
|
}
|
|
|
|
if ( Control ) MessureControl.__proto__ = Control;
|
|
MessureControl.prototype = Object.create( Control && Control.prototype );
|
|
MessureControl.prototype.constructor = MessureControl;
|
|
|
|
/**
|
|
* @param {MouseEvent} event The event to handle
|
|
* @private
|
|
*/
|
|
MessureControl.prototype.handleClick_ = function handleClick_ (event) {
|
|
event.preventDefault();
|
|
this.handleMessureControl_();
|
|
};
|
|
|
|
|
|
MessureControl.prototype.isActive = function isActive () {
|
|
return this.active_;
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
MessureControl.prototype.activate = function activate () {
|
|
if (this.isActive()) {
|
|
return;
|
|
}
|
|
var map = this.getMap();
|
|
var self = this;
|
|
this.pointerMoveHandler_ = (e) => self.pointerMoveHandler(e);
|
|
map.on('pointermove', this.pointerMoveHandler_);
|
|
map.addInteraction(this.draw_);
|
|
this.button_.classList.add('active');
|
|
|
|
this.active_ = true;
|
|
this.setClassName_(this.button_, this.active_);
|
|
}
|
|
|
|
/**
|
|
*
|
|
*/
|
|
MessureControl.prototype.deactivate = function deactivate () {
|
|
var map = this.getMap();
|
|
map.un('pointermove', this.pointerMoveHandler_);
|
|
map.removeInteraction(this.draw_);
|
|
this.helpTooltipElement.classList.add('hidden');
|
|
this.active_ = false;
|
|
this.setClassName_(this.button_, this.active_);
|
|
}
|
|
|
|
/**
|
|
* Handle pointer move.
|
|
* @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
|
|
*/
|
|
MessureControl.prototype.pointerMoveHandler = function pointerMoveHandler (evt) {
|
|
if (evt.dragging) {
|
|
return;
|
|
}
|
|
/** @type {string} */
|
|
var helpMsg = 'Click to start drawing';
|
|
|
|
if (this.sketch) {
|
|
var geom = (this.sketch.getGeometry());
|
|
if (geom instanceof Polygon) {
|
|
helpMsg = this.continuePolygonMsg;
|
|
} else if (geom instanceof LineString) {
|
|
helpMsg = this.continueLineMsg;
|
|
}
|
|
}
|
|
|
|
this.helpTooltipElement.innerHTML = helpMsg;
|
|
this.helpTooltip.setPosition(evt.coordinate);
|
|
|
|
this.helpTooltipElement.classList.remove('hidden');
|
|
};
|
|
|
|
/**
|
|
* @param {HTMLElement} element Target element
|
|
* @param {boolean} fullscreen True if fullscreen class name should be active
|
|
* @private
|
|
*/
|
|
MessureControl.prototype.setClassName_ = function setClassName_ (element, fullscreen) {
|
|
var activeClassName = this.cssClassName_ + '-true';
|
|
var inactiveClassName = this.cssClassName_ + '-false';
|
|
var nextClassName = fullscreen ? activeClassName : inactiveClassName;
|
|
element.classList.remove(activeClassName);
|
|
element.classList.remove(inactiveClassName);
|
|
element.classList.add(nextClassName);
|
|
};
|
|
|
|
/**
|
|
* @inheritDoc
|
|
* @api
|
|
*/
|
|
MessureControl.prototype.setMap = function setMap (map) {
|
|
Control.prototype.setMap.call(this, map);
|
|
var self = this;
|
|
|
|
if (map) {
|
|
this.createHelpTooltip();
|
|
map.getViewport().addEventListener('mouseout', function() {
|
|
self.helpTooltipElement.classList.add('hidden');
|
|
});
|
|
this.createMeasureTooltip();
|
|
this.createHelpTooltip();
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* Creates a new help tooltip
|
|
*/
|
|
MessureControl.prototype.createHelpTooltip = function createHelpTooltip() {
|
|
if (this.helpTooltipElement) {
|
|
this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
|
|
}
|
|
this.helpTooltipElement = document.createElement('div');
|
|
this.helpTooltipElement.className = 'tooltip hidden';
|
|
this.helpTooltip = new Overlay({
|
|
element: this.helpTooltipElement,
|
|
offset: [15, 0],
|
|
positioning: 'center-left'
|
|
});
|
|
this.getMap().addOverlay(this.helpTooltip);
|
|
}
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
MessureControl.prototype.handleMessureControl_ = function handleMessureControl_ () {
|
|
var map = this.getMap();
|
|
var self = this;
|
|
if (!map) {
|
|
return;
|
|
}
|
|
if (this.isActive()) {
|
|
//exitMessureControl();
|
|
this.deactivate();
|
|
} else {
|
|
this.activate();
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Creates a new measure tooltip
|
|
*/
|
|
MessureControl.prototype.createMeasureTooltip = function createMeasureTooltip() {
|
|
var map = this.getMap();
|
|
if (this.measureTooltipElement) {
|
|
measureTooltipElement.parentNode.removeChild(measureTooltipElement);
|
|
}
|
|
this.measureTooltipElement = document.createElement('div');
|
|
this.measureTooltipElement.className = 'tooltip tooltip-measure';
|
|
this.measureTooltip = new Overlay({
|
|
element: this.measureTooltipElement,
|
|
offset: [0, -15],
|
|
positioning: 'bottom-center'
|
|
});
|
|
map.addOverlay(this.measureTooltip);
|
|
}
|
|
|
|
/**
|
|
* Format length output.
|
|
* @param {module:ol/geom/LineString~LineString} line The line.
|
|
* @return {string} The formatted length.
|
|
*/
|
|
MessureControl.prototype.formatLength = function formatLength(line) {
|
|
var length = getLength(line);
|
|
var output;
|
|
if (length > 100) {
|
|
output = (Math.round(length / 1000 * 100) / 100) +
|
|
' ' + 'km';
|
|
} else {
|
|
output = (Math.round(length * 100) / 100) +
|
|
' ' + 'm';
|
|
}
|
|
return output;
|
|
};
|
|
|
|
return MessureControl;
|
|
}(Control));
|
|
|
|
export default MessureControl;
|
|
|
|
//# sourceMappingURL=MessureControl.js.map
|