ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

感知设备点位上图

Browse Source
pull/143/head
lukeyan 12 months ago
parent 04b26c0c34
commit 4cc4727458
8 changed files with 157 additions and 65 deletions
Show Stats Download Patch File Download Diff File

1
public/static/map.html
Unescape View File

@ -24,7 +24,6 @@
<body> <body>
<div id="container"></div> <div id="container"></div>
<script> <script>
// import { Engine } from 'mapv-three';
// 创建地图实例 // 创建地图实例
var map = new BMapGL.Map("container"); // 创建地图实例 var map = new BMapGL.Map("container"); // 创建地图实例
var point = new BMapGL.Point(121.619992, 30.025703); // 创建点坐标 var point = new BMapGL.Point(121.619992, 30.025703); // 创建点坐标

8
src/api/factorResources/index.js
Unescape View File

@ -47,3 +47,11 @@ export function car_line(params) {
params params
}) })
} }
// 感知设备
export function camera_point(params) {
return request({
url:'/ThreeProoFingsData/CameraList',
method:'get',
params
})
}

BIN
src/assets/factor/car_end.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/factor/car_start.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/factor/factor04.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
src/views/compositeIndex/index.vue
Unescape View File

@ -106,6 +106,7 @@ export default {
}); });
} }
}, },
// 排名查询
async get_rank() { async get_rank() {
let params = { let params = {
scoreType: 'month' scoreType: 'month'

153
src/views/factor/components/factorMap.vue
Unescape View File

@ -24,6 +24,11 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
// 感知设备
camera_list: {
type: Array,
default: () => [],
},
// 车辆轨迹 // 车辆轨迹
new_line: { new_line: {
type: Array, type: Array,
@ -107,6 +112,26 @@ export default {
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(
new BMap.Point(this.center_point[0], this.center_point[1]), new BMap.Point(this.center_point[0], this.center_point[1]),
@ -210,14 +235,19 @@ export default {
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), // 设置图片偏移
@ -225,6 +255,21 @@ export default {
); );
var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位 var marker = new BMap.Marker(point, { icon: myIcon }); // 创建点位
map.addOverlay(marker); 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 = []; var line_point = [];
@ -243,61 +288,61 @@ export default {
map.addOverlay(polyline); map.addOverlay(polyline);
}, 500); }, 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.setMinZoom(12); // 初始化地图，设置中心点坐标和地图级别
map.setMaxZoom(19); map.setMaxZoom(19);
map.enableScrollWheelZoom(true); map.enableScrollWheelZoom(true);
showBoundaryx(MapLine.features[5]); // showBoundaryx(MapLine.features[5]);
function showBoundaryx(city) { // function showBoundaryx(city) {
var paths = []; // var paths = [];
var list = city.geometry.coordinates; // var list = city.geometry.coordinates;
var polygon = {}; // var polygon = {};
if (list.length > 1) { // if (list.length > 1) {
for (let a = 0; a < list.length; a++) { // for (let a = 0; a < list.length; a++) {
paths = []; // paths = [];
for (let i = 0; i < list[a][0].length; i++) { // for (let i = 0; i < list[a][0].length; i++) {
let lat = list[a][0][i][1], // let lat = list[a][0][i][1],
lng = list[a][0][i][0]; // lng = list[a][0][i][0];
paths.push(new BMap.Point(lng, lat)); // paths.push(new BMap.Point(lng, lat));
} // }
console.log('paths',paths); // console.log('paths',paths);
polygon = new BMap.Polygon(paths, { // polygon = new BMap.Polygon(paths, {
fillColor: "#3b4c44", // fillColor: "#3b4c44",
strokeColor: "#0f1423", // strokeColor: "#0f1423",
fillOpacity: 0.6, // fillOpacity: 0.6,
strokeWeight: 1, // strokeWeight: 1,
}); //创建多边形 // }); //创建多边形
polygon.disableMassClear(); // polygon.disableMassClear();
map.addOverlay(polygon); //增加多边形 // map.addOverlay(polygon); //增加多边形
} // }
} else { // } else {
for (let i = 0; i < list[0].length; i++) { // for (let i = 0; i < list[0].length; i++) {
let lat = list[0][i][1], // let lat = list[0][i][1],
lng = list[0][i][0]; // lng = list[0][i][0];
paths.push(new BMap.Point(lng, lat)); // paths.push(new BMap.Point(lng, lat));
} // }
console.log('paths',paths); // console.log('paths',paths);
polygon = new BMap.Polygon(paths, { // polygon = new BMap.Polygon(paths, {
fillColor: "#3b4c44", // fillColor: "#3b4c44",
strokeColor: "#0f1423", // strokeColor: "#0f1423",
fillOpacity: 0.6, // fillOpacity: 0.6,
strokeWeight: 1, // strokeWeight: 1,
}); //创建多边形 // }); //创建多边形
polygon.disableMassClear(); // polygon.disableMassClear();
map.addOverlay(polygon); //增加多边形 // map.addOverlay(polygon); //增加多边形
} // }
polygon.infowindow = new BMap.InfoWindow(); // polygon.infowindow = new BMap.InfoWindow();
polygon.infowindow.name = city.properties.name; // polygon.infowindow.name = city.properties.name;
polygon.addEventListener("mouseover", function () { // polygon.addEventListener("mouseover", function () {
polygon.setFillColor("#ffa500"); // polygon.setFillColor("#ffa500");
}); // });
polygon.addEventListener("mouseout", function () { // polygon.addEventListener("mouseout", function () {
map.removeOverlay(label); // map.removeOverlay(label);
polygon.setFillColor("#3b4c44"); // polygon.setFillColor("#3b4c44");
}); // });
} // }
}, },
}, },
}; };

53
src/views/factor/index.vue
Unescape View File

@ -10,6 +10,7 @@
:company_list="company_list" :company_list="company_list"
:video_list="video_list" :video_list="video_list"
:car_list="car_list" :car_list="car_list"
:camera_list="camera_list"
@get_company_text="get_company_text" @get_company_text="get_company_text"
@get_video_text="get_video_text" @get_video_text="get_video_text"
@get_car_text="get_car_text" @get_car_text="get_car_text"
@ -58,6 +59,9 @@
<el-button size="small" @click="get_car()">{{ <el-button size="small" @click="get_car()">{{
this.btn_car this.btn_car
}}</el-button> }}</el-button>
<el-button size="small" @click="get_camera()">{{
this.btn_camera
}}</el-button>
</div> </div>
</div> </div>
<!-- 公司信息文本展示 --> <!-- 公司信息文本展示 -->
@ -159,6 +163,7 @@ import {
queryVideo, queryVideo,
car_point, car_point,
car_line, car_line,
camera_point,
} from "@/api/factorResources"; } from "@/api/factorResources";
export default { export default {
name: "factor", name: "factor",
@ -170,6 +175,7 @@ export default {
company_list: [], // 七个区域所有的企业 company_list: [], // 七个区域所有的企业
video_list: [], // 七个区域所有监控单位 video_list: [], // 七个区域所有监控单位
car_list: [], // 车辆点位 car_list: [], // 车辆点位
camera_list: [], // 感知设备点位
search: { search: {
word: "", word: "",
select: "企业", select: "企业",
@ -181,6 +187,7 @@ export default {
btn_video: "", // 复选框文字 btn_video: "", // 复选框文字
btn_item: "", // 复选框文字 btn_item: "", // 复选框文字
btn_car: "", // 危化品车辆文字 btn_car: "", // 危化品车辆文字
btn_camera: "", // 感知设备文字
company_flag: "0", // 公司详情框展示 company_flag: "0", // 公司详情框展示
/////////// 以下范围公司详情框所需对应变量声明 /////////// 以下范围公司详情框所需对应变量声明
text_company: "", text_company: "",
@ -209,6 +216,7 @@ export default {
// 默认地图打开展示视频监控 // 默认地图打开展示视频监控
this.get_video(); this.get_video();
this.get_car_point(); this.get_car_point();
this.get_camera_point();
}, },
methods: { methods: {
// 七个区域所有的企业 // 七个区域所有的企业
@ -251,6 +259,7 @@ export default {
}; };
queryVideo(param).then((res) => { queryVideo(param).then((res) => {
this.video_list = res.data; this.video_list = res.data;
this.camera_list = [];
this.company_list = []; this.company_list = [];
this.car_list = []; this.car_list = [];
// 重新在地图打点 // 重新在地图打点
@ -264,6 +273,7 @@ export default {
console.log("resss", res); console.log("resss", res);
if (res.code == 200) { if (res.code == 200) {
this.car_list = res.data; this.car_list = res.data;
this.camera_list = [];
this.company_list = []; this.company_list = [];
this.video_list = []; this.video_list = [];
// 重新在地图打点 // 重新在地图打点
@ -273,6 +283,21 @@ export default {
this.$message.warning(res.msg); this.$message.warning(res.msg);
} }
}, },
// 展示感知设备点位
async get_camera() {
this.company_flag = "0";
let res = await camera_point();
if (res.code == 200) {
this.camera_list = res.data;
this.car_list = [];
this.company_list = [];
this.video_list = [];
// 重新在地图打点
this.$refs.factorMap.init_map();
} else if (res.code == 500) {
this.$message.warning(res.msg);
}
},
// 查询企业 // 查询企业
search_map() { search_map() {
let param = { let param = {
@ -330,15 +355,19 @@ export default {
}; };
let res = await car_line(params); let res = await car_line(params);
if (res.code == 200) { if (res.code == 200) {
console.log("res", res); console.log("res", res.data);
let arr = [ // let arr = [
{ longitude: 121.597849, latitude: 29.904037 }, // { longitude: 121.597849, latitude: 29.904037 },
{ longitude: 121.593864, latitude: 29.903234 }, // { longitude: 121.593864, latitude: 29.903234 },
]; // { longitude: 121.594464, latitude: 29.905234 },
// { longitude: 121.596364, latitude: 29.904434 },
// ];
let arr = res.data;
const new_line = arr.map((item) => ({ const new_line = arr.map((item) => ({
longitude: item.longitude, longitude: item.longitude,
latitude: item.latitude, latitude: item.latitude,
})); }));
console.log("nnn", new_line);
this.$message.success("车辆轨迹查询中..."); this.$message.success("车辆轨迹查询中...");
// 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心 // 查看轨迹的点击事件是要重新创建地图的，以该车坐标为中心
this.$refs.factorMap.cause_car_line_map(item, new_line); this.$refs.factorMap.cause_car_line_map(item, new_line);
@ -355,6 +384,16 @@ export default {
this.$message.warning(res.msg); this.$message.warning(res.msg);
} }
}, },
async get_camera_point() {
let res = await camera_point();
console.log("resssc", res);
if (res.code == 200) {
// this.car_list = res.data
this.btn_camera = `感知设备(${res.data.length})`;
} else if (res.code == 500) {
this.$message.warning(res.msg);
}
},
// 点击跳转企业档案详情页面 // 点击跳转企业档案详情页面
turn() { turn() {
sessionStorage.setItem("companyID", this.id); sessionStorage.setItem("companyID", this.id);
@ -488,7 +527,7 @@ export default {
} }
.left_check { .left_check {
width: 13vw; width: 13vw;
height: 18vh; height: 23vh;
border: 0.1px solid #28847e; border: 0.1px solid #28847e;
background: #212f30; background: #212f30;
border-radius: 4px; border-radius: 4px;
@ -507,7 +546,7 @@ export default {
margin-top: 1vh; margin-top: 1vh;
margin-left: 1vw; margin-left: 1vw;
width: 11vw; width: 11vw;
height: 13vh; height: 18vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.el-button { .el-button {

Write Preview
Loading…
Cancel
Save