多选框checkbox控制高德地图轨迹展示

效果图

点击表格某一行获取checkbox列表，通过选中多选框来展示选中的轨迹

先准备json数据，要包含name、轨迹线的颜色、check选中的数字（也就是id）

核心代码

drawLine() {
      let that = this;
      //获取选中的多选框id
      console.log(that.checkList);
      let lineColor = null;
      //绘制轨迹前先清除上一次的轨迹
      if (this.pathSimplifierIns) {
        this.pathSimplifierIns.setData([]);
      }
      AMapUI.load(
        ['ui/misc/PathSimplifier', 'lib/$'],
        function (PathSimplifier, $) {
          if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
          }
          //获取数据
          axios.get('/path.json').then((res) => {
            let data = res.data;
            that.list = [];
            for (var j = 0; j < data.length; j++) {
              that.checkList.forEach((item) => {
              //如果选中的id和返回的数据下标一致则向list中添加该条数据
                if (j == item) {
                
                  that.list.push(data[j]);
                }
              });
            }
            that.pathSimplifierIns = new PathSimplifier({
              zIndex: 100,
              //autoSetFitView:false,
              map: that.map, //所属的地图实例
              getPath: function (pathData, pathIndex) {
                return pathData.path;
              },
              //鼠标移入轨迹线所展示的内容
              getHoverTitle: function (pathData, pathIndex, pointIndex) {
                if (pointIndex >= 0) {
                  //point
                  return (
                    pathData.name +
                    '，点：' +
                    pointIndex +
                    '/' +
                    pathData.path.length
                  );
                }
                return pathData.name + '，点数量' + pathData.path.length;
              },
              轨迹线样式
              renderOptions: {
                getPathStyle: function (pathItem, zoom) {
                //设置每条轨迹线的颜色和线宽
                  var color = pathItem.pathData.color,
                    lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3));
                  return {
                    pathLineStyle: {
                      lineWidth: lineWidth,
                      strokeStyle: color,
                      borderWidth: 1,
                      borderStyle: '#eeeeee',
                      dirArrowStyle: false,
                    },
                    //鼠标移入线的样式（此处清除移入样式）
                    pathLineHoverStyle: {
                      lineWidth: 0,
                      fillStyle: null,
                      strokeStyle: null,
                      borderStyle: null,
                    },
                  };
                },
              },
            });
            window.pathSimplifierIns = that.pathSimplifierIns;
            //设置数据
            that.pathSimplifierIns.setData(that.list);
          });
          // that.pathSimplifierIns.hide();
        }
      );
    },

各位客官要是感觉有用的话能留个小心心嘛,谢谢啦！！！^ v ^