質問編集履歴

11

修正の修正です

2016/12/29 18:05

投稿

oyatsu8
oyatsu8

スコア97

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
- var pallet03 = ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"];
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

パラメータを修正

2016/12/29 18:05

投稿

oyatsu8
oyatsu8

スコア97

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

修正

2016/12/29 17:52

投稿

oyatsu8
oyatsu8

スコア97

test CHANGED
@@ -1 +1 @@
1
- s
1
+ javascriptのパラエータの読み込みがわからない
test CHANGED
File without changes

8

修正

2016/12/29 09:22

投稿

oyatsu8
oyatsu8

スコア97

test CHANGED
@@ -1 +1 @@
1
- Javascript (f) =>の意味が分からない
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
- function getColorEx(d, scale, pallet)の部分にどうやって値を渡たらいいかで、javascriptの基本的な話だと思うのでが、コードが長いため、どで分離たらいいかがよくわからなくなっています
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

コード修正

2016/12/29 09:20

投稿

oyatsu8
oyatsu8

スコア97

test CHANGED
File without changes
test CHANGED
@@ -268,7 +268,7 @@
268
268
 
269
269
  geojson01 = createGeojson();
270
270
 
271
- geojson01.addTo(geojson01);
271
+ geojson01.addTo(choropleth01);
272
272
 
273
273
 
274
274
 

6

修正

2016/12/29 05:30

投稿

oyatsu8
oyatsu8

スコア97

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 &copy; <a href=""></a>');
128
84
 
129
85
 
@@ -264,25 +220,27 @@
264
220
 
265
221
 
266
222
 
223
+ ////ここにどう読み込むかがわからない
224
+
267
- // (feature) => {
225
+ (feature) => {
268
-
226
+
269
- // return {
227
+ return {
270
-
228
+
271
- // weight: 2,
229
+ weight: 2,
272
-
230
+
273
- // opacity: 1,
231
+ opacity: 1,
274
-
232
+
275
- // color: 'white',
233
+ color: 'white',
276
-
234
+
277
- // dashArray: '3',
235
+ dashArray: '3',
278
-
236
+
279
- // fillOpacity: 0.5,
237
+ fillOpacity: 0.5,
280
-
238
+
281
- // fillColor: getColorEx(fillColorFeild(feature), scale01, pallet02)
239
+ fillColor: getColorEx(fillColorFeild(feature), scale--, pallet--)
282
-
240
+
283
- // };
241
+ };
284
-
242
+
285
- // }
243
+ }
286
244
 
287
245
 
288
246
 

5

文字修正

2016/12/29 05:28

投稿

oyatsu8
oyatsu8

スコア97

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, scale01, pallet02)
119
+ fillColor: getColorEx(feature.properties.test02, scale02, pallet02)
120
120
 
121
121
  };
122
122
 

4

修正

2016/12/29 04:48

投稿

oyatsu8
oyatsu8

スコア97

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

追記

2016/12/29 04:47

投稿

oyatsu8
oyatsu8

スコア97

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

コードを増やしました、全体が長過ぎるため、一部になります

2016/12/29 04:43

投稿

oyatsu8
oyatsu8

スコア97

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 &copy; <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(test_name == "テスト01"){
251
+ var fillColorFeild = if(overlay_name == "test01"){
32
-
252
+
33
- (f) => {f.properties.aiueo};
253
+ (f) => {f.properties.test01};
34
-
254
+
35
- } else if(test_name == "テスト02"){
255
+ } else if(overlay_name == "test02"){
36
-
256
+
37
- (f) => {f.properties.kakikukeko};
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
- function getColorEx(d, scale, pallet) {
291
+ function createGeojson() {
70
-
292
+
71
- return d > scale[0] ? pallet[0] :
293
+ L.geoJson(prefectureData, {
294
+
72
-
295
+ style: styleEx(),
296
+
73
- d > scale[1] ? pallet[1]:
297
+ onEachFeature: onEachFeature
74
-
75
- d > scale[2] ? pallet[2]:
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
- pallet[7];
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

文が途中だった

2016/12/29 04:42

投稿

oyatsu8
oyatsu8

スコア97

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