146 lines
3.1 KiB
JavaScript
146 lines
3.1 KiB
JavaScript
import Map from 'ol/Map.js';
|
|
import View from 'ol/View.js';
|
|
import {all as allStrategy} from 'ol/loadingstrategy';
|
|
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
|
|
import TileLayer from 'ol/layer/Tile';
|
|
import OSM from 'ol/source/OSM.js';
|
|
import XYZ from 'ol/source/XYZ';
|
|
import {fromLonLat} 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} from 'ol/style.js';
|
|
|
|
|
|
const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);
|
|
|
|
|
|
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)'
|
|
})
|
|
})
|
|
},
|
|
'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(140, 208, 95, 1.0)',
|
|
width: 1
|
|
}),
|
|
fill: new Fill({
|
|
color: 'rgba(140, 208, 95, 0.3)'
|
|
})
|
|
})
|
|
},
|
|
'natural': {
|
|
'tree': new Style({
|
|
image: new CircleStyle({
|
|
radius: 2,
|
|
fill: new Fill({
|
|
color: 'rgba(140, 208, 95, 1.0)'
|
|
}),
|
|
stroke: null
|
|
})
|
|
})
|
|
}
|
|
};
|
|
|
|
var vectorSource = new VectorTileSource({
|
|
format: new OSMXML(),
|
|
url: 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1',
|
|
/*loader: function(extent, resolution, projection) {
|
|
var proj = projection.getCode();
|
|
var url = 'https://seafile.milliways.info/f/688170149668429f9598/?dl=1';
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', url);
|
|
var onError = function(e) {
|
|
vectorSource.removeLoadedExtent(extent);
|
|
}
|
|
xhr.onerror = onError;
|
|
xhr.onload = function() {
|
|
if (xhr.status == 200) {
|
|
vectorSource.addFeatures(
|
|
vectorSource.getFormat().readFeatures(xhr.responseText));
|
|
} else {
|
|
onError();
|
|
}
|
|
}
|
|
xhr.send();
|
|
},*/
|
|
strategy: allStrategy
|
|
})
|
|
|
|
var map = new Map({
|
|
target: 'map',
|
|
layers: [
|
|
new TileLayer({
|
|
source: new XYZ({
|
|
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
|
})
|
|
//source: OSM()
|
|
}),
|
|
new VectorTileLayer({
|
|
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)) {
|
|
return styles[key][regexp];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
})
|
|
],
|
|
view: new View({
|
|
center: coordinate_cccamp19,
|
|
zoom: 17
|
|
})
|
|
});
|
|
|
|
|
|
|
|
document.map = map;
|
|
|
|
module.export= {
|
|
mapa: map
|
|
}
|