Milliways/cccamp19-map
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

add names, bugfixes, colors

Browse source
This commit is contained in:
TuxCoder 2019-07-09 23:54:57 +02:00
parent c37fca7f15
commit ffc858ac29
3 changed files with 4577 additions and 3800 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8315
dist/main.js vendored
View file

File diff suppressed because it is too large Load diff

2
dist/main.js.map vendored
View file

File diff suppressed because one or more lines are too long

60
src/app.js
View file

@ -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;
} }
} }
} }