离线地图

瓦片地图原理

瓦片地图由一片一片的地图瓦片构成，它的尺寸是256px*256px，是一张张的图片。下面的金字塔图片，从上到下，呈一个指数关系的增加，最上面对应比例尺最小，表示范围最大的地图，通常而言，最大的这个就表明世界地图整个的地球范围。而后依次往下，对应不一样的层级。缓存

对于瓦片地图256px*256px的图片组成结构，有一套本身的坐标系统。坐标系统有三个x,y,z。x,y肯定当前瓦片的位置，z表示当前瓦片的缩放级别，对应的是金字塔里面的层级。插件

第一级瓦片3d

第二级瓦片code

以指数增加，比例尺愈来愈大，清晰度愈来愈高。blog

瓦片地图的优点：图片

• 高效缓存
• 渐进加载
• 简单易用

离线地图插件 - Leaflet

Leaflet是一个离线的地图插件，也是彻底遵循瓦片地图的国际标准。在使用Leaflet时，首先须要获取它的js文件，能够直接去官网下载（https://leafletjs.com/ ），下载后，建立地图：get

• 显示地图

  //定义一个变量，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);