diff --git a/.env.sample b/.env.sample index e69de29..fb6be76 100644 --- a/.env.sample +++ b/.env.sample @@ -0,0 +1 @@ +API_URL= diff --git a/.eslintrc.js b/.eslintrc.js index c4091ba..44d4cbb 100644 --- a/.eslintrc.js +++ b/.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'] } diff --git a/package.json b/package.json index 95f9dd3..df4dac5 100644 --- a/package.json +++ b/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", diff --git a/src/map/css/layer_switcher.scss b/src/map/css/layer_switcher.scss index 1a0dd5f..5ebb967 100644 --- a/src/map/css/layer_switcher.scss +++ b/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; + } } } } diff --git a/src/map/layer_switcher.js b/src/map/layer_switcher.js index 0b5366a..861c9ec 100644 --- a/src/map/layer_switcher.js +++ b/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) => { + // + // id ===== $td1 + // type ==================== $td2 + // group =================== $td3 + // category ================ $td4 + // レイヤー名 ============== $td5 + // 透明度 ================== $td6 + // 表示/非表示 ============= $td7 + // const $row = $('').attr('id', 'layer' + i) const $td1 = $('') - .attr('class', 'movable') - .text(layer_group.values_.title) + .attr('class', 'layer-id') + .text(layer.getProperties().id) const $td2 = $('') .attr('class', 'movable') - .text(layer.values_.title) + .text(layer.getProperties().type) + + const $td3 = $('') + .attr('class', 'movable') + .text(layer.getProperties().group) + + const $td4 = $('') + .attr('class', 'movable') + .text(layer.getProperties().category) + + const $td5 = $('') + .attr('class', 'movable') + .text(layer.getProperties().name) const $slider = $('', { class: 'opacity', @@ -52,9 +73,9 @@ const createTr = (layer_group, layer, i) => { step: '0.01' }) - const $td3 = $('').append($slider) + const $td6 = $('').append($slider) - const $td4 = $('') + const $td7 = $('') const $visible_checkbox = $('', { 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) diff --git a/src/map/layers/base.js b/src/map/layers/base.js index eb1a1b1..11f02c0 100644 --- a/src/map/layers/base.js +++ b/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: - '地理院タイル' + html: '地理院タイル' }) ], 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() }) diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js new file mode 100644 index 0000000..f6805ae --- /dev/null +++ b/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: [`${attri_title}`] + }) + case 'geojson': + return new VectorSource({ + format: new GeoJSON(), + url: url, + crossOrigin: 'anonymous', + attributions: [`${attri_title}`] + }) + 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 diff --git a/src/map/layers/index.js b/src/map/layers/index.js index 6d418d8..1e00f52 100644 --- a/src/map/layers/index.js +++ b/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 diff --git a/src/map/layers/overlay.js b/src/map/layers/overlay.js index d1bbb9c..dd94305 100644 --- a/src/map/layers/overlay.js +++ b/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,7 +42,12 @@ 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' @@ -53,8 +55,12 @@ export const tile = new TileLayer({ }) 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, diff --git a/src/map/main.js b/src/map/main.js index 72aba6a..09a22f9 100644 --- a/src/map/main.js +++ b/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() diff --git a/src/map/map.html b/src/map/map.html index 0938e3d..859cf07 100644 --- a/src/map/map.html +++ b/src/map/map.html @@ -30,7 +30,10 @@

背景レイヤー

- + + + + diff --git a/webpack.config.js b/webpack.config.js index dbb57d3..cc6cfdc 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,6 +2,7 @@ const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const ExtractTextPlugin = require('extract-text-webpack-plugin') +const Dotenv = require('dotenv-webpack') const environment = process.env.NODE_ENV || 'development' @@ -87,7 +88,8 @@ module.exports = { jQuery: 'jquery', $: 'jquery', jquery: 'jquery' - }) + }), + new Dotenv() ], resolve: { diff --git a/yarn.lock b/yarn.lock index 1bb433e..5bd3117 100644 --- a/yarn.lock +++ b/yarn.lock @@ -459,6 +459,13 @@ aws4@^1.2.1, aws4@^1.6.0: version "1.7.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.7.0.tgz#d4d0e9b9dbfca77bf08eeb0a8a471550fe39e289" +axios@^0.18.0: + version "0.18.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102" + dependencies: + follow-redirects "^1.3.0" + is-buffer "^1.1.5" + babel-code-frame@^6.22.0, babel-code-frame@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" @@ -869,6 +876,14 @@ babel-plugin-transform-strict-mode@^6.24.1: babel-runtime "^6.22.0" babel-types "^6.24.1" +babel-polyfill@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153" + dependencies: + babel-runtime "^6.26.0" + core-js "^2.5.0" + regenerator-runtime "^0.10.5" + babel-preset-env@^1.7.0: version "1.7.0" resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.7.0.tgz#dea79fa4ebeb883cd35dab07e260c1c9c04df77a" @@ -2379,7 +2394,7 @@ flush-write-stream@^1.0.0: inherits "^2.0.1" readable-stream "^2.0.4" -follow-redirects@^1.0.0: +follow-redirects@^1.0.0, follow-redirects@^1.3.0: version "1.5.1" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.1.tgz#67a8f14f5a1f67f962c2c46469c79eaec0a90291" dependencies: @@ -4595,6 +4610,10 @@ regenerate@^1.2.1: version "1.4.0" resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11" +regenerator-runtime@^0.10.5: + version "0.10.5" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz#336c3efc1220adcedda2c9fab67b5a7955a33658" + regenerator-runtime@^0.11.0: version "0.11.1" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
フォルダ名idtypegroupcategory レイヤー名 透明度 表示/非表示