Monacaで地図ライブラリLeafletを使うと、OpenStreetMapのZoomLevel17、18の表示が異常に遅くなります。
対処法をご教示いただきたく、以下、投稿させていただきました。
■確認事象
- OpenStreetMapでは、ZoomLevel 16までは直ぐに地図が表示されます。
- ZoomLevel17、18になると地図タイルの表示が異常に遅くなります(数分以上かかる)
- https://blog.mbaas.nifcloud.com/entry/7103 のサンプルでも同様の症状が発生
- Monacaは使わず、HTML等をwebサーバーに上げてブラウザで表示した場合は、ZoomLevel17、18でも遅くない
- 国土地理院の地図の場合は、ZoomLevel17、18でも地図の表示速度は問題ない(遅くない)
- LeafletのpreferCanvasオプションをtrueに設定しても状況は改善せず
- LeafletのライブラリをCDN経由ではなく、Monaca内に保存して呼び出しても症状改善せず
■動作環境
- Monaca Cloud IDEで開発
- [Onsen UI V2 JS Minimum]テンプレートを使用
- iOS 13.7
- Monaca Debugger 9.2.0
■Monacaのコード
- [Onsen UI V2 JS Minimum]テンプレートを使用し、下記コードのように記述
- OpenStreetMapでZoomeLevel17、18にした場合、地図タイルの表示が異常に遅い。
- 下記コードはZoomLevel14で初期表示。地図左上の[+]マークを2回押した所(ZoomLevel15、16)までは、地図タイルの表示速度に問題なし。3回目(ZoomLevel17)、4回目(ZoomLevel18)になると、地図タイルの表示が異常に遅い。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"> <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script src="components/loader.js"></script> <script src="lib/onsenui/js/onsenui.min.js"></script> <link rel="stylesheet" href="components/loader.css"> <link rel="stylesheet" href="lib/onsenui/css/onsenui.css"> <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css"> <link rel="stylesheet" href="css/style.css"> <!-- Leaflet --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <script> document.addEventListener('init', function(event) { var page = event.target; ons.ready(function() { console.log("Onsen UI is ready!"); if (page.id === 'map') { console.log("page #map"); // Zoom Level 14で地図表示 var map = L.map('mapid').setView([35.688544, 139.764692], 14); var gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }); var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors" }); var baseMaps = { "OpenStreetMap" : osm, "地理院地図" : gsi }; L.control.layers(baseMaps).addTo(map); // gsi.addTo(map); osm.addTo(map); //JIG-SAW本社の位置にマーカーを追加する。 var marker = L.marker([35.688544,139.764692]).addTo(map); //上のマーカーにポップアップを追加する。 marker.bindPopup("JIG-SAW本社").openPopup(); } }); }); if (ons.platform.isIPhoneX()) { document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); } </script> </head> <body> <ons-navigator swipeable id="myNav" page="map.html"></ons-navigator> <!-- ■地図ページ --> <template id="map.html"> <ons-page id="map"> <ons-toolbar> <div class="center">map</div> </ons-toolbar> <div id="mapid" style="width: 100%;height: 500px;"></div> </ons-page> </template> </body> </html>
■Monacaではなく、通常のウェブページで動作確認した時のコード
Windows10、chrome85で見た場合、OpenStreetMapでZoomeLevel17、18でも、地図タイルは素早く表示される
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>地理院地図を表示する</title> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" /> <script> document.addEventListener('init', function(event) { var page = event.target; ons.ready(function() { console.log("Onsen UI is ready!"); if (page.id === 'map') { console.log("page #map"); // Zoom Level 14で地図表示 var map = L.map('mapid').setView([35.688544, 139.764692], 14); var gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>" }); var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors" }); var baseMaps = { "OpenStreetMap" : osm, "地理院地図" : gsi }; L.control.layers(baseMaps).addTo(map); // gsi.addTo(map); osm.addTo(map); //JIG-SAW本社の位置にマーカーを追加する。 var marker = L.marker([35.688544,139.764692]).addTo(map); //上のマーカーにポップアップを追加する。 marker.bindPopup("JIG-SAW本社").openPopup(); } }); }); if (ons.platform.isIPhoneX()) { document.documentElement.setAttribute('onsflag-iphonex-portrait', ''); document.documentElement.setAttribute('onsflag-iphonex-landscape', ''); } </script> </head> <body> <ons-navigator swipeable id="myNav" page="map.html"></ons-navigator> <!-- ■地図ページ --> <template id="map.html"> <ons-page id="map"> <ons-toolbar> <div class="center">map</div> </ons-toolbar> <div id="mapid" style="width: 100%;height: 500px;"></div> </ons-page> </template> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。