效果图
点击表格某一行获取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 ^