sven/ulogger-server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove openlayers 2 map api support

Browse Source
This commit is contained in:
Bartek Fabiszewski 2018-11-09 16:16:26 +01:00
parent 5c34206aae
commit e9d87f25e6
5 changed files with 316 additions and 555 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
config.default.php
View File

@ -22,8 +22,7 @@
// default map drawing framework
//$mapapi = "gmaps"; // google maps
//$mapapi = "openlayers"; // openlayers 2
$mapapi = "openlayers3"; // openlayers 3+
$mapapi = "openlayers"; // openlayers
// openlayers additional map layers in XYZ format
// name => url

3
index.php
View File

@ -153,8 +153,7 @@
<form>
<select name="api" onchange="loadMapAPI(this.options[this.selectedIndex].value);">
<option value="gmaps"<?= (uConfig::$mapapi == "gmaps") ? " selected" : "" ?>>Google Maps</option>
<option value="openlayers"<?= (uConfig::$mapapi == "openlayers") ? " selected" : "" ?>>OpenLayers 2</option>
<option value="openlayers3"<?= (uConfig::$mapapi == "openlayers3") ? " selected" : "" ?>>OpenLayers 3+</option>
<option value="openlayers"<?= (uConfig::$mapapi == "openlayers") ? " selected" : "" ?>>OpenLayers</option>
</select>
</form>
</div>

432
js/api_openlayers.js
View File

@ -16,60 +16,277 @@
* along with this program; if not, see <http://www.gnu.org/licenses/>.
*/
// openlayers
// openlayers 3+
var map;
var layerTrack;
var layerMarkers;
var wgs84;
var mercator;
var selectedLayer;
var olStyles;
var loadedAPI = 'openlayers';
function init() {
wgs84 = new OpenLayers.Projection('EPSG:4326'); // from WGS 1984
mercator = new OpenLayers.Projection('EPSG:900913'); // to Mercator
var options = {
controls: [
new OpenLayers.Control.ArgParser(), // default
new OpenLayers.Control.Attribution(), // default
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation(), // default
new OpenLayers.Control.PanZoomBar(),// do we need it?
new OpenLayers.Control.ScaleLine()
]
};
map = new OpenLayers.Map('map-canvas', options);
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([init_longitude, init_latitude]),
zoom: 8
});
map = new ol.Map({
target: 'map-canvas',
controls: controls,
view: view
});
// default layer: OpenStreetMap
var osm = new OpenLayers.Layer.OSM();
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 ol_layers) {
if (ol_layers.hasOwnProperty(layerName)) {
var layerUrl = ol_layers[layerName];
var ol_layer = new OpenLayers.Layer.OSM(
layerName,
urlFromOL3(layerUrl),
{ tileOptions: { crossOriginKeyword: null } }
);
var ol_layer = new ol.layer.Tile({
name: layerName,
visible: false,
source: new ol.source.XYZ({
url: layerUrl
})
});
map.addLayer(ol_layer);
}
}
var position = new OpenLayers.LonLat(init_longitude, init_latitude).transform(wgs84, mercator);
var zoom = 8;
map.setCenter(position, zoom);
// init layers
layerTrack = new OpenLayers.Layer.Vector('Track');
layerMarkers = new OpenLayers.Layer.Markers('Markers');
var lineStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: hexToRGBA(strokeColor, strokeOpacity),
width: 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.getElementsByTagName('body')[0].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() {
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;
}
});
if (feature) {
var p = feature.get('p');
var i = feature.getId();
var posLen = feature.get('posLen');
// popup show
popup.setPosition(coordinate);
popupContent.innerHTML = getPopupHtml(p, i, posLen);
map.addOverlay(popup);
if (document.getElementById('bottom').style.display == 'block') {
var index = 0;
for (var key in altitudes) {
if (altitudes.hasOwnProperty(key) && key == i) {
chart.setSelection([{ row: index, column: null }]);
break;
}
index++;
}
}
} else {
// popup destroy
popup.setPosition(undefined);
}
});
// change mouse cursor when over marker
map.on("pointermove", function(e) {
var hit = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
if (layer.get('name') == 'Markers') {
return true;
} else {
return false;
}
});
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.getElementsByTagName('body')[0].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 layerName = this.value;
map.getLayers().forEach(function (layer) {
if (layer.get('name') === layerName) {
if (layer.get('type') === 'data') {
if (layer.getVisible()) {
layer.setVisible(false);
} else {
layer.setVisible(true);
}
} else {
selectedLayer.setVisible(false);
selectedLayer = layer;
layer.setVisible(true);
}
return;
}
});
};
var switcherButton = document.createElement('button');
var layerImg = document.createElement('img');
layerImg.src = 'images/layers.svg';
layerImg.style.width = '60%';
switcherButton.appendChild(layerImg);
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);
}
function cleanup() {
map = undefined;
layerTrack = undefined;
layerMarkers = undefined;
wgs84 = undefined;
mercator = undefined;
selectedLayer = undefined;
olStyles = undefined;
removeElementById('popup');
removeElementById('switcher');
document.getElementById("map-canvas").innerHTML = '';
}
@ -78,7 +295,6 @@ function displayTrack(xml, update) {
var totalMeters = 0;
var totalSeconds = 0;
var points = [];
var latlngbounds = new OpenLayers.Bounds();
var positions = xml.getElementsByTagName('position');
var posLen = positions.length;
for (var i = 0; i < posLen; i++) {
@ -90,24 +306,40 @@ function displayTrack(xml, update) {
// set marker
setMarker(p, i, posLen);
// update polyline
var point = new OpenLayers.Geometry.Point(p.longitude, p.latitude).transform(wgs84, mercator);
latlngbounds.extend(point);
var point = ol.proj.fromLonLat([p.longitude, p.latitude]);
points.push(point);
}
var lineString = new OpenLayers.Geometry.LineString(points);
var lineStyle = { strokeColor: strokeColor, strokeOpacity: strokeOpacity, strokeWidth: strokeWeight };
var lineFeature = new OpenLayers.Feature.Vector(lineString, null, lineStyle);
layerTrack.addFeatures([lineFeature]);
map.addLayer(layerTrack);
map.addLayer(layerMarkers);
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.zoomToExtent(latlngbounds);
if (i == 1) {
// only one point, zoom out
map.zoomOut();
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);
updateSummary(p.timestamp, totalMeters, totalSeconds);
if (p.tid != trackid) {
trackid = p.tid;
@ -122,53 +354,33 @@ function displayTrack(xml, update) {
function clearMap() {
if (layerTrack) {
layerTrack.removeAllFeatures();
layerTrack.getSource().clear();
}
if (layerMarkers) {
layerMarkers.clearMarkers();
layerMarkers.getSource().clear();
}
}
function setMarker(p, i, posLen) {
// marker
var lonLat = new OpenLayers.LonLat(p.longitude, p.latitude).transform(wgs84, mercator);
var size = new OpenLayers.Size(16, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
if (latest == 1) { var icon = new OpenLayers.Icon('images/marker-red.png', size, offset); }
else if (i == 0) { var icon = new OpenLayers.Icon('images/marker-green.png', size, offset); }
else if (i == posLen - 1) { var icon = new OpenLayers.Icon('images/marker-red.png', size, offset); }
else {
offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('images/marker-white.png', size, offset);
}
var marker = new OpenLayers.Marker(lonLat, icon);
layerMarkers.addMarker(marker);
var marker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([p.longitude, p.latitude]))
});
// popup
var content = getPopupHtml(p, i, posLen);
marker.events.register("mousedown", marker, (function () {
return function () {
// remove popups
if (map.popups.length > 0) {
for (var j = map.popups.length - 1; j >= 0; j--) {
map.removePopup(map.popups[j])
};
if (latest == 1) {
var iconStyle = olStyles['red'];
} else if (i == 0) {
var iconStyle = olStyles['green'];
} else if (i == posLen - 1) {
var iconStyle = olStyles['red'];
} else {
var iconStyle = olStyles['white'];
}
// show popup
var popup = new OpenLayers.Popup.FramedCloud("popup_" + (i + 1), lonLat, null, content, icon, true);
map.addPopup(popup);
if (document.getElementById('bottom').style.display == 'block') {
var index = 0;
for (var key in altitudes) {
if (altitudes.hasOwnProperty(key) && key == i) {
chart.setSelection([{ row: index, column: null }]);
break;
}
index++;
}
}
}
})());
marker.setStyle(iconStyle);
marker.setId(i);
marker.set('p', p);
marker.set('posLen', posLen);
layerMarkers.getSource().addFeature(marker);
}
function addChartEvent(chart, data) {
@ -176,16 +388,20 @@ function addChartEvent(chart, data) {
var selection = chart.getSelection()[0];
if (selection) {
var id = data.getValue(selection.row, 0) - 1;
var marker = layerMarkers.markers[id];
var url = marker.icon.url;
marker.setUrl('images/marker-gold.png');
altTimeout = setTimeout(function () { marker.setUrl(url); }, 2000);
var marker = layerMarkers.getSource().getFeatureById(id);
var url = marker.get('src');
var initStyle = marker.getStyle();
var iconStyle = olStyles['gold'];
marker.setStyle(iconStyle);
altTimeout = setTimeout(function () { marker.setStyle(initStyle); }, 2000);
}
});
}
//20.597985430276808,52.15547181298076,21.363595171488573,52.33750879522563
function getBounds() {
var bounds = map.getExtent().transform(mercator, wgs84).toArray();
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];
@ -194,41 +410,17 @@ function getBounds() {
}
function zoomToBounds(b) {
var bounds = new OpenLayers.Bounds(b).transform(wgs84, mercator);
map.zoomToExtent(bounds);
}
function urlFromOL3(url) {
url = url.replace(/\{([xyz])\}/g, "$${$1}");
return expandUrl(url);
}
// backported from openlayers 3
function expandUrl(url) {
var urls = [];
var match = /\{([a-z])-([a-z])\}/.exec(url);
if (match) {
// char range
var startCharCode = match[1].charCodeAt(0);
var stopCharCode = match[2].charCodeAt(0);
for (var charCode = startCharCode; charCode <= stopCharCode; ++charCode) {
urls.push(url.replace(match[0], String.fromCharCode(charCode)));
}
return urls;
}
match = match = /\{(\d+)-(\d+)\}/.exec(url);
if (match) {
// number range
var stop = parseInt(match[2], 10);
for (var i = parseInt(match[1], 10); i <= stop; i++) {
urls.push(url.replace(match[0], i.toString()));
}
return urls;
}
urls.push(url);
return urls;
var bounds = ol.proj.transformExtent(b, 'EPSG:4326', 'EPSG:900913');
map.getView().fit(bounds);
}
function updateSize() {
// ignore
map.updateSize();
}
function getExtentImg() {
var extentImg = document.createElement('img');
extentImg.src = 'images/extent.svg';
extentImg.style.width = '60%';
return extentImg;
}

426
js/api_openlayers3.js
View File

@ -1,426 +0,0 @@
/* μ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+
var map;
var layerTrack;
var layerMarkers;
var selectedLayer;
var olStyles;
var loadedAPI = 'openlayers3';
function init() {
addCss('css/ol.css', 'ol3css');
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([init_longitude, 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 ol_layers) {
if (ol_layers.hasOwnProperty(layerName)) {
var layerUrl = 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: hexToRGBA(strokeColor, strokeOpacity),
width: 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.getElementsByTagName('body')[0].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() {
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;
}
});
if (feature) {
var p = feature.get('p');
var i = feature.getId();
var posLen = feature.get('posLen');
// popup show
popup.setPosition(coordinate);
popupContent.innerHTML = getPopupHtml(p, i, posLen);
map.addOverlay(popup);
if (document.getElementById('bottom').style.display == 'block') {
var index = 0;
for (var key in altitudes) {
if (altitudes.hasOwnProperty(key) && key == i) {
chart.setSelection([{ row: index, column: null }]);
break;
}
index++;
}
}
} else {
// popup destroy
popup.setPosition(undefined);
}
});
// change mouse cursor when over marker
map.on("pointermove", function(e) {
var hit = map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
if (layer.get('name') == 'Markers') {
return true;
} else {
return false;
}
});
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.getElementsByTagName('body')[0].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 layerName = this.value;
map.getLayers().forEach(function (layer) {
if (layer.get('name') === layerName) {
if (layer.get('type') === 'data') {
if (layer.getVisible()) {
layer.setVisible(false);
} else {
layer.setVisible(true);
}
} else {
selectedLayer.setVisible(false);
selectedLayer = layer;
layer.setVisible(true);
}
return;
}
});
};
var switcherButton = document.createElement('button');
var layerImg = document.createElement('img');
layerImg.src = 'images/layers.svg';
layerImg.style.width = '60%';
switcherButton.appendChild(layerImg);
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);
}
function cleanup() {
map = undefined;
layerTrack = undefined;
layerMarkers = undefined;
selectedLayer = undefined;
olStyles = undefined;
removeElementById('popup');
removeElementById('switcher');
document.getElementById("map-canvas").innerHTML = '';
}
function displayTrack(xml, update) {
altitudes = {};
var totalMeters = 0;
var totalSeconds = 0;
var points = [];
var positions = xml.getElementsByTagName('position');
var posLen = positions.length;
for (var i = 0; i < posLen; i++) {
var p = 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);
updateSummary(p.timestamp, totalMeters, totalSeconds);
if (p.tid != trackid) {
trackid = p.tid;
setTrack(trackid);
}
if (document.getElementById('bottom').style.display == 'block') {
// update altitudes chart
chart.clearChart();
displayChart();
}
}
function clearMap() {
if (layerTrack) {
layerTrack.getSource().clear();
}
if (layerMarkers) {
layerMarkers.getSource().clear();
}
}
function setMarker(p, i, posLen) {
// marker
var marker = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([p.longitude, p.latitude]))
});
if (latest == 1) {
var iconStyle = olStyles['red'];
} else if (i == 0) {
var iconStyle = olStyles['green'];
} else if (i == posLen - 1) {
var iconStyle = olStyles['red'];
} else {
var iconStyle = olStyles['white'];
}
marker.setStyle(iconStyle);
marker.setId(i);
marker.set('p', p);
marker.set('posLen', posLen);
layerMarkers.getSource().addFeature(marker);
}
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 url = marker.get('src');
var initStyle = marker.getStyle();
var iconStyle = olStyles['gold'];
marker.setStyle(iconStyle);
altTimeout = setTimeout(function () { marker.setStyle(initStyle); }, 2000);
}
});
}
//20.597985430276808,52.15547181298076,21.363595171488573,52.33750879522563
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];
}
function zoomToBounds(b) {
var bounds = ol.proj.transformExtent(b, 'EPSG:4326', 'EPSG:900913');
map.getView().fit(bounds);
}
function updateSize() {
map.updateSize();
}
function getExtentImg() {
var extentImg = document.createElement('img');
extentImg.src = 'images/extent.svg';
extentImg.style.width = '60%';
return extentImg;
}

5
js/main.js
View File

@ -492,11 +492,8 @@ function loadMapAPI(api) {
if (mapapi == 'gmaps') {
addScript('js/api_gmaps.js', 'mapapi');
urls.push('//maps.googleapis.com/maps/api/js?' + ((gkey !== null) ? ('key=' + gkey + '&') : '') + 'callback=init');
} else if (mapapi == 'openlayers') {
addScript('js/api_openlayers.js', 'mapapi');
urls.push('//openlayers.org/api/OpenLayers.js');
} else {
addScript('js/api_openlayers3.js', 'mapapi');
addScript('js/api_openlayers.js', 'mapapi');
urls.push('//cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList')
urls.push('js/ol.js');
}