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 View from 'ol/View.js';
import {defaults as defaultControls, Attribution as AttributionControl} from 'ol/control.js';
import {all as allStrategy} from 'ol/loadingstrategy';
import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
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 VectorTileSource from 'ol/source/VectorTile.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]);
@ -38,6 +39,16 @@ var styles = {
}),
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
})
})
})
},
@ -58,11 +69,21 @@ var styles = {
'landuse': {
'forest|grass|allotments': new Style({
stroke: new Stroke({
color: 'rgba(140, 208, 95, 1.0)',
color: 'rgba(0, 0, 170, 1.0)',
width: 1
}),
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
})
})
},
'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({
target: 'map',
controls: defaultControls().extend([
]),
numZoomLevels: 19,
units: 'm',
layers: [
new TileLayer({
source: new XYZ({
url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
//source: OSM()
source: new OSM()
}),
new VectorTileLayer({
source: vectorSource,
@ -121,7 +157,15 @@ var map = new Map({
if (value !== undefined) {
for (var regexp in styles[key]) {
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;
}
}
}