${context.data[0].item.label}
`;
var offset = new AMap.Pixel(-14, -14);
context.marker.setContent(content)
context.marker.setOffset(offset)
// context.marker.setAngle(context.data[0].item.direction)
}
let cluster = new AMap.MarkerCluster(map, points, {
gridSize: 60, // 设置网格像素大小
renderMarker: _renderMarker,
clusterByZoomChange: false
});
let handleClickData = _.throttle((e) => {
// console.log('testeeee',e)
callBack(e)
},500, {leading: true,trailing: false})
cluster.on('click', (e) => {
handleClickData(e)
})
return cluster
}
/**创建标注点*/
let allmarkerArr = [];
export function createMarker(map, data, callBack) {
console.log('参', data)
let iconMap = {
'vehStop': cheliangtuli_tingche1,
'veAlarm': cheliangtuli_baojing1,
// 经过点类型 1.标注点 2.收集点 3.转运站 4.处理厂 5.公厕 6.投放点 7.垃圾桶
'vehis1': vehis1Icon,
'vehis2': vehis2Icon,
'vehis3': vehis3Icon,
'vehis4': vehis4Icon,
'vehis5': vehis5Icon,
'vehis6': vehis6Icon,
'vehis7': vehis7Icon,
}
let markerArr = data.list.map(e => {
let icontype=data.type
if(icontype==='vehis'){ //途径点
icontype=`${icontype}${e.type}`
e.cloneType = e.type
}
// 创建一个 Icon
let startIcon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(31, 40),
// 图标的取图地址
image: iconMap[icontype],//'//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
// 图标所用图片大小
imageSize: new AMap.Size(31, 40),
});
let marker
if (e.option) {
marker = new AMap.Marker({
...e.option
});
} else {
marker = new AMap.Marker({
icon: startIcon,
position: [e.lng02, e.lat02],
offset: new AMap.Pixel(0, 6),
anchor: 'bottom-center'
});
}
marker.on('click', function (el) {
console.log('点击', e)
callBack('click', { ...e, type: data.type})
})
return marker
})
map.add(markerArr);
// 实例方法
allmarkerArr = allmarkerArr.concat(markerArr)
const removeAllMarkers = () => {
for (var i = 0; i < allmarkerArr.length; i++) {
allmarkerArr[i].setMap(null); // 从地图上移除标记点
}
allmarkerArr = []; // 清空存储标记点的数组
}
return { removeAllMarkers };
}
/**创建轨迹回放 */
let marker, originMarker, destinationMarker, polyline, passedPolyline, startAnimation, removeShowSpeed;
const setCenterDebounce = _.throttle((map, e) => {
var isVisible = map.getBounds().contains(e.target.getPosition());
if (!isVisible) {
map.setCenter(e.target.getPosition(), true)//自动聚焦
}
// map.setCenter(e.target.getPosition(), true)//自动聚焦
}, 0);
export function createMoveAlong(map, data, callBack) {
console.log(marker, 'marker数据', data)
let pointsData = data.points
let points = pointsData.map(e => {
return [Number(e.lng02), Number(e.lat02)]
})
let resetIdx;
//清空已有实例
if (marker) {
marker.stopMove();
marker.off('moving', markerMoving);
marker.setMap(null);
marker = null;
}
//清空起点和终点
if (originMarker) {
originMarker.setMap(null);
originMarker = null
}
if (destinationMarker) {
destinationMarker.setMap(null);
destinationMarker = null
}
if (polyline) {
polyline.setMap(null);
polyline = null;
}
if (passedPolyline) {
passedPolyline.setMap(null);
passedPolyline = null;
}
if (removeShowSpeed) {
removeShowSpeed();
}
if (pointsData.length <= 0) return; //无数据
let duration = pointsData[0].duration //传入的速度
let tabStyle = pointsData[0].tabStyle //传入的类型 人员车辆
// 1、创建图标
let icons
if (store.state.pastRoute.mapImg) {
icons = new AMap.Icon({
image: store.state.pastRoute.mapImg, // 图标的图片地址
size: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
imageSize: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
})
} else {
icons = "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png"
}
marker = new AMap.Marker({
map: map,
position: points[0], //points[0],
icon: icons,
zIndex: 18,
offset: new AMap.Pixel(-13, -26),
});
//创建起点终点图标显示
let originicons = new AMap.Icon({
image: origin, // 图标的图片地址
size: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
imageSize: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
})
originMarker = new AMap.Marker({
map: map,
position: points[0], //points[0],
icon: originicons,
zIndex: 16,
offset: new AMap.Pixel(-13, -26),
});
let destinationicons = new AMap.Icon({
image: destination, // 图标的图片地址
size: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
imageSize: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
})
destinationMarker = new AMap.Marker({
map: map,
position: points[points.length - 1], //points[0],
icon: destinationicons,
zIndex: 16,
offset: new AMap.Pixel(-13, -26),
});
// 2、创建路线
polyline = new AMap.Polyline({
map: map,
path: points,
zIndex: 10,
showDir: true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
// 3、创建行驶路线
passedPolyline = new AMap.Polyline({
zIndex: 13,
map: map,
strokeColor: "#AF5", //线颜色
strokeWeight: 6, //线宽
});
// 4、事件监听
marker.on('moving', markerMoving);
function markerMoving(e) {
console.log('更新轨迹', e)
// 更新轨迹
let passedPath = e.passedPath
if (resetIdx) {
e.index = e.index + resetIdx //拖拽
passedPath = [...points.slice(0, resetIdx), ...e.passedPath] //points.slice(0,index+1).concat(e.passedPath)
}
if (tabStyle === 'vehicle') {
marker.setAngle(pointsData[e.index + 1].direction) //手动设置方向
}
passedPolyline.setPath(passedPath);//聚焦
setCenterDebounce(map, e)
callBack('moving', e)
}
marker.on('click', function (e) {
if (resetIdx) {
e.resetIdx = resetIdx
}
callBack('click', e)
})
map.setFitView(marker,false,[60,60,160,60],10);
// 开始
startAnimation = function startAnimation() {
let resetPoints;
if (resetIdx) { //拖拽
resetPoints = points.slice(resetIdx, points.length)
if (resetPoints.length < 2) return; //moveAlong必须两点
}
marker.moveAlong(resetPoints || points, {
// 每一段的时长
duration: duration || 500,//可根据实际采集时间间隔设置
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
autoRotation: false, //设置后setAngle无效BUG
});
};
// 销毁事件
const pauseAnimation = function () {
marker.pauseMove();
};
const resumeAnimation = function () {
marker.resumeMove();
};
const stopAnimation = function () {
marker.stopMove();
};
const moveTo = function ({ lnglat, angle, index }) {
stopAnimation()
resetIdx = index
marker.setPosition(lnglat)
// console.log('设置方向', angle)
if (tabStyle === 'vehicle') {
marker.setAngle(angle)
}
passedPolyline.setPath(points.slice(0, index + 1));
callBack('moveTo', { lnglat, angle, index })
// marker.moveTo(lnglat) //卡顿BUG
}
const resetMoveAlong = function () {
startAnimation()
}
// 显示速度
let polylineArr = []
const showSpeed = function () {
for (var i = 0; i < points.length - 1; i++) {
let itempolyline = new AMap.Polyline({
path: [points[i], points[i + 1]],
showDir: true,
strokeColor: speedColor(pointsData[i].speed),
strokeOpacity: 1,
zIndex: 11,
strokeWeight: 6,// 线宽
map: map
});
polylineArr.push(itempolyline)
}
function speedColor(e) { //速度颜色
let speed = Number(e)
let itemColor = '#16B92A'
if (speed > 60 && speed <= 80) {
itemColor = '#0000FE'
} else if (speed > 80 && speed <= 100) {
itemColor = '#F98202'
} else if (speed > 100) {
itemColor = '#FE0100'
}
return itemColor
}
}
removeShowSpeed = () => {
for (var i = 0; i < polylineArr.length; i++) {
polylineArr[i].setMap(null); // 从地图上移除标记点
}
polylineArr = []; // 清空存储标记点的数组
}
return {
startAnimation,
pauseAnimation,
resumeAnimation,
stopAnimation,
moveTo,
resetMoveAlong,
showSpeed, //显示速度
removeShowSpeed //关闭速度
}
}
/**创建一条展示路线 */
let PolylineShow,lineShoworiginMarker,lineShowdestinationMarker;
export function createPolylineShow(map, data) {
if (PolylineShow) {
PolylineShow.setMap(null);
PolylineShow = null;
}
if (lineShoworiginMarker) {
lineShoworiginMarker.setMap(null);
lineShoworiginMarker = null;
}
if (lineShowdestinationMarker) {
lineShowdestinationMarker.setMap(null);
lineShowdestinationMarker = null;
}
let { points } = data
let pointsArr = points.map(e => {
return [Number(e.lng02), Number(e.lat02)]
})
PolylineShow = new AMap.Polyline({
map: map,
path: pointsArr,
strokeStyle: "solid",
strokeColor: "#027AFF", //线颜色
strokeWeight: 6, //线宽
});
//创建起点终点图标显示
let originicons = new AMap.Icon({
image: origin, // 图标的图片地址
size: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
imageSize: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
})
lineShoworiginMarker = new AMap.Marker({
map: map,
position: pointsArr[0], //points[0],
icon: originicons,
zIndex: 16,
offset: new AMap.Pixel(-13, -26),
});
let destinationicons = new AMap.Icon({
image: destination, // 图标的图片地址
size: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
imageSize: new AMap.Size(28, 28), // 设置图标的大小，这里是宽度和高度均为48像素
})
lineShowdestinationMarker = new AMap.Marker({
map: map,
position: pointsArr[pointsArr.length - 1], //points[0],
icon: destinationicons,
zIndex: 16,
offset: new AMap.Pixel(-13, -26),
});
}