|
|
|
@ -24,6 +24,16 @@ export default {
|
|
|
|
type: Array,
|
|
|
|
type: Array,
|
|
|
|
default: () => [],
|
|
|
|
default: () => [],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// 感知设备
|
|
|
|
|
|
|
|
camera_list: {
|
|
|
|
|
|
|
|
type: Array,
|
|
|
|
|
|
|
|
default: () => [],
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 车辆轨迹
|
|
|
|
|
|
|
|
new_line: {
|
|
|
|
|
|
|
|
type: Array,
|
|
|
|
|
|
|
|
default: () => [],
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
@ -96,11 +106,31 @@ export default {
|
|
|
|
);
|
|
|
|
);
|
|
|
|
var car_marker = new BMap.Marker(car_point, { icon: car_icon }); // 创建点位
|
|
|
|
var car_marker = new BMap.Marker(car_point, { icon: car_icon }); // 创建点位
|
|
|
|
map.addOverlay(car_marker);
|
|
|
|
map.addOverlay(car_marker);
|
|
|
|
car_marker.addEventListener("click",function() {
|
|
|
|
car_marker.addEventListener("click", function () {
|
|
|
|
// 查看车辆轨迹
|
|
|
|
// 查看车辆轨迹
|
|
|
|
// 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心
|
|
|
|
// 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心
|
|
|
|
that.$emit('get_car_text',item)
|
|
|
|
that.$emit("get_car_text", item);
|
|
|
|
})
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// 感知设备点位上图
|
|
|
|
|
|
|
|
that.camera_list.forEach((item) => {
|
|
|
|
|
|
|
|
var camera_point = new BMap.Point(item.longitude, item.latitude);
|
|
|
|
|
|
|
|
// 自定义图标;
|
|
|
|
|
|
|
|
var camera_icon = {};
|
|
|
|
|
|
|
|
camera_icon = new BMap.Icon(
|
|
|
|
|
|
|
|
require("@/assets/factor/factor04.png"),
|
|
|
|
|
|
|
|
new BMap.Size(20, 40),
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
var camera_marker = new BMap.Marker(camera_point, { icon: camera_icon }); // 创建点位
|
|
|
|
|
|
|
|
map.addOverlay(camera_marker);
|
|
|
|
|
|
|
|
// camera_marker.addEventListener("click", function () {
|
|
|
|
|
|
|
|
// // 查看车辆轨迹
|
|
|
|
|
|
|
|
// // 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心
|
|
|
|
|
|
|
|
// that.$emit("get_car_text", item);
|
|
|
|
|
|
|
|
// });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}, 500);
|
|
|
|
}, 500);
|
|
|
|
map.centerAndZoom(
|
|
|
|
map.centerAndZoom(
|
|
|
|
@ -198,37 +228,121 @@ export default {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// 根据车辆点位重新创建地图
|
|
|
|
// 根据车辆点位重新创建地图
|
|
|
|
cause_car_line_map(item) {
|
|
|
|
cause_car_line_map(item, new_line) {
|
|
|
|
let BMap = window.BMap;
|
|
|
|
let BMap = window.BMap;
|
|
|
|
let map = new BMap.Map("container", {
|
|
|
|
let map = new BMap.Map("container", {
|
|
|
|
style: {
|
|
|
|
style: {
|
|
|
|
styleJson,
|
|
|
|
styleJson,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log("item", item);
|
|
|
|
//let that = this; // 不改指向后面很多函数无法执行
|
|
|
|
//let that = this; // 不改指向后面很多函数无法执行
|
|
|
|
//let label = new BMap.Label();
|
|
|
|
// let label = new BMap.Label();
|
|
|
|
|
|
|
|
// 以车辆出发点为中心重新绘制地图
|
|
|
|
|
|
|
|
//119.460741
|
|
|
|
|
|
|
|
//29.531762999999998
|
|
|
|
|
|
|
|
//29.531762
|
|
|
|
setTimeout(() => {
|
|
|
|
setTimeout(() => {
|
|
|
|
var point = new BMap.Point(item.longitude, item.latitude)
|
|
|
|
var point = new BMap.Point(new_line[0].longitude, new_line[0].latitude);
|
|
|
|
// 自定义图标;
|
|
|
|
// 自定义起点图标;
|
|
|
|
var myIcon = {};
|
|
|
|
var myIcon = {};
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
require("@/assets/factor/factor03.png"),
|
|
|
|
require("@/assets/factor/car_start.png"),
|
|
|
|
new BMap.Size(20, 40),
|
|
|
|
new BMap.Size(20, 40),
|
|
|
|
{
|
|
|
|
{
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
|
|
|
|
|
|
|
|
map.addOverlay(marker);
|
|
|
|
|
|
|
|
// 自定义终点坐标
|
|
|
|
|
|
|
|
var end_point = new BMap.Point(
|
|
|
|
|
|
|
|
new_line[new_line.length - 1].longitude,
|
|
|
|
|
|
|
|
new_line[new_line.length - 1].latitude
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
var end_icon = {};
|
|
|
|
|
|
|
|
end_icon = new BMap.Icon(
|
|
|
|
|
|
|
|
require("@/assets/factor/car_end.png"),
|
|
|
|
|
|
|
|
new BMap.Size(20, 40),
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
var end_marker = new BMap.Marker(end_point, { icon: end_icon }); // 创建点位
|
|
|
|
|
|
|
|
map.addOverlay(end_marker);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 车辆轨迹绘画
|
|
|
|
|
|
|
|
var line_point = [];
|
|
|
|
|
|
|
|
for (let i = 0; i < new_line.length; i++) {
|
|
|
|
|
|
|
|
line_point.push(
|
|
|
|
|
|
|
|
new BMap.Point(new_line[i].longitude, new_line[i].latitude)
|
|
|
|
);
|
|
|
|
);
|
|
|
|
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
|
|
|
|
}
|
|
|
|
map.addOverlay(marker);
|
|
|
|
console.log("line_point", line_point);
|
|
|
|
},500)
|
|
|
|
var polyline = new BMap.Polyline(line_point, {
|
|
|
|
|
|
|
|
strokeColor: "red",
|
|
|
|
|
|
|
|
strokeWeight: 6,
|
|
|
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log("pl", polyline);
|
|
|
|
|
|
|
|
map.addOverlay(polyline);
|
|
|
|
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
|
|
|
|
map.centerAndZoom(
|
|
|
|
map.centerAndZoom(new BMap.Point(item.longitude, item.latitude), 8); // 创建点坐标
|
|
|
|
new BMap.Point(item.longitude, item.latitude),
|
|
|
|
|
|
|
|
16
|
|
|
|
|
|
|
|
); // 创建点坐标
|
|
|
|
|
|
|
|
map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
|
|
|
|
map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
|
|
|
|
map.setMaxZoom(19);
|
|
|
|
map.setMaxZoom(19);
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// showBoundaryx(MapLine.features[5]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// function showBoundaryx(city) {
|
|
|
|
|
|
|
|
// var paths = [];
|
|
|
|
|
|
|
|
// var list = city.geometry.coordinates;
|
|
|
|
|
|
|
|
// var polygon = {};
|
|
|
|
|
|
|
|
// if (list.length > 1) {
|
|
|
|
|
|
|
|
// for (let a = 0; a < list.length; a++) {
|
|
|
|
|
|
|
|
// paths = [];
|
|
|
|
|
|
|
|
// for (let i = 0; i < list[a][0].length; i++) {
|
|
|
|
|
|
|
|
// let lat = list[a][0][i][1],
|
|
|
|
|
|
|
|
// lng = list[a][0][i][0];
|
|
|
|
|
|
|
|
// paths.push(new BMap.Point(lng, lat));
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// console.log('paths',paths);
|
|
|
|
|
|
|
|
// polygon = new BMap.Polygon(paths, {
|
|
|
|
|
|
|
|
// fillColor: "#3b4c44",
|
|
|
|
|
|
|
|
// strokeColor: "#0f1423",
|
|
|
|
|
|
|
|
// fillOpacity: 0.6,
|
|
|
|
|
|
|
|
// strokeWeight: 1,
|
|
|
|
|
|
|
|
// }); //创建多边形
|
|
|
|
|
|
|
|
// polygon.disableMassClear();
|
|
|
|
|
|
|
|
// map.addOverlay(polygon); //增加多边形
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// } else {
|
|
|
|
|
|
|
|
// for (let i = 0; i < list[0].length; i++) {
|
|
|
|
|
|
|
|
// let lat = list[0][i][1],
|
|
|
|
|
|
|
|
// lng = list[0][i][0];
|
|
|
|
|
|
|
|
// paths.push(new BMap.Point(lng, lat));
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// console.log('paths',paths);
|
|
|
|
|
|
|
|
// polygon = new BMap.Polygon(paths, {
|
|
|
|
|
|
|
|
// fillColor: "#3b4c44",
|
|
|
|
|
|
|
|
// strokeColor: "#0f1423",
|
|
|
|
|
|
|
|
// fillOpacity: 0.6,
|
|
|
|
|
|
|
|
// strokeWeight: 1,
|
|
|
|
|
|
|
|
// }); //创建多边形
|
|
|
|
|
|
|
|
// polygon.disableMassClear();
|
|
|
|
|
|
|
|
// map.addOverlay(polygon); //增加多边形
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// polygon.infowindow = new BMap.InfoWindow();
|
|
|
|
|
|
|
|
// polygon.infowindow.name = city.properties.name;
|
|
|
|
|
|
|
|
// polygon.addEventListener("mouseover", function () {
|
|
|
|
|
|
|
|
// polygon.setFillColor("#ffa500");
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// polygon.addEventListener("mouseout", function () {
|
|
|
|
|
|
|
|
// map.removeOverlay(label);
|
|
|
|
|
|
|
|
// polygon.setFillColor("#3b4c44");
|
|
|
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
