Feature/fetch layer data from api

.env.sample

@@ -0,0 +1 @@
+API_URL=

.eslintrc.js

@@ -6,13 +6,13 @@ module.exports = {
   extends: ['eslint:recommended'],
   parserOptions: {
     parser: 'babel-eslint',
-    ecmaVersion: 6,
+    ecmaVersion: 8,
     sourceType: 'module'
   },
   rules: {
     'no-console': 'off',
     'linebreak-style': ['error', 'unix'],
-    indent: ['error', 2],
+    indent: ['error', 2, { SwitchCase: 1 }],
     quotes: ['error', 'single'],
     semi: ['error', 'never']
   }

package.json

@@ -18,10 +18,12 @@
     "prettier-eslint-cli": "^4.7.1"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",

src/map/css/layer_switcher.scss

@@ -11,7 +11,7 @@ $shadow: #d3d3d3;
   #layer_switcher_window {
     display: none;
     position: absolute;
-    width: 500px;
+    width: 700px;
     height: 500px;
     background-color: #fff;
     border: solid 5px $base_color;
@@ -106,6 +106,9 @@ $shadow: #d3d3d3;
           cursor: pointer;
         }
       }
+      &.layer-id {
+        display: none;
+      }
     }
   }
 }

src/map/layer_switcher.js

@@ -7,7 +7,7 @@ draggable('#layer_switcher_header', '#layer_switcher_window')
 
 // Open Window
 $('#layer_switcher_button_wrapper').click(() => {
-  $('#layer_switcher_window').toggle()
+  $('#layer_switcher_window').fadeToggle(200)
   $('#layer_switcher_window').css({ top: '80px', left: '60px' })
 })
 
@@ -33,16 +33,37 @@ const bindCheckbox = (checkbox, layer) => {
 }
 // end bindCheckbox -------------------------------
 
-const createTr = (layer_group, layer, i) => {
+const createTr = (layer, i) => {
+  // <tr>
+  //   <td class="layer-id">id</td> ===== $td1
+  //   <td>type</td> ==================== $td2
+  //   <td>group</td> =================== $td3
+  //   <td>category</td> ================ $td4
+  //   <td>レイヤー名</td> ============== $td5
+  //   <td>透明度</td> ================== $td6
+  //   <td>表示/非表示</td> ============= $td7
+  // </tr>
   const $row = $('<tr>').attr('id', 'layer' + i)
 
   const $td1 = $('<td>')
-    .attr('class', 'movable')
-    .text(layer_group.values_.title)
+    .attr('class', 'layer-id')
+    .text(layer.getProperties().id)
 
   const $td2 = $('<td>')
     .attr('class', 'movable')
-    .text(layer.values_.title)
+    .text(layer.getProperties().type)
+
+  const $td3 = $('<td>')
+    .attr('class', 'movable')
+    .text(layer.getProperties().group)
+
+  const $td4 = $('<td>')
+    .attr('class', 'movable')
+    .text(layer.getProperties().category)
+
+  const $td5 = $('<td>')
+    .attr('class', 'movable')
+    .text(layer.getProperties().name)
 
   const $slider = $('<input>', {
     class: 'opacity',
@@ -52,9 +73,9 @@ const createTr = (layer_group, layer, i) => {
     step: '0.01'
   })
 
-  const $td3 = $('<td>').append($slider)
+  const $td6 = $('<td>').append($slider)
 
-  const $td4 = $('<td>')
+  const $td7 = $('<td>')
 
   const $visible_checkbox = $('<input>', {
     id: 'checkbox_layer' + i,
@@ -67,13 +88,16 @@ const createTr = (layer_group, layer, i) => {
     for: 'checkbox_layer' + i
   })
 
-  $visible_checkbox.appendTo($td4)
-  $visible_checkbox_label.appendTo($td4)
+  $visible_checkbox.appendTo($td7)
+  $visible_checkbox_label.appendTo($td7)
 
   $row.append($td1)
   $row.append($td2)
   $row.append($td3)
   $row.append($td4)
+  $row.append($td5)
+  $row.append($td6)
+  $row.append($td7)
 
   $('#layer_switcher_table tbody').append($row)
 
@@ -105,19 +129,16 @@ const SortInit = layers => {
     arrayDesc.forEach((v, i) => {
       let $layer = $(v)
         .children()
-        .eq(1)
+        .eq(0)
         .html()
+
       layerJoinZIndex[$layer] = i
     })
 
-    layers.forEach(layer_group => {
-      layer_group.values_.layers.getArray().forEach(layer => {
-        Object.keys(layerJoinZIndex).forEach((key, value) => {
-          if (layer.values_.title === key) {
-            layer.setZIndex(value)
-          }
-        })
-      })
+    layers.forEach(layer => {
+      for (let k in layerJoinZIndex) {
+        if (layer.getProperties().id == k) layer.setZIndex(layerJoinZIndex[k])
+      }
     })
   }
   // end setZIndexOrderByDesc----------------------
@@ -127,11 +148,9 @@ const SortInit = layers => {
 // Main
 const MyLayerSwitcher = map => {
   const layers = map.getLayers().getArray()
-  layers.forEach(layer_group => {
-    layer_group.values_.layers.getArray().forEach((layer, i) => {
-      if (layer_group.values_.title == 'Base maps') return // とりあえず
-      createTr(layer_group, layer, i)
-    })
+
+  layers.forEach((layer, i) => {
+    createTr(layer, i)
   })
 
   SortInit(layers)

src/map/layers/base.js

@@ -4,14 +4,16 @@ import { Attribution } from 'ol/control'
 
 //地理院タイル
 export const kokudo = new TileLayer({
-  title: '国土地理院',
+  id: 1,
   type: 'base',
+  group: 'gsi',
+  category: 'その他',
+  name: '国土地理院',
   visible: false, //trueならば最初から表示してくれる、ただし1つまで
   source: new XYZSource({
     attributions: [
       new Attribution({
-        html:
-          '<a href="https://maps.gsi.go.jp/development/ichiran.html" target="_blank">地理院タイル</a>'
+        html: '<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',
@@ -21,8 +23,11 @@ export const kokudo = new TileLayer({
 
 // OpenStreetMap
 export const osm = new TileLayer({
-  title: 'OSM',
+  id: 2,
   type: 'base',
+  group: 'OSM',
+  category: '',
+  name: 'OSM',
   visible: true,
   source: new OSM()
 })

src/map/layers/fetch.js

@@ -0,0 +1,71 @@
+import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer/'
+import { XYZ as XYZSource, Vector as VectorSource } from 'ol/source/'
+import { GeoJSON } from 'ol/format'
+
+import MyLayerSwitcher from '../layer_switcher'
+
+import axios from 'axios'
+
+import 'babel-polyfill'
+
+const createLayer = data => {
+  switch (data.format) {
+    case 'xyz':
+      return new TileLayer(createProperties(data))
+    case 'geojson':
+      return new VectorLayer(createProperties(data))
+    default:
+      break
+  }
+}
+
+const createProperties = data => {
+  return {
+    id: data.id,
+    type: data.type,
+    group: data.group,
+    category: data.category,
+    name: data.name,
+    description: data.description,
+    visible: false,
+    source: createSource(data.format, data.url, data.attribute_title, data.attribute_url)
+  }
+}
+
+const createSource = (format, url, attri_title, attri_url) => {
+  switch (format) {
+    case 'xyz':
+      return new XYZSource({
+        url: url,
+        attributions: [`<a href="${attri_url}">${attri_title}</a>`]
+      })
+    case 'geojson':
+      return new VectorSource({
+        format: new GeoJSON(),
+        url: url,
+        crossOrigin: 'anonymous',
+        attributions: [`<a href="${attri_url}">${attri_title}</a>`]
+      })
+    default:
+      break
+  }
+}
+
+const fetchAddlayer = async map => {
+  await axios
+    .get('/api/layers/')
+    .then(response => {
+      const result = response.data
+      for (let data of result) {
+        map.addLayer(createLayer(data))
+      }
+    })
+    .catch(error => {
+      console.log('error...')
+      console.log(error)
+    })
+
+  await MyLayerSwitcher(map)
+}
+
+export default fetchAddlayer

src/map/layers/index.js

@@ -1,22 +1,8 @@
-// ol
-import { Group as GroupLayer } from 'ol/layer/'
-// ------------------------------------------------
-
 // my file
 import { kokudo, osm } from './base'
 import { aed, tile, searchLayer } from './overlay'
 // ------------------------------------------------
 
-const base = new GroupLayer({
-  title: 'Base maps',
-  layers: [kokudo, osm]
-})
-
-const overlay = new GroupLayer({
-  title: 'Overlays',
-  layers: [tile, aed, searchLayer]
-})
-
-const MyLayers = [base, overlay]
+const MyLayers = [osm, kokudo, aed, tile, searchLayer]
 
 export default MyLayers

src/map/layers/overlay.js

@@ -9,16 +9,13 @@ import aed_data from '../geojson/20171224.geojson'
 import camara_icon from '../icon/camera.png'
 import searchtest_data from '../geojson/searchtest.geojson'
 
-// 現在地の円
-// export const geocycle = new VectorLayer({
-//   source: new VectorSource({
-//     features: [accuracyFeature, positionFeature]
-//   })
-// })
-
 //呉市オープンデータのaed
 export const aed = new VectorLayer({
-  title: 'AED',
+  id: 3,
+  type: 'overlay',
+  group: '呉市オープンデータ',
+  category: '医療',
+  name: 'AED',
   zIndex: 0,
   source: new VectorSource({
     format: new GeoJSON(),
@@ -45,16 +42,25 @@ export const aed = new VectorLayer({
 
 //xyzタイルのサンプル
 export const tile = new TileLayer({
-  title: 'tile',
+  id: 4,
+  type: 'overlay',
+  group: 'mierune',
+  category: '',
+  name: 'normal',
+  zIndex: 0,
   source: new XYZSource({
     url: '../tiles2/{z}/{x}/{y}.png',
     crossOrigin: 'anonymous'
   })
 })
 
 export const searchLayer = new VectorLayer({
+  id: 5,
+  type: 'overlay',
+  group: 'searchLayer',
+  category: '',
+  name: 'searchLayer',
   zIndex: 0,
-  title: 'searchLayer',
   source: new VectorSource({
     format: new GeoJSON(),
     url: searchtest_data,

src/map/main.js

@@ -7,13 +7,18 @@ import { DragRotateAndZoom } from 'ol/interaction'
 // ol-ext
 // ------------------------------------------------
 
+// Others
+import axios from 'axios'
+axios.defaults.baseURL = process.env.API_URL
+// ------------------------------------------------
+
 // my file
 import MyView from './view'
 import MyLayers from './layers/index'
 import MyPopup from './popup'
 import MySelect from './select'
 import MySearch from './search'
-import MyLayerSwitcher from './layer_switcher'
+import fetchAddlayer from './layers/fetch'
 import addHash from './hash'
 import geolocationPlot from './geolocaton'
 import changeDirection from './direction'
@@ -48,5 +53,5 @@ geolocationPlot(map)
 changeDirection(map)
 addHash(map)
 MySearch(map)
-MyLayerSwitcher(map)
+fetchAddlayer(map)
 searchAdjustment()

src/map/map.html

@@ -30,7 +30,10 @@ <h1 id="layer_switcher_header_title">背景レイヤー</h1>
           <table id="layer_switcher_table">
             <thead>
               <tr>
-                <td>フォルダ名</td>
+                <td class="layer-id">id</td>
+                <td>type</td>
+                <td>group</td>
+                <td>category</td>
                 <td>レイヤー名</td>
                 <td>透明度</td>
                 <td>表示/非表示</td>