VUE使用Openlayers地图画多条拥堵线并且给多种颜色

吃西瓜不吐籽_

已于 2022-12-30 16:36:12 修改

阅读量1.7k

点赞数 3

分类专栏：可视化大屏文章标签： vue.js javascript ecmascript

于 2022-07-21 22:50:54 首次发布

本文链接：https://blog.csdn.net/weixin_57933935/article/details/125922646

版权

可视化大屏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近需要画拥堵路线在网上找的方法也看不太明白，好在最终搞了出来，记录一下大家互相交流

    //拥堵路线方法
    drawRoutes() {
      let _this = this;
      let polyLintArray = new Array();
      if (!this.lineData) {
        return console.log("获取拥堵路线失败!");
      }
      this.lineData.map((item) => {
        let flat = [];
        flat = item;
        polyLintArray.push(flat);
      });
      let sub = [];
      for (const item of polyLintArray) {
        var feature = new Feature({
          type: "LineString",
          geometry: new LineString(item.geom.coordinates),
        });
        let color = "#F8D34A";
        if (item.color == "red") {
          color = "#DF2116";
        } else if (item.color == "peony") {
          color = "#AE1207";
        }

        let lineStyle = new Style({
          stroke: new Stroke({
            color: color,
            width: 4,
          }),
        });
        // 添加线的样式
        feature.setStyle(lineStyle);
        // 添加线的fature
        _this.layers.lineLayer.getSource().addFeature(feature);
      }
    },