495 lines
14 KiB
JavaScript
495 lines
14 KiB
JavaScript
/* μlogger
|
|
*
|
|
* Copyright(C) 2017 Bartek Fabiszewski (www.fabiszewski.net)
|
|
*
|
|
* This is free software; you can redistribute it and/or modify it under
|
|
* the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation; either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful, but
|
|
* WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
|
* General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with this program; if not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
|
|
// openlayers 3+
|
|
/** @namespace */
|
|
var uLogger = uLogger || {};
|
|
/** @namespace */
|
|
uLogger.mapAPI = uLogger.mapAPI || {};
|
|
/** @namespace */
|
|
uLogger.mapAPI.ol = (function(ns) {
|
|
|
|
/** @type {ol.Map} */
|
|
var map;
|
|
/** @type {ol.layer.Vector} */
|
|
var layerTrack;
|
|
/** @type {ol.layer.Vector} */
|
|
var layerMarkers;
|
|
/** @type {ol.layer.Base} */
|
|
var selectedLayer;
|
|
/** @type {ol.style.Style|{}} */
|
|
var olStyles;
|
|
var name = 'openlayers';
|
|
|
|
/**
|
|
* Initialize map
|
|
*/
|
|
function init() {
|
|
var urls = [];
|
|
urls.push('//cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList');
|
|
urls.push('js/ol.js');
|
|
for (var i = 0; i < urls.length; i++) {
|
|
ns.addScript(urls[i], 'mapapi_openlayers' + '_' + i);
|
|
}
|
|
|
|
ns.addCss('css/ol.css', 'ol_css');
|
|
|
|
var controls = [
|
|
new ol.control.Zoom(),
|
|
new ol.control.Rotate(),
|
|
new ol.control.ScaleLine(),
|
|
new ol.control.ZoomToExtent({label: getExtentImg()})
|
|
];
|
|
|
|
var view = new ol.View({
|
|
center: ol.proj.fromLonLat([ns.config.init_longitude, ns.config.init_latitude]),
|
|
zoom: 8
|
|
});
|
|
|
|
map = new ol.Map({
|
|
target: 'map-canvas',
|
|
controls: controls,
|
|
view: view
|
|
});
|
|
|
|
// default layer: OpenStreetMap
|
|
var osm = new ol.layer.Tile({
|
|
name: 'OpenStreetMap',
|
|
visible: true,
|
|
source: new ol.source.OSM()
|
|
});
|
|
map.addLayer(osm);
|
|
selectedLayer = osm;
|
|
|
|
// add extra layers
|
|
for (var layerName in ns.config.ol_layers) {
|
|
if (ns.config.ol_layers.hasOwnProperty(layerName)) {
|
|
var layerUrl = ns.config.ol_layers[layerName];
|
|
var ol_layer = new ol.layer.Tile({
|
|
name: layerName,
|
|
visible: false,
|
|
source: new ol.source.XYZ({
|
|
url: layerUrl
|
|
})
|
|
});
|
|
map.addLayer(ol_layer);
|
|
}
|
|
}
|
|
|
|
// init layers
|
|
var lineStyle = new ol.style.Style({
|
|
stroke: new ol.style.Stroke({
|
|
color: ns.hexToRGBA(ns.config.strokeColor, ns.config.strokeOpacity),
|
|
width: ns.config.strokeWeight
|
|
})
|
|
});
|
|
layerTrack = new ol.layer.Vector({
|
|
name: 'Track',
|
|
type: 'data',
|
|
source: new ol.source.Vector(),
|
|
style: lineStyle
|
|
});
|
|
layerMarkers = new ol.layer.Vector({
|
|
name: 'Markers',
|
|
type: 'data',
|
|
source: new ol.source.Vector()
|
|
});
|
|
map.addLayer(layerTrack);
|
|
map.addLayer(layerMarkers);
|
|
|
|
// styles
|
|
olStyles = {};
|
|
var iconRed = new ol.style.Icon({
|
|
anchor: [0.5, 1],
|
|
src: 'images/marker-red.png'
|
|
});
|
|
var iconGreen = new ol.style.Icon({
|
|
anchor: [0.5, 1],
|
|
src: 'images/marker-green.png'
|
|
});
|
|
var iconWhite = new ol.style.Icon({
|
|
anchor: [0.5, 1],
|
|
opacity: 0.7,
|
|
src: 'images/marker-white.png'
|
|
});
|
|
var iconGold = new ol.style.Icon({
|
|
anchor: [0.5, 1],
|
|
src: 'images/marker-gold.png'
|
|
});
|
|
olStyles['red'] = new ol.style.Style({
|
|
image: iconRed
|
|
});
|
|
olStyles['green'] = new ol.style.Style({
|
|
image: iconGreen
|
|
});
|
|
olStyles['white'] = new ol.style.Style({
|
|
image: iconWhite
|
|
});
|
|
olStyles['gold'] = new ol.style.Style({
|
|
image: iconGold
|
|
});
|
|
|
|
// popups
|
|
var popupContainer = document.createElement('div');
|
|
popupContainer.id = 'popup';
|
|
popupContainer.className = 'ol-popup';
|
|
document.body.appendChild(popupContainer);
|
|
var popupCloser = document.createElement('a');
|
|
popupCloser.id = 'popup-closer';
|
|
popupCloser.className = 'ol-popup-closer';
|
|
popupCloser.href = '#';
|
|
popupContainer.appendChild(popupCloser);
|
|
var popupContent = document.createElement('div');
|
|
popupContent.id = 'popup-content';
|
|
popupContainer.appendChild(popupContent);
|
|
|
|
var popup = new ol.Overlay({
|
|
element: popupContainer,
|
|
autoPan: true,
|
|
autoPanAnimation: {
|
|
duration: 250
|
|
}
|
|
});
|
|
|
|
popupCloser.onclick = function () {
|
|
// eslint-disable-next-line no-undefined
|
|
popup.setPosition(undefined);
|
|
popupCloser.blur();
|
|
return false;
|
|
};
|
|
|
|
// add click handler to map to show popup
|
|
map.on('click', function (e) {
|
|
var coordinate = e.coordinate;
|
|
var feature = map.forEachFeatureAtPixel(e.pixel,
|
|
function (_feature, _layer) {
|
|
if (_layer.get('name') === 'Markers') {
|
|
return _feature;
|
|
}
|
|
return null;
|
|
});
|
|
if (feature) {
|
|
var pos = feature.get('p');
|
|
var id = feature.getId();
|
|
var posLen = feature.get('posLen');
|
|
// popup show
|
|
popup.setPosition(coordinate);
|
|
popupContent.innerHTML = ns.getPopupHtml(pos, id, posLen);
|
|
map.addOverlay(popup);
|
|
ns.chartShowPosition(id);
|
|
} else {
|
|
// popup destroy
|
|
// eslint-disable-next-line no-undefined
|
|
popup.setPosition(undefined);
|
|
}
|
|
});
|
|
|
|
// change mouse cursor when over marker
|
|
map.on('pointermove', function (e) {
|
|
var hit = map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
|
|
return layer.get('name') === 'Markers';
|
|
});
|
|
if (hit) {
|
|
this.getTargetElement().style.cursor = 'pointer';
|
|
} else {
|
|
this.getTargetElement().style.cursor = '';
|
|
}
|
|
});
|
|
|
|
// layer switcher
|
|
var switcher = document.createElement('div');
|
|
switcher.id = 'switcher';
|
|
switcher.className = 'ol-control';
|
|
document.body.appendChild(switcher);
|
|
var switcherContent = document.createElement('div');
|
|
switcherContent.id = 'switcher-content';
|
|
switcherContent.className = 'ol-layerswitcher';
|
|
switcher.appendChild(switcherContent);
|
|
|
|
map.getLayers().forEach(function (layer) {
|
|
var layerLabel = document.createElement('label');
|
|
layerLabel.innerHTML = layer.get('name');
|
|
switcherContent.appendChild(layerLabel);
|
|
|
|
var layerRadio = document.createElement('input');
|
|
if (layer.get('type') === 'data') {
|
|
layerRadio.type = 'checkbox';
|
|
layerLabel.className = 'ol-datalayer';
|
|
} else {
|
|
layerRadio.type = 'radio';
|
|
}
|
|
layerRadio.name = 'layer';
|
|
layerRadio.value = layer.get('name');
|
|
layerRadio.onclick = switchLayer;
|
|
if (layer.getVisible()) {
|
|
layerRadio.checked = true;
|
|
}
|
|
layerLabel.insertBefore(layerRadio, layerLabel.childNodes[0]);
|
|
});
|
|
|
|
function switchLayer() {
|
|
var targetName = this.value;
|
|
map.getLayers().forEach(function (layer) {
|
|
if (layer.get('name') === targetName) {
|
|
if (layer.get('type') === 'data') {
|
|
if (layer.getVisible()) {
|
|
layer.setVisible(false);
|
|
} else {
|
|
layer.setVisible(true);
|
|
}
|
|
} else {
|
|
selectedLayer.setVisible(false);
|
|
selectedLayer = layer;
|
|
layer.setVisible(true);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
var switcherButton = document.createElement('button');
|
|
var layerImg = document.createElement('img');
|
|
layerImg.src = 'images/layers.svg';
|
|
layerImg.style.width = '60%';
|
|
switcherButton.appendChild(layerImg);
|
|
|
|
// eslint-disable-next-line func-style
|
|
var switcherHandle = function () {
|
|
var el = document.getElementById('switcher');
|
|
if (el.style.display === 'block') {
|
|
el.style.display = 'none';
|
|
} else {
|
|
el.style.display = 'block';
|
|
}
|
|
};
|
|
|
|
switcherButton.addEventListener('click', switcherHandle, false);
|
|
switcherButton.addEventListener('touchstart', switcherHandle, false);
|
|
|
|
var element = document.createElement('div');
|
|
element.className = 'ol-switcher-button ol-unselectable ol-control';
|
|
element.appendChild(switcherButton);
|
|
|
|
var switcherControl = new ol.control.Control({
|
|
element: element
|
|
});
|
|
map.addControl(switcherControl);
|
|
}
|
|
|
|
/**
|
|
* Clean up API
|
|
*/
|
|
function cleanup() {
|
|
map = null;
|
|
layerTrack = null;
|
|
layerMarkers = null;
|
|
selectedLayer = null;
|
|
olStyles = null;
|
|
ns.removeElementById('popup');
|
|
ns.removeElementById('switcher');
|
|
ns.clearMapCanvas();
|
|
}
|
|
|
|
/**
|
|
* Display track
|
|
* @param {HTMLCollection} positions XML element
|
|
* @param {boolean} update Should fit bounds if true
|
|
*/
|
|
function displayTrack(positions, update) {
|
|
var totalMeters = 0;
|
|
var totalSeconds = 0;
|
|
var points = [];
|
|
var posLen = positions.length;
|
|
for (var i = 0; i < posLen; i++) {
|
|
var p = ns.parsePosition(positions[i], i);
|
|
totalMeters += p.distance;
|
|
totalSeconds += p.seconds;
|
|
p.totalMeters = totalMeters;
|
|
p.totalSeconds = totalSeconds;
|
|
// set marker
|
|
setMarker(p, i, posLen);
|
|
// update polyline
|
|
var point = ol.proj.fromLonLat([p.longitude, p.latitude]);
|
|
points.push(point);
|
|
}
|
|
var lineString = new ol.geom.LineString(points);
|
|
|
|
var lineFeature = new ol.Feature({
|
|
geometry: lineString
|
|
});
|
|
|
|
layerTrack.getSource().addFeature(lineFeature);
|
|
|
|
var extent = layerTrack.getSource().getExtent();
|
|
|
|
map.getControls().forEach(function (el) {
|
|
if (el instanceof ol.control.ZoomToExtent) {
|
|
map.removeControl(el);
|
|
}
|
|
});
|
|
|
|
if (update) {
|
|
map.getView().fit(extent);
|
|
var zoom = map.getView().getZoom();
|
|
if (zoom > 20) {
|
|
map.getView().setZoom(20);
|
|
extent = map.getView().calculateExtent(map.getSize());
|
|
}
|
|
}
|
|
|
|
var zoomToExtentControl = new ol.control.ZoomToExtent({
|
|
extent: extent,
|
|
label: getExtentImg()
|
|
});
|
|
map.addControl(zoomToExtentControl);
|
|
|
|
ns.updateSummary(p.timestamp, totalMeters, totalSeconds);
|
|
if (p.tid !== ns.config.trackid) {
|
|
ns.config.trackid = p.tid;
|
|
ns.setTrack(ns.config.trackid);
|
|
}
|
|
ns.updateChart();
|
|
}
|
|
|
|
/**
|
|
* Clear map
|
|
*/
|
|
function clearMap() {
|
|
if (layerTrack) {
|
|
layerTrack.getSource().clear();
|
|
}
|
|
if (layerMarkers) {
|
|
layerMarkers.getSource().clear();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Set marker
|
|
* @param {uLogger.Position} pos
|
|
* @param {number} id
|
|
* @param {number} posLen
|
|
*/
|
|
function setMarker(pos, id, posLen) {
|
|
// marker
|
|
var marker = new ol.Feature({
|
|
geometry: new ol.geom.Point(ol.proj.fromLonLat([pos.longitude, pos.latitude]))
|
|
});
|
|
|
|
var iconStyle;
|
|
if (ns.isLatest()) {
|
|
iconStyle = olStyles['red'];
|
|
} else if (id === 0) {
|
|
iconStyle = olStyles['green'];
|
|
} else if (id === posLen - 1) {
|
|
iconStyle = olStyles['red'];
|
|
} else {
|
|
iconStyle = olStyles['white'];
|
|
}
|
|
marker.setStyle(iconStyle);
|
|
marker.setId(id);
|
|
marker.set('p', pos);
|
|
marker.set('posLen', posLen);
|
|
layerMarkers.getSource().addFeature(marker);
|
|
}
|
|
|
|
/**
|
|
* Add listener on chart to show position on map
|
|
* @param {google.visualization.LineChart} chart
|
|
* @param {google.visualization.DataTable} data
|
|
*/
|
|
function addChartEvent(chart, data) {
|
|
google.visualization.events.addListener(chart, 'select', function () {
|
|
var selection = chart.getSelection()[0];
|
|
if (selection) {
|
|
var id = data.getValue(selection.row, 0) - 1;
|
|
var marker = layerMarkers.getSource().getFeatureById(id);
|
|
var initStyle = marker.getStyle();
|
|
var iconStyle = olStyles['gold'];
|
|
marker.setStyle(iconStyle);
|
|
setTimeout(function () {
|
|
marker.setStyle(initStyle);
|
|
}, 2000);
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Get map bounds
|
|
* eg. (20.597985430276808, 52.15547181298076, 21.363595171488573, 52.33750879522563)
|
|
* @returns {number[]} Bounds
|
|
*/
|
|
function getBounds() {
|
|
var extent = map.getView().calculateExtent(map.getSize());
|
|
var bounds = ol.proj.transformExtent(extent, 'EPSG:900913', 'EPSG:4326');
|
|
var lon_sw = bounds[0];
|
|
var lat_sw = bounds[1];
|
|
var lon_ne = bounds[2];
|
|
var lat_ne = bounds[3];
|
|
return [lon_sw, lat_sw, lon_ne, lat_ne];
|
|
}
|
|
|
|
/**
|
|
* Zoom to track extent
|
|
*/
|
|
function zoomToExtent() {
|
|
map.getView().fit(layerMarkers.getSource().getExtent());
|
|
}
|
|
|
|
/**
|
|
* Zoom to bounds
|
|
* @param {number[]} bounds
|
|
*/
|
|
function zoomToBounds(bounds) {
|
|
var extent = ol.proj.transformExtent(bounds, 'EPSG:4326', 'EPSG:900913');
|
|
map.getView().fit(extent);
|
|
}
|
|
|
|
/**
|
|
* Update size
|
|
*/
|
|
function updateSize() {
|
|
map.updateSize();
|
|
}
|
|
|
|
/**
|
|
* Get extent image
|
|
* @returns {HTMLImageElement}
|
|
*/
|
|
function getExtentImg() {
|
|
var extentImg = document.createElement('img');
|
|
extentImg.src = 'images/extent.svg';
|
|
extentImg.style.width = '60%';
|
|
return extentImg;
|
|
}
|
|
|
|
return {
|
|
name: name,
|
|
init: init,
|
|
cleanup: cleanup,
|
|
displayTrack: displayTrack,
|
|
clearMap: clearMap,
|
|
setMarker: setMarker,
|
|
addChartEvent: addChartEvent,
|
|
getBounds: getBounds,
|
|
zoomToExtent: zoomToExtent,
|
|
zoomToBounds: zoomToBounds,
|
|
updateSize: updateSize
|
|
}
|
|
|
|
})(uLogger);
|