loca可视化map同一图层,对不同的脉冲线设置不同是style

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

贺今宵

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

阅读量403

点赞数 8

分类专栏： map 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_51389137/article/details/135219706

版权

map 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

 


 
 let pLineData = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        //properties对象中的值可以单独传递到setStyle的属性中做回调函数的参数
        //意味的可以通过该对象获取每一组数单独的一些值，在  layer.setStyle设置不同的style而不是一个定值
        
        properties: { type: 1 },
        geometry: {
          type: "LineString",
          coordinates: [[116.417458, 39.934026]],
        },
      },
      // {
      //   type: "Feature",
      //   properties: { type: 2 },
      //   geometry: {
      //     type: "LineString",
      //     coordinates: [
      //       [126.128627, 41.146943],
      //       [126.12425, 41.137959],
      //       [126.113693, 41.128908],
      //     ],
      //   },
      // },
    ],
  };
  data.forEach((item) => {
    if (item.coord) {
      try {
        const coord = JSON.parse(item.coord);
        let obj = {
          type: "Feature",
          properties: { type: 2 },
          geometry: {
            type: "LineString",
            coordinates: coord,
          },
        };
        pLineData.features.push(obj);
      } catch (error) {}
    }
  });
  let geo = new Loca.GeoJSONSource({
    data: pLineData, //数据格式
  });
        // 颜色配置
        var headColors = ['#ECFFB1', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968', '#146968'];
        var trailColors = [
            'rgba(255,178,6, 0.2)',
            'rgba(255,178,6, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
            'rgba(20,105,104, 0.2)',
        ];
  let layer = new Loca.PulseLineLayer({
    // loca,
    // zIndex: 100000000,
    opacity: 1,
    visible: true,
    zooms: [2, 22],
  });

  layer.setSource(geo);
  layer.setStyle({
    altitude: 0,
    //这三个参数可以通过feature获取pLineData中不同段的properties值做不同效果
    lineWidth: (_, feature) => feature.properties.lineWidthRatio * 1 + 3,
    headColor: (_, feature) => headColors[feature.properties.type],
    trailColor: (_, feature) => trailColors[feature.properties.type],
    // lineWidth: Number(10)/20,
    // // 脉冲头颜色
    // headColor: "rgb(204, 154, 155)",
    // // 脉冲尾颜色
    // trailColor: "rgba(192, 53, 50, 0.9)",
    // // 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
    interval: 0.5,
    // 脉冲线的速度，几秒钟跑完整段路
    duration: 3000,
  });
  loca.add(layer);
  loca.animate.start();