回答編集履歴

10

コメント修正

2020/10/10 15:30

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  + グローバル配列circlesに、各地点データcircleを格納。
4
4
 
5
- + L.geoJson()関数の実行時、onEachFeature引数は使用せず、pointToLayer引数を指定するだけでクリックイベントの紐づけ登録まで完了させています。
5
+ + L.geoJson()関数の実行時、onEachFeature引数は使用せず、pointToLayer引数を指定するだけでクリックイベントの登録とpopupContentの紐づけまで完了させています。
6
6
 
7
7
  + L.CircleMarker -> L.circleMarker が正しいです。
8
8
 

9

冒頭のコメントを修正

2020/10/10 15:30

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -1,6 +1,8 @@
1
- + グロバル配列にcircle格納します。
1
+ 下記のコドは以下の点修正点とて反映しています。
2
2
 
3
+ + グローバル配列circlesに、各地点データcircleを格納。
4
+
3
- + geoJson()関数の処理の段階クリックイベントの紐づけ登録まで完了させます。(onEachFeature引数不使用)
5
+ + L.geoJson()関数の実行時、onEachFeature引数は使用せず、pointToLayer引数を指定するだけでクリックイベントの紐づけ登録まで完了させています。
4
6
 
5
7
  + L.CircleMarker -> L.circleMarker が正しいです。
6
8
 
@@ -10,7 +12,7 @@
10
12
 
11
13
  (略)
12
14
 
13
- var circles = [] //地点を格納するためのグローバル配列
15
+ var circles = [] //circleを格納するためのグローバル配列
14
16
 
15
17
 
16
18
 

8

参考

2020/10/10 15:23

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -81,3 +81,11 @@
81
81
  }
82
82
 
83
83
  ```
84
+
85
+
86
+
87
+ 参考:
88
+
89
+ https://leafletjs.com/reference-1.7.1.html#geojson
90
+
91
+ https://leafletjs.com/examples/geojson/

7

リファクタリング

2020/10/10 12:19

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -44,9 +44,7 @@
44
44
 
45
45
  .on( 'click', function(e) { clickEvt(e); });
46
46
 
47
-
48
47
 
49
- circle.node_id = feature.properties.node.node_id;
50
48
 
51
49
  // 作成した地点をグローバル配列に格納する。
52
50
 
@@ -68,13 +66,13 @@
68
66
 
69
67
  function clickEvt(e) {
70
68
 
71
- // カスタマイズしたpropertyは、e.target経由でアクセスできます。
69
+ // カスタマイズしたpropertyは、e.target.feature.properties経由でアクセスできます。
72
70
 
73
- feature = e.target
71
+ p = e.target.feature.properties
74
72
 
75
73
  // geometry.coordinateは、e.latlng経由でアクセスできます。
76
74
 
77
- alert('node_id:' + feature.node_id + '\n緯度:' + e.latlng.lat + '\n経度:' + e.latlng.lng);
75
+ alert('node_id:' + p.node.node_id + '\n緯度:' + e.latlng.lat + '\n経度:' + e.latlng.lng);
78
76
 
79
77
  }
80
78
 

6

修正

2020/10/10 12:16

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -1,65 +1,85 @@
1
+ + グローバル配列にcircleを格納します。
2
+
1
- [Leafletチューリアル](https://leafletjs.com/examples/quick-start/)に記載されていることですが、
3
+ + geoJson()関数処理の段階で、クリックイベンの紐づけ登録まで完了させます。(onEachFeature引数不使用)
4
+
5
+ + L.CircleMarker -> L.circleMarker が正しいです。
6
+
7
+
2
8
 
3
9
  ```
4
10
 
5
- circle.bindPopup("文字列");
11
+ (略)
6
12
 
7
- ```
8
-
9
- によって、設定しをクリックしたときに、指定した文字をポップアップすることができます。
13
+ var circles = [] //地点を格納するめのグロ
10
14
 
11
15
 
12
16
 
13
- したがって、
17
+ V.showNodesLayer = function (geojson) {
14
18
 
15
- ```
19
+ var hidingMarker = function (feature, latlng) {
16
20
 
17
- return new L.CircleMarker(latlng, {
21
+ if (feature.properties.hide == 'true') {
18
22
 
19
- radius: 30,
23
+ // 地点データの作成とクリックイベントの登録
20
24
 
21
- color: "#00ff00",
25
+ circle = L.circleMarker(
22
26
 
23
- fillColor: '#00ff00',
27
+ latlng,
24
28
 
25
- fillOpacity: 0.2,
29
+ {
26
30
 
27
- })
31
+ radius: 30,
28
32
 
29
- ```
33
+ color: "#00ff00",
30
34
 
31
- のところを
35
+ fillColor: '#00ff00',
32
36
 
33
- ```
37
+ fillOpacity: 0.2,
34
38
 
35
- var circle = new L.CircleMarker(latlng, {
39
+ }
36
40
 
37
- radius: 30,
41
+ ).bindPopup(feature.properties.popupContent)
38
42
 
39
- color: "#00ff00",
43
+ .addTo(map)
40
44
 
41
- fillColor: '#00ff00',
45
+ .on( 'click', function(e) { clickEvt(e); });
42
46
 
43
- fillOpacity: 0.2,
47
+
44
48
 
49
+ circle.node_id = feature.properties.node.node_id;
50
+
51
+ // 作成した地点をグローバル配列に格納する。
52
+
53
+ circles.push(circle)
54
+
55
+ return circle
56
+
45
- })
57
+ }
58
+
59
+ }
60
+
61
+
62
+
63
+ // 地点データを紐付ける
64
+
65
+ L.geoJson(geojson, {pointToLayer: hidingMarker})
46
66
 
47
67
 
48
68
 
49
- var info = (表示したい情報)
69
+ function clickEvt(e) {
50
70
 
51
- circle.bindPopup(info);
71
+ // カスタマイズしたpropertyは、e.target経由でアクセスできます。
52
72
 
53
- return circle
73
+ feature = e.target
54
74
 
55
- ```
75
+ // geometry.coordinateは、e.latlng経由でアクセスできます。
56
76
 
57
- としてはいかがでしょうか。
77
+ alert('node_id:' + feature.node_id + '\n緯度:' + e.latlng.lat + '\n経度:' + e.latlng.lng);
78
+
79
+ }
58
80
 
59
81
 
60
82
 
61
- (L.geoJson(geojson, {pointToLayer: hidingMarker},).addTo(map).on( 'click', function(e) { clickEvt(e); });
83
+ }
62
84
 
63
-
85
+ ```
64
-
65
- clickEvts()は削除)

5

2020/10/10 12:06

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -55,3 +55,11 @@
55
55
  ```
56
56
 
57
57
  としてはいかがでしょうか。
58
+
59
+
60
+
61
+ (L.geoJson(geojson, {pointToLayer: hidingMarker},).addTo(map).on( 'click', function(e) { clickEvt(e); });
62
+
63
+
64
+
65
+ clickEvts()は削除)

4

f

2020/10/10 07:59

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -46,7 +46,7 @@
46
46
 
47
47
 
48
48
 
49
- var info = (必要な情報)←表示したい情報
49
+ var info = (表示したい情報
50
50
 
51
51
  circle.bindPopup(info);
52
52
 

3

f

2020/10/10 07:57

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -1,10 +1,12 @@
1
1
  [Leafletのチュートリアル](https://leafletjs.com/examples/quick-start/)に記載されていることですが、
2
2
 
3
-
3
+ ```
4
4
 
5
5
  circle.bindPopup("文字列");
6
6
 
7
+ ```
8
+
7
- によって、設定したサークルをしたときに指定した文字列をポップアップすることができます。
9
+ によって、設定したサークルをクリしたときに指定した文字列をポップアップすることができます。
8
10
 
9
11
 
10
12
 

2

2020/10/10 07:56

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -51,3 +51,5 @@
51
51
  return circle
52
52
 
53
53
  ```
54
+
55
+ としてはいかがでしょうか。

1

修正

2020/10/10 07:56

投稿

sfdust
sfdust

スコア1137

test CHANGED
@@ -46,6 +46,8 @@
46
46
 
47
47
  var info = (必要な情報)←表示したい情報
48
48
 
49
- circle.bindPopup(infoo);
49
+ circle.bindPopup(info);
50
+
51
+ return circle
50
52
 
51
53
  ```