Mercurial > gemma

comparison client/src/components/Maplayer.vue @ 570:7575cf0e15ff

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: Add coordinate system for fairway profile In order to display graphical data, d3 was added. Fairway Profile is available as component. In a first step, a coordinate system was drawn.
author Thomas Junk <thomas.junk@intevation.de>
date Wed, 05 Sep 2018 13:01:49 +0200
parents 89bc8111563a
children 59b22dc924c8
comparison
equal deleted inserted replaced
569:ad07846b09d1 570:7575cf0e15ff
10 <div class="d-flex flex-column"> 10 <div class="d-flex flex-column">
11 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect> 11 <Layerselect :layerindex="index" :layername="layer.name" v-for="(layer, index) in layers" :key="layer.name" :isVisible="layer.isVisible" @visibilityToggled="visibilityToggled"></Layerselect>
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div class="profile d-flex flex-row">
16 <Fairwayprofile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 6]"></Fairwayprofile>
17 </div>
15 </div> 18 </div>
16 </template> 19 </template>
17 20
18 <style lang="scss"> 21 <style lang="scss">
19 @import "../assets/application.scss"; 22 @import "../assets/application.scss";
23
24 .profile {
25 background-color: white;
26 height: 50vh-$topbarheight;
27 }
20 28
21 .mapdisplay { 29 .mapdisplay {
22 height: 100%; 30 height: 100%;
23 } 31 }
24 32
25 #map { 33 #map {
26 margin-top: $topbarheight; 34 margin-top: $topbarheight;
27 height: 100-$topbarheight; 35 height: 50vh;
28 } 36 }
29 37
30 .layerselection { 38 .layerselection {
31 position: absolute; 39 position: absolute;
32 top: 40px + $small-offset; 40 top: 40px + $small-offset;
50 import VectorSource from "ol/source/Vector.js"; 58 import VectorSource from "ol/source/Vector.js";
51 import { Stroke, Style } from "ol/style.js"; 59 import { Stroke, Style } from "ol/style.js";
52 import OSM from "ol/source/OSM"; 60 import OSM from "ol/source/OSM";
53 import TileWMS from "ol/source/TileWMS.js"; 61 import TileWMS from "ol/source/TileWMS.js";
54 import Layerselect from "./Layerselect"; 62 import Layerselect from "./Layerselect";
63 import Fairwayprofile from "./Fairwayprofile";
55 64
56 export default { 65 export default {
57 name: "maplayer", 66 name: "maplayer",
58 props: ["lat", "long", "zoom"], 67 props: ["lat", "long", "zoom"],
59 components: { 68 components: {
60 Layerselect 69 Layerselect,
70 Fairwayprofile
61 }, 71 },
62 data() { 72 data() {
63 return { 73 return {
64 projection: "EPSG:3857", 74 projection: "EPSG:3857",
65 openLayersMap: null, 75 openLayersMap: null,