使用leaflet做地圖展示

何為leaflet？

leaflet是一個適用於移動設備的交互式地圖的開源JavaScript庫。簡單來說，就是你在前端頁面想要展示一個地圖時，可以調用的開源JavaScript庫。

如何創建？

1、想要在頁面展示一個地圖，首先前端得有一個盒子容納這個地圖。即:

　　<div id="mapid" class="map"></div>其中具體的樣式可按個人喜好在div中定義

2、創建地圖。

　　既然leaflet是一個JavaScript庫，其代碼在前端也應該寫在一個<script></script>標簽中

　　在<script></script>標簽中創建地圖的代碼有如下兩種方式：

　　方式一：

　　　　

var map = L.map('mapid',{

　　　　attributionControl:false,//是否將右下角的信息添加到地圖中

　　　　center:${totalData.center},//地圖的初始地理中心，otalData.center對應后台傳過來的中心點坐標

　　　　//zoomAnimation:false,//是否啟用地圖縮放動畫

　　　　//trackResize:false,//地圖是否自動處理瀏覽器窗口調整大小以更新自身

　　　　zoom:11,//初始地圖縮放級別

　　　　//maxBoundsViscosity:1.0,//控制拖動地圖時邊界的實體程度

　　　　minZoom:4//地圖最小縮放級別

　　　　});

 

　　方式二：

　　　　

var map = L.map('mapid').setView([31.245105, 121.506377], 8)//兩個參數，前一個為地圖中心點坐標（緯度，經度），后一個參數為縮放級別

 

3、創建圖層，展示地圖。

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
                attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
                maxZoon: 18,
                id: 'mapbox/streets-v11',
                accessToken: 'pk.eyJ1IjoieHV0b25nOCIsImEiOiJjazQwd2g4eXcwNjg1M2ttazd5MnBjbGI3In0.Z6ZS9yKwuiatkYxl0D6O2g'
            }).addTo(mymap)

4、地圖中的一些其他使用。

　　a)、地圖標記點

//添加marker(地圖標記)
var marker = L.marker([31.245105, 121.506377]).addTo(mymap)
marker.bindPopup('這里是東方明珠塔！').openPopup()//標記點顯示文本

　　b)、地圖軌跡顯示

//地圖添加運動軌跡
var point = [[31.23691,121.50109],[31.23136,121.47004],[31.24166,121.48612],[31.19590,121.34113]];//自定義軌跡點
var count = 0;
var marker, tractory;
var interval = window.setInterval(function(){
    showPoint();
    showTractory();
    count++;
},1000)//每一秒刷新一次

//動態顯示標記點
function showPoint(){
    if(count >= point.length){
        window.clearInterval(interval);
        count = 0;
        return;
    }
    if(marker != null){
        marker.remove();//移除上一個點
    }
    marker = L.marker(point[count]);//顯示本次的標記點
    marker.addTo(mymap);//將標記點添加到地圖
}

//運動軌跡
function showTractory(){
    if(count >= point.length){//顯示完全部點位后不再循環
        window.clearInterval(interval);
        count = 0;
        return;
    }
    //if(tractory != null){
    //    tractory.remove();//移除上一次刷新的軌跡
    //}
    var tractoryData = [];
    for(var i = 0; i <= count; i++){
        tractoryData[i] = point[i];
    }
    tractory = L.polyline(tractoryData, {color: 'red'});
    tractory.addTo(mymap);
}