質問編集履歴
11
修正の修正です
test
CHANGED
File without changes
|
test
CHANGED
@@ -36,27 +36,13 @@
|
|
36
36
|
|
37
37
|
var scale02 = [1000,500,400,300,200,100,10];
|
38
38
|
|
39
|
-
var scale03 = [10000,5000,4000,3000,2000,1000,100];
|
40
|
-
|
41
|
-
var scale04 = [1000,500,400,300,200,100,10];
|
42
|
-
|
43
|
-
var scale05 = [10000,5000,4000,3000,2000,1000,100];
|
44
|
-
|
45
|
-
var scale06 = [1000,500,400,300,200,100,10];
|
46
|
-
|
47
39
|
|
48
40
|
|
49
41
|
var pallet01 = ['#800026','#BD0026','#E31A1C','#FC4E2A','#FD8D3C','#FEB24C','#FED976','#FFEDA0'];
|
50
42
|
|
51
43
|
var pallet02 = ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"];
|
52
44
|
|
53
|
-
|
45
|
+
|
54
|
-
|
55
|
-
var pallet04 = ['#f7fcfd','#e0ecf4','#bfd3e6','#9ebcda','#8c96c6','#8c6bb1','#88419d','#6e016b'];
|
56
|
-
|
57
|
-
var pallet05 = ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"];
|
58
|
-
|
59
|
-
var pallet06 = ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"];
|
60
46
|
|
61
47
|
|
62
48
|
|
10
パラメータを修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -16,7 +16,9 @@
|
|
16
16
|
|
17
17
|
|
18
18
|
|
19
|
+
途中まで教えてもらったりもしていたのですが、
|
20
|
+
|
19
|
-
よくわからなくなってきたので
|
21
|
+
ほんとうによくわからなくなってきたので
|
20
22
|
|
21
23
|
質問し直すことにします
|
22
24
|
|
@@ -24,9 +26,37 @@
|
|
24
26
|
|
25
27
|
|
26
28
|
|
29
|
+
|
30
|
+
|
31
|
+
|
32
|
+
|
27
33
|
```Javascript
|
28
34
|
|
29
|
-
|
35
|
+
var scale01 = [10000,5000,4000,3000,2000,1000,100];
|
36
|
+
|
37
|
+
var scale02 = [1000,500,400,300,200,100,10];
|
38
|
+
|
39
|
+
var scale03 = [10000,5000,4000,3000,2000,1000,100];
|
40
|
+
|
41
|
+
var scale04 = [1000,500,400,300,200,100,10];
|
42
|
+
|
43
|
+
var scale05 = [10000,5000,4000,3000,2000,1000,100];
|
44
|
+
|
45
|
+
var scale06 = [1000,500,400,300,200,100,10];
|
46
|
+
|
47
|
+
|
48
|
+
|
49
|
+
var pallet01 = ['#800026','#BD0026','#E31A1C','#FC4E2A','#FD8D3C','#FEB24C','#FED976','#FFEDA0'];
|
50
|
+
|
51
|
+
var pallet02 = ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"];
|
52
|
+
|
53
|
+
var pallet03 = ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"];
|
54
|
+
|
55
|
+
var pallet04 = ['#f7fcfd','#e0ecf4','#bfd3e6','#9ebcda','#8c96c6','#8c6bb1','#88419d','#6e016b'];
|
56
|
+
|
57
|
+
var pallet05 = ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"];
|
58
|
+
|
59
|
+
var pallet06 = ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"];
|
30
60
|
|
31
61
|
|
32
62
|
|
9
修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
s
|
1
|
+
javascriptのパラエータの読み込みがわからない
|
test
CHANGED
File without changes
|
8
修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
|
1
|
+
s
|
test
CHANGED
@@ -16,27 +16,9 @@
|
|
16
16
|
|
17
17
|
|
18
18
|
|
19
|
-
追記:GeoJSONからデータを読み込んだプロパティの値に対して、
|
20
|
-
|
21
|
-
テーマごとに色を変えたいと考えています。
|
22
|
-
|
23
|
-
例えばtest01は濃い赤>薄い赤までの8段階、
|
24
|
-
|
25
|
-
test02は濃い緑>薄い緑までの8段階、などです。
|
26
|
-
|
27
|
-
下記のpallet01、pallet02がその色になります。
|
28
|
-
|
29
|
-
これをpallet03,pallet04...とどんどん増やしたいと考えています。
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
回答をいただき、=>の意味はわかってきました、
|
34
|
-
|
35
|
-
|
19
|
+
よくわからなくなってきたので
|
36
|
-
|
20
|
+
|
37
|
-
|
21
|
+
質問し直すことにします
|
38
|
-
|
39
|
-
|
40
22
|
|
41
23
|
|
42
24
|
|
@@ -46,16 +28,6 @@
|
|
46
28
|
|
47
29
|
|
48
30
|
|
49
|
-
var scale01 = [10000,5000,4000,3000,2000,1000,100];
|
50
|
-
|
51
|
-
var scale02 = [1000,500,400,300,200,100,10];
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
var pallet01 = ['#800026','#BD0026','#E31A1C','#FC4E2A','#FD8D3C','#FEB24C','#FED976','#FFEDA0'];
|
56
|
-
|
57
|
-
var pallet02 = ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"];
|
58
|
-
|
59
31
|
|
60
32
|
|
61
33
|
function getColorEx(d, scale, pallet) {
|
7
コード修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -268,7 +268,7 @@
|
|
268
268
|
|
269
269
|
geojson01 = createGeojson();
|
270
270
|
|
271
|
-
geojson01.addTo(
|
271
|
+
geojson01.addTo(choropleth01);
|
272
272
|
|
273
273
|
|
274
274
|
|
6
修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -80,50 +80,6 @@
|
|
80
80
|
|
81
81
|
|
82
82
|
|
83
|
-
//cssスタイル ここも整理したい
|
84
|
-
|
85
|
-
function style_01(feature) {
|
86
|
-
|
87
|
-
return {
|
88
|
-
|
89
|
-
weight: 2,
|
90
|
-
|
91
|
-
opacity: 1,
|
92
|
-
|
93
|
-
color: 'white',
|
94
|
-
|
95
|
-
dashArray: '3',
|
96
|
-
|
97
|
-
fillOpacity: 0.5,
|
98
|
-
|
99
|
-
fillColor: getColorEx(feature.properties.test01, scale01, pallet01)
|
100
|
-
|
101
|
-
};
|
102
|
-
|
103
|
-
}
|
104
|
-
|
105
|
-
function style_02(feature) {
|
106
|
-
|
107
|
-
return {
|
108
|
-
|
109
|
-
weight: 2,
|
110
|
-
|
111
|
-
opacity: 1,
|
112
|
-
|
113
|
-
color: 'white',
|
114
|
-
|
115
|
-
dashArray: '3',
|
116
|
-
|
117
|
-
fillOpacity: 0.5,
|
118
|
-
|
119
|
-
fillColor: getColorEx(feature.properties.test02, scale02, pallet02)
|
120
|
-
|
121
|
-
};
|
122
|
-
|
123
|
-
}
|
124
|
-
|
125
|
-
|
126
|
-
|
127
83
|
map.attributionControl.addAttribution('data © <a href=""></a>');
|
128
84
|
|
129
85
|
|
@@ -264,25 +220,27 @@
|
|
264
220
|
|
265
221
|
|
266
222
|
|
223
|
+
////ここにどう読み込むかがわからない
|
224
|
+
|
267
|
-
|
225
|
+
(feature) => {
|
268
|
-
|
226
|
+
|
269
|
-
|
227
|
+
return {
|
270
|
-
|
228
|
+
|
271
|
-
|
229
|
+
weight: 2,
|
272
|
-
|
230
|
+
|
273
|
-
|
231
|
+
opacity: 1,
|
274
|
-
|
232
|
+
|
275
|
-
|
233
|
+
color: 'white',
|
276
|
-
|
234
|
+
|
277
|
-
|
235
|
+
dashArray: '3',
|
278
|
-
|
236
|
+
|
279
|
-
|
237
|
+
fillOpacity: 0.5,
|
280
|
-
|
238
|
+
|
281
|
-
|
239
|
+
fillColor: getColorEx(fillColorFeild(feature), scale--, pallet--)
|
282
|
-
|
240
|
+
|
283
|
-
|
241
|
+
};
|
284
|
-
|
242
|
+
|
285
|
-
|
243
|
+
}
|
286
244
|
|
287
245
|
|
288
246
|
|
5
文字修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -116,7 +116,7 @@
|
|
116
116
|
|
117
117
|
fillOpacity: 0.5,
|
118
118
|
|
119
|
-
fillColor: getColorEx(feature.properties.test02, scale0
|
119
|
+
fillColor: getColorEx(feature.properties.test02, scale02, pallet02)
|
120
120
|
|
121
121
|
};
|
122
122
|
|
4
修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -130,6 +130,8 @@
|
|
130
130
|
|
131
131
|
//map.on start ここからoverlayのonイベントスタート
|
132
132
|
|
133
|
+
//leafletのチェックボックスでどれがon/offされたかを見る
|
134
|
+
|
133
135
|
map.on('overlayadd overlayremove baseLayerchange', function(a) {
|
134
136
|
|
135
137
|
if(a.type == "overlayadd"){console.log("overlayaddです");}
|
3
追記
test
CHANGED
File without changes
|
test
CHANGED
@@ -30,9 +30,11 @@
|
|
30
30
|
|
31
31
|
|
32
32
|
|
33
|
+
回答をいただき、=>の意味はわかってきました、
|
34
|
+
|
33
|
-
わかっていないのは、
|
35
|
+
他にわかっていないのは、
|
34
|
-
|
36
|
+
|
35
|
-
function getColorEx(d, scale, pallet)の部分にどうやって値を渡したらいいかです。
|
37
|
+
function getColorEx(d, scale, pallet)の部分にどうやって値を渡したらいいかで、javascriptの基本的な話だと思うのですが、コードが長いため、どこで分離したらいいかがよくわからなくなっています。
|
36
38
|
|
37
39
|
|
38
40
|
|
2
コードを増やしました、全体が長過ぎるため、一部になります
test
CHANGED
File without changes
|
test
CHANGED
@@ -16,74 +16,306 @@
|
|
16
16
|
|
17
17
|
|
18
18
|
|
19
|
+
追記:GeoJSONからデータを読み込んだプロパティの値に対して、
|
20
|
+
|
21
|
+
テーマごとに色を変えたいと考えています。
|
22
|
+
|
23
|
+
例えばtest01は濃い赤>薄い赤までの8段階、
|
24
|
+
|
25
|
+
test02は濃い緑>薄い緑までの8段階、などです。
|
26
|
+
|
27
|
+
下記のpallet01、pallet02がその色になります。
|
28
|
+
|
29
|
+
これをpallet03,pallet04...とどんどん増やしたいと考えています。
|
30
|
+
|
31
|
+
|
32
|
+
|
33
|
+
わかっていないのは、
|
34
|
+
|
35
|
+
function getColorEx(d, scale, pallet)の部分にどうやって値を渡したらいいかです。
|
36
|
+
|
37
|
+
|
38
|
+
|
39
|
+
|
40
|
+
|
19
41
|
|
20
42
|
|
21
43
|
```Javascript
|
22
44
|
|
45
|
+
|
46
|
+
|
47
|
+
var scale01 = [10000,5000,4000,3000,2000,1000,100];
|
48
|
+
|
49
|
+
var scale02 = [1000,500,400,300,200,100,10];
|
50
|
+
|
51
|
+
|
52
|
+
|
53
|
+
var pallet01 = ['#800026','#BD0026','#E31A1C','#FC4E2A','#FD8D3C','#FEB24C','#FED976','#FFEDA0'];
|
54
|
+
|
55
|
+
var pallet02 = ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"];
|
56
|
+
|
57
|
+
|
58
|
+
|
59
|
+
function getColorEx(d, scale, pallet) {
|
60
|
+
|
61
|
+
return d > scale[0] ? pallet[0] :
|
62
|
+
|
63
|
+
d > scale[1] ? pallet[1]:
|
64
|
+
|
65
|
+
d > scale[2] ? pallet[2]:
|
66
|
+
|
67
|
+
d > scale[3] ? pallet[3]:
|
68
|
+
|
69
|
+
d > scale[4] ? pallet[4]:
|
70
|
+
|
71
|
+
d > scale[5] ? pallet[5]:
|
72
|
+
|
73
|
+
d > scale[6] ? pallet[6]:
|
74
|
+
|
75
|
+
pallet[7];
|
76
|
+
|
77
|
+
}
|
78
|
+
|
79
|
+
|
80
|
+
|
81
|
+
//cssスタイル ここも整理したい
|
82
|
+
|
83
|
+
function style_01(feature) {
|
84
|
+
|
85
|
+
return {
|
86
|
+
|
87
|
+
weight: 2,
|
88
|
+
|
89
|
+
opacity: 1,
|
90
|
+
|
91
|
+
color: 'white',
|
92
|
+
|
93
|
+
dashArray: '3',
|
94
|
+
|
95
|
+
fillOpacity: 0.5,
|
96
|
+
|
97
|
+
fillColor: getColorEx(feature.properties.test01, scale01, pallet01)
|
98
|
+
|
99
|
+
};
|
100
|
+
|
101
|
+
}
|
102
|
+
|
103
|
+
function style_02(feature) {
|
104
|
+
|
105
|
+
return {
|
106
|
+
|
107
|
+
weight: 2,
|
108
|
+
|
109
|
+
opacity: 1,
|
110
|
+
|
111
|
+
color: 'white',
|
112
|
+
|
113
|
+
dashArray: '3',
|
114
|
+
|
115
|
+
fillOpacity: 0.5,
|
116
|
+
|
117
|
+
fillColor: getColorEx(feature.properties.test02, scale01, pallet02)
|
118
|
+
|
119
|
+
};
|
120
|
+
|
121
|
+
}
|
122
|
+
|
123
|
+
|
124
|
+
|
125
|
+
map.attributionControl.addAttribution('data © <a href=""></a>');
|
126
|
+
|
127
|
+
|
128
|
+
|
129
|
+
//map.on start ここからoverlayのonイベントスタート
|
130
|
+
|
131
|
+
map.on('overlayadd overlayremove baseLayerchange', function(a) {
|
132
|
+
|
133
|
+
if(a.type == "overlayadd"){console.log("overlayaddです");}
|
134
|
+
|
135
|
+
if(a.type == "overlayremove"){console.log("overlayremoveです");}
|
136
|
+
|
137
|
+
overlay_name = a.name;
|
138
|
+
|
139
|
+
overlay_type = a.type;
|
140
|
+
|
141
|
+
|
142
|
+
|
143
|
+
//ここからは全部onマウスイベントの処理
|
144
|
+
|
145
|
+
var geojson01;
|
146
|
+
|
147
|
+
var geojson02;
|
148
|
+
|
149
|
+
|
150
|
+
|
151
|
+
//共通部分 start
|
152
|
+
|
153
|
+
function highlightFeature(e) {
|
154
|
+
|
155
|
+
var layer = e.target;
|
156
|
+
|
157
|
+
layer.setStyle({
|
158
|
+
|
159
|
+
weight: 5,
|
160
|
+
|
161
|
+
color: '#F00',
|
162
|
+
|
163
|
+
dashArray: '',
|
164
|
+
|
165
|
+
fillOpacity: 0.5
|
166
|
+
|
167
|
+
});
|
168
|
+
|
169
|
+
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
170
|
+
|
171
|
+
layer.bringToFront();
|
172
|
+
|
173
|
+
}
|
174
|
+
|
175
|
+
info.update(layer.feature.properties);
|
176
|
+
|
177
|
+
}
|
178
|
+
|
179
|
+
function zoomToFeature(e) {
|
180
|
+
|
181
|
+
map.fitBounds(e.target.getBounds());
|
182
|
+
|
183
|
+
}
|
184
|
+
|
185
|
+
//共通部分 end
|
186
|
+
|
187
|
+
|
188
|
+
|
189
|
+
//ここも整頓したい
|
190
|
+
|
191
|
+
function resetHighlight(e) {
|
192
|
+
|
193
|
+
geojson01.resetStyle(e.target);
|
194
|
+
|
195
|
+
info.update();
|
196
|
+
|
197
|
+
}
|
198
|
+
|
199
|
+
function resetHighlight02(e) {
|
200
|
+
|
201
|
+
geojson02.resetStyle(e.target);
|
202
|
+
|
203
|
+
info.update();
|
204
|
+
|
205
|
+
}
|
206
|
+
|
207
|
+
//ここまで整頓したい
|
208
|
+
|
209
|
+
|
210
|
+
|
211
|
+
|
212
|
+
|
213
|
+
//ここまで全部onマウスイベントの処理
|
214
|
+
|
215
|
+
|
216
|
+
|
217
|
+
function onEachFeature(feature, layer) {
|
218
|
+
|
219
|
+
layer.on({
|
220
|
+
|
221
|
+
mouseover: highlightFeature,
|
222
|
+
|
223
|
+
mouseout: resetHighlight,
|
224
|
+
|
225
|
+
click: zoomToFeature
|
226
|
+
|
227
|
+
});
|
228
|
+
|
229
|
+
}
|
230
|
+
|
231
|
+
function onEachFeature02(feature, layer) {
|
232
|
+
|
233
|
+
layer.on({
|
234
|
+
|
235
|
+
mouseover: highlightFeature,
|
236
|
+
|
237
|
+
mouseout: resetHighlight02,
|
238
|
+
|
239
|
+
click: zoomToFeature
|
240
|
+
|
241
|
+
});
|
242
|
+
|
243
|
+
}
|
244
|
+
|
23
245
|
//tyleEx start
|
24
246
|
|
25
247
|
function styleEx() {
|
26
248
|
|
27
249
|
|
28
250
|
|
29
|
-
var fillColorFeild = '';
|
30
|
-
|
31
|
-
if(
|
251
|
+
var fillColorFeild = if(overlay_name == "test01"){
|
32
|
-
|
252
|
+
|
33
|
-
(f) => {f.properties.
|
253
|
+
(f) => {f.properties.test01};
|
34
|
-
|
254
|
+
|
35
|
-
} else if(
|
255
|
+
} else if(overlay_name == "test02"){
|
36
|
-
|
256
|
+
|
37
|
-
(f) => {f.properties.
|
257
|
+
(f) => {f.properties.test02};
|
38
258
|
|
39
259
|
}
|
40
260
|
|
41
261
|
|
42
262
|
|
43
|
-
(feature) => {
|
263
|
+
// (feature) => {
|
44
|
-
|
264
|
+
|
45
|
-
return {
|
265
|
+
// return {
|
46
|
-
|
266
|
+
|
47
|
-
weight: 2,
|
267
|
+
// weight: 2,
|
48
|
-
|
268
|
+
|
49
|
-
opacity: 1,
|
269
|
+
// opacity: 1,
|
50
|
-
|
270
|
+
|
51
|
-
color: 'white',
|
271
|
+
// color: 'white',
|
52
|
-
|
272
|
+
|
53
|
-
dashArray: '3',
|
273
|
+
// dashArray: '3',
|
54
|
-
|
274
|
+
|
55
|
-
fillOpacity: 0.5,
|
275
|
+
// fillOpacity: 0.5,
|
56
|
-
|
276
|
+
|
57
|
-
fillColor: getColorEx(fillColorFeild(feature), scale01, pallet02)
|
277
|
+
// fillColor: getColorEx(fillColorFeild(feature), scale01, pallet02)
|
58
|
-
|
278
|
+
|
59
|
-
};
|
279
|
+
// };
|
60
|
-
|
280
|
+
|
61
|
-
}
|
281
|
+
// }
|
282
|
+
|
283
|
+
|
62
284
|
|
63
285
|
}//tyleEx end
|
64
286
|
|
65
287
|
|
66
288
|
|
67
|
-
|
289
|
+
//createGeojson start
|
68
|
-
|
290
|
+
|
69
|
-
|
291
|
+
function createGeojson() {
|
70
|
-
|
292
|
+
|
71
|
-
retur
|
293
|
+
L.geoJson(prefectureData, {
|
294
|
+
|
72
|
-
|
295
|
+
style: styleEx(),
|
296
|
+
|
73
|
-
|
297
|
+
onEachFeature: onEachFeature
|
74
|
-
|
75
|
-
|
298
|
+
|
76
|
-
|
77
|
-
d > scale[3] ? pallet[3]:
|
78
|
-
|
79
|
-
d > scale[4] ? pallet[4]:
|
80
|
-
|
81
|
-
d > scale[5] ? pallet[5]:
|
82
|
-
|
83
|
-
d > scale[6] ? pallet[6]:
|
84
|
-
|
85
|
-
|
299
|
+
})
|
86
|
-
|
300
|
+
|
87
|
-
}
|
301
|
+
}
|
302
|
+
|
303
|
+
//createGeojson end
|
304
|
+
|
305
|
+
|
306
|
+
|
307
|
+
geojson01 = createGeojson();
|
308
|
+
|
309
|
+
geojson01.addTo(geojson01);
|
310
|
+
|
311
|
+
|
312
|
+
|
313
|
+
geojson02 = createGeojson();
|
314
|
+
|
315
|
+
geojson02.addTo(choropleth02);
|
316
|
+
|
317
|
+
});
|
318
|
+
|
319
|
+
//onイベント終了
|
88
320
|
|
89
321
|
```
|
1
文が途中だった
test
CHANGED
File without changes
|
test
CHANGED
@@ -11,6 +11,8 @@
|
|
11
11
|
http://phpjavascriptroom.com/?t=js&p=array
|
12
12
|
|
13
13
|
ここで見た感じだと、連想配列から値を取り出す時に使われるようなのですが、、
|
14
|
+
|
15
|
+
アドバイスを頂けたら幸いです。
|
14
16
|
|
15
17
|
|
16
18
|
|