add names, bugfixes, colors
parent
c37fca7f15
commit
ffc858ac29
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
60
src/app.js
60
src/app.js
|
@ -1,5 +1,6 @@
|
||||||
import Map from 'ol/Map.js';
|
import Map from 'ol/Map.js';
|
||||||
import View from 'ol/View.js';
|
import View from 'ol/View.js';
|
||||||
|
import {defaults as defaultControls, Attribution as AttributionControl} from 'ol/control.js';
|
||||||
import {all as allStrategy} from 'ol/loadingstrategy';
|
import {all as allStrategy} from 'ol/loadingstrategy';
|
||||||
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
|
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
|
||||||
import TileLayer from 'ol/layer/Tile';
|
import TileLayer from 'ol/layer/Tile';
|
||||||
|
@ -11,7 +12,7 @@ import VectorSource from 'ol/source/Vector.js';
|
||||||
import VectorTileLayer from 'ol/layer/VectorTile.js';
|
import VectorTileLayer from 'ol/layer/VectorTile.js';
|
||||||
import VectorTileSource from 'ol/source/VectorTile.js';
|
import VectorTileSource from 'ol/source/VectorTile.js';
|
||||||
import OSMXML from 'ol/format/OSMXML.js';
|
import OSMXML from 'ol/format/OSMXML.js';
|
||||||
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
|
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';
|
||||||
|
|
||||||
|
|
||||||
const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);
|
const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);
|
||||||
|
@ -38,6 +39,16 @@ var styles = {
|
||||||
}),
|
}),
|
||||||
fill: new Fill({
|
fill: new Fill({
|
||||||
color: 'rgba(246, 99, 79, 0.3)'
|
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
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
@ -58,11 +69,21 @@ var styles = {
|
||||||
'landuse': {
|
'landuse': {
|
||||||
'forest|grass|allotments': new Style({
|
'forest|grass|allotments': new Style({
|
||||||
stroke: new Stroke({
|
stroke: new Stroke({
|
||||||
color: 'rgba(140, 208, 95, 1.0)',
|
color: 'rgba(0, 0, 170, 1.0)',
|
||||||
width: 1
|
width: 1
|
||||||
}),
|
}),
|
||||||
fill: new Fill({
|
fill: new Fill({
|
||||||
color: 'rgba(140, 208, 95, 0.3)'
|
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
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
@ -76,6 +97,20 @@ var styles = {
|
||||||
stroke: null
|
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
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -106,12 +141,13 @@ var vectorSource = new VectorTileSource({
|
||||||
|
|
||||||
var map = new Map({
|
var map = new Map({
|
||||||
target: 'map',
|
target: 'map',
|
||||||
|
controls: defaultControls().extend([
|
||||||
|
]),
|
||||||
|
numZoomLevels: 19,
|
||||||
|
units: 'm',
|
||||||
layers: [
|
layers: [
|
||||||
new TileLayer({
|
new TileLayer({
|
||||||
source: new XYZ({
|
source: new OSM()
|
||||||
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
|
|
||||||
})
|
|
||||||
//source: OSM()
|
|
||||||
}),
|
}),
|
||||||
new VectorTileLayer({
|
new VectorTileLayer({
|
||||||
source: vectorSource,
|
source: vectorSource,
|
||||||
|
@ -121,7 +157,15 @@ var map = new Map({
|
||||||
if (value !== undefined) {
|
if (value !== undefined) {
|
||||||
for (var regexp in styles[key]) {
|
for (var regexp in styles[key]) {
|
||||||
if (new RegExp(regexp).test(value)) {
|
if (new RegExp(regexp).test(value)) {
|
||||||
return styles[key][regexp];
|
var style = styles[key][regexp];
|
||||||
|
if(feature.get('name') !== undefined ) {
|
||||||
|
var text = feature.get('name');
|
||||||
|
if(feature.get('size') !== undefined) {
|
||||||
|
text += '\n' + feature.get('size');
|
||||||
|
}
|
||||||
|
style.getText().setText(text);
|
||||||
|
}
|
||||||
|
return style;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue