Nuxt/map layer switcher

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "editor.formatOnSave": false,
-  "sslint.autoFixOnSave": true,
-  "prettier.tslintIntegration": true
+  "eslint.autoFixOnSave": true,
+  "prettier.eslintIntegration": true
 }

kure_kosen_map/assets/map/initMap.js

@@ -1,12 +1,10 @@
 import "ol/ol.css";
 
+import { defaults as defaultControls, FullScreen, ScaleLine, ZoomSlider } from "ol/control";
+import { defaults as defaultInteractions, DragRotateAndZoom } from "ol/interaction";
 import Map from "ol/Map";
-import View from "ol/View";
 import { fromLonLat } from "ol/proj";
-import { ScaleLine } from "ol/control";
-import { defaults as defaultInteractions, DragRotateAndZoom } from "ol/interaction";
-
-import layers from "./layers/index";
+import View from "ol/View";
 
 const initMap = vm => {
   const view = new View({
@@ -16,15 +14,21 @@ const initMap = vm => {
   });
 
   const interactions = defaultInteractions().extend([new DragRotateAndZoom()]);
+  const controls = defaultControls().extend([
+    new FullScreen({
+      source: "fullscreen"
+    })
+  ]);
 
   const map = new Map({
-    target: "mymap",
+    target: "map",
+    controls,
     interactions,
-    layers,
     view
   });
 
   map.addControl(new ScaleLine());
+  map.addControl(new ZoomSlider());
 
   vm.$store.commit("setMap", map);
 };

kure_kosen_map/assets/map/layers/base.js

@@ -1,27 +1,44 @@
-import { Attribution } from "ol/control";
+import { OSM } from "ol/source/";
 import { Tile as TileLayer } from "ol/layer/";
-import { OSM, XYZ as XYZSource } from "ol/source/";
+import { XYZ as XYZSource } from "ol/source/";
 
 // OpenStreetMap
-export const osm = new TileLayer({
-  title: "OSM",
-  type: "base",
-  visible: true,
+const osm = new TileLayer({
   source: new OSM()
 });
 
-//地理院タイル
-export const kokudo_std = new TileLayer({
-  title: "国土地理院",
-  type: "base",
-  visible: false,
+//地理院タイル ベースマップ 標準地図
+const kokudo_std = new TileLayer({
   source: new XYZSource({
-    attributions: [
-      new Attribution({
-        html: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
-      })
-    ],
+    attributions: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
     url: "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
     projection: "EPSG:3857"
   })
 });
+
+//地理院タイル ベースマップ 淡色地図
+const kokudo_pale = new TileLayer({
+  source: new XYZSource({
+    attributions: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
+    url: "https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",
+    projection: "EPSG:3857"
+  })
+});
+
+const layers = [
+  { text: "OpenStreetMap", data: { id: 1, layer: osm }, state: { checked: true } },
+  {
+    text: "国土地理院",
+    children: [
+      {
+        text: "ベースマップ",
+        children: [
+          { text: "標準地図", data: { id: 2, layer: kokudo_std } },
+          { text: "淡色地図", data: { id: 3, layer: kokudo_pale } }
+        ]
+      }
+    ]
+  }
+];
+
+export default layers;

kure_kosen_map/assets/map/map-design.css

@@ -8,12 +8,6 @@
   display: none;
 }
 
-.ol-full-screen {
-  position: absolute;
-  top: 3em;
-  right: 0.5em;
-}
-
 .menu .wrap-closemenubtn {
   z-index: 1;
 }

kure_kosen_map/components/map/layerSwitcher.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <LiquorTree
+      ref="tree"
+      :data="items"
+      @node:selected="onNodeSelected"
+      @node:unnselected="onNodeUnselected"
+      @tree:mounted="addDefaultLayer"
+    >
+      <span
+        slot-scope="{ node }"
+        class="tree-text">
+        <template v-if="!node.hasChildren()">
+          <i class="node fas fa-file" />
+          {{ node.text }}
+        </template>
+
+        <template v-else>
+          <i :class="[node.expanded() ? 'node fas fa-folder-open' : 'node fas fa-folder']"/>
+          {{ node.text }}
+        </template>
+      </span>
+    </LiquorTree>
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import LiquorTree from "liquor-tree";
+import layers from "../../assets/map/layers/base.js";
+
+export default {
+  components: {
+    LiquorTree
+  },
+  data() {
+    return {
+      items: layers
+    };
+  },
+  methods: {
+    onNodeSelected: function(node) {
+      if (node.children.length === 0) {
+        this.$store.commit("addLayer", node.data);
+      }
+      node.unselect();
+    },
+    onNodeUnselected: function(node) {
+      if (node.children.length === 0) {
+        this.$store.commit("removeLayer", node.data);
+      }
+      node.unselect();
+    },
+    addDefaultLayer: function() {
+      const defaultLayer = this.$refs.tree.findAll({ state: { checked: true } });
+      defaultLayer.forEach(layer => {
+        this.$store.commit("addLayer", layer.data);
+      });
+    }
+  }
+};
+</script>
+
+<style scoped>
+.node {
+  color: #f7e391;
+  font-size: 25px;
+}
+</style>

kure_kosen_map/components/map/layerSwitcherWrapper.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div
+      class="ol-unselectable ol-control layer_switcher_button_wrapper"
+    >
+      <button @click="open">
+        <i class="far fa-clone" />
+      </button>
+    </div>
+
+    <div
+      v-draggable="draggableOptions"
+      v-show="isOpen"
+      class="window">
+      <div
+        ref="handle"
+        class="header">
+        <div class="close_button_wrapper">
+          <button @click="close">
+            <i class="fas fa-times" />
+          </button>
+        </div>
+      </div>
+
+      <layerLists />
+      <layerSwitcher />
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Draggable } from "draggable-vue-directive";
+import layerSwitcher from "./layerSwitcher";
+import layerLists from "./layerLists";
+
+export default {
+  components: {
+    layerSwitcher,
+    layerLists
+  },
+
+  directives: {
+    Draggable
+  },
+
+  data() {
+    return {
+      isOpen: false,
+      draggableOptions: {
+        handle: undefined,
+        initialPosition: { left: 100, top: 100 }
+      }
+    };
+  },
+  mounted() {
+    this.draggableOptions.handle = this.$refs.handle;
+  },
+
+  methods: {
+    open() {
+      this.isOpen = true;
+    },
+    close() {
+      this.isOpen = false;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.layer_switcher_button_wrapper {
+  position: absolute;
+  top: 290px;
+  left: 0.5em;
+}
+
+.window {
+  position: absolute;
+  width: 500px;
+  height: 500px;
+  border: solid 5px #0da3e3;
+  border-radius: 3px;
+  background-color: #fff;
+}
+
+.header {
+  height: 18px;
+  background-color: #0da3e3;
+  cursor: pointer;
+}
+
+.header i {
+  color: #fff;
+  font-size: 18px;
+  line-height: 18px;
+}
+
+.close_button_wrapper {
+  float: right;
+  vertical-align: middle;
+  font-size: 16px;
+  margin-top: -1px;
+  margin-right: 1px;
+  text-align: right;
+}
+</style>