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

最新推荐文章于 2024-05-17 00:00:00 发布

陷入星河的猫

最新推荐文章于 2024-05-17 00:00:00 发布

阅读量1.9k

点赞数 1

分类专栏： # leaflet 文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/qq_40920553/article/details/126077827

版权

leaflet 专栏收录该内容

9 篇文章 4 订阅

订阅专栏

效果图
在这里插入图片描述

1. 安装插件

npm install leaflet.echarts-layer -S

2. 引入插件

import 'leaflet.echarts-layer'

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);

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);

.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;
    }
}