Previous Page Next Page
オープンソースによる地図表示（Leaflet編）４／９
2019/4/26 by T. Fujita
３、色々な表示
これまで OverLayを含む基本的な地図の表示方法について記載しました。
しかしながら、一般の地図では『スケール』や『広域地図』等が付いていますので、それらの表示方法について表示項目毎に説明します。
また、色々な表示の例とHTML及びJAVA Scriptのソースファイル内容を示します。
なお、単独で表示する場合は、『
Leaflet_Tutrial_301.html 』をクリックして下さい。
３－１、スケール表示
地図の左下部に表示されるスケールの設定をソースファイル内の緑文字の部分に示します。
３－２、広域地図表示
紫色の文字部分が広域地図表示の設定箇所です。
地図の左下部の「矢印」をクリックすると表示／非表示が切り替わります。
これは、Leaflet 用プラグイン『
Leaflet.MiniMap 』を使用して表示させています。
３－３、緯度・経度線表示
オレンジ色の文字部分が緯度・経度線表示の設定箇所です。
別ファイル『Leaflet_Graticule.css』及び『Leaflet_Graticule.JS』により緯度・経度線を作成しています。 なお、これらの別ファイルについては、以下に説明します。
３－４、マウス位置表示
赤文字の部分がマウス位置を右下に緯度・経度として表示する設定箇所です。
これも Leaflet 用プラグイン『
Leaflet.MousePosition 』を使用して表示させています。
３－５、検索窓表示
青文字の部分が右上に虫メガネマークの検索窓を表示する設定箇所です。 虫メガネマークにマウスを合わせると検索窓が表示され、場所の検索が可能となります。
Leaflet 用プラグイン『
Leaflet Control OSM Geocoder 』を使用して表示させています。
色々な表示の例
『Leaflet_Tutrial_301.html』のソースファイル内容
001 <!DOCTYPE html>
002 <html>
003 <head>
004 <title> Leaflet_Tutrial_301.html 2019/4/26 by T. Fujita </title>
005 <meta charset = "utf-8" />
006 <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />
007 <link rel="stylesheet" href = "./CSS/Leaflet_Graticule.css" />
008 <link rel="stylesheet" href = "./Plugins/Leaflet-MousePosition-master/src/L.Control.MousePosition.css" />
009 <link rel="stylesheet" href = "./Plugins/Leaflet-MiniMap-master/src/Control.MiniMap.css" />
010 <link rel = "stylesheet" href = "./Plugins/leaflet-control-osm-geocoder-master/Control.OSMGeocoder.css" />
011 <script src = "https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"> </script>
012 <script src = "./Plugins/leaflet-GIBS-master/src/GIBSMetadata.js"></script>
013 <script src = "./Plugins/leaflet-GIBS-master/src/GIBSLayer.js"></script>
014 <script src = "./Plugins/leaflet-ajax-master/dist/leaflet.ajax.js" ></script>
015 <script src = "Plugins/Leaflet-MousePosition-master/src/L.Control.MousePosition.js" ></script>
016 <script src = "Plugins/Leaflet-MiniMap-master/src/Control.MiniMap.js"></script>
017 <script src = "./Plugins/leaflet-control-osm-geocoder-master/Control.OSMGeocoder_SRC.js" ></script>
018 <script src = "./JS/Map_Data.js" ></script>
019 <script src = "./JS/Leaflet_Graticule.js" ></script>
020
021 <script>
022 var map;
023 var ClickLat, ClickLon, Act_Zoom, Pre_Zoom;
024 var Mouse_Position = L.control.mousePosition( {position:'bottomright'} );
025
026 function init() {
027 map = L.map('map').setView([35.65809922, 139.74135747], 8);
028 map.addLayer( Basic_Map[ 0 ] );
029 L.control.layers(baseMap, overLay).addTo(map);
030
031 L.control.scale().addTo(map);
032 Mouse_Position.addTo(map);
033 var osm2 = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {minZoom: 0, maxZoom: 15, attribution: 'Map data © OpenStreetMap contributors' });
034 var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true, position: 'bottomleft'}).addTo(map);
035 Grid_on_B();
036 map.on('click', function(e) {
037 ClickLat = e.latlng.lat;
038 ClickLon = e.latlng.lng;
039 if(flag_grid == 1)
040 {
041 Act_Zoom = map.getZoom();
042 Act_Ctn = map.getCenter();
043 if(Act_Zoom != Pre_Zoom)
044 {
045 grid( grid_line_col );
046 Pre_Zoom = Act_Zoom;
047 }
048 }
049 });
050 osmGeocoder = new L.Control.OSMGeocoder();
051 map.addControl(osmGeocoder);
052 }
053 </script>
054 </head>
055 <body onload="init()">
056 <div id="map" style="width: 100%; height: 400px; border: solid 1px"></div>
057 </body>
058 </html>
ここで、地図とOverlayを表示するJavascript部分については、『Leaflet_Tutrial_202.html』から変更はありませんので、
別ファイル『Map_Data.js』として切り出しました。 ソースファイル内容は次の通りです。
『Map_Data.js』のソースファイル内容
001 // Map_Data.js
002
003 var Basic_Map = new Array();
004 Basic_Map[ 0 ] = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
005 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
006 continuousWorld: false
007 });
008 Basic_Map[ 1 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
009 attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
010 });
011 Basic_Map[ 2 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
012 attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
013 });
014 Basic_Map[ 3 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
015 attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
016 });
017 Basic_Map[ 4 ] = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {
018 attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
019 });
020 Basic_Map[ 5 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
021 attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
022 variant: 'toner-background'
023 });
024 Basic_Map[ 6 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
025 attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
026 variant: 'toner-lite'
027 });
028 Basic_Map[ 7 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
029 minZoom: 1,
030 maxZoom: 16,
031 attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ',
032 variant: 'watercolor'
033 });
034 Basic_Map[ 8 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
035 attribution: 'Tiles © <a href="http://www.esrij.com/"> Esri Japan </a>'
036 });
037 Basic_Map[ 9 ] = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}', {
038 maxZoom: 13,
039 attribution: 'Tiles by <a href="http://www.esrij.com/"> Esri Japan </a>'
040 });
041 Basic_Map[ 10 ] = new L.GIBSLayer('Coastlines', {
042 date: new Date('2015/04/01'),
043 transparent: true
044 });
045
046 var baseMap = {
047 "OpenStreetMap": Basic_Map[ 0 ],
048 "国土地理院 標準地図": Basic_Map[ 1 ],
049 "国土地理院 淡色地図": Basic_Map[ 2 ],
050 "国土地理院 写真": Basic_Map[ 3 ],
051 "国土地理院 白地図": Basic_Map[ 4 ],
052 "Stamen Toner-Background": Basic_Map[ 5 ],
053 "Stamen Toner-Lite": Basic_Map[ 6 ],
054 "Stamen Watercolor": Basic_Map[ 7 ],
055 "Esri World Topo Map": Basic_Map[ 8 ],
056 "Esri Ocean Base Map": Basic_Map[ 9 ],
057 "NASA EOSDIS GIBS/Coast Lines": Basic_Map[ 10 ],
058 };
059
060
061 var Over_Layer = new Array();
062 Over_Layer[ 0 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
063 attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
064 '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — ' +
065 'Map data {attribution.OpenStreetMap}',
066 variant: 'toner-hybrid'
067 });
068 Over_Layer[ 1 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
069 attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
070 '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — ' +
071 'Map data {attribution.OpenStreetMap}',
072 variant: 'toner-lines'
073 });
074 Over_Layer[ 2 ] = L.tileLayer('http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png', {
075 attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
076 '<a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — ' +
077 'Map data {attribution.OpenStreetMap}',
078 variant: 'toner-labels'
079 });
080 Over_Layer[ 3 ] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
081 attribution: "<a href='http://www.openseamap.org' target='_blank'>OpenSeaMap</a> contributors"
082 });
083 Over_Layer[ 4 ] = new L.GIBSLayer('MODIS_Water_Mask', {
084 date: new Date('2018/11/15'),
085 transparent: true
086 });
087 Over_Layer[ 5 ] = new L.GeoJSON.AJAX(
088 // "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson",
089 // "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson",
090 // "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson",
091 // "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_week.geojson",
092 "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson",
093 // "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson",
094 // "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson",
095 // "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
096 // "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson",
097 {pointToLayer: function (feature, latlng) {
098 return L.circleMarker(latlng, {
099 radius: feature.properties.mag * feature.properties.mag / 3,
100 fillcolor: "#FF7800",
101 color: "#FF7800",
102 weight: 1,
103 opacity: 0.5,
104 fillOpacity: 0.5
105 }); },
106 onEachFeature: function (feature, layer) {
107 layer.bindPopup(new Date(feature.properties.time).toUTCString() + " / " + feature.properties.title);
108 }
109 });
110
111 var overLay = {
112 "Stamen toner-lines": Over_Layer[ 1 ],
113 "Stamen toner-labels": Over_Layer[ 2 ],
114 "OpenSeaMap": Over_Layer[ 3 ],
115 "GIBS Water Mask": Over_Layer[ 4 ],
116 "1W All Earthquake(Geojson)": Over_Layer[ 5 ]
117 };
緯度・経度線表示用のスタイルシートとJavaScriptの内容を以下に示します。
スタイルシートは、白線と黒線で表示できるように指定していますが、ここでは、黒線で表示する設定にしています。
『Leaflet_Tutrial_301.html』のソースファイルで、３５行目を『Grid_on_W();』に変更すると白線で緯度・経度線が表示されます。
また、表示例では、マウスをクリックするとズームに合わせて自動で緯度・経度線を表示するようにしています。
スタイルシート『Leaflet_Graticule.css』の内容
001 .grid_textStyle_W
002 {
003 color: #FFFFFF !important;
004 font: 12px arial, sans-serif !important;
005 width: 80px !important;
006 }
007
008 .grid_textStyle_B
009 {
010 color: #000000 !important;
011 font: 12px arial, sans-serif !important;
012 width: 80px !important;
013 };
『 Leaflet_Graticule.JS 』の内容
001 var grid_line_col = "FFFFFF";
002 var flag_grid = 0;
003 var grid_shape_A = new Array();
004 var grid_shape_B = new Array();
005 var grid_text_Lat = new Array();
006 var grid_text_Lng = new Array();
007
008 function Grid_on_W()
009 {
010 grid_line_col ="FFFFFF";
011 grid( grid_line_col );
012 flag_grid = 1;
013 }
014
015 function Grid_on_B()
016 {
017 grid_line_col ="000000";
018 grid( grid_line_col );
019 flag_grid = 1;
020 }
021
022 function Grid_off()
023 {
024 if( flag_grid == 1 ) {
025 del_grid();
026 }
027 flag_grid = 0;
028 }
029
030 function grid( grid_line_col )
031 {
032 if( flag_grid == 1 ) {
033 del_grid();
034 }
035
036 var zoom = map.getZoom();
037 var c_point = map.getCenter();
038 var temp_Lat = c_point.lat;
039 var temp_Lng = c_point.lng;
040 var grid_Lat = new Array();
041 var grid_Lng = new Array();
042 var grid_pos_A = new Array();
043 var grid_pos_B = new Array();
044 var infobox_Lat;
045 var infobox_Lng;
046 var grid_i = 30;
047 var c_pos_Lat = 30 * Math.floor(temp_Lat/30);
048 var c_pos_Lng = 30 * Math.floor(temp_Lng/30);
049 var NS = " N";
050 var EW = " E";
051 var Temp_min, Temp_max;
052 var Temp_West = map.getBounds().pad(0.0).getWest();
053 var Temp_North = map.getBounds().pad(0.0).getNorth();
054
055 if( zoom == 3 )
056 {
057 grid_i = 30;
058 var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
059 var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
060 }
061 if( zoom == 4 )
062 {
063 grid_i = 10;
064 var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
065 var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
066 }
067 if( zoom == 5 )
068 {
069 grid_i = 5;
070 var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
071 var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
072 }
073 if( zoom == 6 )
074 {
075 grid_i = 2.5;
076 var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
077 var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
078 }
079 if( zoom == 7 )
080 {
081 grid_i = 2;
082 var c_pos_Lat = grid_i * Math.floor(temp_Lat / grid_i);
083 var c_pos_Lng = grid_i * Math.floor(temp_Lng / grid_i);
084 }
085 if( zoom == 8 )
086 {
087 grid_i = 1;
088 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 2) / 2;
089 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 2) / 2;
090 }
091 if( zoom == 9 )
092 {
093 grid_i = 30/60;
094 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 3) / 3;
095 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 3) / 3;
096 }
097 if( zoom == 10 )
098 {
099 grid_i = 20/60;
100 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 6) / 6;
101 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 6) / 6;
102 }
103 if( zoom == 11 )
104 {
105 grid_i = 10/60;
106 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 20) / 20;
107 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 20) / 20;
108 }
109 if( zoom == 12 )
110 {
111 grid_i = 5/60;
112 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 30) / 30;
113 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 30) / 30;
114 }
115 if( zoom == 13 )
116 {
117 grid_i = 2/60;
118 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 60) / 60;
119 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 60) / 60;
120 }
121 if( zoom == 14 )
122 {
123 grid_i = 1/60;
124 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 200) / 200;
125 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 200) / 200;
126 }
127 if( zoom == 15 )
128 {
129 grid_i = 0.5/60;
130 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 300) / 300;
131 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 300) / 300;
132 }
133 if( zoom == 16 )
134 {
135 grid_i = 0.2/60;
136 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 600) / 600;
137 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 600) / 600;
138 }
139 if( zoom == 17 )
140 {
141 grid_i = 0.1/60;
142 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 2000) / 2000;
143 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 2000) / 2000;
144 }
145 if( zoom == 18 )
146 {
147 grid_i = 0.05/60;
148 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 3000) / 3000;
149 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 3000) / 3000;
150 }
151 if( zoom == 19 )
152 {
153 grid_i = 0.02/60;
154 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 3000) / 3000;
155 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 3000) / 3000;
156 }
157 if( zoom >=20 )
158 {
159 grid_i = 0.01/60;
160 var c_pos_Lat = Math.floor(temp_Lat) + Math.floor((temp_Lat - Math.floor(temp_Lat)) * 6000) / 6000;
161 var c_pos_Lng = Math.floor(temp_Lng) + Math.floor((temp_Lng - Math.floor(temp_Lng)) * 6000) / 6000;
162 }
163
164 Temp_min = c_pos_Lat - grid_i * 20;
165 Temp_max = c_pos_Lat + grid_i * 20;
166 if(Temp_min < -90)
167 {
168 Temp_min = -90;
169 }
170 if(Temp_max > 90)
171 {
172 Temp_max = 90;
173 }
174 j = 0;
175 for ( i = Temp_min; i <= Temp_max; i = i + grid_i )
176 {
177 grid_Lat[ j ] = i;
178 j = j + 1;
179 }
180
181 Temp_min = c_pos_Lng - grid_i * 20;
182 Temp_max = c_pos_Lng + grid_i * 20;
183 if(Temp_min < -360)
184 {
185 Temp_min = -360;
186 }
187 if(Temp_max > 360)
188 {
189 Temp_max = 360;
190 }
191 j = 0;
192 for ( i = Temp_min; i <= Temp_max; i = i + grid_i )
193 {
194 grid_Lng[ j ] = i;
195 j = j + 1;
196 }
197
198 j = grid_Lat.length - 1;
199 for ( i = 0; i <= j; i ++ )
200 {
201 grid_pos_A = [ [ grid_Lat[i], -360 ], [ grid_Lat[i], 360 ] ];
202 grid_shape_A[i] = L.polyline([ grid_pos_A ],
203 { color: "#"+grid_line_col,
204 weight: 1,
205 opacity: 0.5
206 });
207 grid_shape_A[i].addTo(map);
208 if (grid_Lat[i] >= 0)
209 {
210 NS = "'N";
211 }
212 else
213 {
214 NS = "'S";
215 }
216 var grid_Lat_dsp = Math.abs( grid_Lat[i]);
217 infobox_Lat = Math.floor(grid_Lat_dsp) + "°" + Math.round(6000 * (grid_Lat_dsp - Math.floor(grid_Lat_dsp)))/100 + NS;
218 if( grid_line_col == "FFFFFF" ) {
219 grid_text_Lat[ i ] = L.marker([ grid_Lat[i], Temp_West ], {
220 icon: L.divIcon({
221 className: 'grid_textStyle_W',
222 html: infobox_Lat,
223 iconAnchor: [-10,6]
224 }),
225 draggable: true,
226 zIndexOffset: 100
227 });
228 } else {
229 grid_text_Lat[ i ] = L.marker([ grid_Lat[i], Temp_West ], {
230 icon: L.divIcon({
231 className: 'grid_textStyle_B',
232 html: infobox_Lat,
233 iconAnchor: [-10,6]
234 }),
235 draggable: true,
236 zIndexOffset: 100
237 });
238 }
239 grid_text_Lat[ i ].addTo(map);
240 }
241
242 j = grid_Lng.length - 1;
243 for ( i = 0; i <= j; i ++ )
244 {
245 grid_pos_B = [ [ -90, grid_Lng[i]] , [ 90, grid_Lng[i] ] ];
246 grid_shape_B[i] = L.polyline([ grid_pos_B ],
247 { color: "#"+grid_line_col,
248 weight: 1,
249 opacity: 0.5
250 });
251 grid_shape_B[i].addTo(map);
252 if (grid_Lng[i] >= 0)
253 {
254 EW = "'E";
255 }
256 else
257 {
258 EW = "'W";
259 }
260
261 var grid_Lng_dsp = Math.abs( grid_Lng[i]);
262 if(grid_Lng[i] >= -180 && grid_Lng[i] <= 180) {
263 infobox_Lng = Math.floor(grid_Lng_dsp) + "°" + Math.round(6000 * (grid_Lng_dsp - Math.floor(grid_Lng_dsp)))/100 + EW;
264 }
265 if(grid_Lng[i] < -180) {
266 grid_Lng_dsp = Math.abs(grid_Lng[i] + 360);
267 EW = "E";
268 infobox_Lng = Math.floor(grid_Lng_dsp) + "°" + Math.round(6000 * (grid_Lng_dsp - Math.floor(grid_Lng_dsp)))/100 + EW;
269 }
270 if(grid_Lng[i] > 180) {
271 grid_Lng_dsp = Math.abs(grid_Lng[i] - 360);
272 EW = "W";
273 infobox_Lng = Math.floor(grid_Lng_dsp) + "°" + Math.round(6000 * (grid_Lng_dsp - Math.floor(grid_Lng_dsp)))/100 + EW;
274 }
275
276 if( grid_line_col == "FFFFFF" ) {
277 grid_text_Lng[ i ] = L.marker([ Temp_North, grid_Lng[i] ], {
278 icon: L.divIcon({
279 className: 'grid_textStyle_W',
280 html: infobox_Lng,
281 iconAnchor: [15,-10]
282 }),
283 draggable: true,
284 zIndexOffset: 101
285 });
296 } else {
287 grid_text_Lng[ i ] = L.marker([ Temp_North, grid_Lng[i] ], {
288 icon: L.divIcon({
289 className: 'grid_textStyle_B',
290 html: infobox_Lng,
291 iconAnchor: [15,-10]
292 }),
293 draggable: true,
294 zIndexOffset: 101
295 });
296 }
297 grid_text_Lng[ i ].addTo(map);
298 }
299 }
300
301 function del_grid()
302 {
303 var j = grid_shape_A.length - 1;
304 for(i=0; i<=j; i++) {
305 map.removeLayer(grid_shape_A[i])
306 }
307 var j = grid_shape_B.length - 1;
308 for(i=0; i<=j; i++) {
309 map.removeLayer(grid_shape_B[i])
310 }
311 var j = grid_text_Lat.length - 1;
312 for(i=0; i<=j; i++) {
313 map.removeLayer(grid_text_Lat[i])
314 }
315 var j = grid_text_Lng.length - 1;
316 for(i=0; i<=j; i++) {
317 map.removeLayer(grid_text_Lng[i])
318 }
319 }
Previous Page Next Page