Vue 航线轨迹回放 以及聚合功能实现

Vue 航线轨迹回放 以及聚合功能实现

Gitee 地址 https://gitee.com/suixishix/leaflet-map.git

Vue下载leaflet 以及 leaflet.animatedmarker 插件

npm install leaflet
npm i -save leaflet.animatedmarker

引入，在项目main.js中

//导入leaflet css js
import 'leaflet/dist/leaflet.css'
import * as L from 'leaflet'
//挂载Vue.L
Vue.L = Vue.prototype.$L = L

在需要使用的页面引入  leaflet.animatedmarker
import 'leaflet.animatedmarker/src/AnimatedMarker';

1.初始化地图

//HTML
<template>
  <div>
    <button @click="Get">ss</button>
    <div id="map" style="margin:0 auto;width: 100%;height: 100vh"></div>
  </div>
</template>

//script
	//初始化
    initmap: function () {
      // 图层
      let baseLayer = L.tileLayer(
          "http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=cda0933a3f64de1ae589eedeb0cb9010",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      )
      var tiandituimg = L.tileLayer(
          "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=cda0933a3f64de1ae589eedeb0cb9010",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      )
      this.map = L.map("map", {
        center: ["28.240356445312","109.41284179688"],
        zoom: 6.5,
        maxZoom: 20,
        minZoom: 5,
        attributionControl: false, // 移除右下角leaflet标识
        zoomControl: false,
        ///编辑插件
        editable: true,
        crs: L.CRS.EPSG4326,
      });

      baseLayer.addTo(this.map).setZIndex(10);
      tiandituimg.addTo(this.map)
    },

完整代码

<template>
  <div>
    <button @click="Get">ss</button>
    <div id="map" style="margin:0 auto;width: 100%;height: 100vh"></div>
  </div>
</template>
<script>
import L from 'leaflet'
import 'leaflet.animatedmarker/src/AnimatedMarker';
export default {
  name: 'gis-population-density',
  data () {
    return {
      latlngs: [["28.240356445312","109.41284179688"],["28.2403561125","109.312841733"]],
      map: null
    }
  },
  mounted () {
    this.initmap()
    // this.Get()
    this.GetLine()
  },
  methods: {
      //点击触发点击事件 开始进行轨迹回放
    Get(){
      let car =require('@/assets/uav.png')
      var carIcon = L.icon({
        iconUrl: car,//图片
        iconSize: [60,60],//尺寸
        iconAnchor: [30, 30],
        popupAnchor: [0, 0]
      });
        //关键代码
      let animatedMarker = L.animatedMarker(this.latlngs, {
        icon: carIcon,
        interval: 1000,//频率
      }).addTo(this.map)
    },
    initmap: function () {
      // 图层
      let baseLayer = L.tileLayer(
          "http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=6c6c18e4ec555ea8f0976ec71960021f",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      )
      var tiandituimg = L.tileLayer(
          "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=6c6c18e4ec555ea8f0976ec71960021f",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      )
      this.map = L.map("map", {
        center: ["28.240356445312","109.41284179688"],
        zoom: 6.5,
        maxZoom: 20,
        minZoom: 5,
        attributionControl: false, // 移除右下角leaflet标识
        zoomControl: false,
        ///编辑插件
        editable: true,
        crs: L.CRS.EPSG4326,
      });

      baseLayer.addTo(this.map).setZIndex(10);
      tiandituimg.addTo(this.map)
    },
    GetLine(){
     let polyline = L.polyline(this.latlngs, {
        color: '#00CED1',
      })
      polyline.addTo(this.map)
      for (var i = 0; i<=this.latlngs.length;i++ ) {
        let lng = this.latlngs[i][1]
        let lat = this.latlngs[i][0]
        this.addbillboard(lng, lat, require('@/assets/sign113.png'), 80, 80, `<div style="border-radius: 5px;background-color: #0b88e9ba;padding: 3px;text-align: center;" class='leaflet-fly'>航测点${i+1}</div>`, 55, 20, 28, 45, "leaflet-marker",name)
      }
    },
    /**
     * 添加标记点 图片+文本
     * @param {*} lng  经度
     * @param {*} lat  纬度
     * @param {*} iconurl  图片地址
     * @param {*} iconwidth 图片宽度
     * @param {*} iconheight  图片高度
     * @param {*} label  需要显示的注记,传一个div 可配置样式
     * @param {*} labelwidth  label的最大宽度
     * @param {*} labelheight  label的最大高度
     * @param {*} labeloffsetx  label左右偏移
     * @param {*} labeloffsety  label上下偏移
     * @param {*} classname  传过来div的class
     * @param feature
     */
    addbillboard(lng, lat, iconurl, iconwidth, iconheight, label, labelwidth, labelheight, labeloffsetx, labeloffsety, classname,feature) {
      //单独展示图片 并绑定点击展示的起泡内容  bubble （可以为一个html 或者dom  或者单独的文本）
      let marker = L.marker([lat, lng], {
        icon: L.icon({
          iconUrl: iconurl,
          iconSize: [iconwidth, iconheight],
        }),
        feature:feature
      }).addTo(this.map).bindPopup('气泡展示')

      marker.on('click', (e) => {
        //   图片的点击事件
        let feature = e.target.options.feature
        // debugger
      })
      //展示文本
      L.marker([lat, lng], {
        icon: L.divIcon({
          html: label,
          className: classname,
          iconSize: [labelwidth, labelheight],
          iconAnchor: [labeloffsetx, labeloffsety]
        })
      }).addTo(this.map)
    }
  }
}
</script>
<style>
#map {
  width: 100%;
  height: calc(100vh);
  z-index: 1;
}
.leaflet-label {
  border-radius: 5px;
  background-color: #0b88e9ba;
  padding: 3px;
  text-align: center;
}
.leaflet-marker {
  color: antiquewhite;
}
.sideMap{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 9999;
}
</style>
![在这里插入图片描述](https://img-blog.csdnimg.cn/b5af567150bd45b89270a16b1ddabc6f.png#pic_center)

2.Leaflet 聚合功能

安装插件

在assets文件夹下面创建leaflet-markercluster
引入  leaflet-markercluster 的css和js文件

在组件页面导入
//关于这些文件请在我的资源中进行下载

import '@/assets/JS/leaflet-markercluster/leaflet.markercluster-src'
import '@/assets/JS/leaflet-markercluster/MarkerCluster.Default.css'
import '@/assets/JS/leaflet-markercluster/MarkerCluster.css'

定义模拟数据

  data() {
    return {
        //关键代码 将方法挂载
      markers : L.markerClusterGroup(),
      map: "",
      querygroup:null,
        //模拟数据
      list:[{lng:112.9,lat:28.68},{lng:112.8,lat:28.68},{lng:112.7,lat:28.68},{lng:112.6,lat:28.68},{lng:112.5,lat:28.68}]
    };
  },

定义方法

    addbillboard(lng, lat, iconurl, iconwidth, iconheight, label, labelwidth, labelheight, labeloffsetx, labeloffsety, classname,markers) {
        //title为   气泡内容
      var title =`aaa` ;
      var marker = L.marker([lat, lng], {
        icon: L.icon({
          iconUrl: iconurl,
          iconSize: [iconwidth, iconheight],
        })
      });
      //气泡框
      marker.bindPopup(title);
      //关键代码 //将点marker添加进markerCluserGroup
      this.markers.addLayer(marker);
    },

完整聚合代码代码

<template>
  <div>
    <div id="map"></div>
  </div>
</template>
<script>
import '@/assets/JS/leaflet-markercluster/leaflet.markercluster-src'
import '@/assets/JS/leaflet-markercluster/MarkerCluster.Default.css'
import '@/assets/JS/leaflet-markercluster/MarkerCluster.css'
export default {
  data() {
    return {
      markers : L.markerClusterGroup(),
      map: "",
      querygroup:null,
      list:[{lng:112.9,lat:28.68},{lng:112.8,lat:28.68},{lng:112.7,lat:28.68},{lng:112.6,lat:28.68},{lng:112.5,lat:28.68}]
    };
  },
  mounted() {
    this.initDate();
    for (var i of this.list){
      this.addbillboard(i.lng, i.lat, require('@/assets/sign113.png'), 80, 80, `<div style="border-radius: 5px;background-color: #0b88e9ba;padding: 3px;text-align: center;" class='leaflet-label'>标记点</div>`, 45, 20, 22, 45, "leaflet-marker",'frature')
    }
    this.map.addLayer(this.markers);
   },
  methods: {
    initDate() {
      this.map = L.map("map", {
        center: [27.68, 112],
        zoom: 6.5,
        maxZoom: 20,
        minZoom: 5,
        attributionControl: false, // 移除右下角leaflet标识
        zoomControl: false,
        ///编辑插件
        editable: true,
        crs: L.CRS.EPSG4326,
      });
      var tiandituimg = L.tileLayer(
          "http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=6c6c18e4ec555ea8f0976ec71960021f",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      ).addTo(this.map);
      var tianditucia = L.tileLayer(
          "http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=6c6c18e4ec555ea8f0976ec71960021f",
          {
            maxNativeZoom: 17,
            maxZoom: 23,
            tileSize: 256,
            zoomOffset: 1,
          }
      ).addTo(this.map).setZIndex(10);
      this.querygroup = L.layerGroup().addTo(this.map)
    },

    /**
     * 添加标记点 图片+文本
     * @param {*} lng  经度
     * @param {*} lat  纬度
     * @param {*} iconurl  图片地址
     * @param {*} iconwidth 图片宽度
     * @param {*} iconheight  图片高度
     * @param {*} label  需要显示的注记,传一个div 可配置样式
     * @param {*} labelwidth  label的最大宽度
     * @param {*} labelheight  label的最大高度
     * @param {*} labeloffsetx  label左右偏移
     * @param {*} labeloffsety  label上下偏移
     * @param {*} classname  传过来div的class
     * @param feature
     */
    addbillboard(lng, lat, iconurl, iconwidth, iconheight, label, labelwidth, labelheight, labeloffsetx, labeloffsety, classname) {
  // title 为气泡展示内容
      var title =`aaa` ;
      var marker = L.marker([lat, lng], {
        icon: L.icon({
          iconUrl: iconurl,
          iconSize: [iconwidth, iconheight],
        })
      });
      //气泡框
      marker.bindPopup(title);
      // //将点marker添加进markerCluserGroup
      this.markers.addLayer(marker);
    },
  }
};
</script>

<style  scoped>
#map {
  width: 100%;
  height: calc(100vh);
  z-index: 1;
}
.leaflet-label {
  border-radius: 5px;
  background-color: #0b88e9ba;
  padding: 3px;
  text-align: center;
}
.leaflet-marker {
  color: antiquewhite;
}
.sideMap{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 9999;
}
</style>

/script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/714f68cdeb354583b88134a24aca6c27.png#pic_center)


*****注意：本文章使用的是EPSG:4326坐标系