Skip to content

Commit 3330b11

Browse files
rmcfrmcf
committed
soil map vector tiles styling
1 parent 4399346 commit 3330b11

12 files changed

+950
-898
lines changed

‎dist/css/app.8adf95bf.css

-1
This file was deleted.

‎dist/css/app.9571a3bc.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/webgis-performance/favicon.ico><title>webgis</title><link href=/webgis-performance/css/app.8adf95bf.css rel=preload as=style crossorigin=anonymous><link href=/webgis-performance/css/chunk-vendors.60c03257.css rel=preload as=style crossorigin=anonymous><link href=/webgis-performance/js/app.61e499ff.js rel=preload as=script crossorigin=anonymous><link href=/webgis-performance/js/chunk-vendors.1d7bdc18.js rel=preload as=script crossorigin=anonymous><link href=/webgis-performance/css/chunk-vendors.60c03257.css rel=stylesheet crossorigin=anonymous><link href=/webgis-performance/css/app.8adf95bf.css rel=stylesheet crossorigin=anonymous></head><body><noscript><strong>We're sorry but webgis doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/webgis-performance/js/chunk-vendors.1d7bdc18.js crossorigin=anonymous></script><script src=/webgis-performance/js/app.61e499ff.js crossorigin=anonymous></script></body></html>
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/webgis-performance/favicon.ico><title>webgis</title><link href=/webgis-performance/css/app.9571a3bc.css rel=preload as=style crossorigin=anonymous><link href=/webgis-performance/css/chunk-vendors.60c03257.css rel=preload as=style crossorigin=anonymous><link href=/webgis-performance/js/app.c0b22297.js rel=preload as=script crossorigin=anonymous><link href=/webgis-performance/js/chunk-vendors.53225482.js rel=preload as=script crossorigin=anonymous><link href=/webgis-performance/css/chunk-vendors.60c03257.css rel=stylesheet crossorigin=anonymous><link href=/webgis-performance/css/app.9571a3bc.css rel=stylesheet crossorigin=anonymous></head><body><noscript><strong>We're sorry but webgis doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/webgis-performance/js/chunk-vendors.53225482.js crossorigin=anonymous></script><script src=/webgis-performance/js/app.c0b22297.js crossorigin=anonymous></script></body></html>

‎dist/js/app.61e499ff.js

-1
This file was deleted.

‎dist/js/app.c0b22297.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/chunk-vendors.1d7bdc18.js

-851
This file was deleted.

‎dist/js/chunk-vendors.53225482.js

+771
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

+5-5
Original file line numberDiff line numberDiff line change
@@ -203,20 +203,20 @@ export default {
203203
cleanMap() {
204204
let list = this.layersList;
205205
list.forEach(function (item) {
206-
if (item.id !== 50 && item.layerType === "data") {
206+
if (item.id !== "OpenStreetMap" && item.layerType === "data") {
207207
item.visibility = false;
208208
}
209209
});
210210
let selectedLayerArray = list.filter(function (el) {
211-
return el.id === 50;
211+
return el.id === "OpenStreetMap";
212212
});
213213
this.baseLayerSelected = selectedLayerArray[0];
214214
},
215215
// selecting base layer on page load
216216
loadBaseLayer() {
217217
let list = this.layersList;
218218
let selectedLayerArray = list.filter(function (el) {
219-
return el.id === 50;
219+
return el.id === "OpenStreetMap";
220220
});
221221
this.baseLayerSelected = selectedLayerArray[0];
222222
},
@@ -293,10 +293,10 @@ export default {
293293
return el.layerType === "base";
294294
});
295295
let sortedLayersList = baseList.sort(function (a, b) {
296-
if (a.id < b.id) {
296+
if (a.orderInList < b.orderInList) {
297297
return 1;
298298
}
299-
if (a.id > b.id) {
299+
if (a.orderInList > b.orderInList) {
300300
return -1;
301301
}
302302
});

‎src/components/Map.vue

+141-14
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
rel="stylesheet"
66
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons"
77
/>
8+
89
<!-- spinner geoJSON services loading -->
910
<div
1011
v-show="dataLoadingStatus"
@@ -41,8 +42,8 @@
4142
<div v-if="!dataLoadingStatus">
4243
<!-- block for map info -->
4344
<div class="map-info">
44-
<!-- table with attributes -->
4545
<transition-group name="fade">
46+
<!-- table with attributes of selected Soil PygeoAPI Docker features -->
4647
<div
4748
v-if="
4849
this.geoJSONdata.length > 0 && this.geoJSONserviceLayerComputed
@@ -77,7 +78,6 @@
7778
>Zoom to selected features</md-tooltip
7879
>
7980
</md-button>
80-
8181
<md-button
8282
v-on:click="resetGeoJSONdata()"
8383
class="md-dense md-raised md-accent"
@@ -170,10 +170,11 @@
170170
</md-badge>
171171
</div>
172172
<vl-map
173+
ref="map"
173174
:data-projection="projComputed"
174175
:load-tiles-while-animating="true"
175176
:load-tiles-while-interacting="true"
176-
@click="spatialQueryOnClick($event.coordinate)"
177+
@click="spatialQueryOnClick($event)"
177178
>
178179
<vl-view
179180
:zoom.sync="zoomComputed"
@@ -233,13 +234,9 @@
233234
v-if="layer.type === 'vectortile'"
234235
>
235236
<vl-source-vector-tile :url="layer.source"></vl-source-vector-tile>
236-
<vl-style-box>
237-
<vl-style-stroke
238-
:color="layer.style.strokeColor"
239-
:width="layer.style.strokeWidth"
240-
></vl-style-stroke>
241-
<vl-style-fill :color="layer.style.fillColor"></vl-style-fill>
242-
</vl-style-box> </vl-layer-vector-tile
237+
<vl-style-func
238+
v-if="layer.id === 'EstoniaSoilMap'"
239+
:factory="EstSoilMapVectorTilesStyle" /></vl-layer-vector-tile
243240
></template>
244241

245242
<!-- wmts layer -->
@@ -301,6 +298,8 @@
301298
const axios = require("axios");
302299
import { register } from "ol/proj/proj4";
303300
import proj4 from "proj4";
301+
// import Style from "ol/style/Style";
302+
import { createStyle } from "vuelayers/lib/ol-ext";
304303
305304
// new CRS registration
306305
proj4.defs(
@@ -344,6 +343,7 @@ export default {
344343
// geoJSON service source error
345344
geoJSONdataSourceError: false,
346345
geoJSONdataSourceErrorText: "",
346+
vectorTilesTransparency: 0.7,
347347
};
348348
},
349349
computed: {
@@ -393,16 +393,28 @@ export default {
393393
return false;
394394
}
395395
},
396+
EstSoilMapVectorTileComputed: function () {
397+
let list = this.selectedLayersProp;
398+
let vectorTileLayer = list.filter(function (el) {
399+
return el.id === "EstoniaSoilMap";
400+
});
401+
if (vectorTileLayer.length > 0) {
402+
return true;
403+
} else {
404+
return false;
405+
}
406+
},
396407
},
397408
methods: {
398409
// bbox query to EST soil map
399-
spatialQueryOnClick(cursorCoordinates) {
410+
spatialQueryOnClick(event) {
411+
// select from Soil PygeoAPI Docker
400412
if (this.geoJSONserviceLayerComputed) {
401413
this.geoJSONdata = [];
402414
this.dataLoadingStatus = true;
403-
this.dataCursorCoordinates = cursorCoordinates;
404-
let x = cursorCoordinates[0];
405-
let y = cursorCoordinates[1];
415+
this.dataCursorCoordinates = event.coordinate;
416+
let x = event.coordinate[0];
417+
let y = event.coordinate[1];
406418
let bbox = x + "," + y + "," + x + "," + y;
407419
setTimeout(() => {
408420
axios
@@ -430,14 +442,129 @@ export default {
430442
}, 1000);
431443
}
432444
},
445+
// vector tiles: Estonia soil map styling
446+
EstSoilMapVectorTilesStyle() {
447+
let transparency = this.vectorTilesTransparency;
448+
// unknown
449+
const styleUnknown = createStyle({
450+
fillColor: "rgba(255,255,255," + transparency + ")",
451+
strokeColor: "rgba(255,255,255," + transparency + ")",
452+
});
453+
// S
454+
const styleS = createStyle({
455+
fillColor: "rgba(196,4,17," + transparency + ")",
456+
strokeColor: "rgba(196,4,17," + transparency + ")",
457+
});
458+
// LS
459+
const styleLS = createStyle({
460+
fillColor: "rgba(244,134,0," + transparency + ")",
461+
strokeColor: "rgba(244,134,0," + transparency + ")",
462+
});
463+
// SL
464+
const styleSL = createStyle({
465+
fillColor: "rgba(243,187,64," + transparency + ")",
466+
strokeColor: "rgba(243,187,64," + transparency + ")",
467+
});
468+
// L
469+
const styleL = createStyle({
470+
fillColor: "rgba(255,247,78," + transparency + ")",
471+
strokeColor: "rgba(255,247,78," + transparency + ")",
472+
});
473+
// SiL
474+
const styleSiL = createStyle({
475+
fillColor: "rgba(81,214,177," + transparency + ")",
476+
strokeColor: "rgba(81,214,177," + transparency + ")",
477+
});
478+
// SiCL
479+
const styleSiCL = createStyle({
480+
fillColor: "rgba(48,175,210," + transparency + ")",
481+
strokeColor: "rgba(48,175,210," + transparency + ")",
482+
});
483+
// CL
484+
const styleCL = createStyle({
485+
fillColor: "rgba(43,155,162," + transparency + ")",
486+
strokeColor: "rgba(43,155,162," + transparency + ")",
487+
});
488+
// C
489+
const styleC = createStyle({
490+
fillColor: "rgba(59,123,233," + transparency + ")",
491+
strokeColor: "rgba(59,123,233," + transparency + ")",
492+
});
493+
// HC
494+
const styleHC = createStyle({
495+
fillColor: "rgba(43,87,186," + transparency + ")",
496+
strokeColor: "rgba(43,87,186," + transparency + ")",
497+
});
498+
// PEAT
499+
const stylePEAT = createStyle({
500+
fillColor: "rgba(112,71,1," + transparency + ")",
501+
strokeColor: "rgba(112,71,1," + transparency + ")",
502+
});
503+
// GRAVELS
504+
const styleGRAVELS = createStyle({
505+
fillColor: "rgba(140,164,173," + transparency + ")",
506+
strokeColor: "rgba(140,164,173," + transparency + ")",
507+
});
508+
509+
return (feature) => {
510+
// S
511+
if (feature.get("lxtype1") == "S") {
512+
return styleS;
513+
}
514+
// LS
515+
if (feature.get("lxtype1") == "LS") {
516+
return styleLS;
517+
}
518+
// SL
519+
if (feature.get("lxtype1") == "SL") {
520+
return styleSL;
521+
}
522+
// L
523+
if (feature.get("lxtype1") == "L") {
524+
return styleL;
525+
}
526+
// SiL
527+
if (feature.get("lxtype1") == "SiL") {
528+
return styleSiL;
529+
}
530+
// SiCL
531+
if (feature.get("lxtype1") == "SiCL") {
532+
return styleSiCL;
533+
}
534+
// CL
535+
if (feature.get("lxtype1") == "CL") {
536+
return styleCL;
537+
}
538+
// C
539+
if (feature.get("lxtype1") == "C") {
540+
return styleC;
541+
}
542+
// HC
543+
if (feature.get("lxtype1") == "HC") {
544+
return styleHC;
545+
}
546+
// PEAT
547+
if (feature.get("lxtype1") == "PEAT") {
548+
return stylePEAT;
549+
}
550+
// GRAVELS
551+
if (feature.get("lxtype1") == "GRAVELS") {
552+
return styleGRAVELS;
553+
}
554+
return styleUnknown;
555+
};
556+
},
557+
433558
resetGeoJSONdata() {
434559
this.geoJSONdata = [];
435560
this.clickOnMapDetection = false;
436561
},
562+
437563
fitSelectedJSONfeatures() {
438564
let geoJsonServicesSourceExtent = this.$refs.geoJsonServicesSource.$source.getExtent();
439565
this.$refs.view.fit(geoJsonServicesSourceExtent);
440566
},
567+
441568
fitViewDefault() {
442569
this.$refs.view.fit([
443570
2335304.088168705,

‎src/main.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,15 @@ Vue.use(MdDialogAlert)
2121
Vue.use(MdContent)
2222

2323
// vue-layers
24-
import { Map, VectorLayer, VectorSource, StyleBox, StrokeStyle, FillStyle, VectorTileLayer, VectorTileSource, TileLayer, WmtsSource, WmsSource, XyzSource } from 'vuelayers'
24+
import { Map, VectorLayer, VectorSource, StyleBox, StrokeStyle, FillStyle, StyleFunc, VectorTileLayer, VectorTileSource, TileLayer, WmtsSource, WmsSource, XyzSource } from 'vuelayers'
2525
import 'vuelayers/lib/style.css'
2626
Vue.use(Map)
2727
Vue.use(VectorLayer)
2828
Vue.use(VectorSource)
2929
Vue.use(StyleBox)
3030
Vue.use(StrokeStyle)
3131
Vue.use(FillStyle)
32+
Vue.use(StyleFunc)
3233
Vue.use(VectorTileLayer)
3334
Vue.use(VectorTileSource)
3435
Vue.use(TileLayer)

0 commit comments

Comments
 (0)