Leaflet地图数据迁徙 + 飞线效果

最新推荐文章于 2024-06-17 09:50:21 发布

退堂鼓职业选手

最新推荐文章于 2024-06-17 09:50:21 发布

阅读量969

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45886797/article/details/132875306

版权

Leaflet地图数据迁徙 + 飞线效果

需求：根据拿到的接口经纬度数据在Leaflets上进行飞线的绘制
用到的三方库地址：https://github.com/lin-123/leaflet.migration
leaflets中文地址：Documentation - Leaflet - 一个交互式地图 JavaScript 库 (leafletjs.cn)

效果

在这里插入图片描述

代码

/**
 * 中心点向外点位辐射分离
 * @author Lou
 * @param { Array } arr 点位数据(一个中心点) 
 * @param { String } color 点位颜色
 * @param { String } centerName 中心点名称
 * @param { String } centerNameProp 中心点对应的属性
 * @param { Number } value 点位数值大小
 * @returns { Array }
 */
export function classifyPointData(arr, color = "rgb(101, 169, 249)", centerName, centerNameProp, value = 6) {
  const { jd: centerJD, wd: centerWD } = arr.find((i) => i[centerNameProp] === centerName);
  return arr.filter((i) => i.name !== centerName).map(({ jd, wd }) => ({
      color,
      from: [centerJD, centerWD],
      to: [jd, wd],
      value,
    }));
}

// 飞线的配置项(可以直接看github上的文档)
migrationOptions = {
  marker: {
    radius: [5, 10],
    pulse: false,
    textVisible: false
  },
  line: {
    width: 1,
    order: false,
    icon: {
      type: 'arrow',
      imgUrl: '',
      size: 10
    },
  },
}

// 地图上的绘制
initPoint() {
  this.markerLayer && this.map.removeLayer(this.markerLayer);
  const migrationData = classifyPointData(this.pointList, "rgb(101, 169, 249)", "分指挥部", "name");
  this.migrationGymLayer = L.migrationLayer(migrationData, migrationOptions);
  this.migrationGymLayer.addTo(this.map);
  let markericon = []
  this.pointList.forEach(item => {
    const myIcon = L.divIcon({
      html: `<div class="marker-box flex flex-col items-center">
              <div class="board-box flex flex-col items-center">
                <div class="board">
                  ${ item.name }
                  ${ item.distance ? `<div>距离分指挥部：${ item.distance }</div>` : '' }
                  <div class="logo">
                    <img src="${ pointLogo }"/>
                  </div>
                </div>
                <img class="line" src="${ pointLine }"/>
              </div>
              ${JSON.parse(item.image).length ? `<img src="${ '/sys/sysFile/download?fileId=' + JSON.parse(item?.image)[0]?.id }"/>` : ''}
              <div class="circle-box">
                <div class="circle1"></div>
                <div class="circle2" style="animation-delay: 0.5s;"></div>
                <div class="circle3" style="animation-delay: 1.5s;></div>
              </div>
              </div>
            `,
      // iconSize: [50 , 70], // icon大小
    });

    const m = L.marker([item.wd, item.jd], { icon: myIcon });
    markericon.push(m);
  })
  this.markerLayer = L.layerGroup(markericon);
  this.map.addLayer(this.markerLayer);
},