teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問地図の範囲内に表示する地域メッシュの求め方

編集履歴

質問編集履歴

3

ソース削除

2021/08/07 09:59

投稿

stakezaki
stakezaki

スコア46

test CHANGED
File without changes
test CHANGED
@@ -1,147 +1 @@
1
1
  地図(googlemap)に[地域メッシュ](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5)を表示させたいと考えています。イメージはこんな感じです。=> [地域メッシュ](https://maps.multisoup.co.jp/exsample/mesh/mesh_search.html) つまり、４隅(左上、右上、左下、右下)を与えると、その範囲内にある地域メッシュ（４次メッシュ、５次メッシュ、6次メッシュ）を表示させたいのですが、範囲に含まれる地域メッシュの求め方がわかりません。（緯度経度から地域メッシュに変換する方法はわかります）。
2
-
3
-
4
-
5
- 以下は1次メッシュから３次メッシュまで表示するコードです。[このサイト](https://maps.multisoup.co.jp/exsample/mesh/mesh_search.html)のソースの一部 これを４次、5次、６次メッシュまで表示させれるようにしたい。
6
-
7
-
8
-
9
- JavaScriptで書きたいですがアルゴリズムだけでも構いません。よろしくお願いします。
10
-
11
-
12
-
13
- ```JavaScript
14
-
15
- google.maps.event.addListener(_map, 'bounds_changed', function() {
16
-
17
- console.log('zoom=', _map.getZoom());
18
-
19
-
20
-
21
- removeRects();
22
-
23
-
24
-
25
- var bounds = _map.getBounds();
26
-
27
- var mesh1 = latlngToMeshcode(bounds.getSouthWest()); //右下
28
-
29
- var mesh2 = latlngToMeshcode(bounds.getNorthEast()); //左上
30
-
31
- var mesh3 = latlngToMeshcode(new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng())); //右上
32
-
33
- var mesh4 = latlngToMeshcode(new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getSouthWest().lng())); //左下
34
-
35
-
36
-
37
- console.log('%s - %s - %s - %s', mesh1, mesh2, mesh3, mesh4);
38
-
39
-
40
-
41
- if (_map.getZoom() > 13) {
42
-
43
- // 3次メッシュ
44
-
45
- var y11 = parseInt(mesh1.substring(0, 6));
46
-
47
- var y12 = parseInt(mesh2.substring(0, 6));
48
-
49
- var y13 = parseInt(mesh3.substring(0, 6));
50
-
51
- var y14 = parseInt(mesh4.substring(0, 6));
52
-
53
- var arr1 = [y11, y12, y13, y14];
54
-
55
- var arr2 = arr1.filter(function(x, i, self) {
56
-
57
- return self.indexOf(x) === i;
58
-
59
- });
60
-
61
-
62
-
63
-
64
-
65
- $.each(arr2, function(i, code) {
66
-
67
- for (var k=0; k<10; k++) {
68
-
69
- for (var l=0; l<10; l++) {
70
-
71
- var mesh = code + k.toString() + l.toString();
72
-
73
- createRectByMesh(mesh);
74
-
75
- }
76
-
77
- }
78
-
79
- });
80
-
81
- }
82
-
83
- else if (_map.getZoom() > 9) {
84
-
85
- // 2次メッシュ
86
-
87
- var y11 = parseInt(mesh1.substring(0, 2));
88
-
89
- var x11 = parseInt(mesh1.substring(2, 4));
90
-
91
- var y12 = parseInt(mesh2.substring(0, 2));
92
-
93
- var x12 = parseInt(mesh2.substring(2, 4));
94
-
95
- for (var i=y11; i<=y12; i++) {
96
-
97
- for (var j=x11; j<=x12; j++) {
98
-
99
- for (var k=0; k<8; k++) {
100
-
101
- for (var l=0; l<8; l++) {
102
-
103
- var mesh = i.toString() + j.toString() + k.toString() + l.toString();
104
-
105
- createRectByMesh(mesh);
106
-
107
- }
108
-
109
- }
110
-
111
- }
112
-
113
- }
114
-
115
- }
116
-
117
- else if (_map.getZoom() > 5) {
118
-
119
- // 1次メッシュ
120
-
121
- var y11 = parseInt(mesh1.substring(0, 2));
122
-
123
- var x11 = parseInt(mesh1.substring(2, 4));
124
-
125
- var y12 = parseInt(mesh2.substring(0, 2));
126
-
127
- var x12 = parseInt(mesh2.substring(2, 4));
128
-
129
- for (var i=y11; i<=y12; i++) {
130
-
131
- for (var j=x11; j<=x12; j++) {
132
-
133
- var mesh = i.toString() + j.toString();
134
-
135
- createRectByMesh(mesh);
136
-
137
- }
138
-
139
- }
140
-
141
- }
142
-
143
-
144
-
145
- });
146
-
147
- ```

2

４隅に変更

2021/08/07 09:59

投稿

stakezaki
stakezaki

スコア46

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 地図(googlemap)に[地域メッシュ](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5)を表示させたいと考えています。イメージはこんな感じです。=> [地域メッシュ](https://maps.multisoup.co.jp/exsample/mesh/mesh_search.html) つまり、左下の緯度経度(a)と右上の緯度経度(b)を与えると、その範囲内にある地域メッシュ（４次メッシュ、５次メッシュ、6次メッシュ）を表示させたいのですが、範囲に含まれる地域メッシュの求め方がわかりません。（緯度経度から地域メッシュに変換する方法はわかります）。
1
+ 地図(googlemap)に[地域メッシュ](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5)を表示させたいと考えています。イメージはこんな感じです。=> [地域メッシュ](https://maps.multisoup.co.jp/exsample/mesh/mesh_search.html) つまり、４隅(左上、右上、左下、右下)を与えると、その範囲内にある地域メッシュ（４次メッシュ、５次メッシュ、6次メッシュ）を表示させたいのですが、範囲に含まれる地域メッシュの求め方がわかりません。（緯度経度から地域メッシュに変換する方法はわかります）。
2
2
 
3
3
 
4
4
 

1

サンプルコードの追加

2021/08/07 08:39

投稿

stakezaki
stakezaki

スコア46

test CHANGED
File without changes
test CHANGED
@@ -1 +1,147 @@
1
- 地図(googlemap)に[地域メッシュ](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5)を表示させたいと考えています。イメージはこんな感じです。=> https://maps.multisoup.co.jp/exsample/mesh/mesh_search.html つまり、左下の緯度経度(a)と右上の緯度経度(b)を与えると、その範囲内にある地域メッシュ（３次メッシュ、４次メッシュ、５次メッシュ）を表示させたいのですが、範囲に含まれる地域メッシュの求め方がわかりません。（緯度経度から地域メッシュに変換する方法はわかります）。JavaScriptで書きたいですがアルゴリズムだけでも構いません。よろしくお願いします。
1
+ 地図(googlemap)に[地域メッシュ](https://ja.wikipedia.org/wiki/%E5%9C%B0%E5%9F%9F%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5)を表示させたいと考えています。イメージはこんな感じです。=> [地域メッシュ](https://maps.multisoup.co.jp/exsample/mesh/mesh_search.html) つまり、左下の緯度経度(a)と右上の緯度経度(b)を与えると、その範囲内にある地域メッシュ（４次メッシュ、５次メッシュ、6次メッシュ）を表示させたいのですが、範囲に含まれる地域メッシュの求め方がわかりません。（緯度経度から地域メッシュに変換する方法はわかります）。
2
+
3
+
4
+
5
+ 以下は1次メッシュから３次メッシュまで表示するコードです。[このサイト](https://maps.multisoup.co.jp/exsample/mesh/mesh_search.html)のソースの一部 これを４次、5次、６次メッシュまで表示させれるようにしたい。
6
+
7
+
8
+
9
+ JavaScriptで書きたいですがアルゴリズムだけでも構いません。よろしくお願いします。
10
+
11
+
12
+
13
+ ```JavaScript
14
+
15
+ google.maps.event.addListener(_map, 'bounds_changed', function() {
16
+
17
+ console.log('zoom=', _map.getZoom());
18
+
19
+
20
+
21
+ removeRects();
22
+
23
+
24
+
25
+ var bounds = _map.getBounds();
26
+
27
+ var mesh1 = latlngToMeshcode(bounds.getSouthWest()); //右下
28
+
29
+ var mesh2 = latlngToMeshcode(bounds.getNorthEast()); //左上
30
+
31
+ var mesh3 = latlngToMeshcode(new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng())); //右上
32
+
33
+ var mesh4 = latlngToMeshcode(new google.maps.LatLng(bounds.getNorthEast().lat(), bounds.getSouthWest().lng())); //左下
34
+
35
+
36
+
37
+ console.log('%s - %s - %s - %s', mesh1, mesh2, mesh3, mesh4);
38
+
39
+
40
+
41
+ if (_map.getZoom() > 13) {
42
+
43
+ // 3次メッシュ
44
+
45
+ var y11 = parseInt(mesh1.substring(0, 6));
46
+
47
+ var y12 = parseInt(mesh2.substring(0, 6));
48
+
49
+ var y13 = parseInt(mesh3.substring(0, 6));
50
+
51
+ var y14 = parseInt(mesh4.substring(0, 6));
52
+
53
+ var arr1 = [y11, y12, y13, y14];
54
+
55
+ var arr2 = arr1.filter(function(x, i, self) {
56
+
57
+ return self.indexOf(x) === i;
58
+
59
+ });
60
+
61
+
62
+
63
+
64
+
65
+ $.each(arr2, function(i, code) {
66
+
67
+ for (var k=0; k<10; k++) {
68
+
69
+ for (var l=0; l<10; l++) {
70
+
71
+ var mesh = code + k.toString() + l.toString();
72
+
73
+ createRectByMesh(mesh);
74
+
75
+ }
76
+
77
+ }
78
+
79
+ });
80
+
81
+ }
82
+
83
+ else if (_map.getZoom() > 9) {
84
+
85
+ // 2次メッシュ
86
+
87
+ var y11 = parseInt(mesh1.substring(0, 2));
88
+
89
+ var x11 = parseInt(mesh1.substring(2, 4));
90
+
91
+ var y12 = parseInt(mesh2.substring(0, 2));
92
+
93
+ var x12 = parseInt(mesh2.substring(2, 4));
94
+
95
+ for (var i=y11; i<=y12; i++) {
96
+
97
+ for (var j=x11; j<=x12; j++) {
98
+
99
+ for (var k=0; k<8; k++) {
100
+
101
+ for (var l=0; l<8; l++) {
102
+
103
+ var mesh = i.toString() + j.toString() + k.toString() + l.toString();
104
+
105
+ createRectByMesh(mesh);
106
+
107
+ }
108
+
109
+ }
110
+
111
+ }
112
+
113
+ }
114
+
115
+ }
116
+
117
+ else if (_map.getZoom() > 5) {
118
+
119
+ // 1次メッシュ
120
+
121
+ var y11 = parseInt(mesh1.substring(0, 2));
122
+
123
+ var x11 = parseInt(mesh1.substring(2, 4));
124
+
125
+ var y12 = parseInt(mesh2.substring(0, 2));
126
+
127
+ var x12 = parseInt(mesh2.substring(2, 4));
128
+
129
+ for (var i=y11; i<=y12; i++) {
130
+
131
+ for (var j=x11; j<=x12; j++) {
132
+
133
+ var mesh = i.toString() + j.toString();
134
+
135
+ createRectByMesh(mesh);
136
+
137
+ }
138
+
139
+ }
140
+
141
+ }
142
+
143
+
144
+
145
+ });
146
+
147
+ ```