From d2e42ed3aa71b6fa40f67fefc737508ee0de9d97 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sat, 21 Jul 2018 09:44:49 +0900 Subject: [PATCH 01/18] yarn add axios --- package.json | 1 + yarn.lock | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 95f9dd3..523f1d9 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "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", diff --git a/yarn.lock b/yarn.lock index 1bb433e..7551adf 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" @@ -2379,7 +2386,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: From 84e9e2a374d08017d0ab994345e0309b40bc75fe Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sat, 21 Jul 2018 16:29:16 +0900 Subject: [PATCH 02/18] yarn add babel-polyfill --- package.json | 1 + yarn.lock | 12 ++++++++++++ 2 files changed, 13 insertions(+) diff --git a/package.json b/package.json index 523f1d9..df4dac5 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "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/yarn.lock b/yarn.lock index 7551adf..5bd3117 100644 --- a/yarn.lock +++ b/yarn.lock @@ -876,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" @@ -4602,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" From f529fc38da23bcefa4e6ef327cf068378fc440a5 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 11:23:31 +0900 Subject: [PATCH 03/18] [fix] get propaties --- src/map/layer_switcher.js | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/map/layer_switcher.js b/src/map/layer_switcher.js index 0b5366a..979b36f 100644 --- a/src/map/layer_switcher.js +++ b/src/map/layer_switcher.js @@ -111,13 +111,16 @@ const SortInit = layers => { }) 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) - } + layer_group + .getLayers() + .getArray() + .forEach(layer => { + Object.keys(layerJoinZIndex).forEach((key, value) => { + if (layer.getProperties().title === key) { + layer.setZIndex(value) + } + }) }) - }) }) } // end setZIndexOrderByDesc---------------------- @@ -128,10 +131,13 @@ const SortInit = layers => { 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) - }) + layer_group + .getLayers() + .getArray() + .forEach((layer, i) => { + if (layer_group.getProperties().title === 'Base maps') return // とりあえず + createTr(layer_group, layer, i) + }) }) SortInit(layers) From f3ec7e761977c0eea3b4e63600df78588eda153a Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 12:40:51 +0900 Subject: [PATCH 04/18] [fix] layer-switcher --- src/map/css/layer_switcher.scss | 5 ++- src/map/layer_switcher.js | 73 ++++++++++++++++++++------------- src/map/layers/base.js | 13 ++++-- src/map/layers/index.js | 16 +------- src/map/layers/overlay.js | 26 +++++++----- src/map/map.html | 5 ++- 6 files changed, 79 insertions(+), 59 deletions(-) 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 979b36f..c6932c6 100644 --- a/src/map/layer_switcher.js +++ b/src/map/layer_switcher.js @@ -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) @@ -102,25 +126,23 @@ const SortInit = layers => { .toArray() .reverse() + console.log(arrayDesc) + arrayDesc.forEach((v, i) => { let $layer = $(v) .children() - .eq(1) + .eq(0) .html() + layerJoinZIndex[$layer] = i }) - layers.forEach(layer_group => { - layer_group - .getLayers() - .getArray() - .forEach(layer => { - Object.keys(layerJoinZIndex).forEach((key, value) => { - if (layer.getProperties().title === key) { - layer.setZIndex(value) - } - }) - }) + layers.forEach(layer => { + for (let k in layerJoinZIndex) { + console.log(layer.getProperties().id == k) + + if (layer.getProperties().id == k) layer.setZIndex(layerJoinZIndex[k]) + } }) } // end setZIndexOrderByDesc---------------------- @@ -130,14 +152,9 @@ const SortInit = layers => { // Main const MyLayerSwitcher = map => { const layers = map.getLayers().getArray() - layers.forEach(layer_group => { - layer_group - .getLayers() - .getArray() - .forEach((layer, i) => { - if (layer_group.getProperties().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/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/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 @@

背景レイヤー

- + + + + From 8321982154808f67aab6170ad08828242c9590de Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 12:49:14 +0900 Subject: [PATCH 05/18] create simple fetch layers data --- src/map/layers/fetch.js | 43 +++++++++++++++++++++++++++++++++++++++++ src/map/main.js | 4 ++-- 2 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 src/map/layers/fetch.js diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js new file mode 100644 index 0000000..48f634a --- /dev/null +++ b/src/map/layers/fetch.js @@ -0,0 +1,43 @@ +import { Tile as TileLayer } from 'ol/layer/' +import { XYZ as XYZSource } from 'ol/source/' +import { Attribution } from 'ol/control' + +import MyLayerSwitcher from '../layer_switcher' + +import axios from 'axios' + +import 'babel-polyfill' + +const fetchAddlayer = map => { + axios + .get('http://localhost:3000/layer') + .then(response => { + const result = response.data + for (let i = 0; i < 4; i++) { + let tmp = new TileLayer({ + id: i + 6, + type: 'base', + group: result[i]['group'], + category: result[i]['category'], + name: result[i]['name'], + visible: false, + source: new XYZSource({ + url: result[i]['url'], + attributions: [ + new Attribution({ + html: result[i]['attributions'] + }) + ] + }) + }) + map.addLayer(tmp) + } + MyLayerSwitcher(map) + }) + .catch(function(error) { + console.log('error...') + console.log(error) + }) +} + +export default fetchAddlayer diff --git a/src/map/main.js b/src/map/main.js index 72aba6a..20193ab 100644 --- a/src/map/main.js +++ b/src/map/main.js @@ -13,7 +13,7 @@ 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 +48,5 @@ geolocationPlot(map) changeDirection(map) addHash(map) MySearch(map) -MyLayerSwitcher(map) +fetchAddlayer(map) searchAdjustment() From cb4f8b7776e7884d36775cd7568865ac8ee9fbf6 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 14:22:01 +0900 Subject: [PATCH 06/18] separate create layer function --- src/map/layers/fetch.js | 37 ++++++++++++++++++++----------------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js index 48f634a..66dd20c 100644 --- a/src/map/layers/fetch.js +++ b/src/map/layers/fetch.js @@ -8,29 +8,32 @@ import axios from 'axios' import 'babel-polyfill' +const createLayer = data => { + return new TileLayer({ + id: data.id, + type: 'base', + group: data.group, + category: data.category, + name: data.name, + visible: false, + source: new XYZSource({ + url: data.url, + attributions: [ + new Attribution({ + html: data.attributions + }) + ] + }) + }) +} + const fetchAddlayer = map => { axios .get('http://localhost:3000/layer') .then(response => { const result = response.data for (let i = 0; i < 4; i++) { - let tmp = new TileLayer({ - id: i + 6, - type: 'base', - group: result[i]['group'], - category: result[i]['category'], - name: result[i]['name'], - visible: false, - source: new XYZSource({ - url: result[i]['url'], - attributions: [ - new Attribution({ - html: result[i]['attributions'] - }) - ] - }) - }) - map.addLayer(tmp) + map.addLayer(createLayer(result[i])) } MyLayerSwitcher(map) }) From f3d9a3cfe3ed37f0ec70e4e1b6335e22a163f164 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 14:36:28 +0900 Subject: [PATCH 07/18] =?UTF-8?q?switch=E6=96=87=E3=81=AE=E3=82=A4?= =?UTF-8?q?=E3=83=B3=E3=83=87=E3=83=B3=E3=83=88=E3=82=A8=E3=83=A9=E3=83=BC?= =?UTF-8?q?=E3=82=92=E3=81=AA=E3=81=8F=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index c4091ba..617f08f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,7 +12,7 @@ module.exports = { rules: { 'no-console': 'off', 'linebreak-style': ['error', 'unix'], - indent: ['error', 2], + indent: ['error', 2, { SwitchCase: 1 }], quotes: ['error', 'single'], semi: ['error', 'never'] } From 993cfa6c295b0e9cb31a250e0680dc4978a261f6 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 14:36:53 +0900 Subject: [PATCH 08/18] create source function --- src/map/layers/fetch.js | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js index 66dd20c..fcbb8a3 100644 --- a/src/map/layers/fetch.js +++ b/src/map/layers/fetch.js @@ -11,22 +11,32 @@ import 'babel-polyfill' const createLayer = data => { return new TileLayer({ id: data.id, - type: 'base', + type: data.type, group: data.group, category: data.category, name: data.name, visible: false, - source: new XYZSource({ - url: data.url, - attributions: [ - new Attribution({ - html: data.attributions - }) - ] - }) + source: createSource(data.format, data.url, data.attributions) }) } +const createSource = (format, url, attributions) => { + switch (format) { + case 'xyz': + return new XYZSource({ + url: url, + attributions: [ + new Attribution({ + html: attributions + }) + ] + }) + + default: + break + } +} + const fetchAddlayer = map => { axios .get('http://localhost:3000/layer') From 36e683e8b6bac98d085c9d166a3344dbfd69a0cd Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 14:49:58 +0900 Subject: [PATCH 09/18] =?UTF-8?q?geojson=E3=81=AB=E5=AF=BE=E5=BF=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/map/layers/fetch.js | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js index fcbb8a3..5798b90 100644 --- a/src/map/layers/fetch.js +++ b/src/map/layers/fetch.js @@ -1,5 +1,6 @@ -import { Tile as TileLayer } from 'ol/layer/' -import { XYZ as XYZSource } from 'ol/source/' +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 { Attribution } from 'ol/control' import MyLayerSwitcher from '../layer_switcher' @@ -9,7 +10,18 @@ import axios from 'axios' import 'babel-polyfill' const createLayer = data => { - return new TileLayer({ + 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, @@ -17,7 +29,7 @@ const createLayer = data => { name: data.name, visible: false, source: createSource(data.format, data.url, data.attributions) - }) + } } const createSource = (format, url, attributions) => { @@ -31,7 +43,12 @@ const createSource = (format, url, attributions) => { }) ] }) - + case 'geojson': + return new VectorSource({ + format: new GeoJSON(), + url: url, + crossOrigin: 'anonymous' + }) default: break } From 8ccd05fb9252a90d19b41ed593312ef3160e04c2 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 15:00:39 +0900 Subject: [PATCH 10/18] [fix] for times --- src/map/layers/fetch.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js index 5798b90..0a0cdfb 100644 --- a/src/map/layers/fetch.js +++ b/src/map/layers/fetch.js @@ -59,7 +59,7 @@ const fetchAddlayer = map => { .get('http://localhost:3000/layer') .then(response => { const result = response.data - for (let i = 0; i < 4; i++) { + for (let i = 0, j = result.length; i < j; i++) { map.addLayer(createLayer(result[i])) } MyLayerSwitcher(map) From 8e021a600f5a5c5e61f65017f6acaf49b7152d40 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Sun, 22 Jul 2018 15:05:19 +0900 Subject: [PATCH 11/18] =?UTF-8?q?laery=5Fswicther=E3=81=AEtoggle=E6=99=82?= =?UTF-8?q?=E3=81=ABfadein/out=E3=82=92=E3=81=A4=E3=81=91=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/map/layer_switcher.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/map/layer_switcher.js b/src/map/layer_switcher.js index c6932c6..acab289 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' }) }) From 76b958338bdb5800089fa1029c84e75e333ed6d1 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Tue, 7 Aug 2018 23:58:01 +0900 Subject: [PATCH 12/18] set .env --- .env.sample | 1 + src/map/main.js | 12 ++++++++++++ webpack.config.js | 4 +++- 3 files changed, 16 insertions(+), 1 deletion(-) 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/src/map/main.js b/src/map/main.js index 20193ab..b9a2b81 100644 --- a/src/map/main.js +++ b/src/map/main.js @@ -7,6 +7,18 @@ import { DragRotateAndZoom } from 'ol/interaction' // ol-ext // ------------------------------------------------ +// Others +import axios from 'axios' +switch (process.env.NODE_ENV) { + case 'development': + axios.defaults.baseURL = process.env.API_URL + break + case 'production': + axios.defaults.baseURL = '' + break +} +// ------------------------------------------------ + // my file import MyView from './view' import MyLayers from './layers/index' 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: { From 9c00930941b6d1513a64b744d06431e691b871f0 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Wed, 8 Aug 2018 00:22:13 +0900 Subject: [PATCH 13/18] =?UTF-8?q?=E5=87=BA=E5=85=B8=E3=82=92=E3=81=8D?= =?UTF-8?q?=E3=81=A1=E3=82=93=E3=81=A8=E8=A1=A8=E7=A4=BA=E3=81=A7=E3=81=8D?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/map/layers/fetch.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js index 0a0cdfb..a6a07b2 100644 --- a/src/map/layers/fetch.js +++ b/src/map/layers/fetch.js @@ -1,7 +1,6 @@ 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 { Attribution } from 'ol/control' import MyLayerSwitcher from '../layer_switcher' @@ -28,26 +27,23 @@ const createProperties = data => { category: data.category, name: data.name, visible: false, - source: createSource(data.format, data.url, data.attributions) + source: createSource(data.format, data.url, data.attribute_title, data.attribute_url) } } -const createSource = (format, url, attributions) => { +const createSource = (format, url, attri_title, attri_url) => { switch (format) { case 'xyz': return new XYZSource({ url: url, - attributions: [ - new Attribution({ - html: attributions - }) - ] + attributions: [`${attri_title}`] }) case 'geojson': return new VectorSource({ format: new GeoJSON(), url: url, - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', + attributions: [`${attri_title}`] }) default: break @@ -56,7 +52,7 @@ const createSource = (format, url, attributions) => { const fetchAddlayer = map => { axios - .get('http://localhost:3000/layer') + .get('/api/layers/') .then(response => { const result = response.data for (let i = 0, j = result.length; i < j; i++) { From 7b553081e3dfeb0bf4961ae712cb5dba702f96e8 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Wed, 8 Aug 2018 00:29:59 +0900 Subject: [PATCH 14/18] to parserOptions.ecmaVersion: 8 --- .eslintrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 617f08f..44d4cbb 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -6,7 +6,7 @@ module.exports = { extends: ['eslint:recommended'], parserOptions: { parser: 'babel-eslint', - ecmaVersion: 6, + ecmaVersion: 8, sourceType: 'module' }, rules: { From fb669d320366683f019227de26771a84de1623a1 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Wed, 8 Aug 2018 00:30:28 +0900 Subject: [PATCH 15/18] using async/await --- src/map/layers/fetch.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js index a6a07b2..750020c 100644 --- a/src/map/layers/fetch.js +++ b/src/map/layers/fetch.js @@ -50,20 +50,21 @@ const createSource = (format, url, attri_title, attri_url) => { } } -const fetchAddlayer = map => { - axios +const fetchAddlayer = async map => { + await axios .get('/api/layers/') .then(response => { const result = response.data - for (let i = 0, j = result.length; i < j; i++) { + for (let i in result) { map.addLayer(createLayer(result[i])) } - MyLayerSwitcher(map) }) - .catch(function(error) { + .catch(error => { console.log('error...') console.log(error) }) + + await MyLayerSwitcher(map) } export default fetchAddlayer From c439f759d913be86f67159bdfb42bf2c69d68ec5 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Wed, 8 Aug 2018 00:47:10 +0900 Subject: [PATCH 16/18] add desctiption --- src/map/layers/fetch.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/map/layers/fetch.js b/src/map/layers/fetch.js index 750020c..f6805ae 100644 --- a/src/map/layers/fetch.js +++ b/src/map/layers/fetch.js @@ -26,6 +26,7 @@ const createProperties = data => { 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) } @@ -55,8 +56,8 @@ const fetchAddlayer = async map => { .get('/api/layers/') .then(response => { const result = response.data - for (let i in result) { - map.addLayer(createLayer(result[i])) + for (let data of result) { + map.addLayer(createLayer(data)) } }) .catch(error => { From 19648151610738455604aca7eaa5a4957e2fe6a1 Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Wed, 8 Aug 2018 00:54:35 +0900 Subject: [PATCH 17/18] [REMOVE] unnecessary console.log --- src/map/layer_switcher.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/map/layer_switcher.js b/src/map/layer_switcher.js index acab289..861c9ec 100644 --- a/src/map/layer_switcher.js +++ b/src/map/layer_switcher.js @@ -126,8 +126,6 @@ const SortInit = layers => { .toArray() .reverse() - console.log(arrayDesc) - arrayDesc.forEach((v, i) => { let $layer = $(v) .children() @@ -139,8 +137,6 @@ const SortInit = layers => { layers.forEach(layer => { for (let k in layerJoinZIndex) { - console.log(layer.getProperties().id == k) - if (layer.getProperties().id == k) layer.setZIndex(layerJoinZIndex[k]) } }) From 77d97f869d8d59f09a834ed314de356390312feb Mon Sep 17 00:00:00 2001 From: kobakakzu0429 Date: Wed, 8 Aug 2018 06:39:45 +0900 Subject: [PATCH 18/18] =?UTF-8?q?=E3=82=B9=E3=83=83=E3=82=AD=E3=83=AA?= =?UTF-8?q?=E3=81=AB=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/map/main.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/map/main.js b/src/map/main.js index b9a2b81..09a22f9 100644 --- a/src/map/main.js +++ b/src/map/main.js @@ -9,14 +9,7 @@ import { DragRotateAndZoom } from 'ol/interaction' // Others import axios from 'axios' -switch (process.env.NODE_ENV) { - case 'development': - axios.defaults.baseURL = process.env.API_URL - break - case 'production': - axios.defaults.baseURL = '' - break -} +axios.defaults.baseURL = process.env.API_URL // ------------------------------------------------ // my file
フォルダ名idtypegroupcategory レイヤー名 透明度 表示/非表示