Mercurial > gemma
changeset 531:9c036b32c852
refac: Layer selection componentized
POC from 22cca659e40b splitted into a layerselection component and
iterative rendering. Now more vuelike.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Tue, 28 Aug 2018 12:53:56 +0200 |
parents | a6d732584c4e |
children | 04a6bea229e4 |
files | client/src/components/Layerselect.vue client/src/components/Map.vue client/src/components/Maplayer.vue client/src/views/Main.vue |
diffstat | 4 files changed, 131 insertions(+), 85 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Layerselect.vue Tue Aug 28 12:53:56 2018 +0200 @@ -0,0 +1,26 @@ +<template> + <div class="d-flex"> + <label :for="layername">{{this.layername}}</label> + <input @change="visibilityToggled" + :id="layername" + type="checkbox" + :checked="isVisible"> + </div> +</template> + +<style lang="sass"> + +</style> + + +<script> +export default { + props: ["layername", "layerindex", "isVisible"], + name: "layerselect", + methods: { + visibilityToggled() { + this.$emit("visibilityToggled", this.layerindex); + } + } +}; +</script>
--- a/client/src/components/Map.vue Tue Aug 28 12:39:23 2018 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,81 +0,0 @@ -<template> - <div id="map"> - <div v-if="this.olmap" - style="position: absolute; z-index: 1005; top: 90px "> - <input type="checkbox" v-model="vis1"> - {{ listOfLayers[0].getVisible() }}<br> - <input type="checkbox" v-model="vis2"> - {{ listOfLayers[1].getVisible() }} - </div> - </div> -</template> - -<style lang="sass"> - -</style> - -<script> -import "ol/ol.css"; -import { Map, View } from "ol"; -import TileLayer from "ol/layer/Tile"; -import OSM from "ol/source/OSM"; -import TileWMS from "ol/source/TileWMS.js"; - -export default { - name: "map", - props: ["lat", "long", "zoom"], - data() { - return { - projection: "EPSG:3857", - olmap: null // OpenLayers' map object - }; - }, - computed: { - // FIXME this is a proof of concept, ugly. - listOfLayers: function() { - return this.olmap.getLayers().getArray(); - }, - vis1: { - get: function() { - if (this.listOfLayers[0]) { - return this.listOfLayers[0].getVisible(); - } - }, - set: function(newValue) { - this.listOfLayers[0].setVisible(newValue); - } - }, - vis2: { - get: function() { - if (this.listOfLayers[1]) { - return this.listOfLayers[1].getVisible(); - } - }, - set: function(newValue) { - this.listOfLayers[1].setVisible(newValue); - } - } - }, - mounted() { - this.olmap = new Map({ - layers: [ - new TileLayer({ - source: new OSM() - }), - new TileLayer({ - source: new TileWMS({ - url: "https://demo.d4d-portal.info/wms", - params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } - }) - }) - ], - target: "map", - view: new View({ - center: [this.long, this.lat], - zoom: this.zoom, - projection: this.projection - }) - }); - } -}; -</script>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/client/src/components/Maplayer.vue Tue Aug 28 12:53:56 2018 +0200 @@ -0,0 +1,101 @@ +<template> + <div class="mapdisplay"> + <div id="map"></div> + <div v-if="this.openLayersMap" class="layerselection"> + <h4>Layers</h4> + <hr> + <Layerselect :layerindex="index" + :layername="layer.name" + v-for="(layer, index) in layers" + :key="layer.name" + :isVisible="layer.isVisible" + @visibilityToggled="visibilityToggled" + ></Layerselect> + </div> + </div> +</template> + +<style lang="scss"> +.mapdisplay { + height: 100%; + width: 100%; +} +#map { + height: 100%; + width: 100%; +} +.layerselection { + position: absolute; + top: 0; + right: 0; + min-height: 20%; + min-width: 10%; + background-color: white; +} +</style> + +<script> +import "ol/ol.css"; +import { Map, View } from "ol"; +import TileLayer from "ol/layer/Tile"; +import OSM from "ol/source/OSM"; +import TileWMS from "ol/source/TileWMS.js"; +import Layerselect from "./Layerselect"; + +export default { + name: "maplayer", + props: ["lat", "long", "zoom"], + components: { + Layerselect + }, + data() { + return { + projection: "EPSG:3857", + openLayersMap: null, + layers: [ + { + name: "Open Streetmap", + data: new TileLayer({ + source: new OSM() + }), + isVisible: true + }, + { + name: "D4D", + data: new TileLayer({ + source: new TileWMS({ + url: "https://demo.d4d-portal.info/wms", + params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true } + }) + }), + isVisible: true + } + ] + }; + }, + computed: { + layerData() { + return this.layers.map(x => { + return x.data; + }); + } + }, + methods: { + visibilityToggled(layer) { + this.layers[layer].isVisible = !this.layers[layer].isVisible; + this.layers[layer].data.setVisible(this.layers[layer].isVisible); + } + }, + mounted() { + this.openLayersMap = new Map({ + layers: this.layerData, + target: "map", + view: new View({ + center: [this.long, this.lat], + zoom: this.zoom, + projection: this.projection + }) + }); + } +}; +</script>
--- a/client/src/views/Main.vue Tue Aug 28 12:39:23 2018 +0200 +++ b/client/src/views/Main.vue Tue Aug 28 12:53:56 2018 +0200 @@ -1,10 +1,10 @@ <template> <div class="main d-flex"> <Sidebar v-bind:isOverlay="true"></Sidebar> - <Map :lat="6155376" + <Maplayer :lat="6155376" :long="1819178" :zoom="11" - ></Map> + ></Maplayer> </div> </template> @@ -20,12 +20,12 @@ </style> <script> -import Map from "../components/Map"; +import Maplayer from "../components/Maplayer"; import Sidebar from "../components/Sidebar"; export default { name: "mainview", components: { - Map, + Maplayer, Sidebar } };