vue+leaflet集成echarts实现动态轨迹图_leaflet动态轨迹

效果图

1. 安装插件

npm install leaflet.echarts-layer -S
1

2. 引入插件

import 'leaflet.echarts-layer'
1

3. 实现

let planePath = 'path://M512 576V192H64a64 64 0 0 0-64 64v64h384v128H256L192 512H0v384h69.632a160 160 0 0 1 156.224-126.144c76.736 0 140.672 54.08 156.224 126.144h263.488a160 160 0 0 1 156.224-126.144c76.736 0 140.672 54.08 156.224 126.144H1024v-256H512V576z';
// 绿色动态流动的线
let options = {
	series: [{
		type: 'lines',
		// zlevel: 2,
        // symbol: ['none', 'arrow'],
        // symbolSize: 10,
        // effect: {
        //     show: true,
        //     period: 5,
        //     trailLength: 0,
        //     symbol: planePath,
        //     symbolSize: [10, 20]
        // },
        // lineStyle: {
        //     normal: {
        //         color: color[0],
        //         width: 1,
        //         opacity: 0.6,
        //         curveness: 0.2
        //     }
        // },
		coordinateSystem: 'bmap',
		polyline: true,
		effect: {
			color: 'skyblue',
			constantSpeed: 35,
            show: true,
            trailLength: 0.5,
            symbolSize: 4
		},
		zlevel: 1,
        data: data
	}]
}

this.$L.eChartsLayer(options).addTo(this.map)

// 黄色的线
this.layerPathGroup = this.$L.layerGroup()
let polyline = this.$L.polyline(data, {
	color: 'yellow',
	weight: 1
})
this.layerPathGroup.addLayer(polyline)
this.LayerPathGroup.addTo(this.map);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

leaflet自定义动态样式marker

// 点
this.markLayerGroup = this.$L.layerGroup()
this.markLayerGroup .addLayer(this.$L.marker([37, 120], {
   icon: this.$L.divIcon({
      html: '<span></span>',
      className: 'redBind',
      iconSize: this.$L.point(20, 20)
   })
}))
this.markLayerGroup.addTo(this.map);
1
2
3
4
5
6
7
8
9
10

.redBind {
    span {
      display: inline-block;
      border-radius: 50%;;
      box-shadow: 0 0 6px 8px #f00 inset;
      animation: redpulsate 1s ease-out;
      animation-iteration-count: infinite;
      animation-delay: 1.5s;
      -webkit-border-radius: 100%;
      border-radius: 100%;
      height: 15px;
      width: 15px;
      animation: pulsate 1.5s infinite;
      position: absolute;
      margin: 11% 0 0 10%;
      z-index: 9999 !important;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18