Skip to content

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

mapbox初步迁移mine map

parent 013daa15
Show 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 @@ ...@@ -22,6 +22,23 @@
href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css" href="/cdn/libs/mapbox-gl-draw/mapbox-gl-draw.css"
type="text/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> <style>
#app, #app,
html, html,
...@@ -87,7 +104,8 @@ ...@@ -87,7 +104,8 @@
max-width: unset !important; max-width: unset !important;
} }
.mapboxgl-popup-content { .minemap-popup-content {
overflow: unset !important;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
padding: 0 !important; padding: 0 !important;
...@@ -97,31 +115,31 @@ ...@@ -97,31 +115,31 @@
display: none !important; display: none !important;
} }
.mapboxgl-popup-tip { .minemap-popup-tip {
display: none !important; display: none !important;
} }
.mapboxgl-popup-close-button { .minemap-popup-close-button {
font-size: 26px; font-size: 26px;
color: white; color: white;
} }
.vehicleDetailPopup .mapboxgl-popup-close-button { .vehicleDetailPopup .minemap-popup-close-button {
right: 14px; right: 14px;
top: 18px; top: 18px;
} }
.eventPopup .mapboxgl-popup-close-button { .eventPopup .minemap-popup-close-button {
right: 8px; right: 8px;
top: 10px; top: 10px;
} }
.equipmentPopup .mapboxgl-popup-close-button { .equipmentPopup .minemap-popup-close-button {
right: 8px; right: 8px;
top: 10px; top: 10px;
} }
.mapboxgl-ctrl-logo { .minemap-ctrl-logo {
display: none !important; display: none !important;
} }
......
wj-manage-web/src/components/Standard/cameraVideo.vue
View file @ 1a93e18f
...@@ -137,6 +137,7 @@ export default { ...@@ -137,6 +137,7 @@ export default {
</script> </script>
<style> <style>
video { video {
object-fit: fill;
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
} }
......
wj-manage-web/src/components/Standard/mapMapbox.vue
View file @ 1a93e18f
...@@ -5,6 +5,8 @@ ...@@ -5,6 +5,8 @@
</template> </template>
<script> <script>
import {initWMap} from "@/utils/mapUtils";
let map; let map;
// Point MultiPoint LineString MultiLineString Polygon MultiPolygon // Point MultiPoint LineString MultiLineString Polygon MultiPolygon
export default { export default {
...@@ -26,19 +28,19 @@ export default { ...@@ -26,19 +28,19 @@ export default {
if(this.$store.state.mapInit.zoom){ if(this.$store.state.mapInit.zoom){
zoom = this.$store.state.mapInit.zoom zoom = this.$store.state.mapInit.zoom
} }
let options = Object.assign( // let options = Object.assign(
{}, // {},
{ // {
container: this.mapId, // container: this.mapId,
style: map_config.MAP_STYLE, // style: map_config.MAP_STYLE,
center: center, // center: center,
zoom: zoom, // zoom: zoom,
maxZoom: map_config.MAX_ZOOM, // maxZoom: map_config.MAX_ZOOM,
pitch: map_config.MAP_PITCH, // pitch: map_config.MAP_PITCH,
}, // },
option // option
); // );
map = new mapboxgl.Map(options); map = initWMap(this.mapId, center, zoom);
return map; return map;
}, },
destroyMap() { 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 to create a triangle icon (arrow)
function createTriangleIcon(color) { function createTriangleIcon(color) {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
...@@ -208,6 +207,7 @@ export function addOrUpdateDetetorA(map, geo) { ...@@ -208,6 +207,7 @@ export function addOrUpdateDetetorA(map, geo) {
); );
} }
} }
export function addOrUpdateDetetorB(map, geo) { export function addOrUpdateDetetorB(map, geo) {
if (!map.getSource("detetorsB")) { if (!map.getSource("detetorsB")) {
map.addSource("detetorsB", { map.addSource("detetorsB", {
...@@ -240,6 +240,7 @@ export function addOrUpdateDetetorB(map, geo) { ...@@ -240,6 +240,7 @@ export function addOrUpdateDetetorB(map, geo) {
); );
} }
} }
export function addOrUpdateDetetorC(map, geo) { export function addOrUpdateDetetorC(map, geo) {
if (!map.getSource("detetorsC")) { if (!map.getSource("detetorsC")) {
map.addSource("detetorsC", { map.addSource("detetorsC", {
...@@ -342,6 +343,7 @@ export function addOrUpdateWave(map, geo) { ...@@ -342,6 +343,7 @@ export function addOrUpdateWave(map, geo) {
} }
} }
export function convertPointsToGeo(arr) { export function convertPointsToGeo(arr) {
let features = [] let features = []
for (let item of arr) { for (let item of arr) {
...@@ -349,6 +351,7 @@ export function convertPointsToGeo(arr) { ...@@ -349,6 +351,7 @@ export function convertPointsToGeo(arr) {
} }
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsLocationToGeo(arr) { export function convertPointsLocationToGeo(arr) {
let features = [] let features = []
for (let item of arr) { for (let item of arr) {
...@@ -356,13 +359,15 @@ export function convertPointsLocationToGeo(arr) { ...@@ -356,13 +359,15 @@ export function convertPointsLocationToGeo(arr) {
} }
return turf.featureCollection(features) return turf.featureCollection(features)
} }
export function convertPointsLngLatToGeo(arr) { export function convertPointsLngLatToGeo(arr) {
let features = [] let features = []
for (let item of arr) { 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) return turf.featureCollection(features)
} }
export function convertPointsWktToGeo(arr) { export function convertPointsWktToGeo(arr) {
let features = []; let features = [];
for (let item of arr) { for (let item of arr) {
...@@ -370,28 +375,30 @@ export function convertPointsWktToGeo(arr) { ...@@ -370,28 +375,30 @@ export function convertPointsWktToGeo(arr) {
if (item.wkt.split(",").length === 2) { if (item.wkt.split(",").length === 2) {
features.push( features.push(
turf.point( turf.point(
item.wkt.split(",").map((item) => Number(item)), wgs84togcj02(item.wkt.split(",").map((item) => Number(item))),
item item
) )
); );
} }
} }
} }
return turf.featureCollection(features); return turf.featureCollection(features)
} }
export function convertToLineWithWkt(json) { export function convertToLineWithWkt(json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.wkt) { if (item.wkt) {
let lnglats = item.wkt.split(";"); let lnglats = wgs84togcj02(item.wkt.split(";"));
for (let i = 0; i < lnglats.length; i++) { for (let i = 0; i < lnglats.length; i++) {
lnglats[i] = lnglats[i].split(",").map((j) => Number(j)); lnglats[i] = lnglats[i].split(",").map((j) => Number(j));
} }
features.push(turf.lineString(lnglats, item)); features.push(turf.lineString(lnglats, item));
} }
} }
return turf.featureCollection(features); return turf.featureCollection(features)
} }
// type 4 种颜色 对应 4种告警信息 // type 4 种颜色 对应 4种告警信息
export function addOrUpdateWarningWave(map, arr, id) { export function addOrUpdateWarningWave(map, arr, id) {
let geo = convertPointsToGeo(arr) let geo = convertPointsToGeo(arr)
...@@ -460,7 +467,7 @@ export function addOrUpdateVehicle(map, arr) { ...@@ -460,7 +467,7 @@ export function addOrUpdateVehicle(map, arr) {
// 路口icon // 路口icon
export function addOrUpdateCross(map, geo, callback) { export function addOrUpdateCross(map, geo, callback) {
console.log('cross geo...', geo)
if (!map.getSource("holo_crossPoint")) { if (!map.getSource("holo_crossPoint")) {
map.addSource("holo_crossPoint", { map.addSource("holo_crossPoint", {
type: "geojson", type: "geojson",
...@@ -693,6 +700,7 @@ export function addOrUpdateEquipMilli(map, geo, callback) { ...@@ -693,6 +700,7 @@ export function addOrUpdateEquipMilli(map, geo, callback) {
'milli', 'milli',
"milliFalse", "milliFalse",
], // 默认值，如果没有匹配到上述枚举值] ], // 默认值，如果没有匹配到上述枚举值]
'icon-offset':[0,-20],
// "icon-image": "milli", // "icon-image": "milli",
"icon-size": 0.6, "icon-size": 0.6,
"icon-ignore-placement": true, "icon-ignore-placement": true,
...@@ -717,6 +725,7 @@ export function addOrUpdateEquipRadar(map, geo, callback) { ...@@ -717,6 +725,7 @@ export function addOrUpdateEquipRadar(map, geo, callback) {
type: "symbol", type: "symbol",
source: "radar", source: "radar",
layout: { layout: {
'icon-offset':[0,-20],
"icon-image": [ "icon-image": [
"match", "match",
["get", "status"], // 属性字段名称 ["get", "status"], // 属性字段名称
...@@ -750,6 +759,7 @@ export function addOrUpdateEquipSignal(map, geo, callback) { ...@@ -750,6 +759,7 @@ export function addOrUpdateEquipSignal(map, geo, callback) {
type: "symbol", type: "symbol",
source: "signal", source: "signal",
layout: { layout: {
'icon-offset':[0,-20],
// "icon-image": "signal", // "icon-image": "signal",
"icon-image": [ "icon-image": [
"match", "match",
...@@ -783,6 +793,7 @@ export function addOrUpdateEquipWeather(map, geo, callback) { ...@@ -783,6 +793,7 @@ export function addOrUpdateEquipWeather(map, geo, callback) {
type: "symbol", type: "symbol",
source: "weather", source: "weather",
layout: { layout: {
'icon-offset':[0,-20],
// "icon-image": "weather", // "icon-image": "weather",
"icon-image": [ "icon-image": [
"match", "match",
...@@ -1048,14 +1059,14 @@ export function addOrUpdateFlowLineRText(map, geo) { ...@@ -1048,14 +1059,14 @@ export function addOrUpdateFlowLineRText(map, geo) {
} }
// 分析报告 - 流量线箭头 // 分析报告 - 流量线箭头
export function addOrUpdateFlowLineRArrow(map, points) { export function addOrUpdateFlowLineRArrow(map, geo) {
if (!map.getSource("flowLineArrowR")) { if (!map.getSource("flowLineArrowR")) {
map.addSource('flowLineArrowR', { map.addSource('flowLineArrowR', {
type: 'geojson', type: 'geojson',
data: points data: geo
}); });
} else { } else {
map.getSource("flowLineArrowR").setData(points); map.getSource("flowLineArrowR").setData(geo);
} }
if (!map.getLayer("flowLineArrowR")) { if (!map.getLayer("flowLineArrowR")) {
// console.log('has.............'); // console.log('has.............');
...@@ -1120,7 +1131,7 @@ export function addOrUpdateFlowLineArrow(map, json) { ...@@ -1120,7 +1131,7 @@ export function addOrUpdateFlowLineArrow(map, json) {
turf.point(item.lineArray[1]) turf.point(item.lineArray[1])
); );
features.push( 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) { ...@@ -1158,7 +1169,7 @@ export function addOrUpdateFlowText(map, json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.select) { 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); let geo = turf.featureCollection(features);
...@@ -1195,7 +1206,7 @@ export function addOrUpdateFlowTextEnd(map, json) { ...@@ -1195,7 +1206,7 @@ export function addOrUpdateFlowTextEnd(map, json) {
let features = []; let features = [];
for (let item of json) { for (let item of json) {
if (item.select) { 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); let geo = turf.featureCollection(features);
...@@ -1226,6 +1237,7 @@ export function addOrUpdateFlowTextEnd(map, json) { ...@@ -1226,6 +1237,7 @@ export function addOrUpdateFlowTextEnd(map, json) {
}); });
} }
} }
// let roadLineGeo = null, roadChunkPointGeo = null // let roadLineGeo = null, roadChunkPointGeo = null
// export function addCalibrationTail(map) { // export function addCalibrationTail(map) {
// // 计算1米在当前地图的经度度数 // // 计算1米在当前地图的经度度数
...@@ -1359,7 +1371,7 @@ export function addCalibrationTail(map) { ...@@ -1359,7 +1371,7 @@ export function addCalibrationTail(map) {
res.json().then((data) => { res.json().then((data) => {
console.log("data...", data); console.log("data...", data);
roadLineGeo = data.roadLineGeo; roadLineGeo = data.roadLineGeo;
roadChunkPointGeo = data.roadChunkPointGeo; roadChunkPointGeo = data.roadChunkPointGeo
map.addSource("calibrationTail", { map.addSource("calibrationTail", {
type: "geojson", type: "geojson",
data: roadLineGeo, data: roadLineGeo,
...@@ -1478,3 +1490,39 @@ export const vehicleWave = { ...@@ -1478,3 +1490,39 @@ export const vehicleWave = {
return true; 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"; ...@@ -179,7 +179,7 @@ import Pigination from "../../components/Standard/pigination.vue";
import Reports from "./historyReports/index.vue"; import Reports from "./historyReports/index.vue";
import { import {
addOrUpdateCross, addOrUpdateCross,
addOrUpdateCrossName, addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
import { generateReport } from "../../dao/analysis"; import { generateReport } from "../../dao/analysis";
...@@ -191,7 +191,6 @@ export default { ...@@ -191,7 +191,6 @@ export default {
Pigination, Pigination,
Reports, Reports,
}, },
computed: {},
data() { data() {
return { return {
formOptions: "", formOptions: "",
...@@ -468,7 +467,7 @@ export default { ...@@ -468,7 +467,7 @@ export default {
for (let item of this.$store.state.dicts.CrossInfo) { for (let item of this.$store.state.dicts.CrossInfo) {
points.push( points.push(
turf.point( turf.point(
[item.location.split(",")[0], item.location.split(",")[1]], wgs84togcj02(item.location.split(",")),
item item
) )
); );
...@@ -483,7 +482,7 @@ export default { ...@@ -483,7 +482,7 @@ export default {
}, },
crossClick(e) { crossClick(e) {
let prop = e.features[0]?.properties; 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() { beforeDestroy() {
......
wj-manage-web/src/views/efficiency/leftMap.vue
View file @ 1a93e18f
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
</el-table> </el-table>
</div> </div>
<div class="left_map"> <div class="left_map">
<w-map ref="mapC" mapId="efficiency_map" /> <w-map ref="mapC" mapId="efficiency_map"/>
</div> </div>
</div> </div>
</msg-card> </msg-card>
...@@ -80,19 +80,20 @@ ...@@ -80,19 +80,20 @@
</template> </template>
<script> <script>
import { getEfficiencyRank } from "../../dao/efficiency"; import {getEfficiencyRank} from "../../dao/efficiency";
import MsgCard from "../../components/Standard/msg-card.vue"; import MsgCard from "../../components/Standard/msg-card.vue";
import WMap from "../../components/Standard/mapMapbox.vue"; import WMap from "../../components/Standard/mapMapbox.vue";
import mapAssets from "../../config/holo/mapAssets"; import mapAssets from "../../config/holo/mapAssets";
import { import {
addOrUpdateCross, addOrUpdateCross,
addOrUpdateCrossName, addOrUpdateCrossName,
wgs84togcj02
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
let map; let map;
export default { export default {
name: "leftMap", name: "leftMap",
components: { WMap, MsgCard }, components: {WMap, MsgCard},
props: { props: {
granularity: { granularity: {
type: String, type: String,
...@@ -126,7 +127,6 @@ export default { ...@@ -126,7 +127,6 @@ export default {
for (let key in mapAssets.mapIcons) { for (let key in mapAssets.mapIcons) {
map.loadImage(mapAssets.mapIcons[key], (error, image) => { 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); map.setPitch(0);
...@@ -163,7 +163,7 @@ export default { ...@@ -163,7 +163,7 @@ export default {
this.drawCrossPoint(); this.drawCrossPoint();
if (this.tableFullData.length) { if (this.tableFullData.length) {
map.flyTo({ map.flyTo({
center: this.tableFullData[0].location.split(","), center: wgs84togcj02(this.tableFullData[0].location.split(",")),
zoom: 15, zoom: 15,
}); });
this.$emit("crossChange", this.tableFullData[0]); this.$emit("crossChange", this.tableFullData[0]);
...@@ -174,14 +174,14 @@ export default { ...@@ -174,14 +174,14 @@ export default {
drawCrossPoint() { drawCrossPoint() {
let geos = this.tableFullData; let geos = this.tableFullData;
if (geos.length) { if (geos.length) {
map.setCenter(geos[0].location.split(",")); map.setCenter(wgs84togcj02(geos[0].location.split(",")));
} }
for (let i = 0; i < geos.length; i++) { for (let i = 0; i < geos.length; i++) {
geos[i].isSignal = i ? 1 : "select"; geos[i].isSignal = i ? 1 : "select";
} }
let features = []; let features = [];
for (let cross of geos) { 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); let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick); addOrUpdateCross(map, geo, this.crossClick);
...@@ -221,7 +221,7 @@ export default { ...@@ -221,7 +221,7 @@ export default {
let prop = e.features[0].properties; let prop = e.features[0].properties;
this.lastCheck = prop; this.lastCheck = prop;
this.updateLayer(prop); this.updateLayer(prop);
map.flyTo({ center: prop.location.split(",") }); map.flyTo({center: prop.location.split(",")});
this.$emit("crossChange", prop); this.$emit("crossChange", prop);
}, },
rowClick(row) { rowClick(row) {
...@@ -249,7 +249,8 @@ export default { ...@@ -249,7 +249,8 @@ export default {
}, },
}, },
beforeDestroy() {}, beforeDestroy() {
},
}; };
</script> </script>
...@@ -258,9 +259,11 @@ export default { ...@@ -258,9 +259,11 @@ export default {
.leftMapEf { .leftMapEf {
height: 100%; height: 100%;
::v-deep .content { ::v-deep .content {
margin: 20px 0; margin: 20px 0;
} }
.msg_card_inner { .msg_card_inner {
height: 100%; height: 100%;
display: flex; display: flex;
...@@ -284,6 +287,7 @@ export default { ...@@ -284,6 +287,7 @@ export default {
border: 1px solid #193259; border: 1px solid #193259;
} }
} }
::v-deep .el-input-group__prepend { ::v-deep .el-input-group__prepend {
background-color: transparent; background-color: transparent;
border: 1px solid rgba(25, 58, 110, 1); border: 1px solid rgba(25, 58, 110, 1);
...@@ -297,30 +301,37 @@ export default { ...@@ -297,30 +301,37 @@ export default {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
::v-deep .el-checkbox__inner { ::v-deep .el-checkbox__inner {
background-color: transparent; background-color: transparent;
border: 1px solid gray; border: 1px solid gray;
} }
::v-deep .row-deep-select { ::v-deep .row-deep-select {
td:first-child { td:first-child {
border-left: 1px solid rgba(31, 147, 255, 1); border-left: 1px solid rgba(31, 147, 255, 1);
} }
td:last-child { td:last-child {
border-right: 1px solid rgba(31, 147, 255, 1); border-right: 1px solid rgba(31, 147, 255, 1);
} }
td { td {
background-color: #030d1e; background-color: #030d1e;
border-top: 1px solid rgba(31, 147, 255, 1); border-top: 1px solid rgba(31, 147, 255, 1);
border-bottom: 1px solid rgba(31, 147, 255, 1); border-bottom: 1px solid rgba(31, 147, 255, 1);
} }
} }
::v-deep .row-not-select { ::v-deep .row-not-select {
td:first-child { td:first-child {
border-left: 1px solid rgba(31, 147, 255, 1); border-left: 1px solid rgba(31, 147, 255, 1);
} }
td:last-child { td:last-child {
border-right: 1px solid rgba(31, 147, 255, 1); border-right: 1px solid rgba(31, 147, 255, 1);
} }
td { td {
background-color: #061124; background-color: #061124;
border-top: 1px solid rgba(31, 147, 255, 1); 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 { ...@@ -215,6 +215,7 @@ import {
inletWayTimeBetw, inletWayTimeBetw,
inletWayTurnTimeBetw, inletWayTurnTimeBetw,
} from "../../dao/situation"; } from "../../dao/situation";
import {wgs84togcj02} from "../../utils/mapboxTools";
let bottomMap; let bottomMap;
export default { export default {
components: { components: {
...@@ -380,7 +381,7 @@ export default { ...@@ -380,7 +381,7 @@ export default {
}); });
bottomMap.flyTo({ bottomMap.flyTo({
center: row.location.split(","), center: wgs84togcj02(row.location.split(",")),
maxDuration: 1000, maxDuration: 1000,
zoom: 17.2, zoom: 17.2,
pitch: 0, pitch: 0,
...@@ -448,11 +449,6 @@ export default { ...@@ -448,11 +449,6 @@ export default {
JSON.stringify(item.properties.ridList) === JSON.stringify(item.properties.ridList) ===
JSON.stringify(prop.ridList) JSON.stringify(prop.ridList)
) { ) {
console.log(
"dengyu ===",
JSON.stringify(item.properties.ridList),
JSON.stringify(prop.ridList)
);
item.properties.select = 1; item.properties.select = 1;
let timeParam = this.getStartAndEndDate(); let timeParam = this.getStartAndEndDate();
let queue = []; let queue = [];
......
wj-manage-web/src/views/organization/leftMap.vue
View file @ 1a93e18f
...@@ -63,7 +63,7 @@ import { orgRank } from "../../dao/organization"; ...@@ -63,7 +63,7 @@ import { orgRank } from "../../dao/organization";
import mapAssets from "../../config/holo/mapAssets"; import mapAssets from "../../config/holo/mapAssets";
import { import {
addOrUpdateCross, addOrUpdateCross,
addOrUpdateCrossName, addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
let map; let map;
...@@ -100,20 +100,11 @@ export default { ...@@ -100,20 +100,11 @@ export default {
} }
this.fullData = res.content; this.fullData = res.content;
this.tableData = this.fullData; this.tableData = this.fullData;
// this.tableData = [
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// {rank:'1'},
// ]
this.tableLoading = false; this.tableLoading = false;
// 选中第一条数据， 并请求右侧所有指标 // 选中第一条数据， 并请求右侧所有指标
let features = []; let features = [];
for (let cross of this.fullData) { 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); let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick); addOrUpdateCross(map, geo, this.crossClick);
...@@ -121,7 +112,7 @@ export default { ...@@ -121,7 +112,7 @@ export default {
if (res.content.length) { if (res.content.length) {
this.$emit("crossChange", res.content[0]); this.$emit("crossChange", res.content[0]);
map.flyTo({ map.flyTo({
center: res.content[0].location.split(","), center: wgs84togcj02(res.content[0].location.split(",")),
zoom: 15, zoom: 15,
}); });
} }
...@@ -161,14 +152,14 @@ export default { ...@@ -161,14 +152,14 @@ export default {
let prop = e.features[0].properties; let prop = e.features[0].properties;
this.lastCheck = prop; this.lastCheck = prop;
this.updateLayer(prop); this.updateLayer(prop);
map.flyTo({ center: prop.location.split(",") }); map.flyTo({ center: wgs84togcj02(prop.location.split(",")) });
this.$emit("crossChange", prop); this.$emit("crossChange", prop);
}, },
rowClick(row) { rowClick(row) {
this.lastCheck = row; this.lastCheck = row;
this.updateLayer(row); this.updateLayer(row);
map.flyTo({ map.flyTo({
center: row.location.split(","), center: wgs84togcj02(row.location.split(",")),
}); });
this.$emit("crossChange", row); this.$emit("crossChange", row);
}, },
......
wj-manage-web/src/views/organization/mapConflict.vue
View file @ 1a93e18f
...@@ -28,7 +28,7 @@ let map; ...@@ -28,7 +28,7 @@ let map;
const conflictOptions = ["机非", "人非", "机机", "人机"]; const conflictOptions = ["机非", "人非", "机机", "人机"];
import { orgConflict } from "../../dao/organization"; import { orgConflict } from "../../dao/organization";
import wMap from "../../components/Standard/mapMapbox.vue"; import wMap from "../../components/Standard/mapMapbox.vue";
import { addOrUpdateEventHeat } from "../../utils/mapboxTools"; import {addOrUpdateEventHeat, wgs84togcj02} from "../../utils/mapboxTools";
export default { export default {
name: "mapConflict", name: "mapConflict",
components: { components: {
...@@ -89,7 +89,7 @@ export default { ...@@ -89,7 +89,7 @@ export default {
convertPointJsonToGeo(array) { convertPointJsonToGeo(array) {
let features = []; let features = [];
for (let item of array) { 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); return turf.featureCollection(features);
}, },
...@@ -124,7 +124,7 @@ export default { ...@@ -124,7 +124,7 @@ export default {
}, },
refreshMapData() { refreshMapData() {
map.flyTo({ map.flyTo({
center: this.rowData.location.split(","), center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000, maxDuration: 1000,
zoom: 17.2, zoom: 17.2,
pitch: 0, pitch: 0,
......
wj-manage-web/src/views/organization/mapFlow.vue
View file @ 1a93e18f
...@@ -24,7 +24,7 @@ import { ...@@ -24,7 +24,7 @@ import {
addOrUpdateFlowLineArrow, addOrUpdateFlowLineArrow,
addOrUpdateFlowText, addOrUpdateFlowText,
addOrUpdateFlowTextEnd, addOrUpdateFlowTextEnd,
addOrUpdateRoadPolygon, addOrUpdateRoadPolygon, wgs84togcj02,
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
export default { export default {
name: "mapFlow", name: "mapFlow",
...@@ -63,7 +63,7 @@ export default { ...@@ -63,7 +63,7 @@ export default {
// 画车道面和流量曲线和流量值 // 画车道面和流量曲线和流量值
getCrossPolygon() { getCrossPolygon() {
map.flyTo({ map.flyTo({
center: this.rowData.location.split(","), center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000, maxDuration: 1000,
zoom: 17.2, zoom: 17.2,
pitch: 0, pitch: 0,
...@@ -116,10 +116,10 @@ export default { ...@@ -116,10 +116,10 @@ export default {
let lnglatArray = lane.arcLine.split(";"); let lnglatArray = lane.arcLine.split(";");
let resultPointArray = []; let resultPointArray = [];
for (let lnglat of lnglatArray) { for (let lnglat of lnglatArray) {
resultPointArray.push([ resultPointArray.push(wgs84togcj02([
Number(lnglat.split(",")[0]), Number(lnglat.split(",")[0]),
Number(lnglat.split(",")[1]), Number(lnglat.split(",")[1]),
]); ]));
} }
singleLane.select = 0; singleLane.select = 0;
......
wj-manage-web/src/views/organization/mapTrack.vue
View file @ 1a93e18f
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<script> <script>
let map; let map;
import wMap from "../../components/Standard/mapMapbox.vue"; import wMap from "../../components/Standard/mapMapbox.vue";
import { addOrUpdateTrackPointVector } from "../../utils/mapboxTools"; import {addOrUpdateTrackPointVector, wgs84togcj02} from "../../utils/mapboxTools";
export default { export default {
name: "mapTrack", name: "mapTrack",
components: { components: {
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
refreshData() { refreshData() {
this.loading = true; this.loading = true;
map.flyTo({ map.flyTo({
center: this.rowData.location.split(","), center: wgs84togcj02(this.rowData.location.split(",")),
maxDuration: 1000, maxDuration: 1000,
zoom: 17.2, zoom: 17.2,
pitch: 0, pitch: 0,
......
wj-manage-web/src/views/safety/bottomCameras.vue
View file @ 1a93e18f
...@@ -187,6 +187,7 @@ export default { ...@@ -187,6 +187,7 @@ export default {
} }
.video { .video {
object-fit: fill;
width: calc((100% - 40px) / 4); width: calc((100% - 40px) / 4);
background-color: #132039; background-color: #132039;
margin-right: 10px; margin-right: 10px;
......
wj-manage-web/src/views/safety/leftMap.vue
View file @ 1a93e18f
...@@ -84,7 +84,7 @@ import mapAssets from "../../config/holo/mapAssets"; ...@@ -84,7 +84,7 @@ import mapAssets from "../../config/holo/mapAssets";
import { safetyRank } from "../../dao/safety"; import { safetyRank } from "../../dao/safety";
import { import {
addOrUpdateCross, addOrUpdateCross,
addOrUpdateCrossName, addOrUpdateCrossName, wgs84togcj02,
} from "../../utils/mapboxTools"; } from "../../utils/mapboxTools";
import { import {
equip_camera, equip_camera,
...@@ -151,7 +151,7 @@ export default { ...@@ -151,7 +151,7 @@ export default {
// 选中第一条数据， 并请求右侧所有指标 // 选中第一条数据， 并请求右侧所有指标
let features = []; let features = [];
for (let cross of this.fullData) { 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); let geo = turf.featureCollection(features);
addOrUpdateCross(map, geo, this.crossClick); addOrUpdateCross(map, geo, this.crossClick);
...@@ -162,7 +162,7 @@ export default { ...@@ -162,7 +162,7 @@ export default {
this.cameraList = camera.content this.cameraList = camera.content
this.$emit("crossChange", res.content[0], this.cameraList); this.$emit("crossChange", res.content[0], this.cameraList);
map.flyTo({ map.flyTo({
center: res.content[0].location.split(","), center: wgs84togcj02(res.content[0].location.split(",")),
zoom: 15, zoom: 15,
}); });
}); });
......
wj-manage-web/src/views/situation/index.vue
View file @ 1a93e18f
...@@ -3,24 +3,24 @@ ...@@ -3,24 +3,24 @@
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" <track-switcher :detetors="detetorsArray" :boxShow="boxesShow" @timeChange="timeChange" v-show="trackSwitcherVis"
@closeRealTime="closeRealTime" @openRealTime="openRealTime"></track-switcher> @closeRealTime="closeRealTime" @openRealTime="openRealTime"></track-switcher>
<situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal" /> <situation-time v-show="currentCheck === 'first' && timeState" class="situationTime" :time="situationTimeVal"/>
<wMap :mapId="'situation-map'" ref="wMap" /> <wMap :mapId="'situation-map'" ref="wMap"/>
<!--左右图表组件--> <!--左右图表组件-->
<message-boxes @playOverHistoryTrace="playOverHistoryTrace" @delWarningPopup="delWarningPopup" <message-boxes @playOverHistoryTrace="playOverHistoryTrace" @delWarningPopup="delWarningPopup"
@addWarningPopup="addWarningPopup" :show="boxesShow" /> @addWarningPopup="addWarningPopup" :show="boxesShow"/>
<!--图层切换按钮--> <!--图层切换按钮-->
<layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange" <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" <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" <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 @isReady="singalHistoryVideoReady" :urls="hisUrls" :key="sigalKey" v-if="showHisVid">
</sigalTraceVideos> </sigalTraceVideos>
...@@ -35,7 +35,7 @@ import MessageBoxes from "./floatData/messageBoxes.vue"; ...@@ -35,7 +35,7 @@ import MessageBoxes from "./floatData/messageBoxes.vue";
import CrossDetail from "./crossDetail.vue"; import CrossDetail from "./crossDetail.vue";
import VideoList from "./floatData/videoList.vue"; import VideoList from "./floatData/videoList.vue";
import TrafficEventsTend from "./floatData/trafficEventsTend.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 dict from "../../config/holo/dictionary";
import mapAssets from "../../config/holo/mapAssets"; import mapAssets from "../../config/holo/mapAssets";
import * as mapTools from "../../utils/mapboxTools"; import * as mapTools from "../../utils/mapboxTools";
...@@ -60,7 +60,7 @@ import { ...@@ -60,7 +60,7 @@ import {
equip_radar, equip_radar,
getDetetors, getDetetors,
} from "../../dao/situation"; } from "../../dao/situation";
import { convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt } from "../../utils/mapboxTools"; import {convertPointsToGeo, convertPointsWktToGeo, convertToLineWithWkt, wgs84togcj02} from "../../utils/mapboxTools";
const VehiclePopup = Vue.extend(vehicleDetail); const VehiclePopup = Vue.extend(vehicleDetail);
const EquipmentPopup = Vue.extend(equipmentPopup); const EquipmentPopup = Vue.extend(equipmentPopup);
...@@ -69,7 +69,7 @@ const AlarmPopup = Vue.extend(alarmPopup) ...@@ -69,7 +69,7 @@ const AlarmPopup = Vue.extend(alarmPopup)
let pulsingDots = []; let pulsingDots = [];
const canvasImages = [ const canvasImages = [
{ size: 250, color: "252, 1, 26" }, {size: 250, color: "252, 1, 26"},
// {size: 400, color: "255,235,59"}, // {size: 400, color: "255,235,59"},
// {size: 400, color: "255, 141, 26"}, // {size: 400, color: "255, 141, 26"},
// {size: 400, color: "227, 5, 5"}, // {size: 400, color: "227, 5, 5"},
...@@ -228,7 +228,7 @@ export default { ...@@ -228,7 +228,7 @@ export default {
created() { created() {
}, },
mounted() { mounted() {
this.$EventBus.$on("emitPopupClose", ({ id, overRun }) => { this.$EventBus.$on("emitPopupClose", ({id, overRun}) => {
console.log('eventbus event received...', id) console.log('eventbus event received...', id)
vehiclePopups[`popup${id}`]?.remove(); vehiclePopups[`popup${id}`]?.remove();
delete vehiclePopups[`popup${id}`]; delete vehiclePopups[`popup${id}`];
...@@ -296,10 +296,10 @@ export default { ...@@ -296,10 +296,10 @@ export default {
// 重度拥堵: 3, // 重度拥堵: 3,
// 疑似事故: 4, // 疑似事故: 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); mapTools.addOrUpdateWarningWave(map, [resItem], item.eventSerialNumber);
// 上报产生的告警 弹窗提醒 定时销毁 // 上报产生的告警 弹窗提醒 定时销毁
let popup = new mapboxgl.Popup({ let popup = new minemap.Popup({
anchor: "bottom", anchor: "bottom",
closeButton: false, closeButton: false,
offset: [0, 0], offset: [0, 0],
...@@ -437,8 +437,8 @@ export default { ...@@ -437,8 +437,8 @@ export default {
let prop = e.features[0]?.properties; let prop = e.features[0]?.properties;
if (prop) { if (prop) {
this.boxesShow = false; this.boxesShow = false;
map.setCenter(prop.location.split(",")); map.setCenter(wgs84togcj02(prop.location.split(",")));
map.setZoom(19); map.setZoom(17.8);
let matchCameras = this.cameraData.filter((camera) => { let matchCameras = this.cameraData.filter((camera) => {
return camera.crossId === prop.id; return camera.crossId === prop.id;
}); });
...@@ -474,7 +474,7 @@ export default { ...@@ -474,7 +474,7 @@ export default {
return item.oid == oid; return item.oid == oid;
}); });
if (cameraItem && map) { if (cameraItem && map) {
this.cLocation = cameraItem.wkt.split(","); this.cLocation = wgs84togcj02(cameraItem.wkt.split(","));
this.cBearing = cameraItem.monitorDirect; this.cBearing = cameraItem.monitorDirect;
let offsetLength = 22; let offsetLength = 22;
if (cameraItem.addressType == "4") { if (cameraItem.addressType == "4") {
...@@ -484,13 +484,13 @@ export default { ...@@ -484,13 +484,13 @@ export default {
this.cLocation, this.cLocation,
offsetLength, // 相机向前偏移距离 offsetLength, // 相机向前偏移距离
this.cBearing, this.cBearing,
{ units: "meters" } {units: "meters"}
).geometry.coordinates; ).geometry.coordinates;
map.flyTo({ map.flyTo({
center: translatedPoint, center: translatedPoint,
pitch: 75, pitch: 75,
bearing: this.cBearing, bearing: this.cBearing,
zoom: 20.7, zoom: 17.8,
duration: 2000, // Animate over 2 seconds duration: 2000, // Animate over 2 seconds
essential: true, essential: true,
}); });
...@@ -510,17 +510,17 @@ export default { ...@@ -510,17 +510,17 @@ export default {
lastFrameTime = new Date().getTime(); lastFrameTime = new Date().getTime();
map = this.$refs.wMap.initMap(); map = this.$refs.wMap.initMap();
window.map = map; window.map = map;
map.on("style.load", () => { map.on("load", () => {
map.on('dblclick', () => { // map.on('dblclick', () => {
console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom()) // console.log('center ' + map.getCenter() + ' pitch ' + map.getPitch() + ' bearing ' + map.getBearing() + ' zoom ' + map.getZoom())
}) // })
map.setFog({ // map.setFog({
color: "#1d3244", // Lower atmosphere // color: "#1d3244", // Lower atmosphere
"high-color": "#030b19", // Upper atmosphere // "high-color": "#030b19", // Upper atmosphere
"horizon-blend": 0.2, // Atmosphere thickness (default 0.2 at low zooms) // "horizon-blend": 0.2, // Atmosphere thickness (default 0.2 at low zooms)
"space-color": "rgb(11, 11, 25)", // Background color // "space-color": "rgb(11, 11, 25)", // Background color
"star-intensity": 0, // Background star brightness (default 0.35 at low zoooms ) // "star-intensity": 0, // Background star brightness (default 0.35 at low zoooms )
}); // });
// 添加map icons图片资源 ---start // 添加map icons图片资源 ---start
for (let key in mapAssets.lightIcons) { for (let key in mapAssets.lightIcons) {
map.loadImage(mapAssets.lightIcons[key], (error, image) => { map.loadImage(mapAssets.lightIcons[key], (error, image) => {
...@@ -536,15 +536,15 @@ export default { ...@@ -536,15 +536,15 @@ export default {
} }
for (let i = 0; i < pulsingDots.length; i++) { for (let i = 0; i < pulsingDots.length; i++) {
if (map && !map.hasImage(`pulsingDot${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 // 添加map icons图片资源 ---end
this.loading = false; this.loading = false;
this.mixDraw(map); // this.mixDraw(map);
map.addControl( // map.addControl(
new mapboxgl.NavigationControl({ showZoom: false }), // new mapboxgl.NavigationControl({ showZoom: false }),
"bottom-right" // "bottom-right"
); // );
this.refreshBounds(); this.refreshBounds();
// 快捷键 // 快捷键
window.onkeydown = () => { window.onkeydown = () => {
...@@ -633,42 +633,42 @@ export default { ...@@ -633,42 +633,42 @@ export default {
this.boxesShow = false; this.boxesShow = false;
} }
}; };
window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), { // window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
defaultLights: true, // defaultLights: true,
// realSunlight: true, // // realSunlight: true,
// realSunlightHelper: true, // // realSunlightHelper: true,
// sky: true, // // sky: true,
enableSelectingObjects: 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.vehicleModelTypes = vehicleModelTypes; // map.addLayer({
// this.loadLightModel(map); // id: "vehicle3D",
}, // type: "custom",
render: function (gl, matrix) { // renderingMode: "3d",
window.tb.update(); // 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.switchfirst();
}); });
this.registerListener(); this.registerListener();
...@@ -703,7 +703,7 @@ export default { ...@@ -703,7 +703,7 @@ export default {
if (this.currentCheck === "first") { if (this.currentCheck === "first") {
if (map.getZoom() > 17) { if (map.getZoom() > 17) {
this.mxRefreshLightWs(); this.mxRefreshLightWs();
this.loadUpdateRadars() // this.loadUpdateRadars()
//---------------------------------------- //----------------------------------------
this.registDetetors() this.registDetetors()
} else { } else {
...@@ -740,7 +740,7 @@ export default { ...@@ -740,7 +740,7 @@ export default {
// } // }
// }, 100); // }, 100);
let arr = this.$store.state.dicts.CrossInfo.map(item => { 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 return item
}) })
this.crossGeo = convertPointsToGeo(arr) this.crossGeo = convertPointsToGeo(arr)
...@@ -750,7 +750,7 @@ export default { ...@@ -750,7 +750,7 @@ export default {
let centerP = turf.point([map.getCenter().lng, map.getCenter().lat]); let centerP = turf.point([map.getCenter().lng, map.getCenter().lat]);
// 取最近点的crossId // 取最近点的crossId
let nearest = turf.nearestPoint(centerP, this.crossGeo); let nearest = turf.nearestPoint(centerP, this.crossGeo);
this.firstCrossClick({ features: [nearest] }) this.firstCrossClick({features: [nearest]})
} }
//-------------------------------------------------------------------- //--------------------------------------------------------------------
// 注册车辆实时ws // 注册车辆实时ws
...@@ -776,7 +776,7 @@ export default { ...@@ -776,7 +776,7 @@ export default {
eventPointClick(e) { eventPointClick(e) {
let data = e.features[0].properties; let data = e.features[0].properties;
// console.log("prop--", data); // console.log("prop--", data);
let eventPopup = new mapboxgl.Popup({ let eventPopup = new minemap.Popup({
anchor: "bottom", anchor: "bottom",
offset: [0, -30], offset: [0, -30],
}); });
...@@ -793,7 +793,7 @@ export default { ...@@ -793,7 +793,7 @@ export default {
}, },
// 交通事件热力图 & 点 // 交通事件热力图 & 点
refreshEventLayer(type) { refreshEventLayer(type) {
eventInfo({ dayType: type }).then((res) => { eventInfo({dayType: type}).then((res) => {
// 热力图 - 如果还未创建 先创建图层 赋值 // 热力图 - 如果还未创建 先创建图层 赋值
if (this.currentCheck === "third") { if (this.currentCheck === "third") {
mapTools.addOrUpdateEventHeat(map, res.content); mapTools.addOrUpdateEventHeat(map, res.content);
...@@ -865,7 +865,7 @@ export default { ...@@ -865,7 +865,7 @@ export default {
distance = 80; distance = 80;
} }
let bearing = map.getBearing(); // 平移方向，0 表示正北方向 let bearing = map.getBearing(); // 平移方向，0 表示正北方向
let options = { units: "meters" }; let options = {units: "meters"};
let translatedPoint = turf.destination( let translatedPoint = turf.destination(
prop.wkt.split(","), prop.wkt.split(","),
distance, distance,
...@@ -874,22 +874,22 @@ export default { ...@@ -874,22 +874,22 @@ export default {
); );
// 将地图中心点设置为平移后的点 // 将地图中心点设置为平移后的点
map.flyTo({ map.flyTo({
center: translatedPoint.geometry.coordinates, center: wgs84togcj02(translatedPoint.geometry.coordinates),
zoom: 18, zoom: 18,
}); });
equipPopup = new mapboxgl.Popup({ equipPopup = new minemap.Popup({
anchor: "bottom", anchor: "bottom",
offset: [0, -20], offset: [0, -20],
}); });
equipPopup equipPopup
.setLngLat(prop.wkt.split(",")) .setLngLat(wgs84togcj02(prop.wkt.split(",")))
.setHTML('<div id="equipment_popup"></div>') .setHTML('<div id="equipment_popup"></div>')
.addTo(map) .addTo(map)
.setMaxWidth("500") .setMaxWidth("unset")
.addClassName("equipmentPopup"); .addClassName("equipmentPopup");
popupInstance = new EquipmentPopup({ popupInstance = new EquipmentPopup({
propsData: { propsData: {
model: { equip_type: type, ...prop }, model: {equip_type: type, ...prop},
}, },
}); });
popupInstance.$mount("#equipment_popup"); popupInstance.$mount("#equipment_popup");
...@@ -955,7 +955,7 @@ export default { ...@@ -955,7 +955,7 @@ export default {
} }
model.setCoords([options.longitude, options.latitude]); model.setCoords([options.longitude, options.latitude]);
model.userData.data = options; 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() { updateOverCarLnglat() {
...@@ -1020,7 +1020,7 @@ export default { ...@@ -1020,7 +1020,7 @@ export default {
lnglat: [[data.longitude, data.latitude]], lnglat: [[data.longitude, data.latitude]],
properties: data, properties: data,
} }
vehiclePopups[`popup${data.id}`] = new mapboxgl.Popup({ vehiclePopups[`popup${data.id}`] = new minemap.Popup({
// closeButton: true, // closeButton: true,
closeButton: false, closeButton: false,
anchor: "bottom", anchor: "bottom",
...@@ -1046,7 +1046,7 @@ export default { ...@@ -1046,7 +1046,7 @@ export default {
clearLicense() { clearLicense() {
if (!this.licenseState) { if (!this.licenseState) {
for (let key in licenseLabel) { for (let key in licenseLabel) {
window.tb.clear(key, null); window.tb?.clear(key, null);
} }
licenseLabel = {}; licenseLabel = {};
} }
...@@ -1057,7 +1057,7 @@ export default { ...@@ -1057,7 +1057,7 @@ export default {
// 车牌号状态 // 车牌号状态
if (!this.licenseState && Object.keys(licenseLabel).length) { if (!this.licenseState && Object.keys(licenseLabel).length) {
for (let key in licenseLabel) { for (let key in licenseLabel) {
window.tb.clear(key, null); window.tb?.clear(key, null);
} }
licenseLabel = {}; licenseLabel = {};
} }
...@@ -1084,7 +1084,7 @@ export default { ...@@ -1084,7 +1084,7 @@ export default {
this.situationTimeVal = msg[0].dateTime; this.situationTimeVal = msg[0].dateTime;
// zoom 大于 18 ： 移除圆点和图片图层 // zoom 大于 18 ： 移除圆点和图片图层
if (zoom >= 18) { if (zoom >= 18) {
this.removeLayers("vehiclePic,vehicle"); // this.removeLayers("vehiclePic,vehicle");
} }
// zoom 小于 18：隐藏 three场景 ；大于17且小于18的部分使用图片图层 其余部分使用圆点 // zoom 小于 18：隐藏 three场景 ；大于17且小于18的部分使用图片图层 其余部分使用圆点
if (zoom < 18) { if (zoom < 18) {
...@@ -1161,74 +1161,74 @@ export default { ...@@ -1161,74 +1161,74 @@ export default {
} }
} }
// 超限车辆 end // 超限车辆 end
if (zoom > 18) { // if (zoom > 18) {
// 新增 // // 新增
if ( // if (
item.dill === "add" || // item.dill === "add" ||
(item.dill === "com" && !vehicleModels[item.id]) // (item.dill === "com" && !vehicleModels[item.id])
) { // ) {
this.addVehicleModels(item); // this.addVehicleModels(item);
if (this.licenseState) this.addVehicleLicenses(item); // if (this.licenseState) this.addVehicleLicenses(item);
} else { // } else {
// console.log("模型总数", Object.keys(vehicleModels).length); // // console.log("模型总数", Object.keys(vehicleModels).length);
for (let key in vehicleModels) { // for (let key in vehicleModels) {
if (vehicleModels[key].userData.data?.id === item.id) { // if (vehicleModels[key].userData.data?.id === item.id) {
if (item.dill === "del") { // if (item.dill === "del") {
if (licenseLabel[`license${item.id}`]) { // if (licenseLabel[`license${item.id}`]) {
window.tb.clear(`license${item.id}`, true); // window.tb.clear(`license${item.id}`, true);
delete licenseLabel[`license${item.id}`]; // delete licenseLabel[`license${item.id}`];
} // }
if (vehicleModels[key]) { // if (vehicleModels[key]) {
window.tb.clear(item.id, true); // window.tb.clear(item.id, true);
delete vehicleModels[key]; // delete vehicleModels[key];
} // }
} // }
if (item.dill === "com") { // if (item.dill === "com") {
// 车型中途变化 清除并重新创建 // // 车型中途变化 清除并重新创建
if ( // if (
vehicleModels[key].userData.data.originalType !== // vehicleModels[key].userData.data.originalType !==
item.originalType // item.originalType
) { // ) {
if (vehicleModels[key]) { // if (vehicleModels[key]) {
window.tb.clear(item.id, true); // window.tb.clear(item.id, true);
delete vehicleModels[key]; // delete vehicleModels[key];
} // }
if (licenseLabel[`license${item.id}`]) { // if (licenseLabel[`license${item.id}`]) {
window.tb.clear(`license${item.id}`, true); // window.tb.clear(`license${item.id}`, true);
delete licenseLabel[`license${item.id}`]; // delete licenseLabel[`license${item.id}`];
} // }
this.addVehicleModels(item); // this.addVehicleModels(item);
if (this.licenseState) this.addVehicleLicenses(item); // if (this.licenseState) this.addVehicleLicenses(item);
} else { // } else {
if (licenseLabel[`license${item.id}`]) { // if (licenseLabel[`license${item.id}`]) {
// 如果车牌model存在且未改变 则setCoords // // 如果车牌model存在且未改变 则setCoords
if ( // if (
licenseLabel[`license${item.id}`].userData.data // licenseLabel[`license${item.id}`].userData.data
.picLicense == item.picLicense // .picLicense == item.picLicense
) { // ) {
licenseLabel[`license${item.id}`].setCoords([ // licenseLabel[`license${item.id}`].setCoords([
item.longitude, // item.longitude,
item.latitude, // item.latitude,
4, // 4,
]); // ]);
} // }
// 否则先删除当前车牌 再创建更新后的车牌 // // 否则先删除当前车牌 再创建更新后的车牌
else { // else {
window.tb.clear(`license${item.id}`, true); // window.tb.clear(`license${item.id}`, true);
delete licenseLabel[`license${item.id}`]; // delete licenseLabel[`license${item.id}`];
this.addVehicleLicenses(item); // this.addVehicleLicenses(item);
} // }
} else { // } else {
if (this.licenseState) // if (this.licenseState)
this.addVehicleLicenses(item); // this.addVehicleLicenses(item);
} // }
this.setModel(vehicleModels[key], item, true); // this.setModel(vehicleModels[key], item, true);
} // }
} // }
} // }
} // }
} // }
} // }
} }
this.updateSelectVehicleTrack() this.updateSelectVehicleTrack()
this.updateOverCarLnglat() this.updateOverCarLnglat()
...@@ -1278,11 +1278,11 @@ export default { ...@@ -1278,11 +1278,11 @@ export default {
false false
); );
vehicleModels[option.id] = model; vehicleModels[option.id] = model;
window.tb.add(model, option.id); window.tb?.add(model, option.id);
} }
}, },
addVehicleLicenses(option) { addVehicleLicenses(option) {
if (option.picLicense) { if (option.picLicense && window.tb) {
let ele = document.createElement("div"); let ele = document.createElement("div");
ele.style.color = "white"; ele.style.color = "white";
ele.innerText = option.picLicense; ele.innerText = option.picLicense;
...@@ -1298,7 +1298,7 @@ export default { ...@@ -1298,7 +1298,7 @@ export default {
topMargin: 2, topMargin: 2,
}); });
license.setCoords([option.longitude, option.latitude, 4]); 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}`); window.tb.add(license, `license${option.id}`);
licenseLabel[`license${option.id}`] = license; licenseLabel[`license${option.id}`] = license;
} }
...@@ -1378,7 +1378,7 @@ export default { ...@@ -1378,7 +1378,7 @@ export default {
this.$EventBus.$off("emitPopupClose"); this.$EventBus.$off("emitPopupClose");
this.clearTrackTimer(); this.clearTrackTimer();
this.closeAllWs(); this.closeAllWs();
window.tb.dispose(); window.tb?.dispose();
window.tb = null; window.tb = null;
map = null; map = null;
window.map = null; window.map = null;
...@@ -1471,7 +1471,7 @@ export default { ...@@ -1471,7 +1471,7 @@ export default {
box-shadow: none !important; box-shadow: none !important;
} }
.mapboxgl-ctrl-group button+button { .mapboxgl-ctrl-group button + button {
border-top: unset !important; border-top: unset !important;
} }
......
wj-manage-web/src/views/situation/trackSwitcher.vue
View file @ 1a93e18f
...@@ -1078,6 +1078,7 @@ export default { ...@@ -1078,6 +1078,7 @@ export default {
} }
} }
.video { .video {
object-fit: fill;
height: calc(100% - 62px); height: calc(100% - 62px);
} }
.picker { .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