回答編集履歴
10
コメント修正
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
冒頭のコメントを修正
test
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
下記のコードは以下の点を修正点として反映しています。
|
|
2
2
|
|
|
3
|
+
+ グローバル配列circlesに、各地点データcircleを格納。
|
|
4
|
+
|
|
3
|
-
+ geoJson()関数の
|
|
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
参考
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
リファクタリング
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
|
-
|
|
71
|
+
p = e.target.feature.properties
|
|
74
72
|
|
|
75
73
|
// geometry.coordinateは、e.latlng経由でアクセスできます。
|
|
76
74
|
|
|
77
|
-
alert('node_id:' +
|
|
75
|
+
alert('node_id:' + p.node.node_id + '\n緯度：' + e.latlng.lat + '\n経度：' + e.latlng.lng);
|
|
78
76
|
|
|
79
77
|
}
|
|
80
78
|
|
6
修正
test
CHANGED
|
@@ -1,65 +1,85 @@
|
|
|
1
|
+
+ グローバル配列にcircleを格納します。
|
|
2
|
+
|
|
1
|
-
|
|
3
|
+
+ geoJson()関数の処理の段階で、クリックイベントの紐づけ登録まで完了させます。（onEachFeature引数不使用）
|
|
4
|
+
|
|
5
|
+
+ L.CircleMarker -> L.circleMarker が正しいです。
|
|
6
|
+
|
|
7
|
+
|
|
2
8
|
|
|
3
9
|
```
|
|
4
10
|
|
|
5
|
-
|
|
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
|
-
|
|
21
|
+
if (feature.properties.hide == 'true') {
|
|
18
22
|
|
|
19
|
-
|
|
23
|
+
// 地点データの作成とクリックイベントの登録
|
|
20
24
|
|
|
21
|
-
|
|
25
|
+
circle = L.circleMarker(
|
|
22
26
|
|
|
23
|
-
|
|
27
|
+
latlng,
|
|
24
28
|
|
|
25
|
-
|
|
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
|
-
|
|
39
|
+
}
|
|
36
40
|
|
|
37
|
-
|
|
41
|
+
).bindPopup(feature.properties.popupContent)
|
|
38
42
|
|
|
39
|
-
|
|
43
|
+
.addTo(map)
|
|
40
44
|
|
|
41
|
-
|
|
45
|
+
.on( 'click', function(e) { clickEvt(e); });
|
|
42
46
|
|
|
43
|
-
|
|
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
|
-
|
|
69
|
+
function clickEvt(e) {
|
|
50
70
|
|
|
51
|
-
|
|
71
|
+
// カスタマイズしたpropertyは、e.target経由でアクセスできます。
|
|
52
72
|
|
|
53
|
-
|
|
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
|
-
|
|
83
|
+
}
|
|
62
84
|
|
|
63
|
-
|
|
85
|
+
```
|
|
64
|
-
|
|
65
|
-
clickEvts()は削除）
|
5
ｔ
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
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
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
ｆ
test
CHANGED
|
@@ -51,3 +51,5 @@
|
|
|
51
51
|
return circle
|
|
52
52
|
|
|
53
53
|
```
|
|
54
|
+
|
|
55
|
+
としてはいかがでしょうか。
|
1
修正
test
CHANGED
|
@@ -46,6 +46,8 @@
|
|
|
46
46
|
|
|
47
47
|
var info = （必要な情報）←表示したい情報
|
|
48
48
|
|
|
49
|
-
circle.bindPopup(info
|
|
49
|
+
circle.bindPopup(info);
|
|
50
|
+
|
|
51
|
+
return circle
|
|
50
52
|
|
|
51
53
|
```
|