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