使用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);
}