Milliways
/
cccamp19-map
3
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add messure, I <3 JS, not

master
TuxCoder 1 year ago
parent
b6b4a309d8
commit
46ef181ec7
8 changed files with 8849 additions and 4823 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      dist/index.html
  2. +40
    -0
      dist/main.css
  3. +1
    -1
      dist/main.css.map
  4. +8326
    -4818
      dist/main.js
  5. +1
    -1
      dist/main.js.map
  6. +410
    -0
      src/MessureControl.js
  7. +27
    -3
      src/app.js
  8. +43
    -0
      src/app.scss

+ 1
- 0
dist/index.html View File

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>CCCamp19 map of milliways</title>
<link rel="stylesheet" href="./main.css" type="text/css">
<style>


+ 40
- 0
dist/main.css View File

@ -384,5 +384,45 @@ html, body {
bottom: 0;
width: 100%; }
.hidden {
display: none; }
.ol-messure {
right: .25em;
top: 10em;
font-size: 1.5em; }
.tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap; }
.tooltip-measure {
opacity: 1;
font-weight: bold; }
.tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white; }
.tooltip-measure:before,
.tooltip-static:before {
border-top: 6px solid rgba(0, 0, 0, 0.5);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
position: absolute;
bottom: -6px;
margin-left: -7px;
left: 50%; }
.tooltip-static:before {
border-top-color: #ffcc33; }
/*# sourceMappingURL=main.css.map*/

+ 1
- 1
dist/main.css.map
File diff suppressed because it is too large
View File


+ 8326
- 4818
dist/main.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/main.js.map
File diff suppressed because it is too large
View File


+ 410
- 0
src/MessureControl.js View File

@ -0,0 +1,410 @@
/**
* @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';
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.active_ = true;
}
/**
*
*/
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_ = true;
}
/**
* 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

+ 27
- 3
src/app.js View File

@ -3,7 +3,8 @@ import Map from 'ol/Map.js';
import WebGLMap from 'ol/WebGLMap.js';
import {WEBGL} from 'ol/has.js'
import View from 'ol/View.js';
import {defaults as defaultControls, Attribution as AttributionControl} from 'ol/control.js';
import {defaults as defaultControls, Attribution as AttributionControl, ScaleLine as ScaleLineControl} from 'ol/control.js';
import MessureControl from './MessureControl.js';
import LayerSwitcher from 'ol-layerswitcher';
import {all as allStrategy} from 'ol/loadingstrategy';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
@ -134,6 +135,26 @@ var vectorSource = new VectorSource({
attributions: '&#169;<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>',
});
var messureSource = new VectorSource();
var messureLayer = new VectorLayer({
title: 'Messure',
source: messureSource,
style: new Style({
fill: new Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: '#ffcc33'
})
})
})
});
var orthoLayer = new TileLayer({
title: 'Ortho Imagery',
type: 'base',
@ -182,7 +203,9 @@ var osmLayer = new TileLayer({
var map = new MapClass({
target: 'map',
controls: defaultControls().extend([
new LayerSwitcher()
new LayerSwitcher(),
new ScaleLineControl(),
new MessureControl({ source: messureSource}),
]),
numZoomLevels: 19,
units: 'm',
@ -197,7 +220,8 @@ var map = new MapClass({
new LayerGroup({
title: 'overlays',
layers: [
vectorLayer
vectorLayer,
messureLayer,
]
})
],


+ 43
- 0
src/app.scss View File

@ -12,3 +12,46 @@ html, body {
width: 100%;
}
.hidden {
display: none;
}
.ol-messure {
right: .25em;
top: 10em;
font-size: 1.5em;
}
.tooltip {
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 4px;
color: white;
padding: 4px 8px;
opacity: 0.7;
white-space: nowrap;
}
.tooltip-measure {
opacity: 1;
font-weight: bold;
}
.tooltip-static {
background-color: #ffcc33;
color: black;
border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
border-top: 6px solid rgba(0, 0, 0, 0.5);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
position: absolute;
bottom: -6px;
margin-left: -7px;
left: 50%;
}
.tooltip-static:before {
border-top-color: #ffcc33;
}

Write Preview
Loading…
Cancel
Save