|
|
|
|
@ -24,6 +24,11 @@ export default {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [],
|
|
|
|
|
},
|
|
|
|
|
// 感知设备
|
|
|
|
|
camera_list: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [],
|
|
|
|
|
},
|
|
|
|
|
// 车辆轨迹
|
|
|
|
|
new_line: {
|
|
|
|
|
type: Array,
|
|
|
|
|
@ -107,6 +112,26 @@ export default {
|
|
|
|
|
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);
|
|
|
|
|
map.centerAndZoom(
|
|
|
|
|
new BMap.Point(this.center_point[0], this.center_point[1]),
|
|
|
|
|
@ -210,14 +235,19 @@ export default {
|
|
|
|
|
styleJson,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
console.log("item", item);
|
|
|
|
|
//let that = this; // 不改指向后面很多函数无法执行
|
|
|
|
|
let label = new BMap.Label();
|
|
|
|
|
// let label = new BMap.Label();
|
|
|
|
|
// 以车辆出发点为中心重新绘制地图
|
|
|
|
|
//119.460741
|
|
|
|
|
//29.531762999999998
|
|
|
|
|
//29.531762
|
|
|
|
|
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 = {};
|
|
|
|
|
myIcon = new BMap.Icon(
|
|
|
|
|
require("@/assets/factor/factor03.png"),
|
|
|
|
|
require("@/assets/factor/car_start.png"),
|
|
|
|
|
new BMap.Size(20, 40),
|
|
|
|
|
{
|
|
|
|
|
imageOffset: new BMap.Size(0, 0, 5), // 设置图片偏移
|
|
|
|
|
@ -225,8 +255,23 @@ export default {
|
|
|
|
|
);
|
|
|
|
|
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(
|
|
|
|
|
@ -243,61 +288,61 @@ export default {
|
|
|
|
|
map.addOverlay(polyline);
|
|
|
|
|
}, 500);
|
|
|
|
|
|
|
|
|
|
map.centerAndZoom(new BMap.Point(item.longitude, item.latitude), 16); // 创建点坐标
|
|
|
|
|
map.centerAndZoom(new BMap.Point(item.longitude, item.latitude), 8); // 创建点坐标
|
|
|
|
|
map.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
|
|
|
|
|
map.setMaxZoom(19);
|
|
|
|
|
map.enableScrollWheelZoom(true);
|
|
|
|
|
|
|
|
|
|
showBoundaryx(MapLine.features[5]);
|
|
|
|
|
// 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");
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
// 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");
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
lukeyan
10 months ago
