├── JapanMapCompare.png
├── README.md
├── babel.config.js
├── client
    ├── babel.config.js
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   ├── MapType.json
    │   │   ├── PaneType.json
    │   │   ├── mierune.png
    │   │   ├── sorry.png
    │   │   └── trusts_of_gi.png
    │   ├── components
    │   │   ├── Loading.vue
    │   │   ├── MapAdd.vue
    │   │   ├── Menu.vue
    │   │   └── ZoomLevel.vue
    │   ├── main.js
    │   ├── plugins
    │   │   ├── axios.js
    │   │   └── bootstrap-vue.js
    │   ├── router.js
    │   ├── store.js
    │   └── views
    │   │   ├── Help.vue
    │   │   ├── Pane.vue
    │   │   └── View404.vue
    └── vue.config.js
├── img
    └── JapanMapCompare.png
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── MapType.json
    │   ├── PaneType.json
    │   ├── mierune.png
    │   ├── sorry.png
    │   └── trusts_of_gi.png
    ├── components
    │   ├── Loading.vue
    │   ├── MapAdd.vue
    │   ├── Menu.vue
    │   └── ZoomLevel.vue
    ├── main.js
    ├── plugins
    │   ├── axios.js
    │   └── bootstrap-vue.js
    ├── router.js
    ├── store.js
    └── views
    │   ├── Help.vue
    │   ├── Pane.vue
    │   └── View404.vue
└── vue.config.js


/JapanMapCompare.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/JapanMapCompare.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JapanMapCompare
 2 | 
 3 | ![JapanMapCompare](img/JapanMapCompare.png)
 4 | 
 5 | <br>
 6 | 
 7 | Tool  
 8 | - Vue.js v2.6.10
 9 | - Vue-Router v3.0.3
10 | - Vuex v3.0.1
11 | - axios v0.18.1
12 | - Bootstrap-Vue v2.0.0
13 | - Bootstrap v4.3.1
14 | - Leaflet v1.5.1
15 | 
16 | <br>
17 | 
18 | Environment
19 | - node v11.15.0
20 | - npm v6.9.0
21 | 
22 | <br>
23 | 
24 | ## Usage
25 | 
26 | <br>
27 | 
28 | The API key must be set in the 「xxxxx」 part of the file.
29 | 
30 | ```
31 | /src/assets/MapType.json
32 | ```
33 | 
34 | <br>
35 | 
36 | Install package
37 | 
38 | ```
39 | npm install
40 | ```
41 | 
42 | <br>
43 | 
44 | serve
45 | 
46 | ```
47 | npm run serve
48 | ```
49 | 
50 | <br>
51 | 
52 | build
53 | 
54 | ```
55 | npm run build
56 | ```
57 | 
58 | <br>
59 | <br>
60 | 
61 | ---
62 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     presets: [
 3 |         [
 4 |             '@vue/app',
 5 |             {
 6 |                 useBuiltIns: 'entry',
 7 |             },
 8 |         ],
 9 |     ],
10 | };
11 | 


--------------------------------------------------------------------------------
/client/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     presets: [
 3 |         [
 4 |             '@vue/app',
 5 |             {
 6 |                 useBuiltIns: 'entry',
 7 |             },
 8 |         ],
 9 |     ],
10 | };
11 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "japanmapcompare",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "apple-mapkit-js": "^6.1.0",
12 |     "axios-jsonp": "^1.0.2",
13 |     "bootstrap-vue": "^2.0.0-rc.19",
14 |     "core-js": "^2.6.5",
15 |     "leaflet": "^1.5.1",
16 |     "leaflet-bing-layer": "^3.3.1",
17 |     "leaflet.gridlayer.googlemutant": "^0.8.0",
18 |     "leaflet.mapkitmutant": "^0.3.1",
19 |     "leaflet.sync": "^0.2.4",
20 |     "scriptjs": "^2.5.9",
21 |     "vue": "^2.6.10",
22 |     "vue-analytics": "^5.17.0",
23 |     "vue-router": "^3.0.3",
24 |     "vue-spinner": "^1.0.3",
25 |     "vuex": "^3.0.1"
26 |   },
27 |   "devDependencies": {
28 |     "@babel/polyfill": "^7.4.4",
29 |     "@vue/cli-plugin-babel": "^3.8.0",
30 |     "@vue/cli-plugin-eslint": "^3.8.0",
31 |     "@vue/cli-service": "^3.8.0",
32 |     "axios": "^0.21.2",
33 |     "babel-eslint": "^10.0.1",
34 |     "bootstrap": "^4.3.1",
35 |     "eslint": "^5.16.0",
36 |     "eslint-plugin-vue": "^5.0.0",
37 |     "mutationobserver-shim": "^0.3.3",
38 |     "node-sass": "^7.0.0",
39 |     "popper.js": "^1.15.0",
40 |     "portal-vue": "^2.1.4",
41 |     "sass-loader": "^7.1.0",
42 |     "vue-cli-plugin-bootstrap-vue": "^0.4.0",
43 |     "vue-template-compiler": "^2.6.10"
44 |   },
45 |   "eslintConfig": {
46 |     "root": true,
47 |     "env": {
48 |       "node": true
49 |     },
50 |     "extends": [
51 |       "plugin:vue/essential",
52 |       "eslint:recommended"
53 |     ],
54 |     "rules": {},
55 |     "parserOptions": {
56 |       "parser": "babel-eslint"
57 |     }
58 |   },
59 |   "postcss": {
60 |     "plugins": {
61 |       "autoprefixer": {}
62 |     }
63 |   },
64 |   "browserslist": [
65 |     "> 1%",
66 |     "last 2 versions"
67 |   ]
68 | }
69 | 


--------------------------------------------------------------------------------
/client/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/client/public/favicon.ico


--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |   <meta name="keywords" content="JapanMapCompareP">
 8 |   <meta name="description" content="JapanMapCompare">
 9 |   <meta name="author" content="JapanMapCompare">
10 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
11 |   <title>JapanMapCompare</title>
12 | </head>
13 | <body>
14 |   <div id="app"></div>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/client/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app">
 3 |         <transition name="view">
 4 |             <router-view v-show="!loading" />
 5 |         </transition>
 6 |         <Loading />
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Loading from './components/Loading.vue';
12 | // 地図種類読み込み
13 | import mapJson from './assets/MapType.json';
14 | // script.jsライブラリ読み込み
15 | const scriptJs = require('scriptjs');
16 | 
17 | export default {
18 |     name: 'app',
19 |     components: {
20 |         Loading,
21 |     },
22 |     created: function() {
23 |         // GoogleMapsAPI認証
24 |         const GoogleMapsKey =
25 |             'https://maps.googleapis.com/maps/api/js?key=' + this.getGoogleMapsKey();
26 |         scriptJs(GoogleMapsKey);
27 |         // MapFanAPI認証
28 |         this.getMapFanMapsKey();
29 |     },
30 |     computed: {
31 |         loading() {
32 |             return this.$store.state.loading;
33 |         },
34 |     },
35 |     methods: {
36 |         // GoogleMapsKey取得処理
37 |         getGoogleMapsKey: function() {
38 |             let googleMapsKey;
39 |             for (const v of mapJson) {
40 |                 if (v.value === 'gRoad') {
41 |                     googleMapsKey = v.googleMapsKey;
42 |                 }
43 |             }
44 |             return googleMapsKey;
45 |         },
46 |         // MapFanMapsKey取得処理
47 |         getMapFanMapsKey: function() {
48 |             for (const v of mapJson) {
49 |                 if (v.value === 'mapfan') {
50 |                     this.$store.dispatch('getMapFanApiKeyAction', v.mapFanAuthKey);
51 |                 }
52 |             }
53 |         },
54 |     },
55 | };
56 | </script>
57 | 
58 | <style>
59 | .view-enter-active {
60 |     transition: opacity 2s;
61 | }
62 | .view-leave-active {
63 |     position: absolute;
64 | }
65 | .view-enter,
66 | .view-leave-to {
67 |     opacity: 0;
68 | }
69 | 
70 | #app {
71 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
72 |     -webkit-font-smoothing: antialiased;
73 |     -moz-osx-font-smoothing: grayscale;
74 |     text-align: center;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/client/src/assets/MapType.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |         "value": "tPale",
  4 |         "text": "地理院地図 淡色",
  5 |         "tileURL": "https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",
  6 |         "attribution": "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
  7 |     },
  8 |     {
  9 |         "value": "tOrt",
 10 |         "text": "地理院地図 オルソ",
 11 |         "tileURL": "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",
 12 |         "attribution": "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
 13 |     },
 14 |     {
 15 |         "value": "mieStreets",
 16 |         "text": "MIERUNE Streets",
 17 |         "tileURL": "https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=xxxxx",
 18 |         "attribution": "<a href='https://maptiler.jp/' target='_blank'>&copy; MIERUNE</a> <a href='https://www.maptiler.com/copyright/' target='_blank'>&copy; MapTiler</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a>"
 19 |     },
 20 |     {
 21 |         "value": "mieGray",
 22 |         "text": "MIERUNE Gray",
 23 |         "tileURL": "https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=xxxxx",
 24 |         "attribution": "<a href='https://maptiler.jp/' target='_blank'>&copy; MIERUNE</a> <a href='https://www.maptiler.com/copyright/' target='_blank'>&copy; MapTiler</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a>"
 25 |     },
 26 |     {
 27 |         "value": "mieDark",
 28 |         "text": "MIERUNE Dark",
 29 |         "tileURL": "https://api.maptiler.com/maps/jp-mierune-dark/256/{z}/{x}/{y}.png?key=xxxxx",
 30 |         "attribution": "<a href='https://maptiler.jp/' target='_blank'>&copy; MIERUNE</a> <a href='https://www.maptiler.com/copyright/' target='_blank'>&copy; MapTiler</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a>"
 31 |     },
 32 |     {
 33 |         "value": "mieSatellite",
 34 |         "text": "MIERUNE Satellite",
 35 |         "tileURL": "https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=xxxxx",
 36 |         "attribution": "<a href='https://maptiler.jp/' target='_blank'>&copy; MIERUNE</a> <a href='https://www.maptiler.com/copyright/' target='_blank'>&copy; MapTiler</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a>"
 37 |     },
 38 |     {
 39 |         "value": "osm",
 40 |         "text": "OpenStreetMap",
 41 |         "tileURL": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
 42 |         "attribution": "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
 43 |     },
 44 |     {
 45 |         "value": "mapboxJapan",
 46 |         "text": "Mapbox Japan Data",
 47 |         "tileURL": "https://api.mapbox.com/styles/v1/xxxxx/xxxxx/tiles/256/{z}/{x}/{y}?access_token=xxxxx",
 48 |         "attribution": "&copy; <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
 49 |     },
 50 |     {
 51 |         "value": "mapStreets",
 52 |         "text": "Mapbox Streets",
 53 |         "tileURL": "https://api.mapbox.com/styles/v1/xxxxx/xxxxx/tiles/256/{z}/{x}/{y}?access_token=xxxxx",
 54 |         "attribution": "&copy; <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
 55 |     },
 56 |     {
 57 |         "value": "mapDark",
 58 |         "text": "Mapbox Dark",
 59 |         "tileURL": "https://api.mapbox.com/styles/v1/xxxxx/xxxxx/tiles/256/{z}/{x}/{y}?access_token=xxxxx",
 60 |         "attribution": "&copy; <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
 61 |     },
 62 |     {
 63 |         "value": "mapSatellite",
 64 |         "text": "Mapbox Satellite",
 65 |         "tileURL": "https://api.mapbox.com/styles/v1/xxxxx/xxxxx/tiles/256/{z}/{x}/{y}?access_token=xxxxx",
 66 |         "attribution": "&copy; <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
 67 |     },
 68 |     {
 69 |         "value": "esri",
 70 |         "text": "Esri",
 71 |         "tileURL": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png",
 72 |         "attribution": "Sources: Esri, HERE, Garmin, USGS, Intermap, INCREMENT P, NRCan, Esri Japan, METI, Esri China (Hong Kong), Esri Korea, Esri (Thailand), NGCC, (c) OpenStreetMap contributors, and the GIS User Community | Powered by <a href='https://www.esri.com/ja-jp/home'>Esri</a>"
 73 |     },
 74 |     {
 75 |         "value": "bRoad",
 76 |         "text": "BingMaps Road",
 77 |         "bingMapsKey": "xxxxx",
 78 |         "imagerySet": "Road",
 79 |         "culture": "ja"
 80 |     },
 81 |     {
 82 |         "value": "gRoad",
 83 |         "text": "GoogleMaps Road",
 84 |         "googleMapsKey": "xxxxx",
 85 |         "type": "roadmap"
 86 |     },
 87 |     {
 88 |         "value": "apmapsStandard",
 89 |         "text": "Apple Maps Standard",
 90 |         "mapKitToken": "xxxxx",
 91 |         "type": "standard",
 92 |         "attribution": "&copy; <a href='https://www.apple.com/legal/internet-services/maps/legal-jp.html'>Apple Inc.</a>"
 93 |     },
 94 |     {
 95 |         "value": "apmapsSatelite",
 96 |         "text": "Apple Maps Satellite",
 97 |         "mapKitToken": "xxxxx",
 98 |         "type": "satellite",
 99 |         "attribution": "&copy; <a href='https://www.apple.com/legal/internet-services/maps/legal-jp.html'>Apple Inc.</a>"
100 |     },
101 |     {
102 |         "value": "mapfan",
103 |         "text": "MapFan",
104 |         "mapFanAuthKey": "xxxxx",
105 |         "tileURL": [
106 |             "https://api-map-pre.mapfan.com/v1/map?key=",
107 |             "=&landmarkicon=on&rotationangle=0&logo=on&tilematrix=EPSG:3857:{z}&tilerow={y}&tilecol={x}"
108 |         ],
109 |         "attribution": "&copy; INCREMENT P CORPORATION"
110 |     }
111 | ]
112 | 


--------------------------------------------------------------------------------
/client/src/assets/PaneType.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |         "id": 1,
  4 |         "data": [
  5 |             {
  6 |                 "heightVal": "81vh",
  7 |                 "gridClass": "col-sm-12",
  8 |                 "mapList": [
  9 |                     {
 10 |                         "mapId": "view1_1",
 11 |                         "mapType": "tPale"
 12 |                     }
 13 |                 ]
 14 |             }
 15 |         ]
 16 |     },
 17 |     {
 18 |         "id": 2,
 19 |         "data": [
 20 |             {
 21 |                 "heightVal": "81vh",
 22 |                 "gridClass": "col-sm-6",
 23 |                 "mapList": [
 24 |                     {
 25 |                         "mapId": "view2_1",
 26 |                         "mapType": "tPale"
 27 |                     },
 28 |                     {
 29 |                         "mapId": "view2_2",
 30 |                         "mapType": "mieStreets"
 31 |                     }
 32 |                 ]
 33 |             }
 34 |         ]
 35 |     },
 36 |     {
 37 |         "id": 3,
 38 |         "data": [
 39 |             {
 40 |                 "heightVal": "81vh",
 41 |                 "gridClass": "col-sm-4",
 42 |                 "mapList": [
 43 |                     {
 44 |                         "mapId": "view3_1",
 45 |                         "mapType": "tPale"
 46 |                     },
 47 |                     {
 48 |                         "mapId": "view3_2",
 49 |                         "mapType": "mieStreets"
 50 |                     },
 51 |                     {
 52 |                         "mapId": "view3_3",
 53 |                         "mapType": "mapStreets"
 54 |                     }
 55 |                 ]
 56 |             }
 57 |         ]
 58 |     },
 59 |     {
 60 |         "id": 4,
 61 |         "data": [
 62 |             {
 63 |                 "heightVal": "37vh",
 64 |                 "gridClass": "col-sm-6",
 65 |                 "mapList": [
 66 |                     {
 67 |                         "mapId": "view4_1",
 68 |                         "mapType": "tPale"
 69 |                     },
 70 |                     {
 71 |                         "mapId": "view4_2",
 72 |                         "mapType": "mieStreets"
 73 |                     },
 74 |                     {
 75 |                         "mapId": "view4_3",
 76 |                         "mapType": "mapStreets"
 77 |                     },
 78 |                     {
 79 |                         "mapId": "view4_4",
 80 |                         "mapType": "apmapsStandard"
 81 |                     }
 82 |                 ]
 83 |             }
 84 |         ]
 85 |     },
 86 |     {
 87 |         "id": 6,
 88 |         "data": [
 89 |             {
 90 |                 "heightVal": "37vh",
 91 |                 "gridClass": "col-lg-4 col-md-6 col-sm-6",
 92 |                 "mapList": [
 93 |                     {
 94 |                         "mapId": "view6_1",
 95 |                         "mapType": "tPale"
 96 |                     },
 97 |                     {
 98 |                         "mapId": "view6_2",
 99 |                         "mapType": "mieStreets"
100 |                     },
101 |                     {
102 |                         "mapId": "view6_3",
103 |                         "mapType": "mapStreets"
104 |                     },
105 |                     {
106 |                         "mapId": "view6_4",
107 |                         "mapType": "apmapsStandard"
108 |                     },
109 |                     {
110 |                         "mapId": "view6_5",
111 |                         "mapType": "tOrt"
112 |                     },
113 |                     {
114 |                         "mapId": "view6_6",
115 |                         "mapType": "mieSatellite"
116 |                     }
117 |                 ]
118 |             }
119 |         ]
120 |     },
121 |     {
122 |         "id": 8,
123 |         "data": [
124 |             {
125 |                 "heightVal": "37vh",
126 |                 "gridClass": "col-lg-3 col-md-6 col-sm-6",
127 |                 "mapList": [
128 |                     {
129 |                         "mapId": "view8_1",
130 |                         "mapType": "tPale"
131 |                     },
132 |                     {
133 |                         "mapId": "view8_2",
134 |                         "mapType": "mieStreets"
135 |                     },
136 |                     {
137 |                         "mapId": "view8_3",
138 |                         "mapType": "mapStreets"
139 |                     },
140 |                     {
141 |                         "mapId": "view8_4",
142 |                         "mapType": "apmapsStandard"
143 |                     },
144 |                     {
145 |                         "mapId": "view8_5",
146 |                         "mapType": "tOrt"
147 |                     },
148 |                     {
149 |                         "mapId": "view8_6",
150 |                         "mapType": "mieSatellite"
151 |                     },
152 |                     {
153 |                         "mapId": "view8_7",
154 |                         "mapType": "mapSatellite"
155 |                     },
156 |                     {
157 |                         "mapId": "view8_8",
158 |                         "mapType": "apmapsSatelite"
159 |                     }
160 |                 ]
161 |             }
162 |         ]
163 |     }
164 | ]
165 | 


--------------------------------------------------------------------------------
/client/src/assets/mierune.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/client/src/assets/mierune.png


--------------------------------------------------------------------------------
/client/src/assets/sorry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/client/src/assets/sorry.png


--------------------------------------------------------------------------------
/client/src/assets/trusts_of_gi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/client/src/assets/trusts_of_gi.png


--------------------------------------------------------------------------------
/client/src/components/Loading.vue:
--------------------------------------------------------------------------------
 1 | <!--ナビバーコンポーネント-->
 2 | <template>
 3 |     <transition name="loading">
 4 |         <div class="loading" v-show="$store.state.loading" v-if="loading">
 5 |             <pulse-loader :color="color" :size="size"></pulse-loader>
 6 |         </div>
 7 |     </transition>
 8 | </template>
 9 | 
10 | <script>
11 | import PulseLoader from 'vue-spinner/src/PulseLoader';
12 | export default {
13 |     name: 'Loading',
14 |     data() {
15 |         return {
16 |             color: '#40AAEF',
17 |             size: '30px',
18 |         };
19 |     },
20 |     components: {
21 |         PulseLoader,
22 |     },
23 |     computed: {
24 |         loading() {
25 |             return this.$store.state.loading;
26 |         },
27 |     },
28 | };
29 | </script>
30 | 
31 | <style scoped>
32 | .loading {
33 |     margin-top: 300px;
34 | }
35 | .v-spinner {
36 |     color: #4e555b;
37 | }
38 | .loading-enter-active {
39 |     transition: all 0.25s;
40 | }
41 | .loading-leave-active {
42 |     transition: all 0.5s ease 0.5s;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/client/src/components/MapAdd.vue:
--------------------------------------------------------------------------------
  1 | <!--地図画面コンポーネント-->
  2 | <template>
  3 |     <div class="mapAdd">
  4 |         <!--セレクトメニュー-->
  5 |         <b-form-select
  6 |             v-model="selected"
  7 |             v-bind:options="options"
  8 |             @change="onChange(mapIdName, $event)"
  9 |             class="mt-3 mb-2 shadow-sm"
 10 |         ></b-form-select>
 11 |         <!--地図画面生成-->
 12 |         <div
 13 |             v-bind:id="mapIdName"
 14 |             v-bind:class="mapClass"
 15 |             v-bind:style="mapStyle"
 16 |             class="map-size shadow-sm"
 17 |         ></div>
 18 |     </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | // Leaflet読み込み
 23 | import L from 'leaflet';
 24 | // 地図種類読み込み
 25 | import mapJson from '../assets/MapType.json';
 26 | 
 27 | export default {
 28 |     name: 'MapAdd',
 29 |     props: {
 30 |         index: Number,
 31 |         mapId: String,
 32 |         mapType: String,
 33 |         heightVh: String,
 34 |     },
 35 |     data() {
 36 |         return {
 37 |             mapIdName: '',
 38 |             mapClass: 'map-size',
 39 |             mapStyle: {
 40 |                 height: this.heightVh,
 41 |             },
 42 |             selected: this.mapType,
 43 |             options: mapJson,
 44 |             mapIdObj: {},
 45 |             tileAdd: {},
 46 |             lat: this.$store.state.lat,
 47 |             lng: this.$store.state.lng,
 48 |             zoom: this.$store.state.zoom,
 49 |         };
 50 |     },
 51 |     created: function() {
 52 |         // マップ名取得
 53 |         this.mapIdName = this.mapId;
 54 |     },
 55 |     mounted: function() {
 56 |         // タイルオブジェクト生成処理
 57 |         this.tileCreate();
 58 |         // マップオブジェクト生成処理
 59 |         this.mapCreate(this.lat, this.lng, this.zoom);
 60 |     },
 61 |     computed: {
 62 |         // storeのstateに変化があったら呼び出される
 63 |         changeStateCoordinates: function() {
 64 |             return this.$store.state.mapCoordinates;
 65 |         },
 66 |     },
 67 |     watch: {
 68 |         changeStateCoordinates: function(coordinates) {
 69 |             // 検索結果の位置へ飛ぶ
 70 |             this.mapIdObj[this.mapIdName].panTo([coordinates[0], coordinates[1]], this.$store.state.zoom);
 71 |         },
 72 |     },
 73 |     methods: {
 74 |         // タイルオブジェクト生成処理
 75 |         tileCreate: function() {
 76 |             // タイル全て読み込み
 77 |             for (const v of mapJson) {
 78 |                 if (v.value === 'gRoad') {
 79 |                     // GoogleMapsタイル
 80 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.gridLayer.googleMutant({
 81 |                         type: v.type,
 82 |                     });
 83 |                 } else if (v.value === 'bRoad') {
 84 |                     // BingMapタイル
 85 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.tileLayer.bing({
 86 |                         bingMapsKey: v.bingMapsKey,
 87 |                         imagerySet: v.imagerySet,
 88 |                         culture: v.culture,
 89 |                     });
 90 |                 } else if (v.value === 'mapfan') {
 91 |                     // MapFanタイル
 92 |                     const mapFanMapUrl =
 93 |                         v.tileURL[0] + this.$store.state.mapFanApiKey + v.tileURL[1];
 94 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.tileLayer(mapFanMapUrl, {
 95 |                         attribution: v.attribution,
 96 |                     });
 97 |                 } else if ((v.value === 'apmapsStandard') || (v.value === 'apmapsSatelite')) {
 98 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.mapkitMutant({
 99 |                         // Mapkitタイル
100 |                         type: v.type,
101 |                         authorizationCallback: function(done) {
102 |                             done(v.mapKitToken)
103 |                         },
104 |                         debugRectangle: false,
105 |                         attribution: v.attribution
106 |                     });
107 | 
108 |                 } else {
109 |                     // 一般タイル
110 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.tileLayer(v.tileURL, {
111 |                         attribution: v.attribution,
112 |                     });
113 |                 }
114 |             }
115 |         },
116 |         // マップオブジェクト生成処理
117 |         mapCreate: function(lat, lng, zoom) {
118 |             // Viewごとの各タイル表示
119 |             for (const v of Object.keys(this.tileAdd)) {
120 |                 if (this.mapType + '_' + this.mapIdName === v) {
121 |                     // 地図読み込み
122 |                     this.mapIdObj[this.mapIdName] = L.map(this.mapIdName, {
123 |                         center: [lat, lng],
124 |                         zoom: zoom,
125 |                         zoomControl: true,
126 |                         maxZoom: 18,
127 |                         layers: [this.tileAdd[v]],
128 |                     });
129 |                     // 親コンポーネントにマップオブジェクト送信
130 |                     this.$emit('child-event', this.mapIdObj[this.mapIdName]);
131 |                 }
132 |             }
133 |         },
134 |         // セレクトボックス切り替え処理
135 |         onChange: function(mapObj, value) {
136 |             // 各レイヤ切り替え
137 |             for (const v of Object.keys(this.tileAdd)) {
138 |                 // 不要レイヤ削除
139 |                 this.mapIdObj[mapObj].removeLayer(this.tileAdd[v]);
140 |                 if (value + '_' + mapObj === v) {
141 |                     // 選択レイヤ追加
142 |                     this.mapIdObj[mapObj].addLayer(this.tileAdd[v]);
143 |                 }
144 |             }
145 |             // レイヤ順情報格納納
146 |             this.$store.commit('setMapTypeList', {
147 |                 index: this.index,
148 |                 selected: this.selected,
149 |             });
150 |             // ペイン配置情報更新
151 |             this.$store.commit('setMapTypeJson', {
152 |                 index: this.index,
153 |                 selected: this.selected,
154 |             });
155 |         }
156 |     },
157 | };
158 | </script>
159 | 
160 | <style scoped>
161 | /*地図画面サイズ*/
162 | .map-size {
163 |     /*表示順*/
164 |     z-index: 0;
165 |     /*GoogleMapsズレ対応*/
166 |     text-align: left;
167 |     /*枠*/
168 |     border: solid 1px #c8c8c8;
169 | }
170 | </style>
171 | 


--------------------------------------------------------------------------------
/client/src/components/Menu.vue:
--------------------------------------------------------------------------------
  1 | <!--ナビバーコンポーネント-->
  2 | <template>
  3 |     <div class="menu">
  4 |         <!--ナビバー-->
  5 |         <b-navbar toggleable="lg" type="dark" variant="secondary" class="shadow-sm">
  6 |             <b-navbar-brand href="/">JapanMapCompare</b-navbar-brand>
  7 |             <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
  8 |             <b-collapse id="nav-collapse" is-nav>
  9 |                 <b-navbar-nav class="ml-auto">
 10 | 
 11 |                     <b-nav-item-dropdown v-show="!isHelpPage" id="change-pane" text="ChangePane" right>
 12 |                         <b-dropdown-item
 13 |                             class="dropdown-link-color"
 14 |                             :to="{ path: item.path }"
 15 |                             v-for="item in paneList"
 16 |                             :key="item.path"
 17 |                         >
 18 |                             {{ item.name }}
 19 |                         </b-dropdown-item>
 20 |                     </b-nav-item-dropdown>
 21 |                     <b-tooltip v-show="!isHelpPage" target="change-pane" triggers="hover">
 22 |                         <p>表示するペイン数を変更します</p>
 23 |                     </b-tooltip>
 24 | 
 25 |                     <b-nav-form v-show="!isHelpPage" class="nav-form" ref="form" @submit.stop.prevent="handleSubmit">
 26 |                         <b-form-input
 27 |                             id="search-input"
 28 |                             v-model="search"
 29 |                             size="sm"
 30 |                             class="mr-sm-2"
 31 |                             placeholder="Search">
 32 |                         </b-form-input>
 33 |                         <b-button
 34 |                             id="search-button"
 35 |                             size="sm"
 36 |                             @click="handleOk"
 37 |                             variant="primary"
 38 |                             class="my-2 my-sm-0"
 39 |                             type="button"
 40 |                             data-toggle="tooltip"
 41 |                             data-placement="bottom"
 42 |                             data-original-title="説明">Search</b-button>
 43 |                     </b-nav-form>
 44 |                     <b-tooltip v-show="!isHelpPage" target="search-input" triggers="hover">
 45 |                         <p>キーワード（住所・地名・施設名）を入力してSearchボタンまたはリターンキーを押下することで、候補地点が表示され、選択することで該当位置にジャンプします<br />（例：東京都渋谷区）</p>
 46 |                     </b-tooltip>
 47 | 
 48 |                     <b-nav-item>
 49 |                         <b-link class="link-color" :to="{ path: '/help' }">
 50 |                             Help
 51 |                         </b-link>
 52 |                     </b-nav-item>
 53 |                 </b-navbar-nav>
 54 |             </b-collapse>
 55 |         </b-navbar>
 56 |         <!-- 検索結果一覧モーダル -->
 57 |         <b-modal id="bv-list-modal" @hidden="closeListModal" hide-header hide-footer>
 58 |             <b-table
 59 |             striped
 60 |             hover
 61 |             :items="searchResultTitleList"
 62 |             @row-clicked="searchResultClickHandler"></b-table>
 63 |         </b-modal>
 64 |         <!-- メッセージモーダル -->
 65 |         <b-modal id="bv-msg-modal" @hidden="closeMsgModal" hide-footer>
 66 |             <p>{{searchResultMsg}}</p>
 67 |         </b-modal>
 68 |     </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | export default {
 73 |     name: 'Menu',
 74 |     data() {
 75 |         return {
 76 |             paneList: [
 77 |                 { path: '/1', name: '1 Pane' },
 78 |                 { path: '/2', name: '2 Pane' },
 79 |                 { path: '/3', name: '3 Pane' },
 80 |                 { path: '/4', name: '4 Pane' },
 81 |                 { path: '/6', name: '6 Pane' },
 82 |                 { path: '/8', name: '8 Pane' },
 83 |             ],
 84 |             search: '',
 85 |             searchState: null,
 86 |             searchResultMsg: '',
 87 |             searchResultTitleList: [],
 88 |             searchResultCoordinatesList: [],
 89 |             isResultList: false,
 90 |             isMessage: false,
 91 |         };
 92 |     },
 93 |     computed: {
 94 |         // storeのstateに変化があったら呼び出される
 95 |         changeStateSearchResultMsg: function() {
 96 |             return this.$store.state.searchResultMsg;
 97 |         },
 98 |         changeStateSearchResultList: function() {
 99 |             return this.$store.state.searchResultList;
100 |         },
101 |         searchInputState: function() {
102 |             return this.search.length > 0 ? true : false
103 |         },
104 |         isHelpPage: function() {
105 |             if (this.$route.path === '/help') {
106 |                 return true;
107 |             }
108 |             return false;
109 |         }
110 |     },
111 |     watch: {
112 |         changeStateSearchResultMsg: function(msg) {
113 |             // MSGに何か入っていたらダイアログ表示
114 |             if (msg !== '') {
115 |                 this.searchResultMsg = msg;
116 |                 this.$bvModal.show('bv-msg-modal');
117 |                 this.isMessage = true;
118 |             } else {
119 |                 this.isMessage = false;
120 |             }
121 |         },
122 |         changeStateSearchResultList: function(list) {
123 | 
124 |             // 検索一覧タイトルの格納
125 |             this.searchResultTitleList = list.map(val => ({
126 |                     result : val.properties.title
127 |                 })
128 |             );
129 |             // 検索緯度経度の格納
130 |             this.searchResultCoordinatesList = list.map(val => ({
131 |                     lat : val.geometry.coordinates[1],
132 |                     lng : val.geometry.coordinates[0]
133 |                 })
134 |             );
135 |             this.isResultList = true;
136 |             // 何かメッセージが出ている場合は一旦出さない
137 |             if (!this.isMessage) {
138 |                 this.$bvModal.show('bv-list-modal');
139 |             }
140 |         }
141 |     },
142 |     methods: {
143 |         resetModal() {
144 |             this.search = '';
145 |         },
146 |         handleOk(bvModalEvt) {
147 |             // preventDefaultを呼んでおく
148 |             bvModalEvt.preventDefault();
149 |             //
150 |             this.handleSubmit();
151 |         },
152 |         handleSubmit() {
153 |             // メッセージはクリアしておく
154 |             this.$store.commit('setSearchResultMsg', '');
155 |             // 逆ジオコーディング
156 |             this.$store.dispatch('getSearchPointAction', this.search);
157 |             // モーダルウインドウは閉じる
158 |             this.$nextTick(() => {
159 |                 this.$bvModal.hide('bv-search-modal');
160 |             })
161 |         },
162 |         searchResultClickHandler(val, index) {
163 |             this.$store.commit('setCoordinatesInfo', {lat : this.searchResultCoordinatesList[index].lat, lng : this.searchResultCoordinatesList[index].lng});
164 | 
165 |             // モーダルウインドウは閉じる
166 |             this.$nextTick(() => {
167 |                 this.$bvModal.hide('bv-list-modal');
168 |             })
169 |         },
170 |         closeListModal() {
171 |             this.isResultList = false;
172 |         },
173 |         closeMsgModal() {
174 |             this.$store.commit('setSearchResultMsg', '');
175 |             // メッセージが表示され、かつリスト表示がある場合は、一旦メッセージモーダルを出し、その後リスト表示する
176 |             if (this.isMessage && this.isResultList) {
177 |                 this.$bvModal.show('bv-list-modal');
178 |                 this.isMessage = false;
179 |             }
180 |         }
181 |     }
182 | };
183 | </script>
184 | 
185 | <style scoped>
186 | .dropdown-link-color {
187 |     color: #212529;
188 | }
189 | .dropdown-link-color:hover {
190 |     text-decoration: none;
191 | }
192 | .link-color {
193 |     color: rgba(255, 255, 255, 0.5);
194 | }
195 | .link-color:hover {
196 |     text-decoration: none;
197 |     color: rgba(255, 255, 255, 0.8);
198 | }
199 | .small-font {
200 |     font-size: 0.8em;
201 | }
202 | .tooltip p {
203 |    text-align:left;
204 | }
205 | .nav-form {
206 |     margin-left: 20px;
207 |     margin-right: 20px;
208 | }
209 | </style>
210 | 


--------------------------------------------------------------------------------
/client/src/components/ZoomLevel.vue:
--------------------------------------------------------------------------------
 1 | <!--ズームレベルコンポーネント-->
 2 | <template>
 3 |     <div class="zoomLevel">zoom = {{ zoom }}</div>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |     name: 'ZoomLevel',
 9 |     computed: {
10 |         zoom: function() {
11 |             return this.$store.state.zoom;
12 |         },
13 |     },
14 | };
15 | </script>
16 | 
17 | <style scoped></style>
18 | 


--------------------------------------------------------------------------------
/client/src/main.js:
--------------------------------------------------------------------------------
 1 | import '@babel/polyfill';
 2 | import 'mutationobserver-shim';
 3 | import Vue from 'vue';
 4 | 
 5 | import App from './App.vue';
 6 | import router from './router';
 7 | import store from './store';
 8 | 
 9 | //vue-analytics読み込み
10 | import VueAnalytics from 'vue-analytics';
11 | // axios読み込み
12 | import './plugins/axios';
13 | // bootstrap-vue読み込み
14 | import './plugins/bootstrap-vue';
15 | // Leaflet読み込み
16 | import 'leaflet/dist/leaflet.css';
17 | // Leafletプラグイン読み込み
18 | import 'leaflet.gridlayer.googlemutant';
19 | import 'leaflet-bing-layer';
20 | import 'leaflet.sync';
21 | import 'leaflet.mapkitmutant';
22 | // Apple MapKit読み込み
23 | import 'apple-mapkit-js';
24 | 
25 | Vue.config.productionTip = false;
26 | 
27 | // Google アナリティクス適用
28 | Vue.use(VueAnalytics, {
29 |     id: 'UA-57375666-12',
30 |     router,
31 | });
32 | 
33 | new Vue({
34 |     router,
35 |     store,
36 |     render: h => h(App),
37 | }).$mount('#app');
38 | 


--------------------------------------------------------------------------------
/client/src/plugins/axios.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import Vue from 'vue';
 4 | import axios from "axios";
 5 | 
 6 | // Full config:  https://github.com/axios/axios#request-config
 7 | // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
 8 | // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 9 | // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
10 | 
11 | let config = {
12 |   // baseURL: process.env.baseURL || process.env.apiUrl || ""
13 |   // timeout: 60 * 1000, // Timeout
14 |   // withCredentials: true, // Check cross-site Access-Control
15 | };
16 | 
17 | const _axios = axios.create(config);
18 | 
19 | _axios.interceptors.request.use(
20 |   function(config) {
21 |     // Do something before request is sent
22 |     return config;
23 |   },
24 |   function(error) {
25 |     // Do something with request error
26 |     return Promise.reject(error);
27 |   }
28 | );
29 | 
30 | // Add a response interceptor
31 | _axios.interceptors.response.use(
32 |   function(response) {
33 |     // Do something with response data
34 |     return response;
35 |   },
36 |   function(error) {
37 |     // Do something with response error
38 |     return Promise.reject(error);
39 |   }
40 | );
41 | 
42 | Plugin.install = function(Vue, options) {
43 |   Vue.axios = _axios;
44 |   window.axios = _axios;
45 |   Object.defineProperties(Vue.prototype, {
46 |     axios: {
47 |       get() {
48 |         return _axios;
49 |       }
50 |     },
51 |     $axios: {
52 |       get() {
53 |         return _axios;
54 |       }
55 |     },
56 |   });
57 | };
58 | 
59 | Vue.use(Plugin)
60 | 
61 | export default Plugin;
62 | 


--------------------------------------------------------------------------------
/client/src/plugins/bootstrap-vue.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | import BootstrapVue from 'bootstrap-vue'
4 | import 'bootstrap/dist/css/bootstrap.min.css'
5 | import 'bootstrap-vue/dist/bootstrap-vue.css'
6 | 
7 | Vue.use(BootstrapVue)
8 | 


--------------------------------------------------------------------------------
/client/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import store from './store';
 4 | 
 5 | // 各view読み込み
 6 | import View404 from './views/View404.vue';
 7 | import Help from './views/Help.vue';
 8 | import Pane from './views/Pane.vue';
 9 | 
10 | Vue.use(Router);
11 | 
12 | const router = new Router({
13 |     // #を無くすためにはサーバーの設定も必要
14 |     mode: 'history',
15 |     routes: [
16 |         {
17 |             // ペインページ初期表示用 (1,2,3,4,6,8のみ)
18 |             path: '/:id([123468])/:zoom(\\d+)/:lat([-]?\\d+[.]?[\\d]*)/:lng([-]?\\d+[.]?[\\d]*)/:layer(.+)',
19 |             name: 'paneLatLng',
20 |             component: Pane,
21 |             // ペイン・ズーム・経度・緯度・レイヤ情報を格納
22 |             props: route => ({
23 |                 id: Number(route.params.id),
24 |                 zoom: Number(route.params.zoom),
25 |                 lat: Number(route.params.lat),
26 |                 lng: Number(route.params.lng),
27 |                 layer: String(route.params.layer),
28 |             }),
29 |         },
30 |         {
31 |             // ペインページ遷移用 (1,2,3,4,6,8のみ)
32 |             path: '/:id([123468])',
33 |             name: 'paneChange',
34 |             component: Pane,
35 |             beforeEnter(to, from, next) {
36 |                 // 画面遷移後のマップURL生成
37 |                 store.dispatch('getNextMapTypeUrl', to.params.id);
38 |                 // 画面遷移後のURL設定
39 |                 const redirectPath =
40 |                     '/' +
41 |                     [
42 |                         to.params.id,
43 |                         store.state.zoom,
44 |                         store.state.lat,
45 |                         store.state.lng,
46 |                         store.state.nextMapTypeUrl,
47 |                     ].join('/');
48 |                 // ページ遷移
49 |                 next({ path: redirectPath });
50 |             },
51 |             // ペイン情報を格納
52 |             props: route => ({
53 |                 id: Number(route.params.id),
54 |             }),
55 |         },
56 |         {
57 |             // ヘルプページ
58 |             path: '/help',
59 |             name: 'help',
60 |             component: Help,
61 |         },
62 |         {
63 |             // 404ページ
64 |             path: '*',
65 |             name: 'view404',
66 |             component: View404,
67 |         },
68 |         {
69 |             // ルートページリダイレクト
70 |             path: '/',
71 |             redirect: store.state.rootUrl,
72 |         },
73 |     ],
74 | });
75 | 
76 | // ナビゲーションの前に実行
77 | router.beforeEach((to, from, next) => {
78 |     store.commit('setLoading', true);
79 |     setTimeout(next, 2000);
80 | });
81 | 
82 | // ナビゲーションの後に実行
83 | router.afterEach(() => {
84 |     store.commit('setLoading', false);
85 | });
86 | 
87 | export default router;
88 | 


--------------------------------------------------------------------------------
/client/src/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue';
  2 | import Vuex from 'vuex';
  3 | import axios from 'axios';
  4 | import axiosJsonpAdapter from 'axios-jsonp';
  5 | 
  6 | Vue.use(Vuex);
  7 | 
  8 | export default new Vuex.Store({
  9 |     state: {
 10 |         // ローディング
 11 |         loading: false,
 12 |         // ペイン・ズームレベル・緯度・経度
 13 |         id: 3,
 14 |         zoom: 14,
 15 |         lat: 35.6795,
 16 |         lng: 139.7672,
 17 |         // レイヤ順情報
 18 |         mapTypeList: [],
 19 |         // ペイン配置情報管理
 20 |         mapTypeJson: null,
 21 |         // 初期URL
 22 |         rootUrl: '/3/14/35.6795/139.7672/tPale/mieStreets/mapStreets',
 23 |         // 現在のレイヤ順情報URL
 24 |         nowMapTypeUrl: '',
 25 |         // 画面遷移後のレイヤ順情報URL
 26 |         nextMapTypeUrl: '',
 27 |         // MapFanAPIキー
 28 |         mapFanApiKey: '',
 29 |         // 住所検索で返ってきたリスト
 30 |         searchResultList: null,
 31 |         // 住所検索用のlatlng
 32 |         mapCoordinates:[],
 33 |         // 住所検索の際、何も検索されなかった時などのメッセージ用
 34 |         searchResultMsg: '',
 35 |     },
 36 |     mutations: {
 37 |         // ローダー状態格納
 38 |         setLoading(state, payload) {
 39 |             state.loading = payload;
 40 |         },
 41 |         // 初期ペイン配置情報格納
 42 |         setDefaultMapTypeJson(state, paneTypeJson) {
 43 |             state.mapTypeJson = paneTypeJson;
 44 |         },
 45 |         // ペイン・ズーム・緯度・経度・レイヤ順情報を格納
 46 |         setLocationInfo(state, val) {
 47 |             state.id = val.id;
 48 |             state.lat = val.lat;
 49 |             state.lng = val.lng;
 50 |             state.zoom = val.zoom;
 51 |             state.mapTypeList = val.mapTypeList;
 52 |         },
 53 |         // レイヤ順情報格納
 54 |         setMapTypeList(state, mapTypeList) {
 55 |             state.mapTypeList[mapTypeList.index] = mapTypeList.selected;
 56 |         },
 57 |         // 現在のレイヤ順情報URL格納
 58 |         setNowMapTypeUrl(state, nowMapTypeUrl) {
 59 |             state.nowMapTypeUrl = nowMapTypeUrl;
 60 |         },
 61 |         // 画面遷移後のレイヤ順情報URL格納
 62 |         setNextMapTypeUrl(state, nextMapTypeUrl) {
 63 |             state.nextMapTypeUrl = nextMapTypeUrl;
 64 |         },
 65 |         // レイヤ切り替え後のレイヤ順情報URL格納
 66 |         setSelectMapTypeUrl(state, selectMapTypeUrl) {
 67 |             state.selectMapTypeUrl = selectMapTypeUrl;
 68 |         },
 69 |         // ペイン配置情報更新
 70 |         setMapTypeJson(state, select) {
 71 |             for (const v of state.mapTypeJson) {
 72 |                 try {
 73 |                     v.data[0].mapList[select.index].mapType = select.selected;
 74 |                 } catch (e) {
 75 |                     continue;
 76 |                 }
 77 |             }
 78 |         },
 79 |         // URL貼り付け時ペイン配置情報更新
 80 |         pastingMapTypeJson(state, mapTypeList) {
 81 |             for (let index = 0; index < mapTypeList.length; index++) {
 82 |                 for (const v of state.mapTypeJson) {
 83 |                     try {
 84 |                         v.data[0].mapList[index].mapType = mapTypeList[index];
 85 |                     } catch (e) {
 86 |                         continue;
 87 |                     }
 88 |                 }
 89 |             }
 90 |         },
 91 |         // MapFanAPIキー格納
 92 |         getMapFanApiKey(state, mapFanApiKey) {
 93 |             state.mapFanApiKey = mapFanApiKey;
 94 |         },
 95 |         // 住所検索時緯度経度登録
 96 |         setCoordinatesInfo(state, val) {
 97 |             state.mapCoordinates = [val.lat, val.lng];
 98 |         },
 99 |         // 住所検索時結果リスト格納
100 |         setSearchResultList(state, val) {
101 |             state.searchResultList = val;
102 |         },
103 |         // 住所検索時メッセージ
104 |         setSearchResultMsg(state, val) {
105 |             state.searchResultMsg = val;
106 |         },
107 |     },
108 |     actions: {
109 |         // 各情報をstateに格納
110 |         getInfo(context, info) {
111 |             // 現在のレイヤ順情報URL作成
112 |             let nowMapTypeUrl = info.mapTypeList.join('/');
113 |             // URLを動的に変更
114 |             let url = '/' + [info.id, info.zoom, info.lat, info.lng, nowMapTypeUrl].join('/');
115 |             history.replaceState('', '', url);
116 |             // ペイン・ズーム・緯度・経度格納
117 |             context.commit('setLocationInfo', info);
118 |             // 現在のレイヤ順情報URL格納
119 |             context.commit('setNowMapTypeUrl', nowMapTypeUrl);
120 |         },
121 |         // 画面遷移後のレイヤ順情報URLをstateに格納
122 |         getNextMapTypeUrl(context, id) {
123 |             // 画面遷移後のレイヤ順情報取得
124 |             let nextMapList = [];
125 |             for (const v of this.state.mapTypeJson) {
126 |                 if (v.id === Number(id)) {
127 |                     for (let i = 0; i < this.state.mapTypeList.length; i++) {
128 |                         try {
129 |                             nextMapList.push(v.data[0].mapList[i].mapType);
130 |                         } catch (e) {
131 |                             continue;
132 |                         }
133 |                     }
134 |                 }
135 |             }
136 |             // 画面遷移後のレイヤ順情報URL生成
137 |             let nextMapTypeUrl;
138 |             if (nextMapList.length === 1) {
139 |                 nextMapTypeUrl = nextMapList[0];
140 |             } else {
141 |                 nextMapTypeUrl = nextMapList.join('/');
142 |             }
143 |             // 画面遷移後のレイヤ順情報URLを格納
144 |             context.commit('setNextMapTypeUrl', nextMapTypeUrl);
145 |         },
146 |         // MapFan認証キー取得
147 |         async getMapFanApiKeyAction(context, mapFanAuthKey) {
148 |             // https://api-auth-pre.mapfan.com/v1/auth?appid=APIキー&date=20171101102029
149 |             const mapFanAuthUrl =
150 |                 'https://api-auth-pre.mapfan.com/v1/auth?appid=' +
151 |                 mapFanAuthKey +
152 |                 '&date=20171101102029';
153 |             let mapFanApiKey;
154 |             await axios
155 |                 .get(mapFanAuthUrl, {
156 |                     adapter: axiosJsonpAdapter,
157 |                 })
158 |                 .then(res => {
159 |                     mapFanApiKey = res.data.key;
160 |                 });
161 |             // MapFanAPIキー格納
162 |             context.commit('getMapFanApiKey', mapFanApiKey);
163 |         },
164 |         // 逆ジオコーディング
165 |         async getSearchPointAction(context, searchText) {
166 |             if (searchText === ''){
167 |                 // 入力が無い場合
168 |                 context.commit('setSearchResultMsg', '検索キーワードを入力してください');
169 |                 return;
170 |             }
171 |             const searchUrl =
172 |                 'https://msearch.gsi.go.jp/address-search/AddressSearch?q=' +
173 |                 searchText;
174 |             await axios
175 |                 .get(searchUrl)
176 |                 .then(res => {
177 |                     let jsonData = JSON.stringify(res.data);
178 |                     let encoded_json = JSON.parse(jsonData);
179 |                     if (encoded_json.length == 0) {
180 |                         // 住所検索結果が返ってこなかった場合
181 |                         context.commit('setSearchResultMsg', '該当する候補地点がありません。他の検索キーワードを入力してください');
182 |                         return;
183 |                     }
184 |                     if (encoded_json.length > 100) {
185 |                         // 検索結果が多すぎる場合
186 |                         context.commit('setSearchResultMsg', '検索結果が100件を超えました、検索キーワードを増やしてください');
187 |                         encoded_json.length = 100;
188 |                     } else {
189 |                         context.commit('setSearchResultMsg', '');
190 |                     }
191 |                     // 結果リスト保存
192 |                     context.commit('setSearchResultList', encoded_json);
193 |                 });
194 |         }
195 |     },
196 | });
197 | 


--------------------------------------------------------------------------------
/client/src/views/Help.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="help">
  3 |         <!--メニュー-->
  4 |         <Menu></Menu>
  5 | 
  6 |         <b-container>
  7 |             <b-row>
  8 |                 <b-col cols="11" offset="1" class="mb-5 mt-5">
  9 |                     <h5 class="mb-3">Japan Map Compare: mapcompare.jp</h5>
 10 |                     <p>
 11 |                         mapcompare.jpはOpenStreetMap, MapTiler, MapBox, Bing, Google, Apple, ESRI, Mapfan, 
 12 |                         地理院地図などの日本国内を対象としたウェブ地図を比較可能なページです。
 13 |                         GeofabrikとBBBikeが開発してきた Map Compare（
 14 |                         <b-link href="https://tools.geofabrik.de/mc" target="_blank">Geofabrik版</b-link>
 15 |                         ・<b-link href="https://mc.bbbike.org/mc/" target="_blank">BBBike版</b-link>）のアイデアをベースに、
 16 |                         Leaflet, Vue.jsなどの新しいウェブ地図技術を用いて構築したものです。
 17 |                     </p>
 18 |                     <p>
 19 |                         表示しているページのパーマリンクは下記の例のように作成できます
 20 |                     </p>
 21 |                     <p>
 22 |                         https://mapcompare.jp/3{number of panels}/14{zoom
 23 |                         level}/35.6795{lat}/139.7672{lon}/tPale{webmap_1}/osm{webmap_2}/tOrt{webmap_3}
 24 |                     </p>
 25 |                     <p>
 26 |                         MapBox, Bing Maps, Google Maps, Apple Maps, Mapfanは、相互に閲覧比較するためのみ用いることができます。
 27 |                         OpenStreetMapのデータ編集のために、これらのウェブ地図のデータを絶対に用いないでください。
 28 |                     </p>
 29 |                 </b-col>
 30 | 
 31 |                 <b-col cols="11" offset="1" class="mb-5">
 32 |                     <h5 class="mb-4">比較可能なウェブ地図一覧 {webmap}:</h5>
 33 |                     <b-table :items="items"></b-table>
 34 |                 </b-col>
 35 | 
 36 |                 <b-col cols="11" offset="1" class="mb-5">
 37 |                     <h5 class="mb-3">このページは下記の研究プロジェクトによって開発されています:</h5>
 38 |                     <p>
 39 |                         <b-link
 40 |                         href="https://kaken.nii.ac.jp/en/grant/KAKENHI-PROJECT-18KT0049"
 41 |                         target="_blank"
 42 |                     >
 43 |                             2018-2021年度科学研究費基盤研究 (B) (特設分野) : クラウドソース型地理情報のトラスト
 44 |                         </b-link>
 45 |                     </p>
 46 |                     <b-link
 47 |                         href="https://kaken.nii.ac.jp/en/grant/KAKENHI-PROJECT-18KT0049"
 48 |                         target="_blank"
 49 |                     >
 50 |                         <b-img src="../assets/trusts_of_gi.png"></b-img>
 51 |                     </b-link>
 52 |                     <p>
 53 |                         <b-link
 54 |                         href="https://speakerdeck.com/tosseto/20190921sotm2019-lt-mc"
 55 |                         target="_blank"
 56 |                     >
 57 |                             ・State of the Map 2019 Lightning Talk
 58 |                         </b-link>
 59 |                     </p>
 60 |                 </b-col>
 61 | 
 62 |                 <b-col cols="11" offset="1" class="mb-5">
 63 |                     <h5 class="mb-3">メールアドレス:</h5>
 64 |                     <p>mapcomparejp[at]gmail.com</p>
 65 |                 </b-col>
 66 | 
 67 |                 <b-col cols="11" offset="1" class="mb-5">
 68 |                     <h5 class="mb-3">開発:</h5>
 69 |                     <p>MIERUNE Inc.</p>
 70 |                     <b-link href="https://mierune.co.jp" target="_blank">
 71 |                         <b-img src="../assets/mierune.png"></b-img>
 72 |                     </b-link>
 73 |                 </b-col>
 74 | 
 75 |                 <b-col cols="11" offset="1" class="mb-5">
 76 |                     <h5 class="mb-3">ライセンス:</h5>
 77 |                     <p>
 78 |                         地理院地図/Maptiler/MapBox/Bing/Google/ESRI/Mapfanを除くOpenStreetMapベースのデータは 
 79 |                         © OpenStreetMap (License: ODbL 1.0), OSMタイル CC-BY-SA 2.0
 80 |                     </p>
 81 |                     <p>
 82 |                         mapcompare.jpのソースコードは
 83 |                         <b-link href="https://opensource.org/licenses/BSD-2-Clause" target="_blank"
 84 |                             >2-Clause BSDライセンス</b-link
 85 |                         >により公開されています
 86 |                     </p>
 87 |                 </b-col>
 88 | 
 89 |                 <b-col cols="11" offset="1" class="mb-5">
 90 |                     <h5>GitHub:</h5>
 91 |                     <p>
 92 |                         <b-link
 93 |                             href="https://github.com/mapcomparejp/JapanMapCompare"
 94 |                             target="_blank"
 95 |                             >mapcomparejp/JapanMapCompare</b-link
 96 |                         >
 97 |                     </p>
 98 |                 </b-col>
 99 | 
100 |                 <b-col cols="11" offset="1" class="mb-5">
101 |                     <h5 class="mb-3">検証済みブラウザ:</h5>
102 |                     <p>Google Chrome (最新版)</p>
103 |                     <p>Firefox (最新版)</p>
104 |                 </b-col>
105 |             </b-row>
106 | 
107 |             <hr/>
108 |             <!-- english -->
109 |             <b-row>
110 |                 <b-col cols="11" offset="1" class="mb-5 mt-3">
111 |                     <h5 class="mb-3">Japan Map Compare: mapcompare.jp</h5>
112 |                     <p>
113 |                         Japan Map Compare can compare the various webmaps focusing on Japan area including 
114 |                         OpenStreetMap, MapTiler, MapBox, Bing, Google, Apple, ESRI, Mapfan and GSI Map. 
115 |                         It is inspired by Map Compare coded by 
116 |                         <b-link href="https://tools.geofabrik.de/mc" target="_blank">Geofabrik</b-link> 
117 |                         and <b-link href="https://mc.bbbike.org/mc/" target="_blank">BBBike</b-link> 
118 |                         (Thanks a lot!!) and is developed using modern webmapping technologies like Leaflet, Vue.js…
119 |                     </p>
120 |                     <p>
121 |                         You can use permalink to save the current status of showing page as below example.
122 |                     </p>
123 |                     <p>
124 |                         https://mapcompare.jp/3{number of panels}/14{zoom
125 |                         level}/35.6795{lat}/139.7672{lon}/tPale{webmap_1}/osm{webmap_2}/tOrt{webmap_3}
126 |                     </p>
127 |                     <p>
128 |                         Comparison with MapBox, Bing Maps, Google Maps, Apple Maps, Mapfan is for informational 
129 |                         purposes only. Do not use information from these webmaps to edit OpenStreetMap data.
130 |                     </p>
131 |                 </b-col>
132 | 
133 |                 <b-col cols="11" offset="1" class="mb-5">
134 |                     <h5 class="mb-4">Comparable webmaps {webmap}:</h5>
135 |                     <b-table :items="itemsEglish"></b-table>
136 |                 </b-col>
137 | 
138 |                 <b-col cols="11" offset="1" class="mb-5">
139 |                     <h5 class="mb-3">developed by:</h5>
140 |                     <p>
141 |                         <b-link
142 |                         href="https://kaken.nii.ac.jp/en/grant/KAKENHI-PROJECT-18KT0049"
143 |                         target="_blank"
144 |                     >
145 |                             JSPS Scientific Research (B) (Generative Research Fields) Project: Trusts of Crowdsourced Geographic Information
146 |                         </b-link>
147 |                     </p>
148 |                     <b-link
149 |                         href="https://kaken.nii.ac.jp/en/grant/KAKENHI-PROJECT-18KT0049"
150 |                         target="_blank"
151 |                     >
152 |                         <b-img src="../assets/trusts_of_gi.png"></b-img>
153 |                     </b-link>
154 |                     <p>
155 |                         <b-link
156 |                         href="https://speakerdeck.com/tosseto/20190921sotm2019-lt-mc"
157 |                         target="_blank"
158 |                     >
159 |                             ・State of the Map 2019 Lightning Talk
160 |                         </b-link>
161 |                     </p>
162 |                 </b-col>
163 | 
164 |                 <b-col cols="11" offset="1" class="mb-5">
165 |                     <h5 class="mb-3">Contact us:</h5>
166 |                     <p>mapcomparejp[at]gmail.com</p>
167 |                 </b-col>
168 | 
169 |                 <b-col cols="11" offset="1" class="mb-5">
170 |                     <h5 class="mb-3">Developed by:</h5>
171 |                     <p>MIERUNE Inc.</p>
172 |                     <b-link href="https://mierune.co.jp" target="_blank">
173 |                         <b-img src="../assets/mierune.png"></b-img>
174 |                     </b-link>
175 |                 </b-col>
176 | 
177 |                 <b-col cols="11" offset="1" class="mb-5">
178 |                     <h5 class="mb-3">License:</h5>
179 |                     <p>
180 |                         All maps except GSI Maps（地理院地図）/MapBox/Bing/Google/ESRI/Mapfan based on OSM data © OpenStreetMap (License: ODbL 1.0), OSM Tiles licensed CC-BY-SA 2.0
181 |                     </p>
182 |                     <p>
183 |                         The source code of Japan Map Compare is licensed under The 
184 |                         <b-link href="https://opensource.org/licenses/BSD-2-Clause" target="_blank"
185 |                             >2-Clause BSD License</b-link
186 |                         >
187 |                     </p>
188 |                 </b-col>
189 | 
190 |                 <b-col cols="11" offset="1" class="mb-5">
191 |                     <h5>GitHub:</h5>
192 |                     <p>
193 |                         <b-link
194 |                             href="https://github.com/mapcomparejp/JapanMapCompare"
195 |                             target="_blank"
196 |                             >mapcomparejp/JapanMapCompare</b-link
197 |                         >
198 |                     </p>
199 |                 </b-col>
200 | 
201 |                 <b-col cols="11" offset="1" class="mb-5">
202 |                     <h5 class="mb-3">Supported browsers:</h5>
203 |                     <p>Google Chrome (Latest edition)</p>
204 |                     <p>Firefox (Latest edition)</p>
205 |                 </b-col>
206 |             </b-row>
207 |         </b-container>
208 |     </div>
209 | </template>
210 | 
211 | <script>
212 | import Menu from '@/components/Menu.vue';
213 | 
214 | export default {
215 |     name: 'Help',
216 |     components: {
217 |         Menu,
218 |     },
219 |     data() {
220 |         return {
221 |             items: [
222 |                 {
223 |                     '名称': '地理院地図 淡色',
224 |                     'レイヤ': 'tPale',
225 |                     '概要':
226 |                         '国土地理院による地形図',
227 |                 },
228 |                 {
229 |                     '名称': '地理院地図 オルソ',
230 |                     'レイヤ': 'tOrt',
231 |                     '概要':
232 |                         '国土地理院による衛星・航空写真',
233 |                 },
234 |                 {
235 |                     '名称': 'MIERUNE Streets',
236 |                     'レイヤ': 'mieStreets',
237 |                     '概要': 'OSMデータ・基盤地図情報を利用したMapTiler.comによる道路図',
238 |                 },
239 |                 {
240 |                     '名称': 'MIERUNE Gray',
241 |                     'レイヤ': 'mieGray',
242 |                     '概要': 'OSMデータ・基盤地図情報を利用したMapTiler.comによるグレースケール地図',
243 |                 },
244 |                 {
245 |                     '名称': 'MIERUNE Dark',
246 |                     'レイヤ': 'mieDark',
247 |                     '概要': 'OSMデータ・基盤地図情報を利用したMapTiler.comによるダークカラー地図',
248 |                 },
249 |                 {
250 |                     '名称': 'MIERUNE Satellite',
251 |                     'レイヤ': 'mieSatellite',
252 |                     '概要': 'MapTiler.comによる衛星・航空写真',
253 |                 },
254 |                 {
255 |                     '名称': 'OpenStreetMap',
256 |                     'レイヤ': 'osm',
257 |                     '概要':
258 |                         '公式タイルサーバのOpenStreetMap CartoによるレンダリングOpenStreetMap地図',
259 |                 },
260 |                 {
261 |                     '名称': 'Mapbox Streets',
262 |                     'レイヤ': 'mapStreets',
263 |                     '概要': 'ゼンリンデータ（日本国内のみ）を利用したMapbox.comによる道路図',
264 |                 },
265 |                 {
266 |                     '名称': 'Mapbox Dark',
267 |                     'レイヤ': 'mapDark',
268 |                     '概要': 'ゼンリンデータ（日本国内のみ）を利用したMapbox.comによるダークカラー地図',
269 |                 },
270 |                 {
271 |                     '名称': 'Mapbox Satelite',
272 |                     'レイヤ': 'mapSatellite',
273 |                     '概要': 'Mapbox.comによる衛星・航空写真',
274 |                 },
275 |                 { '名称': 'ESRI', 'レイヤ': 'esri', '概要': 'Esri.comによる道路図' },
276 |                 {
277 |                     '名称': 'Bing Maps Road',
278 |                     'レイヤ': 'bRoad',
279 |                     '概要': 'Bing maps street',
280 |                 },
281 |                 {
282 |                     '名称': 'Google Maps Road',
283 |                     'レイヤ': 'gRoad',
284 |                     '概要': 'Google maps street',
285 |                 },
286 |                 {
287 |                     '名称': 'Apple Maps Standerd',
288 |                     'レイヤ': 'apmapsStandard',
289 |                     '概要': 'Apple Mapによる道路図',
290 |                 },
291 |                 {
292 |                     '名称': 'Apple Maps Satelite',
293 |                     'レイヤ': 'apmapsSatelite',
294 |                     '概要': 'Apple Mapによる衛星・航空写真',
295 |                 },
296 |                 {
297 |                     '名称': 'Mapfan',
298 |                     'レイヤ': 'mapfan',
299 |                     '概要': 'Mapfan.comによる道路図',
300 |                 },
301 |             ],
302 |             itemsEglish: [
303 |                 {
304 |                     'Name': '地理院地図 淡色',
305 |                     'Layer': 'tPale',
306 |                     'Overview':
307 |                         'topographic map by gsi.go.jp (Geospatial Information Authority of Japan)',
308 |                 },
309 |                 {
310 |                     'Name': '地理院地図 オルソ',
311 |                     'Layer': 'tOrt',
312 |                     'Overview':
313 |                         'satellite and aerial photos by gsi.go.jp (Geospatial Information Authority of Japan)',
314 |                 },
315 |                 {
316 |                     'Name': 'MIERUNE Streets',
317 |                     'Layer': 'mieStreets',
318 |                     'Overview': 'street map by MapTiler.com using OSM data and Digital Map (Basic Geospatial Information) by Geospatial Information Authority of Japan',
319 |                 },
320 |                 {
321 |                     'Name': 'MIERUNE Gray',
322 |                     'Layer': 'mieGray',
323 |                     'Overview': 'gray map by MapTiler.com using OSM data and Digital Map (Basic Geospatial Information) by Geospatial Information Authority of Japan',
324 |                 },
325 |                 {
326 |                     'Name': 'MIERUNE Dark',
327 |                     'Layer': 'mieDark',
328 |                     'Overview': 'dark map by MapTiler.com using OSM data and Digital Map (Basic Geospatial Information) by Geospatial Information Authority of Japan',
329 |                 },
330 |                 {
331 |                     'Name': 'MIERUNE Satellite',
332 |                     'Layer': 'mieSatellite',
333 |                     'Overview': 'satellite and aerial photos by MapTiler.com',
334 |                 },
335 |                 {
336 |                     'Name': 'OpenStreetMap',
337 |                     'Layer': 'osm',
338 |                     'Overview':
339 |                         'OpenStreetMap data rendered with OpenStreetMap Carto from official tile server',
340 |                 },
341 |                 {
342 |                     'Name': 'Mapbox Streets',
343 |                     'Layer': 'mapStreets',
344 |                     'Overview': 'street map by Mapbox.com using ZENRIN data(Japanese domestic only)',
345 |                 },
346 |                 {
347 |                     'Name': 'Mapbox Dark',
348 |                     'Layer': 'mapDark',
349 |                     'Overview': 'dark map by Mapbox.com using ZENRIN data(Japanese domestic only)',
350 |                 },
351 |                 {
352 |                     'Name': 'Mapbox Satelite',
353 |                     'Layer': 'mapSatellite',
354 |                     'Overview': 'satellite and aerial photos by Mapbox.com',
355 |                 },
356 |                 { 'Name': 'ESRI', 'Layer': 'esri', 'Overview': 'Street map by Esri.com' },
357 |                 {
358 |                     'Name': 'Bing Maps Road',
359 |                     'Layer': 'bRoad',
360 |                     'Overview': 'Bing maps street',
361 |                 },
362 |                 {
363 |                     'Name': 'Google Maps Road',
364 |                     'Layer': 'gRoad',
365 |                     'Overview': 'Google maps street',
366 |                 },
367 |                 {
368 |                     'Name': 'Apple Maps Standerd',
369 |                     'Layer': 'apmapsStandard',
370 |                     'Overview': 'standerd map by Apple Mapkit',
371 |                 },
372 |                 {
373 |                     'Name': 'Apple Maps Satelite',
374 |                     'Layer': 'apmapsSatelite',
375 |                     'Overview': 'satelite map by Apple Mapkit',
376 |                 },
377 |                 {
378 |                     'Name': 'Mapfan',
379 |                     'Layer': 'mapfan',
380 |                     'Overview': 'street map by Mapfan.com',
381 |                 },
382 |             ]
383 |         };
384 |     },
385 |     beforeRouteEnter(to, from, next) {
386 |         setTimeout(next, 2000);
387 |     },
388 | };
389 | </script>
390 | 
391 | <style scoped>
392 | .help {
393 |     text-align: left;
394 | }
395 | img {
396 |     margin-bottom: 20px;
397 | }
398 | </style>
399 | 


--------------------------------------------------------------------------------
/client/src/views/Pane.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="pane">
  3 |         <!--メニュー-->
  4 |         <Menu></Menu>
  5 | 
  6 |         <b-container fluid>
  7 |             <b-row>
  8 |                 <div v-for="(item, index) in mapList" :key="item.mapId" v-bind:class="gridClass">
  9 |                     <!--地図画面-->
 10 |                     <MapAdd
 11 |                         v-bind:index="index"
 12 |                         v-bind:map-id="item.mapId"
 13 |                         v-bind:map-type="item.mapType"
 14 |                         v-bind:height-vh="heightVal"
 15 |                         v-bind:style="{ height: heightVh }"
 16 |                         v-on:child-event="parentMethodView"
 17 |                     />
 18 |                 </div>
 19 |             </b-row>
 20 |             <b-row class="m-1 float-right">
 21 |                 <!-- ズームレベル表示 -->
 22 |                 <ZoomLevel></ZoomLevel>
 23 |             </b-row>
 24 |         </b-container>
 25 |     </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import Menu from '@/components/Menu.vue';
 30 | import ZoomLevel from '@/components/ZoomLevel.vue';
 31 | import MapAdd from '@/components/MapAdd.vue';
 32 | // 画面種類読み込み
 33 | import paneTypeJson from '../assets/PaneType.json';
 34 | 
 35 | export default {
 36 |     name: 'Pane',
 37 |     components: {
 38 |         Menu,
 39 |         MapAdd,
 40 |         ZoomLevel,
 41 |     },
 42 |     props: {
 43 |         id: Number,
 44 |         zoom: Number,
 45 |         lat: Number,
 46 |         lng: Number,
 47 |         layer: String,
 48 |     },
 49 |     data() {
 50 |         return {
 51 |             heightVh: '',
 52 |             syncObj: {},
 53 |             syncObjSingle: {},
 54 |             heightVal: '',
 55 |             gridClass: '',
 56 |             mapList: {},
 57 |             flag: false,
 58 |             mapTypeList: [],
 59 |         };
 60 |     },
 61 |     created: function() {
 62 |         // 画面生成時にJSONをVuexに保存
 63 |         this.$store.commit('setDefaultMapTypeJson', paneTypeJson);
 64 |         // URL貼り付けをリスト化
 65 |         this.mapTypeList = this.layer.split('/');
 66 |         // URL貼り付け時ペイン配置情報更新
 67 |         this.$store.commit('pastingMapTypeJson', this.mapTypeList);
 68 |         // 地図画面配置設定
 69 |         this.paneType(Number(this.id));
 70 |         // URLに入力された情報を初期値としてストアに格納
 71 |         if (this.id !== undefined) {
 72 |             this.$store.commit('setLocationInfo', {
 73 |                 id: this.id,
 74 |                 lat: this.lat.toFixed(4),
 75 |                 lng: this.lng.toFixed(4),
 76 |                 zoom: this.zoom,
 77 |                 mapTypeList: this.mapTypeList,
 78 |             });
 79 |         }
 80 |     },
 81 |     mounted: function() {
 82 |         // 地図画面同期設定
 83 |         this.syncAdd();
 84 |         // 地図移動イベント設定
 85 |         this.syncObjSingle.on('moveend', this.infoChange);
 86 |     },
 87 |     beforeRouteUpdate(to, from, next) {
 88 |         // オブジェクトを空にする
 89 |         this.syncObj = {};
 90 |         this.syncObjSingle = {};
 91 |         // 地図画面配置設定
 92 |         this.paneType(Number(to.params.id));
 93 |         // ページ遷移
 94 |         next();
 95 |     },
 96 |     updated: function() {
 97 |         // 地図画面同期設定
 98 |         this.syncAdd();
 99 |         this.infoChange();
100 |         // 地図移動イベント設定
101 |         this.syncObjSingle.on('moveend', this.infoChange);
102 |     },
103 |     methods: {
104 |         // 対象ペイン属性取得
105 |         paneType: function(id) {
106 |             // ペイン配置情報取得
107 |             for (const v of this.$store.state.mapTypeJson) {
108 |                 if (v.id === Number(id)) {
109 |                     this.heightVal = v.data[0].heightVal;
110 |                     this.gridClass = v.data[0].gridClass;
111 |                     this.mapList = v.data[0].mapList;
112 |                     // 画面遷移後のレイヤ順情報再取得
113 |                     let nextMapList = [];
114 |                     for (let i in this.mapList) {
115 |                         nextMapList.push(this.mapList[i].mapType);
116 |                     }
117 |                     this.mapTypeList = nextMapList;
118 |                 }
119 |             }
120 |         },
121 |         // マップオブジェクト格納
122 |         parentMethodView: function(fromChildVal) {
123 |             // 各マップオブジェクト格納
124 |             this.syncObj[fromChildVal._container.id] = fromChildVal;
125 |             // 単一マップオブジェクト格納
126 |             this.syncObjSingle = fromChildVal;
127 |         },
128 |         // 地図画面同期設定
129 |         syncAdd: function() {
130 |             // 同期オプション
131 |             let option = {
132 |                 syncCursor: true,
133 |                 syncCursorMarkerOptions: {
134 |                     radius: 7,
135 |                     fillOpacity: 0.3,
136 |                     color: '#1253A4',
137 |                     fillColor: '#F5F5F5',
138 |                 },
139 |             };
140 |             // 地図画面同期設定
141 |             for (const v of Object.keys(this.syncObj)) {
142 |                 for (const vv of Object.keys(this.syncObj)) {
143 |                     if (v !== vv) {
144 |                         this.syncObj[v].sync(this.syncObj[vv], option);
145 |                     }
146 |                 }
147 |             }
148 |         },
149 |         // 各情報を格納
150 |         infoChange: function() {
151 |             // 地図移動後の各情報をVuexに格納
152 |             this.$store.dispatch('getInfo', {
153 |                 id: this.id,
154 |                 lat: this.syncObjSingle.getCenter().lat.toFixed(4),
155 |                 lng: this.syncObjSingle.getCenter().lng.toFixed(4),
156 |                 zoom: this.syncObjSingle.getZoom(),
157 |                 mapTypeList: this.mapTypeList,
158 |             });
159 |         },
160 |     },
161 | };
162 | </script>
163 | 
164 | <style scoped></style>
165 | 


--------------------------------------------------------------------------------
/client/src/views/View404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="view404">
 3 |         <b-container fluid>
 4 |             <b-row>
 5 |                 <b-col cols="12">
 6 |                     <img alt="Sorry" src="../assets/sorry.png" />
 7 |                     <h3>No Page</h3>
 8 |                 </b-col>
 9 |             </b-row>
10 |         </b-container>
11 |     </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |     name: 'View404',
17 |     beforeRouteEnter(to, from, next) {
18 |         setTimeout(next, 2000);
19 |     },
20 | };
21 | </script>
22 | 
23 | <style scoped>
24 | img {
25 |     margin-top: 150px;
26 |     margin-bottom: 10px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/client/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     productionSourceMap: false,
3 | };
4 | 


--------------------------------------------------------------------------------
/img/JapanMapCompare.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/img/JapanMapCompare.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "japanmapcompare",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios-jsonp": "^1.0.2",
12 |     "bootstrap-vue": "^2.0.0-rc.19",
13 |     "core-js": "^2.6.5",
14 |     "leaflet": "^1.5.1",
15 |     "leaflet-bing-layer": "^3.3.1",
16 |     "leaflet.gridlayer.googlemutant": "^0.8.0",
17 |     "leaflet.sync": "^0.2.4",
18 |     "scriptjs": "^2.5.9",
19 |     "vue": "^2.6.10",
20 |     "vue-analytics": "^5.17.0",
21 |     "vue-router": "^3.0.3",
22 |     "vue-spinner": "^1.0.3",
23 |     "vuex": "^3.0.1"
24 |   },
25 |   "devDependencies": {
26 |     "@babel/polyfill": "^7.4.4",
27 |     "@vue/cli-plugin-babel": "^3.8.0",
28 |     "@vue/cli-plugin-eslint": "^3.8.0",
29 |     "@vue/cli-service": "^3.8.0",
30 |     "axios": "^0.21.2",
31 |     "babel-eslint": "^10.0.1",
32 |     "bootstrap": "^4.3.1",
33 |     "eslint": "^5.16.0",
34 |     "eslint-plugin-vue": "^5.0.0",
35 |     "mutationobserver-shim": "^0.3.3",
36 |     "node-sass": "^7.0.0",
37 |     "popper.js": "^1.15.0",
38 |     "portal-vue": "^2.1.4",
39 |     "sass-loader": "^7.1.0",
40 |     "vue-cli-plugin-bootstrap-vue": "^0.4.0",
41 |     "vue-template-compiler": "^2.6.10"
42 |   },
43 |   "eslintConfig": {
44 |     "root": true,
45 |     "env": {
46 |       "node": true
47 |     },
48 |     "extends": [
49 |       "plugin:vue/essential",
50 |       "eslint:recommended"
51 |     ],
52 |     "rules": {},
53 |     "parserOptions": {
54 |       "parser": "babel-eslint"
55 |     }
56 |   },
57 |   "postcss": {
58 |     "plugins": {
59 |       "autoprefixer": {}
60 |     }
61 |   },
62 |   "browserslist": [
63 |     "> 1%",
64 |     "last 2 versions"
65 |   ]
66 | }
67 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |   <meta name="keywords" content="JapanMapCompareP">
 8 |   <meta name="description" content="JapanMapCompare">
 9 |   <meta name="author" content="JapanMapCompare">
10 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
11 |   <title>JapanMapCompare</title>
12 | </head>
13 | <body>
14 |   <div id="app"></div>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app">
 3 |         <transition name="view">
 4 |             <router-view v-show="!loading" />
 5 |         </transition>
 6 |         <Loading />
 7 |     </div>
 8 | </template>
 9 | 
10 | <script>
11 | import Loading from './components/Loading.vue';
12 | // 地図種類読み込み
13 | import mapJson from './assets/MapType.json';
14 | // script.jsライブラリ読み込み
15 | const scriptJs = require('scriptjs');
16 | 
17 | export default {
18 |     name: 'app',
19 |     components: {
20 |         Loading,
21 |     },
22 |     created: function() {
23 |         // GoogleMapsAPI認証
24 |         const GoogleMapsKey =
25 |             'https://maps.googleapis.com/maps/api/js?key=' + this.getGoogleMapsKey();
26 |         scriptJs(GoogleMapsKey);
27 |         // MapFanAPI認証
28 |         this.getMapFanMapsKey();
29 |     },
30 |     computed: {
31 |         loading() {
32 |             return this.$store.state.loading;
33 |         },
34 |     },
35 |     methods: {
36 |         // GoogleMapsKey取得処理
37 |         getGoogleMapsKey: function() {
38 |             let googleMapsKey;
39 |             for (const v of mapJson) {
40 |                 if (v.value === 'gRoad') {
41 |                     googleMapsKey = v.googleMapsKey;
42 |                 }
43 |             }
44 |             return googleMapsKey;
45 |         },
46 |         // MapFanMapsKey取得処理
47 |         getMapFanMapsKey: function() {
48 |             for (const v of mapJson) {
49 |                 if (v.value === 'mapfan') {
50 |                     this.$store.dispatch('getMapFanApiKeyAction', v.mapFanAuthKey);
51 |                 }
52 |             }
53 |         },
54 |     },
55 | };
56 | </script>
57 | 
58 | <style>
59 | .view-enter-active {
60 |     transition: opacity 2s;
61 | }
62 | .view-leave-active {
63 |     position: absolute;
64 | }
65 | .view-enter,
66 | .view-leave-to {
67 |     opacity: 0;
68 | }
69 | 
70 | #app {
71 |     font-family: 'Avenir', Helvetica, Arial, sans-serif;
72 |     -webkit-font-smoothing: antialiased;
73 |     -moz-osx-font-smoothing: grayscale;
74 |     text-align: center;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/assets/MapType.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "value": "tPale",
 4 |         "text": "地理院地図 淡色",
 5 |         "tileURL": "https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",
 6 |         "attribution": "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
 7 |     },
 8 |     {
 9 |         "value": "tOrt",
10 |         "text": "地理院地図 オルソ",
11 |         "tileURL": "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",
12 |         "attribution": "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
13 |     },
14 |     {
15 |         "value": "mieStreets",
16 |         "text": "MIERUNE Streets",
17 |         "tileURL": "https://api.maptiler.com/maps/jp-mierune-streets/256/{z}/{x}/{y}.png?key=xxxxx",
18 |         "attribution": "<a href='https://maptiler.jp/' target='_blank'>&copy; MIERUNE</a> <a href='https://www.maptiler.com/copyright/' target='_blank'>&copy; MapTiler</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a>"
19 |     },
20 |     {
21 |         "value": "mieGray",
22 |         "text": "MIERUNE Gray",
23 |         "tileURL": "https://api.maptiler.com/maps/jp-mierune-gray/256/{z}/{x}/{y}.png?key=xxxxx",
24 |         "attribution": "<a href='https://maptiler.jp/' target='_blank'>&copy; MIERUNE</a> <a href='https://www.maptiler.com/copyright/' target='_blank'>&copy; MapTiler</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a>"
25 |     },
26 |     {
27 |         "value": "mieDark",
28 |         "text": "MIERUNE Dark",
29 |         "tileURL": "https://api.maptiler.com/maps/jp-mierune-dark/256/{z}/{x}/{y}.png?key=xxxxx",
30 |         "attribution": "<a href='https://maptiler.jp/' target='_blank'>&copy; MIERUNE</a> <a href='https://www.maptiler.com/copyright/' target='_blank'>&copy; MapTiler</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a>"
31 |     },
32 |     {
33 |         "value": "mieSatellite",
34 |         "text": "MIERUNE Satellite",
35 |         "tileURL": "https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=xxxxx",
36 |         "attribution": "<a href='https://maptiler.jp/' target='_blank'>&copy; MIERUNE</a> <a href='https://www.maptiler.com/copyright/' target='_blank'>&copy; MapTiler</a> <a href='https://www.openstreetmap.org/copyright' target='_blank'>&copy; OpenStreetMap contributors</a>"
37 |     },
38 |     {
39 |         "value": "osm",
40 |         "text": "OpenStreetMap",
41 |         "tileURL": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
42 |         "attribution": "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
43 |     },
44 |     {
45 |         "value": "mapStreets",
46 |         "text": "Mapbox Streets",
47 |         "tileURL": "https://api.mapbox.com/styles/v1/xxxxx/xxxxx/tiles/256/{z}/{x}/{y}?access_token=xxxxx",
48 |         "attribution": "&copy; <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
49 |     },
50 |     {
51 |         "value": "mapDark",
52 |         "text": "Mapbox Dark",
53 |         "tileURL": "https://api.mapbox.com/styles/v1/xxxxx/xxxxx/tiles/256/{z}/{x}/{y}?access_token=xxxxx",
54 |         "attribution": "&copy; <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
55 |     },
56 |     {
57 |         "value": "mapSatellite",
58 |         "text": "Mapbox Satellite",
59 |         "tileURL": "https://api.mapbox.com/styles/v1/xxxxx/xxxxx/tiles/256/{z}/{x}/{y}?access_token=xxxxx",
60 |         "attribution": "&copy; <a href='https://www.mapbox.com/map-feedback/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
61 |     },
62 |     {
63 |         "value": "esri",
64 |         "text": "ESRI",
65 |         "tileURL": "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png",
66 |         "attribution": "&copy; <a href='http://osm.org/copyright'>ESRI</a> contributors"
67 |     },
68 |     {
69 |         "value": "bRoad",
70 |         "text": "BingMaps Road",
71 |         "bingMapsKey": "xxxxx",
72 |         "imagerySet": "Road",
73 |         "culture": "ja"
74 |     },
75 |     {
76 |         "value": "gRoad",
77 |         "text": "GoogleMaps Road",
78 |         "googleMapsKey": "xxxxx",
79 |         "type": "roadmap"
80 |     },
81 |     {
82 |         "value": "mapfan",
83 |         "text": "Mapfan",
84 |         "mapFanAuthKey": "xxxxx",
85 |         "tileURL": [
86 |             "https://api-map-pre.mapfan.com/v1/map?key=",
87 |             "=&landmarkicon=on&rotationangle=0&logo=on&tilematrix=EPSG:3857:{z}&tilerow={y}&tilecol={x}"
88 |         ],
89 |         "attribution": "&copy; INCREMENT P CORPORATION"
90 |     }
91 | ]
92 | 


--------------------------------------------------------------------------------
/src/assets/PaneType.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |         "id": 1,
  4 |         "data": [
  5 |             {
  6 |                 "heightVal": "81vh",
  7 |                 "gridClass": "col-sm-12",
  8 |                 "mapList": [
  9 |                     {
 10 |                         "mapId": "view1_1",
 11 |                         "mapType": "tPale"
 12 |                     }
 13 |                 ]
 14 |             }
 15 |         ]
 16 |     },
 17 |     {
 18 |         "id": 2,
 19 |         "data": [
 20 |             {
 21 |                 "heightVal": "81vh",
 22 |                 "gridClass": "col-sm-6",
 23 |                 "mapList": [
 24 |                     {
 25 |                         "mapId": "view2_1",
 26 |                         "mapType": "tPale"
 27 |                     },
 28 |                     {
 29 |                         "mapId": "view2_2",
 30 |                         "mapType": "osm"
 31 |                     }
 32 |                 ]
 33 |             }
 34 |         ]
 35 |     },
 36 |     {
 37 |         "id": 3,
 38 |         "data": [
 39 |             {
 40 |                 "heightVal": "81vh",
 41 |                 "gridClass": "col-sm-4",
 42 |                 "mapList": [
 43 |                     {
 44 |                         "mapId": "view3_1",
 45 |                         "mapType": "tPale"
 46 |                     },
 47 |                     {
 48 |                         "mapId": "view3_2",
 49 |                         "mapType": "osm"
 50 |                     },
 51 |                     {
 52 |                         "mapId": "view3_3",
 53 |                         "mapType": "mieStreets"
 54 |                     }
 55 |                 ]
 56 |             }
 57 |         ]
 58 |     },
 59 |     {
 60 |         "id": 4,
 61 |         "data": [
 62 |             {
 63 |                 "heightVal": "37vh",
 64 |                 "gridClass": "col-sm-6",
 65 |                 "mapList": [
 66 |                     {
 67 |                         "mapId": "view4_1",
 68 |                         "mapType": "tPale"
 69 |                     },
 70 |                     {
 71 |                         "mapId": "view4_2",
 72 |                         "mapType": "osm"
 73 |                     },
 74 |                     {
 75 |                         "mapId": "view4_3",
 76 |                         "mapType": "mieStreets"
 77 |                     },
 78 |                     {
 79 |                         "mapId": "view4_4",
 80 |                         "mapType": "mapStreets"
 81 |                     }
 82 |                 ]
 83 |             }
 84 |         ]
 85 |     },
 86 |     {
 87 |         "id": 6,
 88 |         "data": [
 89 |             {
 90 |                 "heightVal": "37vh",
 91 |                 "gridClass": "col-lg-4 col-md-6 col-sm-6",
 92 |                 "mapList": [
 93 |                     {
 94 |                         "mapId": "view6_1",
 95 |                         "mapType": "tPale"
 96 |                     },
 97 |                     {
 98 |                         "mapId": "view6_2",
 99 |                         "mapType": "osm"
100 |                     },
101 |                     {
102 |                         "mapId": "view6_3",
103 |                         "mapType": "mieStreets"
104 |                     },
105 |                     {
106 |                         "mapId": "view6_4",
107 |                         "mapType": "mapStreets"
108 |                     },
109 |                     {
110 |                         "mapId": "view6_5",
111 |                         "mapType": "esri"
112 |                     },
113 |                     {
114 |                         "mapId": "view6_6",
115 |                         "mapType": "tOrt"
116 |                     }
117 |                 ]
118 |             }
119 |         ]
120 |     },
121 |     {
122 |         "id": 8,
123 |         "data": [
124 |             {
125 |                 "heightVal": "37vh",
126 |                 "gridClass": "col-lg-3 col-md-6 col-sm-6",
127 |                 "mapList": [
128 |                     {
129 |                         "mapId": "view8_1",
130 |                         "mapType": "tPale"
131 |                     },
132 |                     {
133 |                         "mapId": "view8_2",
134 |                         "mapType": "osm"
135 |                     },
136 |                     {
137 |                         "mapId": "view8_3",
138 |                         "mapType": "mieStreets"
139 |                     },
140 |                     {
141 |                         "mapId": "view8_4",
142 |                         "mapType": "mapStreets"
143 |                     },
144 |                     {
145 |                         "mapId": "view8_5",
146 |                         "mapType": "esri"
147 |                     },
148 |                     {
149 |                         "mapId": "view8_6",
150 |                         "mapType": "tOrt"
151 |                     },
152 |                     {
153 |                         "mapId": "view8_7",
154 |                         "mapType": "mieSatellite"
155 |                     },
156 |                     {
157 |                         "mapId": "view8_8",
158 |                         "mapType": "mapSatellite"
159 |                     }
160 |                 ]
161 |             }
162 |         ]
163 |     }
164 | ]
165 | 


--------------------------------------------------------------------------------
/src/assets/mierune.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/src/assets/mierune.png


--------------------------------------------------------------------------------
/src/assets/sorry.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/src/assets/sorry.png


--------------------------------------------------------------------------------
/src/assets/trusts_of_gi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapcomparejp/JapanMapCompare/a0b579dff9d3c361bd111ecdd10e6f06ef931f5a/src/assets/trusts_of_gi.png


--------------------------------------------------------------------------------
/src/components/Loading.vue:
--------------------------------------------------------------------------------
 1 | <!--ナビバーコンポーネント-->
 2 | <template>
 3 |     <transition name="loading">
 4 |         <div class="loading" v-show="$store.state.loading" v-if="loading">
 5 |             <pulse-loader :color="color" :size="size"></pulse-loader>
 6 |         </div>
 7 |     </transition>
 8 | </template>
 9 | 
10 | <script>
11 | import PulseLoader from 'vue-spinner/src/PulseLoader';
12 | export default {
13 |     name: 'Loading',
14 |     data() {
15 |         return {
16 |             color: '#40AAEF',
17 |             size: '30px',
18 |         };
19 |     },
20 |     components: {
21 |         PulseLoader,
22 |     },
23 |     computed: {
24 |         loading() {
25 |             return this.$store.state.loading;
26 |         },
27 |     },
28 | };
29 | </script>
30 | 
31 | <style scoped>
32 | .loading {
33 |     margin-top: 300px;
34 | }
35 | .v-spinner {
36 |     color: #4e555b;
37 | }
38 | .loading-enter-active {
39 |     transition: all 0.25s;
40 | }
41 | .loading-leave-active {
42 |     transition: all 0.5s ease 0.5s;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/src/components/MapAdd.vue:
--------------------------------------------------------------------------------
  1 | <!--地図画面コンポーネント-->
  2 | <template>
  3 |     <div class="mapAdd">
  4 |         <!--セレクトメニュー-->
  5 |         <b-form-select
  6 |             v-model="selected"
  7 |             v-bind:options="options"
  8 |             @change="onChange(mapIdName, $event)"
  9 |             class="mt-3 mb-2 shadow-sm"
 10 |         ></b-form-select>
 11 |         <!--地図画面生成-->
 12 |         <div
 13 |             v-bind:id="mapIdName"
 14 |             v-bind:class="mapClass"
 15 |             v-bind:style="mapStyle"
 16 |             class="map-size shadow-sm"
 17 |         ></div>
 18 |     </div>
 19 | </template>
 20 | 
 21 | <script>
 22 | // Leaflet読み込み
 23 | import L from 'leaflet';
 24 | // 地図種類読み込み
 25 | import mapJson from '../assets/MapType.json';
 26 | 
 27 | export default {
 28 |     name: 'MapAdd',
 29 |     props: {
 30 |         index: Number,
 31 |         mapId: String,
 32 |         mapType: String,
 33 |         heightVh: String,
 34 |     },
 35 |     data() {
 36 |         return {
 37 |             mapIdName: '',
 38 |             mapClass: 'map-size',
 39 |             mapStyle: {
 40 |                 height: this.heightVh,
 41 |             },
 42 |             selected: this.mapType,
 43 |             options: mapJson,
 44 |             mapIdObj: {},
 45 |             tileAdd: {},
 46 |             lat: this.$store.state.lat,
 47 |             lng: this.$store.state.lng,
 48 |             zoom: this.$store.state.zoom,
 49 |         };
 50 |     },
 51 |     created: function() {
 52 |         // マップ名取得
 53 |         this.mapIdName = this.mapId;
 54 |     },
 55 |     mounted: function() {
 56 |         // タイルオブジェクト生成処理
 57 |         this.tileCreate();
 58 |         // マップオブジェクト生成処理
 59 |         this.mapCreate(this.lat, this.lng, this.zoom);
 60 |     },
 61 |     methods: {
 62 |         // タイルオブジェクト生成処理
 63 |         tileCreate: function() {
 64 |             // タイル全て読み込み
 65 |             for (const v of mapJson) {
 66 |                 if (v.value === 'gRoad') {
 67 |                     // GoogleMapsタイル
 68 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.gridLayer.googleMutant({
 69 |                         type: v.type,
 70 |                     });
 71 |                 } else if (v.value === 'bRoad') {
 72 |                     // BingMapタイル
 73 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.tileLayer.bing({
 74 |                         bingMapsKey: v.bingMapsKey,
 75 |                         imagerySet: v.imagerySet,
 76 |                         culture: v.culture,
 77 |                     });
 78 |                 } else if (v.value === 'mapfan') {
 79 |                     // MapFanタイル
 80 |                     const mapFanMapUrl =
 81 |                         v.tileURL[0] + this.$store.state.mapFanApiKey + v.tileURL[1];
 82 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.tileLayer(mapFanMapUrl, {
 83 |                         attribution: v.attribution,
 84 |                     });
 85 |                 } else {
 86 |                     // 一般タイル
 87 |                     this.tileAdd[v.value + '_' + this.mapIdName] = new L.tileLayer(v.tileURL, {
 88 |                         attribution: v.attribution,
 89 |                     });
 90 |                 }
 91 |             }
 92 |         },
 93 |         // マップオブジェクト生成処理
 94 |         mapCreate: function(lat, lng, zoom) {
 95 |             // Viewごとの各タイル表示
 96 |             for (const v of Object.keys(this.tileAdd)) {
 97 |                 if (this.mapType + '_' + this.mapIdName === v) {
 98 |                     // 地図読み込み
 99 |                     this.mapIdObj[this.mapIdName] = L.map(this.mapIdName, {
100 |                         center: [lat, lng],
101 |                         zoom: zoom,
102 |                         zoomControl: true,
103 |                         maxZoom: 18,
104 |                         layers: [this.tileAdd[v]],
105 |                     });
106 |                     // 親コンポーネントにマップオブジェクト送信
107 |                     this.$emit('child-event', this.mapIdObj[this.mapIdName]);
108 |                 }
109 |             }
110 |         },
111 |         // セレクトボックス切り替え処理
112 |         onChange: function(mapObj, value) {
113 |             // 各レイヤ切り替え
114 |             for (const v of Object.keys(this.tileAdd)) {
115 |                 // 不要レイヤ削除
116 |                 this.mapIdObj[mapObj].removeLayer(this.tileAdd[v]);
117 |                 if (value + '_' + mapObj === v) {
118 |                     // 選択レイヤ追加
119 |                     this.mapIdObj[mapObj].addLayer(this.tileAdd[v]);
120 |                 }
121 |             }
122 |             // レイヤ順情報格納納
123 |             this.$store.commit('setMapTypeList', {
124 |                 index: this.index,
125 |                 selected: this.selected,
126 |             });
127 |             // ペイン配置情報更新
128 |             this.$store.commit('setMapTypeJson', {
129 |                 index: this.index,
130 |                 selected: this.selected,
131 |             });
132 |         },
133 |     },
134 | };
135 | </script>
136 | 
137 | <style scoped>
138 | /*地図画面サイズ*/
139 | .map-size {
140 |     /*表示順*/
141 |     z-index: 0;
142 |     /*GoogleMapsズレ対応*/
143 |     text-align: left;
144 |     /*枠*/
145 |     border: solid 1px #c8c8c8;
146 | }
147 | </style>
148 | 


--------------------------------------------------------------------------------
/src/components/Menu.vue:
--------------------------------------------------------------------------------
 1 | <!--ナビバーコンポーネント-->
 2 | <template>
 3 |     <div class="menu">
 4 |         <!--ナビバー-->
 5 |         <b-navbar toggleable="lg" type="dark" variant="secondary" class="shadow-sm">
 6 |             <b-navbar-brand href="/">JapanMapCompare</b-navbar-brand>
 7 |             <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 8 |             <b-collapse id="nav-collapse" is-nav>
 9 |                 <b-navbar-nav class="ml-auto">
10 |                     <b-nav-item-dropdown text="ChangePane" right>
11 |                         <b-dropdown-item
12 |                             class="dropdown-link-color"
13 |                             :to="{ path: item.path }"
14 |                             v-for="item in paneList"
15 |                             :key="item.path"
16 |                         >
17 |                             {{ item.name }}
18 |                         </b-dropdown-item>
19 |                     </b-nav-item-dropdown>
20 |                     <b-navbar-nav>
21 |                         <b-nav-item
22 |                             ><b-link class="link-color" :to="{ path: '/help' }">
23 |                                 Help
24 |                             </b-link></b-nav-item
25 |                         >
26 |                     </b-navbar-nav>
27 |                 </b-navbar-nav>
28 |             </b-collapse>
29 |         </b-navbar>
30 |     </div>
31 | </template>
32 | 
33 | <script>
34 | export default {
35 |     name: 'Menu',
36 |     data() {
37 |         return {
38 |             paneList: [
39 |                 { path: '/1', name: '1 Pane' },
40 |                 { path: '/2', name: '2 Pane' },
41 |                 { path: '/3', name: '3 Pane' },
42 |                 { path: '/4', name: '4 Pane' },
43 |                 { path: '/6', name: '6 Pane' },
44 |                 { path: '/8', name: '8 Pane' },
45 |             ],
46 |         };
47 |     },
48 | };
49 | </script>
50 | 
51 | <style scoped>
52 | .dropdown-link-color {
53 |     color: #212529;
54 | }
55 | .dropdown-link-color:hover {
56 |     text-decoration: none;
57 | }
58 | .link-color {
59 |     color: rgba(255, 255, 255, 0.5);
60 | }
61 | .link-color:hover {
62 |     text-decoration: none;
63 |     color: rgba(255, 255, 255, 0.8);
64 | }
65 | </style>
66 | 


--------------------------------------------------------------------------------
/src/components/ZoomLevel.vue:
--------------------------------------------------------------------------------
 1 | <!--ズームレベルコンポーネント-->
 2 | <template>
 3 |     <div class="zoomLevel">zoom = {{ zoom }}</div>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |     name: 'ZoomLevel',
 9 |     computed: {
10 |         zoom: function() {
11 |             return this.$store.state.zoom;
12 |         },
13 |     },
14 | };
15 | </script>
16 | 
17 | <style scoped></style>
18 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import '@babel/polyfill';
 2 | import 'mutationobserver-shim';
 3 | import Vue from 'vue';
 4 | 
 5 | import App from './App.vue';
 6 | import router from './router';
 7 | import store from './store';
 8 | 
 9 | //vue-analytics読み込み
10 | import VueAnalytics from 'vue-analytics';
11 | // axios読み込み
12 | import './plugins/axios';
13 | // bootstrap-vue読み込み
14 | import './plugins/bootstrap-vue';
15 | // Leaflet読み込み
16 | import 'leaflet/dist/leaflet.css';
17 | // Leafletプラグイン読み込み
18 | import 'leaflet.gridlayer.googlemutant';
19 | import 'leaflet-bing-layer';
20 | import 'leaflet.sync';
21 | 
22 | Vue.config.productionTip = false;
23 | 
24 | // Google アナリティクス適用
25 | Vue.use(VueAnalytics, {
26 |     id: 'UA-57375666-12',
27 |     router,
28 | });
29 | 
30 | new Vue({
31 |     router,
32 |     store,
33 |     render: h => h(App),
34 | }).$mount('#app');
35 | 


--------------------------------------------------------------------------------
/src/plugins/axios.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import Vue from 'vue';
 4 | import axios from "axios";
 5 | 
 6 | // Full config:  https://github.com/axios/axios#request-config
 7 | // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
 8 | // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 9 | // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
10 | 
11 | let config = {
12 |   // baseURL: process.env.baseURL || process.env.apiUrl || ""
13 |   // timeout: 60 * 1000, // Timeout
14 |   // withCredentials: true, // Check cross-site Access-Control
15 | };
16 | 
17 | const _axios = axios.create(config);
18 | 
19 | _axios.interceptors.request.use(
20 |   function(config) {
21 |     // Do something before request is sent
22 |     return config;
23 |   },
24 |   function(error) {
25 |     // Do something with request error
26 |     return Promise.reject(error);
27 |   }
28 | );
29 | 
30 | // Add a response interceptor
31 | _axios.interceptors.response.use(
32 |   function(response) {
33 |     // Do something with response data
34 |     return response;
35 |   },
36 |   function(error) {
37 |     // Do something with response error
38 |     return Promise.reject(error);
39 |   }
40 | );
41 | 
42 | Plugin.install = function(Vue, options) {
43 |   Vue.axios = _axios;
44 |   window.axios = _axios;
45 |   Object.defineProperties(Vue.prototype, {
46 |     axios: {
47 |       get() {
48 |         return _axios;
49 |       }
50 |     },
51 |     $axios: {
52 |       get() {
53 |         return _axios;
54 |       }
55 |     },
56 |   });
57 | };
58 | 
59 | Vue.use(Plugin)
60 | 
61 | export default Plugin;
62 | 


--------------------------------------------------------------------------------
/src/plugins/bootstrap-vue.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | import BootstrapVue from 'bootstrap-vue'
4 | import 'bootstrap/dist/css/bootstrap.min.css'
5 | import 'bootstrap-vue/dist/bootstrap-vue.css'
6 | 
7 | Vue.use(BootstrapVue)
8 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Router from 'vue-router';
 3 | import store from './store';
 4 | 
 5 | // 各view読み込み
 6 | import View404 from './views/View404.vue';
 7 | import Help from './views/Help.vue';
 8 | import Pane from './views/Pane.vue';
 9 | 
10 | Vue.use(Router);
11 | 
12 | const router = new Router({
13 |     // #を無くすためにはサーバーの設定も必要
14 |     mode: 'history',
15 |     routes: [
16 |         {
17 |             // ペインページ初期表示用 (1,2,3,4,6,8のみ)
18 |             path: '/:id([123468])/:zoom(\\d+)/:lat(\\d+.\\d+)/:lng(\\d+.\\d+)/:layer(.+)',
19 |             name: 'paneLatLng',
20 |             component: Pane,
21 |             // ペイン・ズーム・経度・緯度・レイヤ情報を格納
22 |             props: route => ({
23 |                 id: Number(route.params.id),
24 |                 zoom: Number(route.params.zoom),
25 |                 lat: Number(route.params.lat),
26 |                 lng: Number(route.params.lng),
27 |                 layer: String(route.params.layer),
28 |             }),
29 |         },
30 |         {
31 |             // ペインページ遷移用 (1,2,3,4,6,8のみ)
32 |             path: '/:id([123468])',
33 |             name: 'paneChange',
34 |             component: Pane,
35 |             beforeEnter(to, from, next) {
36 |                 // 画面遷移後のマップURL生成
37 |                 store.dispatch('getNextMapTypeUrl', to.params.id);
38 |                 // 画面遷移後のURL設定
39 |                 const redirectPath =
40 |                     '/' +
41 |                     [
42 |                         to.params.id,
43 |                         store.state.zoom,
44 |                         store.state.lat,
45 |                         store.state.lng,
46 |                         store.state.nextMapTypeUrl,
47 |                     ].join('/');
48 |                 // ページ遷移
49 |                 next({ path: redirectPath });
50 |             },
51 |             // ペイン情報を格納
52 |             props: route => ({
53 |                 id: Number(route.params.id),
54 |             }),
55 |         },
56 |         {
57 |             // ヘルプページ
58 |             path: '/help',
59 |             name: 'help',
60 |             component: Help,
61 |         },
62 |         {
63 |             // 404ページ
64 |             path: '*',
65 |             name: 'view404',
66 |             component: View404,
67 |         },
68 |         {
69 |             // ルートページリダイレクト
70 |             path: '/',
71 |             redirect: store.state.rootUrl,
72 |         },
73 |     ],
74 | });
75 | 
76 | // ナビゲーションの前に実行
77 | router.beforeEach((to, from, next) => {
78 |     store.commit('setLoading', true);
79 |     setTimeout(next, 2000);
80 | });
81 | 
82 | // ナビゲーションの後に実行
83 | router.afterEach(() => {
84 |     store.commit('setLoading', false);
85 | });
86 | 
87 | export default router;
88 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue';
  2 | import Vuex from 'vuex';
  3 | import axios from 'axios';
  4 | import axiosJsonpAdapter from 'axios-jsonp';
  5 | 
  6 | Vue.use(Vuex);
  7 | 
  8 | export default new Vuex.Store({
  9 |     state: {
 10 |         // ローディング
 11 |         loading: false,
 12 |         // ペイン・ズームレベル・緯度・経度
 13 |         id: 3,
 14 |         zoom: 14,
 15 |         lat: 35.6795,
 16 |         lng: 139.7672,
 17 |         // レイヤ順情報
 18 |         mapTypeList: [],
 19 |         // ペイン配置情報管理
 20 |         mapTypeJson: null,
 21 |         // 初期URL
 22 |         rootUrl: '/3/14/35.6795/139.7672/tPale/osm/mieStreets',
 23 |         // 現在のレイヤ順情報URL
 24 |         nowMapTypeUrl: '',
 25 |         // 画面遷移後のレイヤ順情報URL
 26 |         nextMapTypeUrl: '',
 27 |         // MapFanAPIキー
 28 |         mapFanApiKey: '',
 29 |     },
 30 |     mutations: {
 31 |         // ローダー状態格納
 32 |         setLoading(state, payload) {
 33 |             state.loading = payload;
 34 |         },
 35 |         // 初期ペイン配置情報格納
 36 |         setDefaultMapTypeJson(state, paneTypeJson) {
 37 |             state.mapTypeJson = paneTypeJson;
 38 |         },
 39 |         // ペイン・ズーム・緯度・経度・レイヤ順情報を格納
 40 |         setLocationInfo(state, val) {
 41 |             state.id = val.id;
 42 |             state.lat = val.lat;
 43 |             state.lng = val.lng;
 44 |             state.zoom = val.zoom;
 45 |             state.mapTypeList = val.mapTypeList;
 46 |         },
 47 |         // レイヤ順情報格納
 48 |         setMapTypeList(state, mapTypeList) {
 49 |             state.mapTypeList[mapTypeList.index] = mapTypeList.selected;
 50 |         },
 51 |         // 現在のレイヤ順情報URL格納
 52 |         setNowMapTypeUrl(state, nowMapTypeUrl) {
 53 |             state.nowMapTypeUrl = nowMapTypeUrl;
 54 |         },
 55 |         // 画面遷移後のレイヤ順情報URL格納
 56 |         setNextMapTypeUrl(state, nextMapTypeUrl) {
 57 |             state.nextMapTypeUrl = nextMapTypeUrl;
 58 |         },
 59 |         // レイヤ切り替え後のレイヤ順情報URL格納
 60 |         setSelectMapTypeUrl(state, selectMapTypeUrl) {
 61 |             state.selectMapTypeUrl = selectMapTypeUrl;
 62 |         },
 63 |         // ペイン配置情報更新
 64 |         setMapTypeJson(state, select) {
 65 |             for (const v of state.mapTypeJson) {
 66 |                 try {
 67 |                     v.data[0].mapList[select.index].mapType = select.selected;
 68 |                 } catch (e) {
 69 |                     continue;
 70 |                 }
 71 |             }
 72 |         },
 73 |         // URL貼り付け時ペイン配置情報更新
 74 |         pastingMapTypeJson(state, mapTypeList) {
 75 |             for (let index = 0; index < mapTypeList.length; index++) {
 76 |                 for (const v of state.mapTypeJson) {
 77 |                     try {
 78 |                         v.data[0].mapList[index].mapType = mapTypeList[index];
 79 |                     } catch (e) {
 80 |                         continue;
 81 |                     }
 82 |                 }
 83 |             }
 84 |         },
 85 |         // MapFanAPIキー格納
 86 |         getMapFanApiKey(state, mapFanApiKey) {
 87 |             state.mapFanApiKey = mapFanApiKey;
 88 |         },
 89 |     },
 90 |     actions: {
 91 |         // 各情報をstateに格納
 92 |         getInfo(context, info) {
 93 |             // 現在のレイヤ順情報URL作成
 94 |             let nowMapTypeUrl = info.mapTypeList.join('/');
 95 |             // URLを動的に変更
 96 |             let url = '/' + [info.id, info.zoom, info.lat, info.lng, nowMapTypeUrl].join('/');
 97 |             history.replaceState('', '', url);
 98 |             // ペイン・ズーム・緯度・経度格納
 99 |             context.commit('setLocationInfo', info);
100 |             // 現在のレイヤ順情報URL格納
101 |             context.commit('setNowMapTypeUrl', nowMapTypeUrl);
102 |         },
103 |         // 画面遷移後のレイヤ順情報URLをstateに格納
104 |         getNextMapTypeUrl(context, id) {
105 |             // 画面遷移後のレイヤ順情報取得
106 |             let nextMapList = [];
107 |             for (const v of this.state.mapTypeJson) {
108 |                 if (v.id === Number(id)) {
109 |                     for (let i = 0; i < this.state.mapTypeList.length; i++) {
110 |                         try {
111 |                             nextMapList.push(v.data[0].mapList[i].mapType);
112 |                         } catch (e) {
113 |                             continue;
114 |                         }
115 |                     }
116 |                 }
117 |             }
118 |             // 画面遷移後のレイヤ順情報URL生成
119 |             let nextMapTypeUrl;
120 |             if (nextMapList.length === 1) {
121 |                 nextMapTypeUrl = nextMapList[0];
122 |             } else {
123 |                 nextMapTypeUrl = nextMapList.join('/');
124 |             }
125 |             // 画面遷移後のレイヤ順情報URLを格納
126 |             context.commit('setNextMapTypeUrl', nextMapTypeUrl);
127 |         },
128 |         // MapFan認証キー取得
129 |         async getMapFanApiKeyAction(context, mapFanAuthKey) {
130 |             // https://api-auth-pre.mapfan.com/v1/auth?appid=APIキー&date=20171101102029
131 |             const mapFanAuthUrl =
132 |                 'https://api-auth-pre.mapfan.com/v1/auth?appid=' +
133 |                 mapFanAuthKey +
134 |                 '&date=20171101102029';
135 |             let mapFanApiKey;
136 |             await axios
137 |                 .get(mapFanAuthUrl, {
138 |                     adapter: axiosJsonpAdapter,
139 |                 })
140 |                 .then(res => {
141 |                     mapFanApiKey = res.data.key;
142 |                 });
143 |             // MapFanAPIキー格納
144 |             context.commit('getMapFanApiKey', mapFanApiKey);
145 |         },
146 |     },
147 | });
148 | 


--------------------------------------------------------------------------------
/src/views/Help.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="help">
  3 |         <!--メニュー-->
  4 |         <Menu></Menu>
  5 | 
  6 |         <b-container>
  7 |             <b-row>
  8 |                 <b-col cols="11" offset="1" class="my-5">
  9 |                     <h3>This web site is</h3>
 10 |                 </b-col>
 11 | 
 12 |                 <b-col cols="11" offset="1" class="mb-5">
 13 |                     <h5 class="mb-3">Japan Map Compare: mapcompare.jp</h5>
 14 |                     <p>
 15 |                         Japan Map Compare can compare the various webmaps focusing on Japan area
 16 |                         including OpenStreetMap, Bing, Google, ESRI, Mapfan and GSI Map. It is
 17 |                         inspired by
 18 |                         <b-link href="https://tools.geofabrik.de/mc" target="_blank"
 19 |                             >Map Compare</b-link
 20 |                         >
 21 |                         coded by Geofabrik and BBBike (Thanks a lot!!) and is developed using modern
 22 |                         webmapping technologies like Leaflet, Vue.js...
 23 |                     </p>
 24 |                     <p>
 25 |                         You can use permalink to save the current status of showing page as below
 26 |                         example.
 27 |                     </p>
 28 |                     <p>
 29 |                         https://mapcompare.jp/3{number of panels}/14{zoom
 30 |                         level}/35.6795{lat}/139.7672{lon}/tPale{webmap_1}/osm{webmap_2}/tOrt{webmap_3}
 31 |                     </p>
 32 |                     <p>
 33 |                         Comparison with Bing Maps, Google Maps, Mapfan is for informational purposes
 34 |                         only. Do not use information from these webmaps to edit OpenStreetMap data.
 35 |                     </p>
 36 |                 </b-col>
 37 | 
 38 |                 <b-col cols="11" offset="1" class="mb-5">
 39 |                     <h5 class="mb-4">Comparable webmaps {webmap}:</h5>
 40 |                     <b-table :items="items"></b-table>
 41 |                 </b-col>
 42 | 
 43 |                 <b-col cols="11" offset="1" class="mb-5">
 44 |                     <h5 class="mb-3">developed by:</h5>
 45 |                     <p>
 46 |                         JSPS Scientific Research (B) (Generative Research Fields) Project: Trusts of
 47 |                         Crowdsourced Geographic Information
 48 |                     </p>
 49 |                     <p>mapcomparejp@gmail.com</p>
 50 |                     <b-link
 51 |                         href="https://kaken.nii.ac.jp/en/grant/KAKENHI-PROJECT-18KT0049"
 52 |                         target="_blank"
 53 |                     >
 54 |                         <b-img src="../assets/trusts_of_gi.png"></b-img>
 55 |                     </b-link>
 56 |                 </b-col>
 57 | 
 58 |                 <b-col cols="11" offset="1" class="mb-5">
 59 |                     <h5 class="mb-3">developed by:</h5>
 60 |                     <p>MIERUNE Inc.</p>
 61 |                     <b-link href="https://mierune.co.jp" target="_blank">
 62 |                         <b-img src="../assets/mierune.png"></b-img>
 63 |                     </b-link>
 64 |                 </b-col>
 65 | 
 66 |                 <b-col cols="11" offset="1" class="mb-5">
 67 |                     <h5 class="mb-3">License:</h5>
 68 |                     <p>
 69 |                         All maps except GSI Maps（地理院地図）/Bing/Google/ESRI/Mapfan based on OSM
 70 |                         data © OpenStreetMap (License: ODbL 1.0), OSM Tiles licensed CC-BY-SA 2.0
 71 |                     </p>
 72 |                     <p>
 73 |                         The source code of Japan Map Compare is licensed under The
 74 |                         <b-link href="https://opensource.org/licenses/BSD-2-Clause" target="_blank"
 75 |                             >2-Clause BSD License</b-link
 76 |                         >
 77 |                     </p>
 78 |                 </b-col>
 79 | 
 80 |                 <b-col cols="11" offset="1" class="mb-5">
 81 |                     <h5>GitHub:</h5>
 82 |                     <p>
 83 |                         <b-link
 84 |                             href="https://github.com/mapcomparejp/JapanMapCompare"
 85 |                             target="_blank"
 86 |                             >mapcomparejp/JapanMapCompare</b-link
 87 |                         >
 88 |                     </p>
 89 |                 </b-col>
 90 | 
 91 |                 <b-col cols="11" offset="1" class="mb-5">
 92 |                     <h5 class="mb-3">Supported browsers:</h5>
 93 |                     <p>Google Chrome (Latest edition)</p>
 94 |                     <p>Firefox (Latest edition)</p>
 95 |                 </b-col>
 96 |             </b-row>
 97 |         </b-container>
 98 |     </div>
 99 | </template>
100 | 
101 | <script>
102 | import Menu from '@/components/Menu.vue';
103 | 
104 | export default {
105 |     name: 'Help',
106 |     components: {
107 |         Menu,
108 |     },
109 |     data() {
110 |         return {
111 |             items: [
112 |                 {
113 |                     name: '地理院地図 淡色',
114 |                     layer: 'tPale',
115 |                     overview:
116 |                         'topographic map by gsi.go.jp (Geospatial Information Authority of Japan)',
117 |                 },
118 |                 {
119 |                     name: '地理院地図 オルソ',
120 |                     layer: 'tOrt',
121 |                     overview:
122 |                         'satellite and aerial photos by gsi.go.jp (Geospatial Information Authority of Japan)',
123 |                 },
124 |                 {
125 |                     name: 'MIERUNE Streets',
126 |                     layer: 'mieStreets',
127 |                     overview: 'street map by MapTiler.com using OSM data',
128 |                 },
129 |                 {
130 |                     name: 'MIERUNE Gray',
131 |                     layer: 'mieGray',
132 |                     overview: 'gray map by MapTiler.com using OSM data',
133 |                 },
134 |                 {
135 |                     name: 'MIERUNE Dark',
136 |                     layer: 'mieDark',
137 |                     overview: 'dark map by MapTiler.com using OSM data',
138 |                 },
139 |                 {
140 |                     name: 'MIERUNE Satellite',
141 |                     layer: 'mieSatellite',
142 |                     overview: 'satellite and aerial photos by MapTiler.com',
143 |                 },
144 |                 {
145 |                     name: 'OpenStreetMap',
146 |                     layer: 'osm',
147 |                     overview:
148 |                         'OpenStreetMap data rendered with OpenStreetMap Carto from official tile server',
149 |                 },
150 |                 {
151 |                     name: 'Mapbox Streets',
152 |                     layer: 'mapStreets',
153 |                     overview: 'street map by Mapbox.com using OSM data',
154 |                 },
155 |                 {
156 |                     name: 'Mapbox Dark',
157 |                     layer: 'mapDark',
158 |                     overview: 'dark map by Mapbox.com using OSM data',
159 |                 },
160 |                 {
161 |                     name: 'Mapbox Satelite',
162 |                     layer: 'mapSatellite',
163 |                     overview: 'satellite and aerial photos by Mapbox.com',
164 |                 },
165 |                 { name: 'ESRI', layer: 'esri', overview: 'Street map by Esri.com' },
166 |                 {
167 |                     name: 'Bing Maps Road',
168 |                     layer: 'bRoad',
169 |                     overview: 'Bing maps street',
170 |                 },
171 |                 {
172 |                     name: 'Google Maps Road',
173 |                     layer: 'gRoad',
174 |                     overview: 'Google maps street',
175 |                 },
176 |                 {
177 |                     name: 'Mapfan',
178 |                     layer: 'mapfan',
179 |                     overview: 'street map by Mapfan.com',
180 |                 },
181 |             ],
182 |         };
183 |     },
184 |     beforeRouteEnter(to, from, next) {
185 |         setTimeout(next, 2000);
186 |     },
187 | };
188 | </script>
189 | 
190 | <style scoped>
191 | .help {
192 |     text-align: left;
193 | }
194 | img {
195 |     margin-bottom: 20px;
196 | }
197 | </style>
198 | 


--------------------------------------------------------------------------------
/src/views/Pane.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="pane">
  3 |         <!--メニュー-->
  4 |         <Menu></Menu>
  5 | 
  6 |         <b-container fluid>
  7 |             <b-row>
  8 |                 <div v-for="(item, index) in mapList" :key="item.mapId" v-bind:class="gridClass">
  9 |                     <!--地図画面-->
 10 |                     <MapAdd
 11 |                         v-bind:index="index"
 12 |                         v-bind:map-id="item.mapId"
 13 |                         v-bind:map-type="item.mapType"
 14 |                         v-bind:height-vh="heightVal"
 15 |                         v-bind:style="{ height: heightVh }"
 16 |                         v-on:child-event="parentMethodView"
 17 |                     />
 18 |                 </div>
 19 |             </b-row>
 20 |             <b-row class="m-1 float-right">
 21 |                 <!-- ズームレベル表示 -->
 22 |                 <ZoomLevel></ZoomLevel>
 23 |             </b-row>
 24 |         </b-container>
 25 |     </div>
 26 | </template>
 27 | 
 28 | <script>
 29 | import Menu from '@/components/Menu.vue';
 30 | import ZoomLevel from '@/components/ZoomLevel.vue';
 31 | import MapAdd from '@/components/MapAdd.vue';
 32 | // 画面種類読み込み
 33 | import paneTypeJson from '../assets/PaneType.json';
 34 | 
 35 | export default {
 36 |     name: 'Pane',
 37 |     components: {
 38 |         Menu,
 39 |         MapAdd,
 40 |         ZoomLevel,
 41 |     },
 42 |     props: {
 43 |         id: Number,
 44 |         zoom: Number,
 45 |         lat: Number,
 46 |         lng: Number,
 47 |         layer: String,
 48 |     },
 49 |     data() {
 50 |         return {
 51 |             heightVh: '',
 52 |             syncObj: {},
 53 |             syncObjSingle: {},
 54 |             heightVal: '',
 55 |             gridClass: '',
 56 |             mapList: {},
 57 |             flag: false,
 58 |             mapTypeList: [],
 59 |         };
 60 |     },
 61 |     created: function() {
 62 |         // 画面生成時にJSONをVuexに保存
 63 |         this.$store.commit('setDefaultMapTypeJson', paneTypeJson);
 64 |         // URL貼り付けをリスト化
 65 |         this.mapTypeList = this.layer.split('/');
 66 |         // URL貼り付け時ペイン配置情報更新
 67 |         this.$store.commit('pastingMapTypeJson', this.mapTypeList);
 68 |         // 地図画面配置設定
 69 |         this.paneType(Number(this.id));
 70 |         // URLに入力された情報を初期値としてストアに格納
 71 |         if (this.id !== undefined) {
 72 |             this.$store.commit('setLocationInfo', {
 73 |                 id: this.id,
 74 |                 lat: this.lat.toFixed(4),
 75 |                 lng: this.lng.toFixed(4),
 76 |                 zoom: this.zoom,
 77 |                 mapTypeList: this.mapTypeList,
 78 |             });
 79 |         }
 80 |     },
 81 |     mounted: function() {
 82 |         // 地図画面同期設定
 83 |         this.syncAdd();
 84 |         // 地図移動イベント設定
 85 |         this.syncObjSingle.on('moveend', this.infoChange);
 86 |     },
 87 |     beforeRouteUpdate(to, from, next) {
 88 |         // オブジェクトを空にする
 89 |         this.syncObj = {};
 90 |         this.syncObjSingle = {};
 91 |         // 地図画面配置設定
 92 |         this.paneType(Number(to.params.id));
 93 |         // ページ遷移
 94 |         next();
 95 |     },
 96 |     updated: function() {
 97 |         // 地図画面同期設定
 98 |         this.syncAdd();
 99 |         this.infoChange();
100 |         // 地図移動イベント設定
101 |         this.syncObjSingle.on('moveend', this.infoChange);
102 |     },
103 |     methods: {
104 |         // 対象ペイン属性取得
105 |         paneType: function(id) {
106 |             // ペイン配置情報取得
107 |             for (const v of this.$store.state.mapTypeJson) {
108 |                 if (v.id === Number(id)) {
109 |                     this.heightVal = v.data[0].heightVal;
110 |                     this.gridClass = v.data[0].gridClass;
111 |                     this.mapList = v.data[0].mapList;
112 |                     // 画面遷移後のレイヤ順情報再取得
113 |                     let nextMapList = [];
114 |                     for (let i in this.mapList) {
115 |                         nextMapList.push(this.mapList[i].mapType);
116 |                     }
117 |                     this.mapTypeList = nextMapList;
118 |                 }
119 |             }
120 |         },
121 |         // マップオブジェクト格納
122 |         parentMethodView: function(fromChildVal) {
123 |             // 各マップオブジェクト格納
124 |             this.syncObj[fromChildVal._container.id] = fromChildVal;
125 |             // 単一マップオブジェクト格納
126 |             this.syncObjSingle = fromChildVal;
127 |         },
128 |         // 地図画面同期設定
129 |         syncAdd: function() {
130 |             // 同期オプション
131 |             let option = {
132 |                 syncCursor: true,
133 |                 syncCursorMarkerOptions: {
134 |                     radius: 7,
135 |                     fillOpacity: 0.3,
136 |                     color: '#1253A4',
137 |                     fillColor: '#F5F5F5',
138 |                 },
139 |             };
140 |             // 地図画面同期設定
141 |             for (const v of Object.keys(this.syncObj)) {
142 |                 for (const vv of Object.keys(this.syncObj)) {
143 |                     if (v !== vv) {
144 |                         this.syncObj[v].sync(this.syncObj[vv], option);
145 |                     }
146 |                 }
147 |             }
148 |         },
149 |         // 各情報を格納
150 |         infoChange: function() {
151 |             // 地図移動後の各情報をVuexに格納
152 |             this.$store.dispatch('getInfo', {
153 |                 id: this.id,
154 |                 lat: this.syncObjSingle.getCenter().lat.toFixed(4),
155 |                 lng: this.syncObjSingle.getCenter().lng.toFixed(4),
156 |                 zoom: this.syncObjSingle.getZoom(),
157 |                 mapTypeList: this.mapTypeList,
158 |             });
159 |         },
160 |     },
161 | };
162 | </script>
163 | 
164 | <style scoped></style>
165 | 


--------------------------------------------------------------------------------
/src/views/View404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="view404">
 3 |         <b-container fluid>
 4 |             <b-row>
 5 |                 <b-col cols="12">
 6 |                     <img alt="Sorry" src="../assets/sorry.png" />
 7 |                     <h3>No Page</h3>
 8 |                 </b-col>
 9 |             </b-row>
10 |         </b-container>
11 |     </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |     name: 'View404',
17 |     beforeRouteEnter(to, from, next) {
18 |         setTimeout(next, 2000);
19 |     },
20 | };
21 | </script>
22 | 
23 | <style scoped>
24 | img {
25 |     margin-top: 150px;
26 |     margin-bottom: 10px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     productionSourceMap: false,
3 | };
4 | 


--------------------------------------------------------------------------------