341 lines
7.6 KiB
JavaScript
341 lines
7.6 KiB
JavaScript
"use strict";
|
|
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, 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';
|
|
import LayerGroup from 'ol/layer/Group';
|
|
import LayerImage from 'ol/layer/Image';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
import OSM from 'ol/source/OSM.js';
|
|
import XYZ from 'ol/source/XYZ';
|
|
import {fromLonLat, toLonLat} from 'ol/proj.js';
|
|
import VectorLayer from 'ol/layer/Vector.js';
|
|
import VectorSource from 'ol/source/Vector.js';
|
|
import VectorTileLayer from 'ol/layer/VectorTile.js';
|
|
import VectorTileSource from 'ol/source/VectorTile.js';
|
|
import OSMXML from 'ol/format/OSMXML.js';
|
|
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';
|
|
|
|
|
|
const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);
|
|
|
|
var MapClass;
|
|
|
|
if (WEBGL && false) {
|
|
MapClass = WebGLMap;
|
|
} else {
|
|
MapClass = Map;
|
|
}
|
|
|
|
var styles = {
|
|
'amenity': {
|
|
'parking': new Style({
|
|
stroke: new Stroke({
|
|
color: 'rgba(170, 170, 170, 1.0)',
|
|
width: 1
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(170, 170, 170, 0.3)'
|
|
})
|
|
})
|
|
},
|
|
'building': {
|
|
'.*': new Style({
|
|
zIndex: 100,
|
|
stroke: new Stroke({
|
|
color: 'rgba(246, 99, 79, 1.0)',
|
|
width: 1
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(246, 99, 79, 0.3)'
|
|
}),
|
|
text: new Text({
|
|
font: '12px Calibri,sans-serif',
|
|
fill: new Fill({
|
|
color: '#000'
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#fff',
|
|
width: 3
|
|
})
|
|
})
|
|
})
|
|
},
|
|
'highway': {
|
|
'service': new Style({
|
|
stroke: new Stroke({
|
|
color: 'rgba(255, 255, 255, 1.0)',
|
|
width: 2
|
|
})
|
|
}),
|
|
'.*': new Style({
|
|
stroke: new Stroke({
|
|
color: 'rgba(255, 255, 255, 1.0)',
|
|
width: 3
|
|
})
|
|
})
|
|
},
|
|
'landuse': {
|
|
'forest|grass|allotments': new Style({
|
|
stroke: new Stroke({
|
|
color: 'rgba(0, 0, 170, 1.0)',
|
|
width: 1
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(0, 0, 170, 0.3)'
|
|
}),
|
|
text: new Text({
|
|
font: '12px Calibri,sans-serif',
|
|
fill: new Fill({
|
|
color: '#000'
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#fff',
|
|
width: 3
|
|
})
|
|
})
|
|
})
|
|
},
|
|
'natural': {
|
|
'tree': new Style({
|
|
image: new CircleStyle({
|
|
radius: 2,
|
|
fill: new Fill({
|
|
color: 'rgba(140, 208, 95, 1.0)'
|
|
}),
|
|
stroke: null
|
|
})
|
|
})
|
|
},
|
|
'name': {
|
|
'.*': new Style({
|
|
text: new Text({
|
|
font: '12px Calibri,sans-serif',
|
|
fill: new Fill({
|
|
color: '#000'
|
|
}),
|
|
stroke: new Stroke({
|
|
color: '#fff',
|
|
width: 3
|
|
})
|
|
})
|
|
})
|
|
}
|
|
};
|
|
|
|
var vectorSource = new VectorSource({
|
|
format: new OSMXML(),
|
|
url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1',
|
|
strategy: allStrategy,
|
|
attributions: '©<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',
|
|
source: new XYZ({
|
|
url: 'https://cdn.eventphone.de/maps/ziegeleipark/{z}/{x}/{y}.jpg',
|
|
maxZoom: 22,
|
|
minZoom: 14,
|
|
attributions: 'Bianco Veigel & Rene Hansen',
|
|
attributionsCollapsible: false,
|
|
})
|
|
});
|
|
|
|
var vectorLayer = new VectorLayer({
|
|
title: 'Milliways Overlay',
|
|
source: vectorSource,
|
|
style: function(feature) {
|
|
for (var key in styles) {
|
|
var value = feature.get(key);
|
|
if (value !== undefined) {
|
|
for (var regexp in styles[key]) {
|
|
if (new RegExp(regexp).test(value)) {
|
|
var style = styles[key][regexp];
|
|
var text = feature.get('name');
|
|
if(text !== undefined ) {
|
|
if(feature.get('size') !== undefined) {
|
|
text += '\n' + feature.get('size');
|
|
}
|
|
}
|
|
style.getText().setText(text);
|
|
return style;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
});
|
|
|
|
|
|
var osmLayer = new TileLayer({
|
|
title: 'OSM',
|
|
type: 'base',
|
|
source: new OSM()
|
|
});
|
|
|
|
var map = new MapClass({
|
|
target: 'map',
|
|
controls: defaultControls().extend([
|
|
new LayerSwitcher(),
|
|
new ScaleLineControl(),
|
|
new MessureControl({ source: messureSource}),
|
|
]),
|
|
numZoomLevels: 19,
|
|
units: 'm',
|
|
layers: [
|
|
new LayerGroup({
|
|
title: 'Base Layers',
|
|
layers: [
|
|
orthoLayer,
|
|
osmLayer
|
|
]
|
|
}),
|
|
new LayerGroup({
|
|
title: 'overlays',
|
|
layers: [
|
|
vectorLayer,
|
|
messureLayer,
|
|
]
|
|
})
|
|
],
|
|
view: new View({
|
|
center: coordinate_cccamp19,
|
|
zoom: 17
|
|
})
|
|
});
|
|
|
|
|
|
function parseURL(url) {
|
|
|
|
var parser = document.createElement('a'),
|
|
searchObject = {},
|
|
queries, split, i;
|
|
|
|
// Let the browser do the work
|
|
parser.href = url;
|
|
|
|
// Convert query string to object
|
|
queries = parser.search.replace(/^\?/, '').split('&');
|
|
for( i = 0; i < queries.length; i++ ) {
|
|
split = queries[i].split('=');
|
|
if(searchObject[split[0]]) {
|
|
if(!Array.isArray(searchObject[split[0]])) {
|
|
searchObject[split[0]] = [searchObject[split[0]]];
|
|
}
|
|
searchObject[split[0]].push(decodeURI(split[1]));
|
|
} else {
|
|
searchObject[split[0]] = decodeURI(split[1]);
|
|
}
|
|
}
|
|
|
|
return {
|
|
pathname: parser.pathname,
|
|
search: parser.search,
|
|
searchObject: searchObject,
|
|
hash: parser.hash
|
|
};
|
|
|
|
}
|
|
|
|
// start show coordinate in param and pars it [[[
|
|
function generateHash(info) {
|
|
var params=[]
|
|
for( var param in info.searchObject) {
|
|
if(param!='') {
|
|
if(Array.isArray(info.searchObject[param])){
|
|
info.searchObject[param].map(function(value) {
|
|
params.push(`${encodeURI(param)}=${encodeURI(value)}`);
|
|
});
|
|
} else {
|
|
params.push(`${encodeURI(param)}=${encodeURI(info.searchObject[param])}`);
|
|
}
|
|
}
|
|
}
|
|
return `#${info.pathname}?${params.join('&')}`;
|
|
}
|
|
|
|
var layers = [orthoLayer, osmLayer, vectorLayer];
|
|
var hash_info;
|
|
|
|
var coordinate_parser = /^(\d+)\/(-?\d*\.?\d*)\/(-?\d*\.?\d*)/;
|
|
|
|
function parseHash() {
|
|
hash_info=parseURL(location.hash.substr(1))
|
|
if( hash_info.searchObject['map'] && coordinate_parser.test(hash_info.searchObject['map'])){
|
|
var map_info = coordinate_parser.exec(hash_info.searchObject['map']);
|
|
map.getView().setCenter(fromLonLat([Number(map_info[3]), Number(map_info[2])]));
|
|
map.getView().setZoom(map_info[1]);
|
|
}
|
|
if( hash_info.searchObject['layer']) {
|
|
var _layers = hash_info.searchObject['layer'];
|
|
if(!Array.isArray(_layers)) {
|
|
_layers = [_layers];
|
|
}
|
|
layers.map(function(layer){
|
|
layer.setVisible(
|
|
_layers.indexOf(layer.get('title')) >=0
|
|
);
|
|
});
|
|
}
|
|
}
|
|
|
|
parseHash();
|
|
window.onhashchange = function() {
|
|
parseHash()
|
|
};
|
|
|
|
map.on("moveend", function(evt){
|
|
var map = evt.map;
|
|
var [lon, lat] = toLonLat(map.getView().getCenter());
|
|
var zoom = map.getView().getZoom();
|
|
hash_info.searchObject['map'] = `${zoom}/${lat}/${lon}`;
|
|
location.hash = generateHash(hash_info);
|
|
});
|
|
|
|
// map types
|
|
layers.map(function(layer){
|
|
layer.addEventListener('change:visible',function(e){
|
|
hash_info=parseURL(location.hash.substr(1));
|
|
var _layers = [];
|
|
layers.map(function(layer) {
|
|
if(layer.getVisible()){
|
|
_layers.push(layer.get('title'));
|
|
}
|
|
});
|
|
hash_info.searchObject['layer'] = _layers;
|
|
location.hash = generateHash(hash_info);
|
|
});
|
|
});
|
|
|
|
// end coordinate parser ]]]
|
|
|
|
document.Map = map;
|
|
|