瓦片地圖原理

瓦片地圖由一片一片的地圖瓦片構成，它的尺寸是256px256px，是一張張的圖片。下面的金字塔圖片，從上到下，呈一個指數關系的增長，最上面對應比例尺最小，表示范圍最大的地圖，一般而言，最大的這個就代表世界地圖整個的地球范圍。然后依次往下，對應不同的層級。

對于瓦片地圖256px256px的圖片組成結構，有一套自己的坐標系統。坐標系統有三個x,y,z。x,y確定當前瓦片的位置，z表示當前瓦片的縮放級別，對應的是金字塔里面的層級。

第一級瓦片

第二級瓦片

以指數增長，比例尺越來越大，清晰度越來越高。

瓦片地圖的優勢：

• 高效緩存
• 漸進加載
• 簡單易用

離線地圖插件 - Leaflet

Leaflet是一個離線的地圖插件，也是完全遵循瓦片地圖的國際標準。在使用Leaflet時，首先需要獲取它的js文件，可以直接去官網下載（https://leafletjs.com/ ），下載后，創建地圖：

• 顯示地圖 //定義一個變量，L.map使用了一個id為map的div，之后setview 設置當前適口顯示的地理坐標點和賦予它的層級var map = L.map('map').setView([51.505, -0.09], 13);//手動指定瓦片地圖源L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
• 顯示地圖之后，我們需要添加一些地圖的插件，比如添加一個Marker、Popup L.marker([51.5, -0.09]).addTo(map).bindPopup('FirstMarker').openPopup();
• 除此之外還可以，添加線條 //確定坐標點var latlngs = [[51.5, -0.09],[55.5, -1.09],[56.5, -2.09]];var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
• 添加多邊形 var latlngs = [[50, 0],[51, -1],[52, -2],[51, -3]];var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);

總結

以上是生活随笔為你收集整理的离线地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。