Skip to content

H
holo-web
Commit 1a93e18f authored by ninglx's avatar ninglx
Browse files
Options

mapbox初步迁移mine map

parent 013daa15
Hide whitespace changes
Inline Side-by-side
Showing with 574 additions and 355 deletions
wj-manage-web/public/index.html
View file @ 1a93e18f
......@@ -22,6 +22,23 @@
href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css"
type="text/css"
/>
<link rel="stylesheet" href="//119.163.106.187:11080/minemapapi/v2.1.0/minemap.css">
<script src="//119.163.106.187:11080/minemapapi/v2.1.0/minemap.js"></script>
<script>
/**
* 全局参数设置
*/
minemap.domainUrl = '//119.163.106.187:11080';
minemap.dataDomainUrl = '//119.163.106.187:11080';
minemap.serverDomainUrl = '//119.163.106.187:11080';
minemap.spriteUrl = '//119.163.106.187:11080/minemapapi/v2.1.0/sprite/sprite';
minemap.serviceUrl = '//119.163.106.187:11080/service/';
/**
* key、solution设置
*/
minemap.key = 'fe874f67b89d4c0dab56780f8423324c';
minemap.solution = 12612;
</script>
<style>
#app,
html,
......@@ -87,7 +104,8 @@
max-width: unset !important;
}
.mapboxgl-popup-content {
.minemap-popup-content {
overflow: unset !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
......@@ -97,31 +115,31 @@
display: none !important;
}
.mapboxgl-popup-tip {
.minemap-popup-tip {
display: none !important;
}
.mapboxgl-popup-close-button {
.minemap-popup-close-button {
font-size: 26px;
color: white;
}
.vehicleDetailPopup .mapboxgl-popup-close-button {
.vehicleDetailPopup .minemap-popup-close-button {
right: 14px;
top: 18px;
}
.eventPopup .mapboxgl-popup-close-button {
.eventPopup .minemap-popup-close-button {
right: 8px;
top: 10px;
}
.equipmentPopup .mapboxgl-popup-close-button {
.equipmentPopup .minemap-popup-close-button {
right: 8px;
top: 10px;
}
.mapboxgl-ctrl-logo {
.minemap-ctrl-logo {
display: none !important;
}
......
wj-manage-web/src/components/Standard/cameraVideo.vue
View file @ 1a93e18f
......@@ -137,6 +137,7 @@ export default {
</script>
<style>
video {
object-fit: fill;
width: 100% !important;
height: 100% !important;
}
......
wj-manage-web/src/components/Standard/mapMapbox.vue
View file @ 1a93e18f
......@@ -5,6 +5,8 @@
</template>
<script>
import {initWMap} from "@/utils/mapUtils";
let map;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default {
......@@ -26,19 +28,19 @@ export default {
if(this.$store.state.mapInit.zoom){
zoom = this.$store.state.mapInit.zoom
}
let options = Object.assign(
{},
{
container: this.mapId,
style: map_config.MAP_STYLE,
center: center,
zoom: zoom,
maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH,
},
option
);
map = new mapboxgl.Map(options);
// let options = Object.assign(
// {},
// {
// container: this.mapId,
// style: map_config.MAP_STYLE,
// center: center,
// zoom: zoom,
// maxZoom: map_config.MAX_ZOOM,
// pitch: map_config.MAP_PITCH,
// },
// option
// );
map = initWMap(this.mapId, center, zoom);
return map;
},
destroyMap() {
......
wj-manage-web/src/utils/mapUtils.js 0 → 100644
View file @ 1a93e18f
const PI = Math.PI
const a = 6378245.0
const ee = 0.00669342162296594323
export function initWMap(id,center,zoom) {
let map = new minemap.Map({
container: id,
// style: '//119.163.106.187:11080/service/solu/style/id/12612', /*白色底图样式*/
style: '//119.163.106.187:11080/service/solu/style/id/12620', /*蓝色底图样式*/
center: center || map_config.MAP_CENTER,
zoom: zoom || map_config.MAP_ZOOM,
pitch: map_config.MAP_PITCH,
// maxZoom: map_config.MAX_ZOOM, /*地图最大缩放等级*/
maxZoom: 17.8, /*地图最大缩放等级*/
minZoom: 3, /*地图最小缩放等级*/
projection: 'MERCATOR'
});
return map
}
export function mDrawLine(id, jsonData, item) {
let res = []
for (let a1 of jsonData) {
res.push(wgs84togcj02(a1[0], a1[1]))
}
let geo = turf.lineString(res, item)
!window.wmap.getSource(id) && window.wmap.addSource(id, {
"type": "geojson",
"data": geo
});
!window.wmap.getLayer(id) && window.wmap.addLayer({
"id": id,
"type": "line",
"source": id,
"layout": {
"line-join": "round",
"line-cap": "round",
// "border-visibility":"visible" //是否开启线边框
},
"paint": {
"line-width": 2,
"line-color": '#389fff',
'line-dasharray': [1, 4],
// {
// "type": "categorical",
// "property": "kind",
// "stops": [[1, "#ff0000"], [2, "#00ff00"]],
// "default": "#ff0000"
// },
"line-border-width": 0, //设置线边框宽度
"line-border-opacity": 1, //设置线边框透明度
"line-border-color": 'blue' //设置线边框颜色
},
// "minzoom": 7,
// "maxzoom": 17.5
});
}
export function mDrawPolygon(id, jsonData, item, callback) {
let res = [[]]
for (let a2 of jsonData) {
for (let a1 of a2) {
res[0].push(wgs84togcj02(a1[0], a1[1]))
}
}
let geo = turf.polygon(res, item)
!window.wmap.getSource(id) && window.wmap.addSource(id, {
"type": "geojson",
"data": geo
});
!window.wmap.getLayer(id) && window.wmap.addLayer({
"id": id,
"type": "fill",
"source": id,
"layout": {
"visibility": "visible",
},
"paint": {
"fill-color": "#12a3cd",
"fill-opacity": 0.3,
"fill-outline-color": "rgba(1,1,1,0)"
},
// "minzoom": 7,
// "maxzoom": 17.5
});
window.wmap.on('click', id, () => {
callback(item)
})
}
// icon-image : mapImage
export function mDrawIconPoint(id, jsonData, callback) {
let features = []
for (let pointItem of jsonData) {
let convertPoint = wgs84togcj02(pointItem.lng, pointItem.lat)
features.push(turf.point(convertPoint, pointItem))
}
let geo = turf.featureCollection(features)
!window.wmap.getSource(id) && window.wmap.addSource(id, {
"type": "geojson",
"data": geo
});
!window.wmap.getLayer(id) && window.wmap.addLayer({
"id": id,
"type": "symbol",
"source": id,
"layout": {
'icon-allow-overlap':true,
'icon-ignore-placement':true,
'icon-offset':[0,-20],
"icon-image": ["get",'mapImage'],
"icon-size": 1,
'symbol-z-order':'viewport-y'
}
});
if(callback){
window.wmap.on('click',id,(abc)=>{
callback(abc)
})
}
}
export function wgs84togcj02(lng, lat) {
var dlat = transformlat(lng - 105.0, lat - 35.0)
var dlng = transformlng(lng - 105.0, lat - 35.0)
var radlat = lat / 180.0 * PI
var magic = Math.sin(radlat)
magic = 1 - ee * magic * magic
var sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
const mglat = lat + dlat
const mglng = lng + dlng
return [mglng, mglat]
}
function transformlat(lng, lat) {
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
return ret
}
function transformlng(lng, lat) {
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
return ret
}
\ No newline at end of file
wj-manage-web/src/utils/mapboxTools.js
View file @ 1a93e18f
// Function to create a triangle icon (arrow)
function createTriangleIcon(color) {
const canvas = document.createElement("canvas");
......@@ -208,6 +207,7 @@ export function addOrUpdateDetetorA(map, geo) {
);
}
}
export function addOrUpdateDetetorB(map, geo) {
if (!map.getSource("detetorsB")) {
map.addSource("detetorsB", {
......@@ -240,6 +240,7 @@ export function addOrUpdateDetetorB(map, geo) {
);
}
}
export function addOrUpdateDetetorC(map, geo) {
if (!map.getSource("detetorsC")) {
map.addSource("detetorsC", {
......@@ -316,7 +317,7 @@ export function addOrUpdateRoadVector(map) {
export function addOrUpdateWave(map, geo) {
if (map.getSource("dot-point")) {
map.getSource("dot-point").setData(geo);
} else {
map.addSource("dot-point", {
type: "geojson",
......@@ -340,8 +341,9 @@ export function addOrUpdateWave(map, geo) {
map.moveLayer("vehicleSelectWave", "vehiclePic");
}
}
}
export function convertPointsToGeo(arr) {
let features = []
for (let item of arr) {
......@@ -349,6 +351,7 @@ export function convertPointsToGeo(arr) {
}
return turf.featureCollection(features)
}
export function convertPointsLocationToGeo(arr) {
let features = []
for (let item of arr) {
......@@ -356,13 +359,15 @@ export function convertPointsLocationToGeo(arr) {
}
return turf.featureCollection(features)
}
export function convertPointsLngLatToGeo(arr) {
let features = []
for (let item of arr) {
features.push(turf.point([item.lng, item.lat], item))
features.push(turf.point(wgs84togcj02([item.lng, item.lat]), item))
}
return turf.featureCollection(features)
}
export function convertPointsWktToGeo(arr) {
let features = [];
for (let item of arr) {
......@@ -370,28 +375,30 @@ export function convertPointsWktToGeo(arr) {
if (item.wkt.split(",").length === 2) {
features.push(
turf.point(
item.wkt.split(",").map((item) => Number(item)),
wgs84togcj02(item.wkt.split(",").map((item) => Number(item))),
item
)
);
}
}
}
return turf.featureCollection(features);
return turf.featureCollection(features)
}
export function convertToLineWithWkt(json) {
let features = [];
for (let item of json) {
if (item.wkt) {
let lnglats = item.wkt.split(";");
let lnglats = wgs84togcj02(item.wkt.split(";"));
for (let i = 0; i < lnglats.length; i++) {
lnglats[i] = lnglats[i].split(",").map((j) => Number(j));
}
features.push(turf.lineString(lnglats, item));
}
}
return turf.featureCollection(features);
return turf.featureCollection(features)
}
// type 4 种颜色 对应 4种告警信息
export function addOrUpdateWarningWave(map, arr, id) {
let geo = convertPointsToGeo(arr)
......@@ -460,7 +467,7 @@ export function addOrUpdateVehicle(map, arr) {
// 路口icon
export function addOrUpdateCross(map, geo, callback) {
console.log('cross geo...', geo)
if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", {
type: "geojson",
......@@ -693,6 +700,7 @@ export function addOrUpdateEquipMilli(map, geo, callback) {
'milli',
"milliFalse",
], // 默认值，如果没有匹配到上述枚举值]
'icon-offset':[0,-20],
// "icon-image": "milli",
"icon-size": 0.6,
"icon-ignore-placement": true,
......@@ -717,6 +725,7 @@ export function addOrUpdateEquipRadar(map, geo, callback) {
type: "symbol",
source: "radar",
layout: {
'icon-offset':[0,-20],
"icon-image": [
"match",
["get", "status"], // 属性字段名称
......@@ -750,6 +759,7 @@ export function addOrUpdateEquipSignal(map, geo, callback) {
type: "symbol",
source: "signal",
layout: {
'icon-offset':[0,-20],
// "icon-image": "signal",
"icon-image": [
"match",
......@@ -783,6 +793,7 @@ export function addOrUpdateEquipWeather(map, geo, callback) {
type: "symbol",
source: "weather",
layout: {
'icon-offset':[0,-20],
// "icon-image": "weather",
"icon-image": [
"match",
......@@ -1048,14 +1059,14 @@ export function addOrUpdateFlowLineRText(map, geo) {
}
// 分析报告 - 流量线箭头
export function addOrUpdateFlowLineRArrow(map, points) {
export function addOrUpdateFlowLineRArrow(map, geo) {
if (!map.getSource("flowLineArrowR")) {
map.addSource('flowLineArrowR', {
type: 'geojson',
data: points
data: geo
});
} else {
map.getSource("flowLineArrowR").setData(points);
map.getSource("flowLineArrowR").setData(geo);
}
if (!map.getLayer("flowLineArrowR")) {
// console.log('has.............');
......@@ -1120,7 +1131,7 @@ export function addOrUpdateFlowLineArrow(map, json) {
turf.point(item.lineArray[1])
);
features.push(
turf.point([item.endLng, item.endLat], { ...item, angle: angle })
turf.point(wgs84togcj02([item.endLng, item.endLat]), {...item, angle: angle})
);
}
}
......@@ -1158,7 +1169,7 @@ export function addOrUpdateFlowText(map, json) {
let features = [];
for (let item of json) {
if (item.select) {
features.push(turf.point([item.startLng, item.startLat], item));
features.push(turf.point(wgs84togcj02([item.startLng, item.startLat]), item));
}
}
let geo = turf.featureCollection(features);
......@@ -1195,7 +1206,7 @@ export function addOrUpdateFlowTextEnd(map, json) {
let features = [];
for (let item of json) {
if (item.select) {
features.push(turf.point([item.endLng, item.endLat], item));
features.push(turf.point(wgs84togcj02([item.endLng, item.endLat]), item));
}
}
let geo = turf.featureCollection(features);
......@@ -1226,6 +1237,7 @@ export function addOrUpdateFlowTextEnd(map, json) {
});
}
}
// let roadLineGeo = null, roadChunkPointGeo = null
// export function addCalibrationTail(map) {
// // 计算1米在当前地图的经度度数
......@@ -1359,7 +1371,7 @@ export function addCalibrationTail(map) {
res.json().then((data) => {
console.log("data...", data);
roadLineGeo = data.roadLineGeo;
roadChunkPointGeo = data.roadChunkPointGeo;
roadChunkPointGeo = data.roadChunkPointGeo
map.addSource("calibrationTail", {
type: "geojson",
data: roadLineGeo,
......@@ -1478,3 +1490,39 @@ export const vehicleWave = {
return true;
},
};
const PI = Math.PI
const a = 6378245.0
const ee = 0.00669342162296594323
export function wgs84togcj02([lng, lat]) {
lng = Number(lng)
lat = Number(lat)
var dlat = transformlat(lng - 105.0, lat - 35.0)
var dlng = transformlng(lng - 105.0, lat - 35.0)
var radlat = lat / 180.0 * PI
var magic = Math.sin(radlat)
magic = 1 - ee * magic * magic
var sqrtmagic = Math.sqrt(magic)
dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI)
dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI)
const mglat = lat + Number(dlat)
const mglng = lng + Number(dlng)
return [mglng, mglat]
}
function transformlat(lng, lat) {
var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0
ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0
return ret
}
function transformlng(lng, lat) {
var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0
ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0
ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0
return ret
}
wj-manage-web/src/views/analysis/reportCross.vue
View file @ 1a93e18f
......@@ -179,7 +179,7 @@ import Pigination from "../../components/Standard/pigination.vue";
import Reports from "./historyReports/index.vue";
import {
addOrUpdateCross,
addOrUpdateCrossName,
addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools";
import { generateReport } from "../../dao/analysis";
......@@ -191,7 +191,6 @@ export default {
Pigination,
Reports,
},
computed: {},
data() {
return {
formOptions: "",
......@@ -468,7 +467,7 @@ export default {
for (let item of this.$store.state.dicts.CrossInfo) {
points.push(
turf.point(
[item.location.split(",")[0], item.location.split(",")[1]],
wgs84togcj02(item.location.split(",")),
item
)
);
......@@ -483,7 +482,7 @@ export default {
},
crossClick(e) {
let prop = e.features[0]?.properties;
map.flyTo({ center: prop.location.split(","), zoom: 19 });
map.flyTo({ center: wgs84togcj02(prop.location.split(",")), zoom: 17.8 });
},
},
beforeDestroy() {
......
wj-manage-web/src/views/efficiency/leftMap.vue
View file @ 1a93e18f
......@@ -4,75 +4,75 @@
<div class="msg_card_inner">
<div class="left_search">
<el-input
style="background-color: transparent"
placeholder="请输入路口名称"
@input="filterCrossTable"
v-model="crossName"
:maxlength='64'
style="background-color: transparent"
placeholder="请输入路口名称"
@input="filterCrossTable"
v-model="crossName"
:maxlength='64'
>
<template slot="prepend"><i class="el-icon-search"></i></template>
</el-input>
</div>
<div class="left_table">
<el-table
@row-click="rowClick"
style="width: 100%;"
height="100%"
v-loading="tableLoading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
ref="multipleTable"
:row-class-name="getRowClassName"
:data="tableData"
class="track-result-table"
cell-class-name="custom-table-cell"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
@row-click="rowClick"
style="width: 100%;"
height="100%"
v-loading="tableLoading"
element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
ref="multipleTable"
:row-class-name="getRowClassName"
:data="tableData"
class="track-result-table"
cell-class-name="custom-table-cell"
header-row-class-name="custom-table-header"
header-cell-class-name="custom-table-header-cell"
>
<el-table-column align="center" min-width="50" label="排名" sortable prop="rank">
</el-table-column>
<el-table-column
min-width="60"
align="center"
:show-overflow-tooltip="true"
prop="crossName"
label="路口名称"
min-width="60"
align="center"
:show-overflow-tooltip="true"
prop="crossName"
label="路口名称"
>
</el-table-column>
<el-table-column
min-width="60"
sortable
align="center"
:show-overflow-tooltip="true"
prop="efficiencyIndex"
label="效率指数"
min-width="60"
sortable
align="center"
:show-overflow-tooltip="true"
prop="efficiencyIndex"
label="效率指数"
>
</el-table-column>
<el-table-column
min-width="60"
align="center"
sortable
:sort-method="sortByLevel"
:show-overflow-tooltip="true"
label="评价等级"
min-width="60"
align="center"
sortable
:sort-method="sortByLevel"
:show-overflow-tooltip="true"
label="评价等级"
>
<template slot-scope="scope">
{{
scope.row.evaluationGrade === "1"
? "高"
: scope.row.evaluationGrade === "2"
? "中"
: scope.row.evaluationGrade === "3"
? "低"
: ""
? "高"
: scope.row.evaluationGrade === "2"
? "中"
: scope.row.evaluationGrade === "3"
? "低"
: ""
}}
</template>
</el-table-column>
</el-table>
</div>
<div class="left_map">
<w-map ref="mapC" mapId="efficiency_map" />
<w-map ref="mapC" mapId="efficiency_map"/>
</div>
</div>
</msg-card>
......@@ -80,19 +80,20 @@
</template>
<script>
import { getEfficiencyRank } from "../../dao/efficiency";
import {getEfficiencyRank} from "../../dao/efficiency";
import MsgCard from "../../components/Standard/msg-card.vue";
import WMap from "../../components/Standard/mapMapbox.vue";
import mapAssets from "../../config/holo/mapAssets";
import {
addOrUpdateCross,
addOrUpdateCrossName,
wgs84togcj02
} from "../../utils/mapboxTools";
let map;
export default {
name: "leftMap",
components: { WMap, MsgCard },
components: {WMap, MsgCard},
props: {
granularity: {
type: String,
......@@ -125,8 +126,7 @@ export default {
map.on("style.load", () => {
for (let key in mapAssets.mapIcons) {
map.loadImage(mapAssets.mapIcons[key], (error, image) => {
if (!map.hasImage(key)) map.addImage(key, image);
if (!map.hasImage(key)) map.addImage(key, image);
});
}
map.setPitch(0);
......@@ -134,9 +134,9 @@ export default {
let needDicts = ["CrossInfo"];
for (let item of needDicts) {
queue.push(
this.$store.dispatch("QUERY_DICT", {
type: item,
})
this.$store.dispatch("QUERY_DICT", {
type: item,
})
);
}
Promise.all(queue).then(() => {
......@@ -163,7 +163,7 @@ export default {
this.drawCrossPoint();
if (this.tableFullData.length) {
map.flyTo({
center: this.tableFullData[0].location.split(","),
center: wgs84togcj02(this.tableFullData[0].location.split(",")),
zoom: 15,
});
this.$emit("crossChange", this.tableFullData[0]);
......@@ -174,14 +174,14 @@ export default {
drawCrossPoint() {
let geos = this.tableFullData;
if (geos.length) {
map.setCenter(geos[0].location.split(","));
map.setCenter(wgs84togcj02(geos[0].location.split(",")));
}
for (let i = 0; i < geos.length; i++) {
geos[i].isSignal = i ? 1 : "select";
}
let features = [];
for (let cross of geos) {
features.push(turf.point(cross.location.split(","), cross));
features.push(turf.point(wgs84togcj02(cross.location.split(",")), cross));
}
let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick);
......@@ -221,7 +221,7 @@ export default {
let prop = e.features[0].properties;
this.lastCheck = prop;
this.updateLayer(prop);
map.flyTo({ center: prop.location.split(",") });
map.flyTo({center: prop.location.split(",")});
this.$emit("crossChange", prop);
},
rowClick(row) {
......@@ -249,7 +249,8 @@ export default {
},
},
beforeDestroy() {},
beforeDestroy() {
},
};
</script>
......@@ -258,9 +259,11 @@ export default {
.leftMapEf {
height: 100%;
::v-deep .content {
margin: 20px 0;
}
.msg_card_inner {
height: 100%;
display: flex;
......@@ -284,6 +287,7 @@ export default {
border: 1px solid #193259;
}
}
::v-deep .el-input-group__prepend {
background-color: transparent;
border: 1px solid rgba(25, 58, 110, 1);
......@@ -297,30 +301,37 @@ export default {
font-size: 16px;
font-weight: 500;
}
::v-deep .el-checkbox__inner {
background-color: transparent;
border: 1px solid gray;
}
::v-deep .row-deep-select {
td:first-child {
border-left: 1px solid rgba(31, 147, 255, 1);
}
td:last-child {
border-right: 1px solid rgba(31, 147, 255, 1);
}
td {
background-color: #030d1e;
border-top: 1px solid rgba(31, 147, 255, 1);
border-bottom: 1px solid rgba(31, 147, 255, 1);
}
}
::v-deep .row-not-select {
td:first-child {
border-left: 1px solid rgba(31, 147, 255, 1);
}
td:last-child {
border-right: 1px solid rgba(31, 147, 255, 1);
}
td {
background-color: #061124;
border-top: 1px solid rgba(31, 147, 255, 1);
......
wj-manage-web/src/views/organization/index.vue
View file @ 1a93e18f
......@@ -215,6 +215,7 @@ import {
inletWayTimeBetw,
inletWayTurnTimeBetw,
} from "../../dao/situation";
import {wgs84togcj02} from "../../utils/mapboxTools";
let bottomMap;
export default {
components: {
......@@ -380,7 +381,7 @@ export default {
});
bottomMap.flyTo({
center: row.location.split(","),
center: wgs84togcj02(row.location.split(",")),
maxDuration: 1000,
zoom: 17.2,
pitch: 0,
......@@ -448,11 +449,6 @@ export default {
JSON.stringify(item.properties.ridList) ===
JSON.stringify(prop.ridList)
) {
console.log(
"dengyu ===",
JSON.stringify(item.properties.ridList),
JSON.stringify(prop.ridList)
);
item.properties.select = 1;
let timeParam = this.getStartAndEndDate();
let queue = [];
......
wj-manage-web/src/views/organization/leftMap.vue
View file @ 1a93e18f
......@@ -63,7 +63,7 @@ import { orgRank } from "../../dao/organization";
import mapAssets from "../../config/holo/mapAssets";
import {
addOrUpdateCross,
addOrUpdateCrossName,
addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools";
let map;
......@@ -100,20 +100,11 @@ export default {
}
this.fullData = res.content;
this.tableData = this.fullData;
// this.tableData = [
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// ]
this.tableLoading = false;
// 选中第一条数据， 并请求右侧所有指标
let features = [];
for (let cross of this.fullData) {
features.push(turf.point(cross.location.split(","), cross));
features.push(turf.point(wgs84togcj02(cross.location.split(",")), cross));
}
let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick);
......@@ -121,7 +112,7 @@ export default {
if (res.content.length) {
this.$emit("crossChange", res.content[0]);
map.flyTo({
center: res.content[0].location.split(","),
center: wgs84togcj02(res.content[0].location.split(",")),
zoom: 15,
});
}
......@@ -161,14 +152,14 @@ export default {
let prop = e.features[0].properties;
this.lastCheck = prop;
this.updateLayer(prop);
map.flyTo({ center: prop.location.split(",") });
map.flyTo({ center: wgs84togcj02(prop.location.split(",")) });
this.$emit("crossChange", prop);
},
rowClick(row) {
this.lastCheck = row;
this.updateLayer(row);
map.flyTo({
center: row.location.split(","),
center: wgs84togcj02(row.location.split(",")),
});
this.$emit("crossChange", row);
},
......
wj-manage-web/src/views/organization/mapConflict.vue
View file @ 1a93e18f
......@@ -28,7 +28,7 @@ let map;
const conflictOptions = ["机非", "人非", "机机", "人机"];
import { orgConflict } from "../../dao/organization";
import wMap from "../../components/Standard/mapMapbox.vue";
import { addOrUpdateEventHeat } from "../../utils/mapboxTools";
import {addOrUpdateEventHeat, wgs84togcj02} from "../../utils/mapboxTools";
export default {
name: "mapConflict",
components: {
......@@ -89,7 +89,7 @@ export default {
convertPointJsonToGeo(array) {
let features = [];
for (let item of array) {
features.push(turf.point([item.lng, item.lat], item));
features.push(turf.point([wgs84togcj02(item.lng, item.lat)], item));
}
return turf.featureCollection(features);
},
......@@ -124,7 +124,7 @@ export default {
},
refreshMapData() {
map.flyTo({
center: this.rowData.location.split(","),
center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000,
zoom: 17.2,
pitch: 0,
......
wj-manage-web/src/views/organization/mapFlow.vue
View file @ 1a93e18f
......@@ -24,7 +24,7 @@ import {
addOrUpdateFlowLineArrow,
addOrUpdateFlowText,
addOrUpdateFlowTextEnd,
addOrUpdateRoadPolygon,
addOrUpdateRoadPolygon, wgs84togcj02,
} from "../../utils/mapboxTools";
export default {
name: "mapFlow",
......@@ -63,7 +63,7 @@ export default {
// 画车道面和流量曲线和流量值
getCrossPolygon() {
map.flyTo({
center: this.rowData.location.split(","),
center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000,
zoom: 17.2,
pitch: 0,
......@@ -116,10 +116,10 @@ export default {
let lnglatArray = lane.arcLine.split(";");
let resultPointArray = [];
for (let lnglat of lnglatArray) {
resultPointArray.push([
resultPointArray.push(wgs84togcj02([
Number(lnglat.split(",")[0]),
Number(lnglat.split(",")[1]),
]);
]));
}
singleLane.select = 0;
......
wj-manage-web/src/views/organization/mapTrack.vue
View file @ 1a93e18f
......@@ -13,7 +13,7 @@
<script>
let map;
import wMap from "../../components/Standard/mapMapbox.vue";
import { addOrUpdateTrackPointVector } from "../../utils/mapboxTools";
import {addOrUpdateTrackPointVector, wgs84togcj02} from "../../utils/mapboxTools";
export default {
name: "mapTrack",
components: {
......@@ -51,7 +51,7 @@ export default {
refreshData() {
this.loading = true;
map.flyTo({
center: this.rowData.location.split(","),
center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000,
zoom: 17.2,
pitch: 0,
......
wj-manage-web/src/views/safety/bottomCameras.vue
View file @ 1a93e18f
......@@ -187,6 +187,7 @@ export default {
}
.video {
object-fit: fill;
width: calc((100% - 40px) / 4);
background-color: #132039;
margin-right: 10px;
......
wj-manage-web/src/views/safety/leftMap.vue
View file @ 1a93e18f
......@@ -84,7 +84,7 @@ import mapAssets from "../../config/holo/mapAssets";
import { safetyRank } from "../../dao/safety";
import {
addOrUpdateCross,
addOrUpdateCrossName,
addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools";
import {
equip_camera,
......@@ -151,7 +151,7 @@ export default {
// 选中第一条数据， 并请求右侧所有指标
let features = [];
for (let cross of this.fullData) {
features.push(turf.point(cross.location.split(","), cross));
features.push(turf.point(wgs84togcj02(cross.location.split(",")), cross));
}
let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick);
......@@ -162,7 +162,7 @@ export default {
this.cameraList = camera.content
this.$emit("crossChange", res.content[0], this.cameraList);
map.flyTo({
center: res.content[0].location.split(","),
center: wgs84togcj02(res.content[0].location.split(",")),
zoom: 15,
});
});
......
wj-manage-web/src/views/situation/index.vue
View file @ 1a93e18f
<template>
<div class="main situation" v-loading.fullscreen.lock="loading" element-loading-text="数据加载中..."
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
<track-switcher :detetors="detetorsArray" :boxShow="boxesShow" @timeChange="timeChange" v-show="trackSwitcherVis"
@closeRealTime="closeRealTime" @openRealTime="openRealTime"></track-switcher>
<situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal" />
<wMap :mapId="'situation-map'" ref="wMap" />
@closeRealTime="closeRealTime" @openRealTime="openRealTime"></track-switcher>
<situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal"/>
<wMap :mapId="'situation-map'" ref="wMap"/>
<!--左右图表组件-->
<message-boxes @playOverHistoryTrace="playOverHistoryTrace" @delWarningPopup="delWarningPopup"
@addWarningPopup="addWarningPopup" :show="boxesShow" />
@addWarningPopup="addWarningPopup" :show="boxesShow"/>
<!--图层切换按钮-->
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
:class="boxesShow ? 'generalSwitch' : 'rightSwitch'"/>
<!--视频播放组件-->
<video-list ref="videoList" v-if="showCameras.length" @updateCamera="updateCameraCPB" @resetCamera="resetCamera"
@delVideo="deleteVideo" :showCameras="showCameras" />
@delVideo="deleteVideo" :showCameras="showCameras"/>
<!--路口详情-->
<cross-detail v-if="dialogVisible.crossDetail" @actionFinished="actionFinished" dialogId="crossDetail"
:crossDetailData="crossDetailData" />
:crossDetailData="crossDetailData"/>
<!--底部交通事件趋势分析-->
<traffic-events-tend @updateHeatMap="refreshEventLayer" v-if="currentCheck === 'third'" />
<traffic-events-tend @updateHeatMap="refreshEventLayer" v-if="currentCheck === 'third'"/>
<!--设备图例控制-->
<equipment-switch @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
<equipment-switch @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'"/>
<!--单车超限历史轨迹视频-->
<sigalTraceVideos @isReady="singalHistoryVideoReady" :urls="hisUrls" :key="sigalKey" v-if="showHisVid">
</sigalTraceVideos>
......@@ -35,7 +35,7 @@ import MessageBoxes from "./floatData/messageBoxes.vue";
import CrossDetail from "./crossDetail.vue";
import VideoList from "./floatData/videoList.vue";
import TrafficEventsTend from "./floatData/trafficEventsTend.vue";
import { initWs } from "../../config/holo/websocket";
import {initWs} from "../../config/holo/websocket";
import dict from "../../config/holo/dictionary";
import mapAssets from "../../config/holo/mapAssets";
import * as mapTools from "../../utils/mapboxTools";
......@@ -60,7 +60,7 @@ import {
equip_radar,
getDetetors,
} from "../../dao/situation";
import { convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt } from "../../utils/mapboxTools";
import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt, wgs84togcj02} from "../../utils/mapboxTools";
const VehiclePopup = Vue.extend(vehicleDetail);
const EquipmentPopup = Vue.extend(equipmentPopup);
......@@ -69,7 +69,7 @@ const AlarmPopup = Vue.extend(alarmPopup)
let pulsingDots = [];
const canvasImages = [
{ size: 250, color: "252, 1, 26" },
{size: 250, color: "252, 1, 26"},
// {size: 400, color: "255,235,59"},
// {size: 400, color: "255, 141, 26"},
// {size: 400, color: "227, 5, 5"},
......@@ -109,18 +109,18 @@ for (let i = 0; i < canvasImages.length; i++) {
pulsingDots.push(pulsingDot);
}
let map,
equipPopup = null, // 设备弹窗
popupInstance = null, // 设备弹窗组件实例 用来更新数据与销毁
vehiclePopups = {},
popupVises = {},
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model
vehicleModelTypes = {},
lastFrameTime = null,
noTrackMsg = null,
AlarmPopupIns = {},
trackTimer = null; // 轨迹心跳检测
equipPopup = null, // 设备弹窗
popupInstance = null, // 设备弹窗组件实例 用来更新数据与销毁
vehiclePopups = {},
popupVises = {},
vehiclePopupInstances = {},
licenseLabel = {}, // 车牌号label
vehicleModels = {}, // 车辆model
vehicleModelTypes = {},
lastFrameTime = null,
noTrackMsg = null,
AlarmPopupIns = {},
trackTimer = null; // 轨迹心跳检测
export default {
mixins: [
......@@ -216,19 +216,19 @@ export default {
boxesShow(val) {
if (val) {
document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.remove("mapboxgl-ctrl-bottom-right-hide-box");
} else {
document
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box");
.getElementsByClassName("mapboxgl-ctrl-bottom-right")[0]
.classList.add("mapboxgl-ctrl-bottom-right-hide-box");
}
},
},
created() {
},
mounted() {
this.$EventBus.$on("emitPopupClose", ({ id, overRun }) => {
this.$EventBus.$on("emitPopupClose", ({id, overRun}) => {
console.log('eventbus event received...', id)
vehiclePopups[`popup${id}`]?.remove();
delete vehiclePopups[`popup${id}`];
......@@ -261,9 +261,9 @@ export default {
];
for (let item of needDicts) {
queue.push(
this.$store.dispatch("QUERY_DICT", {
type: item,
})
this.$store.dispatch("QUERY_DICT", {
type: item,
})
);
}
Promise.all(queue).then(() => {
......@@ -296,19 +296,19 @@ export default {
// 重度拥堵: 3,
// 疑似事故: 4,
// };
let resItem = Object.assign({}, item, { longitude: item.lng, latitude: item.lat, type: 3 })
let resItem = Object.assign({}, item, {longitude: item.lng, latitude: item.lat, type: 3})
mapTools.addOrUpdateWarningWave(map, [resItem], item.eventSerialNumber);
// 上报产生的告警 弹窗提醒 定时销毁
let popup = new mapboxgl.Popup({
let popup = new minemap.Popup({
anchor: "bottom",
closeButton: false,
offset: [0, 0],
});
popup
.setLngLat([item.lng, item.lat])
.setHTML('<div id="alarm_popup"></div>')
.addTo(map)
.addClassName("alarmPopup");
.setLngLat([item.lng, item.lat])
.setHTML('<div id="alarm_popup"></div>')
.addTo(map)
.addClassName("alarmPopup");
new AlarmPopup({
propsData: {
model: item,
......@@ -424,9 +424,9 @@ export default {
for (let item of equips) {
if (map.getLayer(item.label)) {
map.setLayoutProperty(
item.label,
"visibility",
item.check ? "visible" : "none"
item.label,
"visibility",
item.check ? "visible" : "none"
);
}
}
......@@ -437,8 +437,8 @@ export default {
let prop = e.features[0]?.properties;
if (prop) {
this.boxesShow = false;
map.setCenter(prop.location.split(","));
map.setZoom(19);
map.setCenter(wgs84togcj02(prop.location.split(",")));
map.setZoom(17.8);
let matchCameras = this.cameraData.filter((camera) => {
return camera.crossId === prop.id;
});
......@@ -474,23 +474,23 @@ export default {
return item.oid == oid;
});
if (cameraItem && map) {
this.cLocation = cameraItem.wkt.split(",");
this.cLocation = wgs84togcj02(cameraItem.wkt.split(","));
this.cBearing = cameraItem.monitorDirect;
let offsetLength = 22;
if (cameraItem.addressType == "4") {
offsetLength = offsetLength + Number(cameraItem.installHeight);
}
let translatedPoint = turf.destination(
this.cLocation,
offsetLength, // 相机向前偏移距离
this.cBearing,
{ units: "meters" }
this.cLocation,
offsetLength, // 相机向前偏移距离
this.cBearing,
{units: "meters"}
).geometry.coordinates;
map.flyTo({
center: translatedPoint,
pitch: 75,
bearing: this.cBearing,
zoom: 20.7,
zoom: 17.8,
duration: 2000, // Animate over 2 seconds
essential: true,
});
......@@ -510,17 +510,17 @@ export default {
lastFrameTime = new Date().getTime();
map = this.$refs.wMap.initMap();
window.map = map;
map.on("style.load", () => {
map.on('dblclick', () => {
console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom())
})
map.setFog({
color: "#1d3244", // Lower atmosphere
"high-color": "#030b19", // Upper atmosphere
"horizon-blend": 0.2, // Atmosphere thickness (default 0.2 at low zooms)
"space-color": "rgb(11, 11, 25)", // Background color
"star-intensity": 0, // Background star brightness (default 0.35 at low zoooms )
});
map.on("load", () => {
// map.on('dblclick', () => {
// console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom())
// })
// map.setFog({
// color: "#1d3244", // Lower atmosphere
// "high-color": "#030b19", // Upper atmosphere
// "horizon-blend": 0.2, // Atmosphere thickness (default 0.2 at low zooms)
// "space-color": "rgb(11, 11, 25)", // Background color
// "star-intensity": 0, // Background star brightness (default 0.35 at low zoooms )
// });
// 添加map icons图片资源 ---start
for (let key in mapAssets.lightIcons) {
map.loadImage(mapAssets.lightIcons[key], (error, image) => {
......@@ -536,15 +536,15 @@ export default {
}
for (let i = 0; i < pulsingDots.length; i++) {
if (map && !map.hasImage(`pulsingDot${i}`))
map.addImage(`pulsingDot${i}`, pulsingDots[i], { pixelRatio: 2 });
map.addImage(`pulsingDot${i}`, pulsingDots[i], {pixelRatio: 2});
}
// 添加map icons图片资源 ---end
this.loading = false;
this.mixDraw(map);
map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-right"
);
// this.mixDraw(map);
// map.addControl(
// new mapboxgl.NavigationControl({ showZoom: false }),
// "bottom-right"
// );
this.refreshBounds();
// 快捷键
window.onkeydown = () => {
......@@ -553,24 +553,24 @@ export default {
if (event.altKey && event.keyCode === 82) {
this.rulerStatus = !this.rulerStatus;
this.rulerStatus
? mapTools.addCalibrationTail(map)
: this.removeLayers("calibrationTailLine,chunkSymbol,chunkText");
? mapTools.addCalibrationTail(map)
: this.removeLayers("calibrationTailLine,chunkSymbol,chunkText");
}
// alt + x 显示隐藏绘制工具
if (event.altKey && event.keyCode === 88) {
this.boxesShow = false;
if (
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === "none" ||
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === ""
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === "none" ||
document.getElementsByClassName("mapboxgl-ctrl-top-right")[0]
.style.display === ""
) {
document.getElementsByClassName(
"mapboxgl-ctrl-top-right"
"mapboxgl-ctrl-top-right"
)[0].style.display = "unset";
} else {
document.getElementsByClassName(
"mapboxgl-ctrl-top-right"
"mapboxgl-ctrl-top-right"
)[0].style.display = "none";
}
}
......@@ -633,42 +633,42 @@ export default {
this.boxesShow = false;
}
};
window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
defaultLights: true,
// realSunlight: true,
// realSunlightHelper: true,
// sky: true,
enableSelectingObjects: true,
});
map.addLayer({
id: "vehicle3D",
type: "custom",
renderingMode: "3d",
onAdd: (map, mbxContext) => {
for (let item of this.$store.state.dicts.CarType) {
let targetType = dict.carTypeGlbMap[item.code] || item.code;
let options = {
obj: `gltf/car${targetType}.glb`,
type: "gltf",
units: "meters",
scale: 0.8,
adjustment: { x: 0.5, y: 1, z: -0.5 },
bbox: true,
};
window.tb.loadObj(options, (model) => {
vehicleModelTypes[`car${item.code}`] = model;
});
}
this.initRadarModels()
// window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
// defaultLights: true,
// // realSunlight: true,
// // realSunlightHelper: true,
// // sky: true,
// enableSelectingObjects: true,
// });
window.vehicleModelTypes = vehicleModelTypes;
// this.loadLightModel(map);
},
render: function (gl, matrix) {
window.tb.update();
},
});
// map.addLayer({
// id: "vehicle3D",
// type: "custom",
// renderingMode: "3d",
// onAdd: (map, mbxContext) => {
// for (let item of this.$store.state.dicts.CarType) {
// let targetType = dict.carTypeGlbMap[item.code] || item.code;
// let options = {
// obj: `gltf/car${targetType}.glb`,
// type: "gltf",
// units: "meters",
// scale: 0.8,
// adjustment: { x: 0.5, y: 1, z: -0.5 },
// bbox: true,
// };
// window.tb.loadObj(options, (model) => {
// vehicleModelTypes[`car${item.code}`] = model;
// });
// }
// this.initRadarModels()
//
// window.vehicleModelTypes = vehicleModelTypes;
// // this.loadLightModel(map);
// },
// render: function (gl, matrix) {
// window.tb.update();
// },
// });
this.switchfirst();
});
this.registerListener();
......@@ -703,7 +703,7 @@ export default {
if (this.currentCheck === "first") {
if (map.getZoom() > 17) {
this.mxRefreshLightWs();
this.loadUpdateRadars()
// this.loadUpdateRadars()
//----------------------------------------
this.registDetetors()
} else {
......@@ -740,7 +740,7 @@ export default {
// }
// }, 100);
let arr = this.$store.state.dicts.CrossInfo.map(item => {
[item.longitude, item.latitude] = item.location.split(",")
[item.longitude, item.latitude] = wgs84togcj02(item.location.split(","))
return item
})
this.crossGeo = convertPointsToGeo(arr)
......@@ -750,7 +750,7 @@ export default {
let centerP = turf.point([map.getCenter().lng, map.getCenter().lat]);
// 取最近点的crossId
let nearest = turf.nearestPoint(centerP, this.crossGeo);
this.firstCrossClick({ features: [nearest] })
this.firstCrossClick({features: [nearest]})
}
//--------------------------------------------------------------------
// 注册车辆实时ws
......@@ -776,15 +776,15 @@ export default {
eventPointClick(e) {
let data = e.features[0].properties;
// console.log("prop--", data);
let eventPopup = new mapboxgl.Popup({
let eventPopup = new minemap.Popup({
anchor: "bottom",
offset: [0, -30],
});
eventPopup
.setLngLat([data.lng, data.lat])
.setHTML('<div id="event_popup"></div>')
.addTo(map)
.addClassName("eventPopup");
.setLngLat([data.lng, data.lat])
.setHTML('<div id="event_popup"></div>')
.addTo(map)
.addClassName("eventPopup");
new EventPopup({
propsData: {
model: data,
......@@ -793,7 +793,7 @@ export default {
},
// 交通事件热力图 & 点
refreshEventLayer(type) {
eventInfo({ dayType: type }).then((res) => {
eventInfo({dayType: type}).then((res) => {
// 热力图 - 如果还未创建 先创建图层 赋值
if (this.currentCheck === "third") {
mapTools.addOrUpdateEventHeat(map, res.content);
......@@ -865,31 +865,31 @@ export default {
distance = 80;
}
let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = { units: "meters" };
let options = {units: "meters"};
let translatedPoint = turf.destination(
prop.wkt.split(","),
distance,
bearing,
options
prop.wkt.split(","),
distance,
bearing,
options
);
// 将地图中心点设置为平移后的点
map.flyTo({
center: translatedPoint.geometry.coordinates,
center: wgs84togcj02(translatedPoint.geometry.coordinates),
zoom: 18,
});
equipPopup = new mapboxgl.Popup({
equipPopup = new minemap.Popup({
anchor: "bottom",
offset: [0, -20],
});
equipPopup
.setLngLat(prop.wkt.split(","))
.setHTML('<div id="equipment_popup"></div>')
.addTo(map)
.setMaxWidth("500")
.addClassName("equipmentPopup");
.setLngLat(wgs84togcj02(prop.wkt.split(",")))
.setHTML('<div id="equipment_popup"></div>')
.addTo(map)
.setMaxWidth("unset")
.addClassName("equipmentPopup");
popupInstance = new EquipmentPopup({
propsData: {
model: { equip_type: type, ...prop },
model: {equip_type: type, ...prop},
},
});
popupInstance.$mount("#equipment_popup");
......@@ -916,12 +916,12 @@ export default {
this.$refs.videoList?.destroyAll();
this.hideTb();
this.closeAllWs()
.then(() => {
this.hideTb();
this[`switch${checkItem.label}`]();
})
.catch(() => {
});
.then(() => {
this.hideTb();
this[`switch${checkItem.label}`]();
})
.catch(() => {
});
} else {
if (beforeLabel === "fourth") {
equipPopup?.remove();
......@@ -947,15 +947,15 @@ export default {
return item.code == options.originalColor;
});
let realColor = colorDesc
? dict.colorMatch[colorDesc.name]
: "#fff";
? dict.colorMatch[colorDesc.name]
: "#fff";
child.material.color.set(realColor);
}
});
}
model.setCoords([options.longitude, options.latitude]);
model.userData.data = options;
model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 });
model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
},
// 更新超限车辆高亮波纹底盘
updateOverCarLnglat() {
......@@ -1020,7 +1020,7 @@ export default {
lnglat: [[data.longitude, data.latitude]],
properties: data,
}
vehiclePopups[`popup${data.id}`] = new mapboxgl.Popup({
vehiclePopups[`popup${data.id}`] = new minemap.Popup({
// closeButton: true,
closeButton: false,
anchor: "bottom",
......@@ -1028,10 +1028,10 @@ export default {
offset: [0, -20],
});
vehiclePopups[`popup${data.id}`]
.setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map)
.addClassName("vehicleDetailPopup");
.setLngLat([data.longitude, data.latitude])
.setHTML(`<div id="vehicle_popup${data.id}"></div>`)
.addTo(map)
.addClassName("vehicleDetailPopup");
popupVises[`popup${data.id}`] = true;
vehiclePopupInstances[`popup${data.id}`] = new VehiclePopup({
propsData: {
......@@ -1039,14 +1039,14 @@ export default {
},
});
vehiclePopupInstances[`popup${data.id}`].$mount(
`#vehicle_popup${data.id}`
`#vehicle_popup${data.id}`
);
}
},
clearLicense() {
if (!this.licenseState) {
for (let key in licenseLabel) {
window.tb.clear(key, null);
window.tb?.clear(key, null);
}
licenseLabel = {};
}
......@@ -1057,7 +1057,7 @@ export default {
// 车牌号状态
if (!this.licenseState && Object.keys(licenseLabel).length) {
for (let key in licenseLabel) {
window.tb.clear(key, null);
window.tb?.clear(key, null);
}
licenseLabel = {};
}
......@@ -1084,7 +1084,7 @@ export default {
this.situationTimeVal = msg[0].dateTime;
// zoom 大于 18 ： 移除圆点和图片图层
if (zoom >= 18) {
this.removeLayers("vehiclePic,vehicle");
// this.removeLayers("vehiclePic,vehicle");
}
// zoom 小于 18：隐藏 three场景 ；大于17且小于18的部分使用图片图层 其余部分使用圆点
if (zoom < 18) {
......@@ -1096,7 +1096,7 @@ export default {
} else {
this.clearLicense();
this.removeLayers(
"lightLayer,lightLayerText,vehicleSelectWave,vehiclePic,waitingLayer"
"lightLayer,lightLayerText,vehicleSelectWave,vehiclePic,waitingLayer"
);
mapTools.addOrUpdateVehicle(map, msg);
map.on("click", "vehicle", this.vehicleCircleClick);
......@@ -1161,74 +1161,74 @@ export default {
}
}
// 超限车辆 end
if (zoom > 18) {
// 新增
if (
item.dill === "add" ||
(item.dill === "com" && !vehicleModels[item.id])
) {
this.addVehicleModels(item);
if (this.licenseState) this.addVehicleLicenses(item);
} else {
// console.log("模型总数", Object.keys(vehicleModels).length);
for (let key in vehicleModels) {
if (vehicleModels[key].userData.data?.id === item.id) {
if (item.dill === "del") {
if (licenseLabel[`license${item.id}`]) {
window.tb.clear(`license${item.id}`, true);
delete licenseLabel[`license${item.id}`];
}
if (vehicleModels[key]) {
window.tb.clear(item.id, true);
delete vehicleModels[key];
}
}
if (item.dill === "com") {
// 车型中途变化 清除并重新创建
if (
vehicleModels[key].userData.data.originalType !==
item.originalType
) {
if (vehicleModels[key]) {
window.tb.clear(item.id, true);
delete vehicleModels[key];
}
if (licenseLabel[`license${item.id}`]) {
window.tb.clear(`license${item.id}`, true);
delete licenseLabel[`license${item.id}`];
}
this.addVehicleModels(item);
if (this.licenseState) this.addVehicleLicenses(item);
} else {
if (licenseLabel[`license${item.id}`]) {
// 如果车牌model存在且未改变 则setCoords
if (
licenseLabel[`license${item.id}`].userData.data
.picLicense == item.picLicense
) {
licenseLabel[`license${item.id}`].setCoords([
item.longitude,
item.latitude,
4,
]);
}
// 否则先删除当前车牌 再创建更新后的车牌
else {
window.tb.clear(`license${item.id}`, true);
delete licenseLabel[`license${item.id}`];
this.addVehicleLicenses(item);
}
} else {
if (this.licenseState)
this.addVehicleLicenses(item);
}
this.setModel(vehicleModels[key], item, true);
}
}
}
}
}
}
// if (zoom > 18) {
// // 新增
// if (
// item.dill === "add" ||
// (item.dill === "com" && !vehicleModels[item.id])
// ) {
// this.addVehicleModels(item);
// if (this.licenseState) this.addVehicleLicenses(item);
// } else {
// // console.log("模型总数", Object.keys(vehicleModels).length);
// for (let key in vehicleModels) {
// if (vehicleModels[key].userData.data?.id === item.id) {
// if (item.dill === "del") {
// if (licenseLabel[`license${item.id}`]) {
// window.tb.clear(`license${item.id}`, true);
// delete licenseLabel[`license${item.id}`];
// }
// if (vehicleModels[key]) {
// window.tb.clear(item.id, true);
// delete vehicleModels[key];
// }
// }
// if (item.dill === "com") {
// // 车型中途变化 清除并重新创建
// if (
// vehicleModels[key].userData.data.originalType !==
// item.originalType
// ) {
// if (vehicleModels[key]) {
// window.tb.clear(item.id, true);
// delete vehicleModels[key];
// }
// if (licenseLabel[`license${item.id}`]) {
// window.tb.clear(`license${item.id}`, true);
// delete licenseLabel[`license${item.id}`];
// }
// this.addVehicleModels(item);
// if (this.licenseState) this.addVehicleLicenses(item);
// } else {
// if (licenseLabel[`license${item.id}`]) {
// // 如果车牌model存在且未改变 则setCoords
// if (
// licenseLabel[`license${item.id}`].userData.data
// .picLicense == item.picLicense
// ) {
// licenseLabel[`license${item.id}`].setCoords([
// item.longitude,
// item.latitude,
// 4,
// ]);
// }
// // 否则先删除当前车牌 再创建更新后的车牌
// else {
// window.tb.clear(`license${item.id}`, true);
// delete licenseLabel[`license${item.id}`];
// this.addVehicleLicenses(item);
// }
// } else {
// if (this.licenseState)
// this.addVehicleLicenses(item);
// }
// this.setModel(vehicleModels[key], item, true);
// }
// }
// }
// }
// }
// }
}
this.updateSelectVehicleTrack()
this.updateOverCarLnglat()
......@@ -1273,21 +1273,21 @@ export default {
let model = vehicleModelTypes[`car${option.originalType}`].duplicate();
this.setModel(model, option, true);
model.addEventListener(
"SelectedChange",
this.onSelectedChangeVehicle,
false
"SelectedChange",
this.onSelectedChangeVehicle,
false
);
vehicleModels[option.id] = model;
window.tb.add(model, option.id);
window.tb?.add(model, option.id);
}
},
addVehicleLicenses(option) {
if (option.picLicense) {
if (option.picLicense && window.tb) {
let ele = document.createElement("div");
ele.style.color = "white";
ele.innerText = option.picLicense;
ele.style.backgroundImage = `url('${mapAssets.mapIcons[`license${option.licenseColor}`]
}')`;
}')`;
ele.style.backgroundSize = "100% 100%";
ele.style.fontSize = "8px";
ele.style.textAlign = "center";
......@@ -1298,7 +1298,7 @@ export default {
topMargin: 2,
});
license.setCoords([option.longitude, option.latitude, 4]);
license.userData.data = { picLicense: option.picLicense };
license.userData.data = {picLicense: option.picLicense};
window.tb.add(license, `license${option.id}`);
licenseLabel[`license${option.id}`] = license;
}
......@@ -1378,7 +1378,7 @@ export default {
this.$EventBus.$off("emitPopupClose");
this.clearTrackTimer();
this.closeAllWs();
window.tb.dispose();
window.tb?.dispose();
window.tb = null;
map = null;
window.map = null;
......@@ -1471,7 +1471,7 @@ export default {
box-shadow: none !important;
}
.mapboxgl-ctrl-group button+button {
.mapboxgl-ctrl-group button + button {
border-top: unset !important;
}
......
wj-manage-web/src/views/situation/trackSwitcher.vue
View file @ 1a93e18f
......@@ -1078,6 +1078,7 @@ export default {
}
}
.video {
object-fit: fill;
height: calc(100% - 62px);
}
.picker {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment