離線地圖

瓦片地圖原理

瓦片地圖由一片一片的地圖瓦片構成，它的尺寸是256px*256px，是一張張的圖片。下面的金字塔圖片，從上到下，呈一個指數關係的增加，最上面對應比例尺最小，表示範圍最大的地圖，通常而言，最大的這個就表明世界地圖整個的地球範圍。而後依次往下，對應不一樣的層級。

對於瓦片地圖256px*256px的圖片組成結構，有一套本身的座標系統。座標系統有三個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);