Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
H
holo-web
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
xinkong
holo-web
Commits
1a93e18f
Commit
1a93e18f
authored
Nov 06, 2024
by
ninglx
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
mapbox初步迁移mine map
parent
013daa15
Changes
16
Show whitespace changes
Inline
Side-by-side
Showing
16 changed files
with
574 additions
and
355 deletions
+574
-355
index.html
wj-manage-web/public/index.html
+25
-7
cameraVideo.vue
wj-manage-web/src/components/Standard/cameraVideo.vue
+1
-0
mapMapbox.vue
wj-manage-web/src/components/Standard/mapMapbox.vue
+15
-13
mapUtils.js
wj-manage-web/src/utils/mapUtils.js
+151
-0
mapboxTools.js
wj-manage-web/src/utils/mapboxTools.js
+64
-16
reportCross.vue
wj-manage-web/src/views/analysis/reportCross.vue
+3
-4
leftMap.vue
wj-manage-web/src/views/efficiency/leftMap.vue
+66
-55
index.vue
wj-manage-web/src/views/organization/index.vue
+2
-6
leftMap.vue
wj-manage-web/src/views/organization/leftMap.vue
+5
-14
mapConflict.vue
wj-manage-web/src/views/organization/mapConflict.vue
+3
-3
mapFlow.vue
wj-manage-web/src/views/organization/mapFlow.vue
+4
-4
mapTrack.vue
wj-manage-web/src/views/organization/mapTrack.vue
+2
-2
bottomCameras.vue
wj-manage-web/src/views/safety/bottomCameras.vue
+1
-0
leftMap.vue
wj-manage-web/src/views/safety/leftMap.vue
+3
-3
index.vue
wj-manage-web/src/views/situation/index.vue
+228
-228
trackSwitcher.vue
wj-manage-web/src/views/situation/trackSwitcher.vue
+1
-0
No files found.
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
;
}
.m
apboxgl
-popup-tip
{
.m
inemap
-popup-tip
{
display
:
none
!important
;
}
.m
apboxgl
-popup-close-button
{
.m
inemap
-popup-close-button
{
font-size
:
26px
;
color
:
white
;
}
.vehicleDetailPopup
.m
apboxgl
-popup-close-button
{
.vehicleDetailPopup
.m
inemap
-popup-close-button
{
right
:
14px
;
top
:
18px
;
}
.eventPopup
.m
apboxgl
-popup-close-button
{
.eventPopup
.m
inemap
-popup-close-button
{
right
:
8px
;
top
:
10px
;
}
.equipmentPopup
.m
apboxgl
-popup-close-button
{
.equipmentPopup
.m
inemap
-popup-close-button
{
right
:
8px
;
top
:
10px
;
}
.m
apboxgl
-ctrl-logo
{
.m
inemap
-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
"
,
{
...
...
@@ -342,6 +343,7 @@ export function addOrUpdateWave(map, geo) {
}
}
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
...
...
@@ -72,7 +72,7 @@
</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
,
...
...
@@ -126,7 +127,6 @@ export default {
for
(
let
key
in
mapAssets
.
mapIcons
)
{
map
.
loadImage
(
mapAssets
.
mapIcons
[
key
],
(
error
,
image
)
=>
{
if
(
!
map
.
hasImage
(
key
))
map
.
addImage
(
key
,
image
);
});
}
map
.
setPitch
(
0
);
...
...
@@ -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
...
...
@@ -3,24 +3,24 @@
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"
/>
<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"},
...
...
@@ -228,7 +228,7 @@ export default {
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
}
`
];
...
...
@@ -296,10 +296,10 @@ 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
m
apboxgl
.
Popup
({
let
popup
=
new
m
inemap
.
Popup
({
anchor
:
"
bottom
"
,
closeButton
:
false
,
offset
:
[
0
,
0
],
...
...
@@ -437,8 +437,8 @@ export default {
let
prop
=
e
.
features
[
0
]?.
properties
;
if
(
prop
)
{
this
.
boxesShow
=
false
;
map
.
setCenter
(
prop
.
location
.
split
(
"
,
"
));
map
.
setZoom
(
1
9
);
map
.
setCenter
(
wgs84togcj02
(
prop
.
location
.
split
(
"
,
"
)
));
map
.
setZoom
(
1
7.8
);
let
matchCameras
=
this
.
cameraData
.
filter
((
camera
)
=>
{
return
camera
.
crossId
===
prop
.
id
;
});
...
...
@@ -474,7 +474,7 @@ 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
"
)
{
...
...
@@ -484,13 +484,13 @@ export default {
this
.
cLocation
,
offsetLength
,
// 相机向前偏移距离
this
.
cBearing
,
{
units
:
"
meters
"
}
{
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
=
()
=>
{
...
...
@@ -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,7 +776,7 @@ export default {
eventPointClick
(
e
)
{
let
data
=
e
.
features
[
0
].
properties
;
// console.log("prop--", data);
let
eventPopup
=
new
m
apboxgl
.
Popup
({
let
eventPopup
=
new
m
inemap
.
Popup
({
anchor
:
"
bottom
"
,
offset
:
[
0
,
-
30
],
});
...
...
@@ -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,7 +865,7 @@ 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
,
...
...
@@ -874,22 +874,22 @@ export default {
);
// 将地图中心点设置为平移后的点
map
.
flyTo
({
center
:
translatedPoint
.
geometry
.
coordinates
,
center
:
wgs84togcj02
(
translatedPoint
.
geometry
.
coordinates
)
,
zoom
:
18
,
});
equipPopup
=
new
m
apboxgl
.
Popup
({
equipPopup
=
new
m
inemap
.
Popup
({
anchor
:
"
bottom
"
,
offset
:
[
0
,
-
20
],
});
equipPopup
.
setLngLat
(
prop
.
wkt
.
split
(
"
,
"
))
.
setLngLat
(
wgs84togcj02
(
prop
.
wkt
.
split
(
"
,
"
)
))
.
setHTML
(
'
<div id="equipment_popup"></div>
'
)
.
addTo
(
map
)
.
setMaxWidth
(
"
500
"
)
.
setMaxWidth
(
"
unset
"
)
.
addClassName
(
"
equipmentPopup
"
);
popupInstance
=
new
EquipmentPopup
({
propsData
:
{
model
:
{
equip_type
:
type
,
...
prop
},
model
:
{
equip_type
:
type
,
...
prop
},
},
});
popupInstance
.
$mount
(
"
#equipment_popup
"
);
...
...
@@ -955,7 +955,7 @@ export default {
}
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
m
apboxgl
.
Popup
({
vehiclePopups
[
`popup
${
data
.
id
}
`
]
=
new
m
inemap
.
Popup
({
// closeButton: true,
closeButton
:
false
,
anchor
:
"
bottom
"
,
...
...
@@ -1046,7 +1046,7 @@ export default {
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
)
{
...
...
@@ -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
()
...
...
@@ -1278,11 +1278,11 @@ export default {
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
;
...
...
@@ -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 {
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment