乐趣区

关于vue.js:vuejs使用高德地图实现多个颜色的轨迹路线

jiezi

1. 引入高德地图，这里采纳 cdn 形式引入

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key= 本人申请的 key"></script>

2. 增加 div 作为地图的容器，同时为该 div 指定 id 属性，地图的高度和宽度也要指定

<div class="custom_map" id="allmap"></div>

3. 初始化地图配置

init() {
      this.map = new AMap.Map("allmap", {
        resizeEnable: true,
        zoom: 11, // 级别
        center: [113.88229, 22.896067], // 中心点坐标
        mapStyle: "amap://styles/blue", // 设置地图的显示款式
      });
    },

4. 获取轨迹数据

// 获取后盾数据
    getPokylineData() {
      let param = {siteMn: this.siteObj.siteMn,};
      this.clearPolyline(); // 革除轨迹
      mapPolyline
        .getCarTrajectory(Object.assign(param, this.searchForm))
        .then((res) => {if (res.code == 0) {
            let data = res.data;
            if (Object.keys(data).length > 0) {
              let polylineData = data;
              this.setPolyline(polylineData); // 依据数据配置轨迹参数
            } else {this.$Message.warning("暂无轨迹数据!");
            }
          }
        });
    },

5. 解决后盾返回的轨迹数据

我的项目的需要是依据这一段的数值的含意，该段的轨迹就显示不同的色彩。因而和后端磋商好
属性名:1_alarm_1，"alarm" 代表预警，则轨迹色彩为黄色
属性名:2_normal_1，"normal" 代表失常，则轨迹色彩为绿色
属性名:6_over_1，"over" 代表超标，则轨迹色彩为红色
...
以此类推
setPolyline(obj) {let objKeyArr = Object.keys(obj);
      console.log(objKeyArr) //['1_alarm_1', '2_normal_1', '3_alarm_2', '4_normal_2', '5_alarm_3', '6_over_1']
      // 设置地图的中心点
      let centerLnglat = obj[objKeyArr[0]][0];
      console.log(centerLnglat); //[113.897352, 22.471799]
      this.map.setZoomAndCenter(14, centerLnglat, true);
      // 绘画轨迹
      let lineArr = []; // 存储轨迹的一维数组
      for (let i in obj) {
        let color = ""; // 定义轨迹的色彩变量
        let name = "polyline" + i; // 定义动静的轨迹变量名
        let type = i.split("_"); // 获取轨迹的类型
        if (type[1] == "alarm") {
          // 依据轨迹的类型进行色彩的赋值
          color = "#ff8119";
        } else if (type[1] == "normal") {color = "#AF5";} else if (type[1] == "over") {color = "#ff0000";}
        // 配置轨迹
        name = new AMap.Polyline({
          map: this.map,
          path: obj[i], // 轨迹的坐标数组
          showDir: true,
          strokeColor: color,
          strokeWeight: 6, // 线宽
          lineJoin: "round",
        });
        this.nameArr.push(name);
        // 拼接轨迹的一维数组（用于运行轨迹动画）lineArr = lineArr.concat(obj[i]);
      }
      console.log("nameArr", this.nameArr);
      this.markerPolyline = new AMap.Marker({
        map: this.map,
        position: centerLnglat,
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-50, -13),
        autoRotation: true,
        angle: -90,
      });
      this.markerPolyline.moveAlong(lineArr, 200); // 主动加载动画
    },

成果如下：会发现区间没有连接起来，

这是因为后端返回的数据坐标区间没有首尾进行相连，所以前端须要进行解决，第一个坐标区间的最初一个元素 = 第二个坐标区间的第一个元素，解决逻辑如下

setPolyline(obj) {let objKeyArr = Object.keys(obj);
      console.log(objKeyArr) //['1_alarm_1', '2_normal_1', '3_alarm_2', '4_normal_2', '5_alarm_3', '6_over_1']
      // 因为后端返回的数据坐标区间没有首尾进行相连，所以前端解决，第一个坐标区间的最初一个元素 = 第二个坐标区间的第一个元素
      for (let i = 0; i < objKeyArr.length; i++) {if (i < objKeyArr.length - 1) {obj[objKeyArr[i]].push(obj[objKeyArr[i + 1]][0]);
        }
      }
      // 设置地图的中心点
      let centerLnglat = obj[objKeyArr[0]][0];
      console.log(centerLnglat); //[113.897352, 22.471799]
      this.map.setZoomAndCenter(14, centerLnglat, true);
      // 绘画轨迹
      let lineArr = []; // 存储轨迹的一维数组
      for (let i in obj) {
        let color = ""; // 定义轨迹的色彩变量
        let name = "polyline" + i; // 定义动静的轨迹变量名
        let type = i.split("_"); // 获取轨迹的类型
        if (type[1] == "alarm") {
          // 依据轨迹的类型进行色彩的赋值
          color = "#ff8119";
        } else if (type[1] == "normal") {color = "#AF5";} else if (type[1] == "over") {color = "#ff0000";}
        // 配置轨迹
        name = new AMap.Polyline({
          map: this.map,
          path: obj[i], // 轨迹的坐标数组
          showDir: true,
          strokeColor: color,
          strokeWeight: 6, // 线宽
          lineJoin: "round",
        });
        this.nameArr.push(name);
        // 拼接轨迹的一维数组（用于运行轨迹动画）lineArr = lineArr.concat(obj[i]);
      }
      console.log("nameArr", this.nameArr);
      this.markerPolyline = new AMap.Marker({
        map: this.map,
        position: centerLnglat,
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(-50, -13),
        autoRotation: true,
        angle: -90,
      });
      this.markerPolyline.moveAlong(lineArr, 200); // 主动加载动画
    },

解决后成果如下

革除轨迹办法如下

// 清空轨迹
    clearPolyline() {if (this.markerPolyline && this.nameArr.length > 0) {this.map.remove(this.markerPolyline);
        this.nameArr.map((item) => {item.hide();
        });
      }
    },
退出移动版