高德地图js api:轨迹在vue项目中的隐藏、显示、清空.hide.show.setData([])
<template>
<div class="radioBox">
<el-radio-group v-model="type" @change="handleCarWheelPathChange">
<el-radio :label="1">全选</el-radio>
<el-radio :label="2">去程</el-radio>
<el-radio :label="3">返程</el-radio>
</el-radio-group>
</div>
</template>
<script>
export default {
data() {
return {
type:1,//初始radio为1
map:null,
}
},
mounted(){
this.initMap()
this.setMap()
},
methods: {
initMap() {
const self = this;
self.map = new AMap.Map("test_Map", {
zooms: [9, 18],
resizeEnable: true
});
},
setMap(){
//自己项目的数据
let lineArrDepart=[]
let lineArrReturn=[]
function initPageDepart(PathSimplifier, $) {
let pathSimplifierInsDepart = new PathSimplifier({
zIndex: 100,
map: self.map,
getPath: function(pathData, pathIndex) {
return pathData.path;
},
//轨迹样式，具体参照高德地图api文档，这里觉得太长就删除了
renderOptions: {
"pathTolerance": 2,
"keyPointTolerance": -1,
"renderAllPointsIfNumberBelow": 0,
"pathLineStyle": {
"lineWidth": 6,
"strokeStyle": "#3f34f8",
"borderWidth": 1,
"borderStyle": "#cccccc",
"dirArrowStyle": true
},
}
});
window.pathSimplifierInsDepart = pathSimplifierInsDepart;
function onload() {
pathSimplifierInsDepart.render();
};
//lineArrDepart放轨迹数据
pathSimplifierInsDepart.setData([{
path: lineArrDepart
}]);
};
function initPageReturn(PathSimplifier, $) {
let pathSimplifierInsReturn = new PathSimplifier({
zIndex: 99,
map: self.map,
getPath: function(pathData, pathIndex) {
return pathData.path;
},
renderOptions: {
"pathTolerance": 2,
"keyPointTolerance": -1,
"renderAllPointsIfNumberBelow": 0,
"pathLineStyle": {
"lineWidth": 6,
"strokeStyle": "rgb(0,204,233)",
"borderWidth": 1,
"borderStyle": "#cccccc",
"dirArrowStyle": true
},
}
});
window.pathSimplifierInsReturn = pathSimplifierInsReturn;
function onload() {
pathSimplifierInsReturn.renderLater();
};
//设置数据--省略了这里的数据
pathSimplifierInsReturn.setData([{
path: lineArrReturn
}]);
};
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
initPageDepart(PathSimplifier, $);
initPageReturn(PathSimplifier, $);
});
},
handleCarWheelPathChange() {
const self = this;
if(self.type=== 1) {
pathSimplifierInsReturn.show()
pathSimplifierInsDepart.show()
}
if(self.type=== 2) {
pathSimplifierInsReturn.hide()
pathSimplifierInsDepart.show()
}
if(self.type=== 3) {
pathSimplifierInsDepart.hide()
pathSimplifierInsReturn.show()
}
},
}
}
</script>