forLeaflet的动态轨迹

2017-05-12
项目开发中用到了superMap 再次做一下知识点记录以及工作中遇到的问题，此次在项目中用到的是for Leaflet
地图动态坐标和轨迹

1	<div id="map" style="width: 100%;height: 100%;"></div>
export default {
   data() {
       return{
            //地图底图地址
            url: "http://192.168.1.1/iserver/services/map-hljmapBz2/rest/maps/%E7%BB%BC%";
            map:null,
            cities:null,//坐标图层
            lineer:null,//轨迹图层
            tractory:null,//运动轨迹
            count:0,
            timeer:null,
            markerData:[],
       }
   },
   mounted(){
       this.showMap();
   },
   methods:{
       //显示轨迹地图
       showMap() {
           this.count = 0;
           this.$nextTick(()=>{
               this.initPeopelMap();
           })
       },
       //初始化地图
       initPeopelMap(){
           //地图图层在的话就删除 否则报错
           if(this.map != undefined || this.map != null){
               this.map.remove();
           }
           this.cities = L.layerGroup();
           this.lineer = L.layerGroup();
           //每次创建前先清除cities图层 防止图标覆盖越来越多
           this.cities.clearLayers();
           this.map = L.map('map', {
               crs: L.CRS.EPSG4326,
               center: [43.98943443260177, 131.0758696340458],////[纬度，经度]
               maxZoom: 18,
               minZoom:3,
               zoom: 10,
               layers: [this.cities,this.lineer]
           });
           var overlays = {
               "Marker": this.cities,
               "Line":this.lineer
           };
           //比例尺
           L.control.scale().addTo(this.map);
           L.control.layers(overlays).addTo(this.map);
           this.markerData = [
               {lat:"131.08827375661554",lng:"44.10663504699654",name:'李明1'},
               {lat:"131.0937688939178",lng:"44.08227317375171",name:'李明1'},
               {lat:"131.09514267824332",lng:"44.06340130011136",name:'李明1'},
               {lat:"131.09548612432474",lng:"44.01707942844866",name:'李明1'},
               {lat:"131.0889606487783",lng:"43.98413943082186",name:'李明1'},
               {lat:"131.0858696340458",lng:"44.01707942844866",name:'李明1'},
               {lat:"131.0858696340458",lng:"43.95943443260177",name:'李明1'},
               {lat:"131.06079807010428",lng:"43.948797558368106",name:'李明1'},
               {lat:"131.0494643494184",lng:"43.93198443457943",name:'李明1'},
               {lat:"131.01436899014675",lng:"43.91561022926043",name:'李明1'},
               {lat:"130.98826708796105",lng:"43.90016960537286",name:'李明1'},
           ]
           clearInterval(this.timeer);
           this.timeer = setInterval(()=>{
               this.showPoint(this.markerData);//创建动态坐标点
               this.showTractory(this.markerData);//创建轨迹
               this.count++;
           },2000)
           L.supermap.tiledMapLayer(this.url, {
               transparent: true,
               opacity: 0.6
           }).addTo(this.map);
       },
       showPoint(markerData){
           var self = this
           this.count >= markerData.length;
           if(this.count >= markerData.length){
               clearInterval(this.timeer);
               self.count = markerData.length-1;//markerData[count]本次要显示的标记点
           }
           if(this.marker != null){
               this.marker.remove(); //移除上一个点
           }
           this.creatMarker(markerData[this.count]);
       },
       //运动轨迹
       showTractory(markerData){
           if(this.tractory != null){
               this.tractory.remove(); //移除上一次刷新时的轨迹
           }
           var tractoryData = [];
           for(var i = 0; i <= this.count; i++){
               tractoryData.push([
                   markerData[i].lng,markerData[i].lon
               ]);
           };
           //动态的轨迹线 leaflet-ant-path
           this.tractory = new L.Polyline.AntPath(tractoryData, {
               paused: false,//暂停  初始化状态
               delay: 2000,//延迟，数值越大效果越缓慢
               reverse: false,　　//方向反转
               color: 'blue',
               //"pulseColor": "#FFFFFF"　　//块颜色
               dashArray: [10, 20],　//间隔样式
               weight: 3,　　　　//线宽
               fillColor: '#ccc',//颜色
               fillOpacity: 0.5,
               radius: 500
           });
           //把动态路线添加到地图上
           this.tractory.addTo(this.lineer)
       },
       //创建自定义标注
       creatMarker(data,clickHandle,hoverHandle){
           var self = this;
           var iconStyle =L.icon ({
               iconUrl: '../../../../static/images/map/peopelIcon.png',
               iconSize: [30, 35],
           });
           this.marker = L.marker([data.lng,data.lat],{
               icon: iconStyle,
               draggable: false,//marker是否可以拖动
           }).addTo(this.cities);
           this.marker.on({
               'click': clickHandle
           });
           //maker上自定义一个Tooltip     自定义popup方法一样 放到悬浮事件位置会出错
           const html = `<p>${data.name}</p>`
           this.tooltip = this.marker.bindTooltip(html, {
               maxHeight: 250,
               maxWidth: 490,
               className: 'tooltipMap',
               offset: [0, 20],
               direction:'bottom'
           }).on('tooltipopen', function (params) {

           });
       },
       //标注点击事件
       handleClick(data,even){
           console.log(data);
       },
   }
}