|
|
@ -4,8 +4,11 @@ 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 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'; |
|
|
@ -127,23 +130,25 @@ var styles = { |
|
|
|
var vectorSource = new VectorSource({ |
|
|
|
format: new OSMXML(), |
|
|
|
url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1', |
|
|
|
strategy: allStrategy |
|
|
|
}) |
|
|
|
strategy: allStrategy, |
|
|
|
attributions: '©<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>', |
|
|
|
}); |
|
|
|
|
|
|
|
var map = new MapClass({ |
|
|
|
target: 'map', |
|
|
|
controls: defaultControls().extend([ |
|
|
|
]), |
|
|
|
numZoomLevels: 19, |
|
|
|
units: 'm', |
|
|
|
layers: [ |
|
|
|
new TileLayer({ |
|
|
|
source: new OSM() |
|
|
|
}), |
|
|
|
new VectorLayer({ |
|
|
|
var tileLayer = new TileLayer({ |
|
|
|
title: 'Photos', |
|
|
|
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, |
|
|
|
attributions: '©<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>', |
|
|
|
attributionsCollapsible: false, |
|
|
|
style: function(feature) { |
|
|
|
for (var key in styles) { |
|
|
|
var value = feature.get(key); |
|
|
@ -165,12 +170,41 @@ var map = new MapClass({ |
|
|
|
} |
|
|
|
return null; |
|
|
|
} |
|
|
|
}) |
|
|
|
], |
|
|
|
view: new View({ |
|
|
|
center: coordinate_cccamp19, |
|
|
|
zoom: 17 |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
var osmLayer = new TileLayer({ |
|
|
|
title: 'OSM', |
|
|
|
type: 'base', |
|
|
|
source: new OSM() |
|
|
|
}); |
|
|
|
|
|
|
|
var map = new MapClass({ |
|
|
|
target: 'map', |
|
|
|
controls: defaultControls().extend([ |
|
|
|
new LayerSwitcher() |
|
|
|
]), |
|
|
|
numZoomLevels: 19, |
|
|
|
units: 'm', |
|
|
|
layers: [ |
|
|
|
new LayerGroup({ |
|
|
|
title: 'Base Layers', |
|
|
|
layers: [ |
|
|
|
tileLayer, |
|
|
|
osmLayer |
|
|
|
] |
|
|
|
}), |
|
|
|
new LayerGroup({ |
|
|
|
title: 'overlays', |
|
|
|
layers: [ |
|
|
|
vectorLayer |
|
|
|
] |
|
|
|
}) |
|
|
|
], |
|
|
|
view: new View({ |
|
|
|
center: coordinate_cccamp19, |
|
|
|
zoom: 17 |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|