Mapbox添加动态线条

最新推荐文章于 2024-07-12 11:33:31 发布

易鹤鹤.

最新推荐文章于 2024-07-12 11:33:31 发布

阅读量853

点赞数

分类专栏： mapbox、cesium相关文章标签： servlet javascript html

本文链接：https://blog.csdn.net/ssy001128/article/details/131092693

版权

mapbox、cesium相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

// 添加多条路线
    addMultiLineString(data) {
      mapboxMap.map.getLayer("multiLineLayer") &&
        mapboxMap.map.removeLayer("multiLineLayer");
      mapboxMap.map.getSource("multiLineSource") &&
        mapboxMap.map.removeSource("multiLineSource");
      let features = [];
      let linerArr = [];
      for (let index = 0; index < data.length; index++) {
        let color = "";
        if (data[index].channelType === "51") {
          color = "#92F7F4";
        } else if (data[index].channelType === "52") {
          color = "#70B603";
        } else if (data[index].channelType === "53") {
          color = "#EC808D";
        } else if (data[index].channelType === "54") {
          color = "#1195db";
        } else if (data[index].channelType === "55") {
          color = "#f4ea29";
        }
        features.push({
          type: "Feature",
          id: index,
          geometry: JSON.parse(data[index].geom),
          properties: {
            ...data[index],
            color: color,
          },
        });
        linerArr.push(JSON.parse(data[index].geom));
      }
      mapboxMap.map.addSource("line", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: features,
        },
      });
      mapboxMap.map.addLayer({
        type: "line",
        source: "line",
        id: "multiLineLayer",
        paint: {
          "line-color": ["get", "color"],
          "line-width": 6,
        },
      });
      mapboxMap.map.addLayer({
        type: "line",
        source: "line",
        id: "line-dashed",
        paint: {
          "line-color": "white",
          "line-width": 2,
          "line-dasharray": [0, 3, 3],
        },
      });
      const dashArraySequence = [
        [0, 3, 3],
        [0.5, 4, 2.5],
        [1, 4, 2],
        [1.5, 4, 1.5],
        [2, 4, 1],
        [2.5, 4, 0.5],
        [3, 4, 0],
        [0, 0.5, 3, 3.5],
        [0, 1, 3, 3],
        [0, 1.5, 3, 2.5],
        [0, 2, 3, 2],
        [0, 2.5, 3, 1.5],
        [0, 3, 3, 1],
        [0, 3.5, 3, 0.5],
      ];
      let step = 0;
      function animateDashArray(timestamp) {
        // Update line-dasharray using the next value in dashArraySequence. The
        // divisor in the expression `timestamp / 50` controls the animation speed.
        const newStep = parseInt((timestamp / 50) % dashArraySequence.length);

        if (newStep !== step) {
          mapboxMap.map.setPaintProperty(
            "line-dashed",
            "line-dasharray",
            dashArraySequence[step]
          );
          step = newStep;
        }

        // Request the next frame of the animation.
        requestAnimationFrame(animateDashArray);
      }

      // start the animation
      animateDashArray(0);
      this.addArrowIcon(features);
      mapboxMap.map.off("click", "multiLineLayer", this.popupEvent);
      mapboxMap.map.on("click", "multiLineLayer", this.popupEvent);
    },
// 添加箭头
    addArrowIcon(features) {
      if (mapboxMap.map.getSource("icon")) {
        mapboxMap.map.removeLayer("arrowLayer");
        mapboxMap.map.removeSource("icon");
        mapboxMap.map.removeImage("arrow");
      }
      mapboxMap.map.loadImage(
        require("../../../../../static/img/arrorw.png"),
        (error, image) => {
          if (error) throw error;
          mapboxMap.map.addImage("arrow", image);
          mapboxMap.map.addSource("icon", {
            type: "geojson",
            data: {
              type: "FeatureCollection",
              features,
            }, // 轨迹geojson格式数据
          });
          mapboxMap.map.addLayer({
            id: "arrowLayer",
            type: "symbol",
            source: "icon",
            layout: {
              "symbol-placement": "line",
              "symbol-spacing": 1, // 图标间隔，默认为250
              "icon-image": "arrow", // 箭头图标
              "icon-size": 0.3,
            },
          });
        }
      );
    },