Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
方 梦梦
world51tocmap
Commits
1347d4d5
Commit
1347d4d5
authored
Apr 10, 2025
by
chengdong.lv@inzymeits.com
Browse files
提交
parent
79a65e8e
Changes
1
Show whitespace changes
Inline
Side-by-side
index.html
View file @
1347d4d5
<html>
<html>
<head>
<head>
<meta
charset=
"utf-8"
/>
<meta
charset=
"utf-8"
/>
<title>
示例集合
</title>
<title>
示例集合
</title>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<style>
<style>
html
{
html
{
margin
:
0
;
margin
:
0
;
...
@@ -32,7 +34,7 @@
...
@@ -32,7 +34,7 @@
margin-bottom
:
20px
;
margin-bottom
:
20px
;
}
}
#btn-list
>
div
>
[
type
=
"button"
]
{
#btn-list
>
div
>
[
type
=
"button"
]
{
background
:
rgb
(
59
,
98
,
226
);
background
:
rgb
(
59
,
98
,
226
);
color
:
#fff
;
color
:
#fff
;
border
:
0
;
border
:
0
;
...
@@ -41,16 +43,24 @@
...
@@ -41,16 +43,24 @@
cursor
:
pointer
;
cursor
:
pointer
;
}
}
#btn-list
>
div
:last-child
{
#btn-list
>
div
:last-child
{
margin-bottom
:
20px
;
margin-bottom
:
20px
;
}
}
</style>
</style>
<body>
<body>
<div
id=
"btn-list"
>
<div
id=
"btn-list"
>
<div>
<div>
<input
type=
"button"
id=
"getZoomAndCenter"
value=
"获取地图中心点和级别"
/>
<input
<input
type=
"button"
id=
"setZoomAndCenter"
value=
"设置地图中心点和级别"
/>
type=
"button"
id=
"getZoomAndCenter"
value=
"获取地图中心点和级别"
/>
<input
type=
"button"
id=
"setZoomAndCenter"
value=
"设置地图中心点和级别"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"lockMap"
value=
"限制地图显示范围和级别"
/>
<input
type=
"button"
id=
"lockMap"
value=
"限制地图显示范围和级别"
/>
...
@@ -60,7 +70,11 @@
...
@@ -60,7 +70,11 @@
<input
type=
"button"
id=
"flyTo"
value=
"设置相机"
/>
<input
type=
"button"
id=
"flyTo"
value=
"设置相机"
/>
<input
type=
"button"
id=
"getCameraView"
value=
"获取相机参数"
/>
<input
type=
"button"
id=
"getCameraView"
value=
"获取相机参数"
/>
<input
type=
"button"
id=
"addCameraEvent"
value=
"监听相机参数"
/>
<input
type=
"button"
id=
"addCameraEvent"
value=
"监听相机参数"
/>
<input
type=
"button"
id=
"removeCameraEvent"
value=
"移除相机监听事件"
/>
<input
type=
"button"
id=
"removeCameraEvent"
value=
"移除相机监听事件"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"startFly"
value=
"开始相机导览"
/>
<input
type=
"button"
id=
"startFly"
value=
"开始相机导览"
/>
...
@@ -69,14 +83,38 @@
...
@@ -69,14 +83,38 @@
<input
type=
"button"
id=
"stopFly"
value=
"结束相机导览"
/>
<input
type=
"button"
id=
"stopFly"
value=
"结束相机导览"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"addMapChangeEvent"
value=
"注册地图变化事件"
/>
<input
<input
type=
"button"
id=
"removeMapChangeEvent"
value=
"注销地图变化事件"
/>
type=
"button"
<input
type=
"button"
id=
"addMouseClickEvent"
value=
"注册鼠标点击事件"
/>
id=
"addMapChangeEvent"
<input
type=
"button"
id=
"removeMouseClickEvent"
value=
"注销鼠标点击事件"
/>
value=
"注册地图变化事件"
/>
<input
type=
"button"
id=
"removeMapChangeEvent"
value=
"注销地图变化事件"
/>
<input
type=
"button"
id=
"addMouseClickEvent"
value=
"注册鼠标点击事件"
/>
<input
type=
"button"
id=
"removeMouseClickEvent"
value=
"注销鼠标点击事件"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"addModelClickEvent"
value=
"注册模型点击事件"
/>
<input
<input
type=
"button"
id=
"removeModelClickEvent"
value=
"注销模型点击事件"
/>
type=
"button"
id=
"addModelClickEvent"
value=
"注册模型点击事件"
/>
<input
type=
"button"
id=
"removeModelClickEvent"
value=
"注销模型点击事件"
/>
<input
type=
"button"
id=
"cancleHighLight"
value=
"取消模型高亮"
/>
<input
type=
"button"
id=
"cancleHighLight"
value=
"取消模型高亮"
/>
<input
type=
"button"
id=
"removePopup"
value=
"取消弹窗"
/>
<input
type=
"button"
id=
"removePopup"
value=
"取消弹窗"
/>
</div>
</div>
...
@@ -129,10 +167,18 @@
...
@@ -129,10 +167,18 @@
<input
type=
"button"
id=
"focusNoneCar"
value=
"清除定位"
/>
<input
type=
"button"
id=
"focusNoneCar"
value=
"清除定位"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"loadarrowLineLaye"
value=
"加载车辆路径规划"
/>
<input
type=
"button"
id=
"loadarrowLineLaye"
value=
"加载车辆路径规划"
/>
<input
type=
"button"
id=
"hideRoute"
value=
"显示车辆路径规划"
/>
<input
type=
"button"
id=
"hideRoute"
value=
"显示车辆路径规划"
/>
<input
type=
"button"
id=
"showRoute"
value=
"隐藏车辆路径规划"
/>
<input
type=
"button"
id=
"showRoute"
value=
"隐藏车辆路径规划"
/>
<input
type=
"button"
id=
"cleanarrowLineLaye"
value=
"清除车辆路径规划"
/>
<input
type=
"button"
id=
"cleanarrowLineLaye"
value=
"清除车辆路径规划"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"loadPerceptual"
value=
"感知目标物渲染"
/>
<input
type=
"button"
id=
"loadPerceptual"
value=
"感知目标物渲染"
/>
...
@@ -140,25 +186,49 @@
...
@@ -140,25 +186,49 @@
<input
type=
"button"
id=
"hidePerceptual"
value=
"隐藏感知目标物"
/>
<input
type=
"button"
id=
"hidePerceptual"
value=
"隐藏感知目标物"
/>
<input
type=
"button"
id=
"removePerceptual"
value=
"清除感知目标物"
/>
<input
type=
"button"
id=
"removePerceptual"
value=
"清除感知目标物"
/>
<input
type=
"button"
id=
"addPerceptualheat"
value=
"添加交通热力图"
/>
<input
type=
"button"
id=
"addPerceptualheat"
value=
"添加交通热力图"
/>
<input
type=
"button"
id=
"deletePerceptualheat"
value=
"删除交通热力图"
/>
<input
type=
"button"
id=
"deletePerceptualheat"
value=
"删除交通热力图"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"addPerceptualheatEffect"
value=
"热力图宏观效果"
/>
<input
<input
type=
"button"
id=
"removePerceptualheatEffect"
value=
"移除热力图宏观效果"
/>
type=
"button"
id=
"addPerceptualheatEffect"
value=
"热力图宏观效果"
/>
<input
type=
"button"
id=
"removePerceptualheatEffect"
value=
"移除热力图宏观效果"
/>
<input
type=
"button"
id=
"addSignal"
value=
"信号灯"
/>
<input
type=
"button"
id=
"addSignal"
value=
"信号灯"
/>
<input
type=
"button"
id=
"CreateTIMSignal"
value=
"创建停止线"
/>
<input
type=
"button"
id=
"CreateTIMSignal"
value=
"创建停止线"
/>
<input
type=
"button"
id=
"DeleteTIMSignal"
value=
"删除停止线"
/>
<input
type=
"button"
id=
"DeleteTIMSignal"
value=
"删除停止线"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"addTrafficIncident"
value=
"交通流中的事件"
/>
<input
type=
"button"
id=
"addTrafficIncident"
value=
"交通流中的事件"
/>
<input
type=
"button"
id=
"addTrafficIncident2"
value=
"不在交通流中的事件"
/>
<input
<input
type=
"button"
id=
"addTrafficIncident3"
value=
"区域坐标的交通事件"
/>
type=
"button"
id=
"addTrafficIncident2"
value=
"不在交通流中的事件"
/>
<input
type=
"button"
id=
"addTrafficIncident3"
value=
"区域坐标的交通事件"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"bindHistoryVehicle"
value=
"开始历史轨迹"
/>
<input
type=
"button"
id=
"bindHistoryVehicle"
value=
"开始历史轨迹"
/>
<input
type=
"button"
id=
"removeHistoryVehicle"
value=
"结束历史轨迹"
/>
<input
type=
"button"
id=
"removeHistoryVehicle"
value=
"结束历史轨迹"
/>
<input
type=
"button"
id=
"pauseHistoryVehicle"
value=
"暂停历史轨迹"
/>
<input
type=
"button"
id=
"pauseHistoryVehicle"
value=
"暂停历史轨迹"
/>
<input
type=
"button"
id=
"resumeHistoryVehicle"
value=
"重新开始历史轨迹"
/>
<input
type=
"button"
id=
"resumeHistoryVehicle"
value=
"重新开始历史轨迹"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"startV2X"
value=
"全部车辆V2X"
/>
<input
type=
"button"
id=
"startV2X"
value=
"全部车辆V2X"
/>
...
@@ -172,22 +242,42 @@
...
@@ -172,22 +242,42 @@
<input
type=
"button"
id=
"removePolygon"
value=
"删除感知区域"
/>
<input
type=
"button"
id=
"removePolygon"
value=
"删除感知区域"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"modelClickHighLight"
value=
"注册场景内模型点击高亮"
/>
<input
<input
type=
"button"
id=
"cancelModelHighlight"
value=
"清除场景内模型高亮"
/>
type=
"button"
<input
type=
"button"
id=
"modelClickRemove"
value=
"注销场景内模型点击事件"
/>
id=
"modelClickHighLight"
value=
"注册场景内模型点击高亮"
/>
<input
type=
"button"
id=
"cancelModelHighlight"
value=
"清除场景内模型高亮"
/>
<input
type=
"button"
id=
"modelClickRemove"
value=
"注销场景内模型点击事件"
/>
</div>
</div>
<div>
<div>
<input
type=
"button"
id=
"addMillimeterWave"
value=
"毫米波雷达"
/>
<input
type=
"button"
id=
"addMillimeterWave"
value=
"毫米波雷达"
/>
<input
type=
"button"
id=
"removeMillimeterWave"
value=
"移除毫米波雷达"
/>
<input
type=
"button"
id=
"removeMillimeterWave"
value=
"移除毫米波雷达"
/>
</div>
</div>
</div>
</div>
<div
id=
"main-container"
style=
"width: 100vw; height: 100vh; overflow: hidden"
></div>
<div
</body>
id=
"main-container"
<script
src=
"http://localhost:3000/gis_sdk/js/CMapLoader.map.js"
></script>
style=
"width: 100vw; height: 100vh; overflow: hidden"
<script
src=
"./SignalLines.js"
></script>
></div>
</head>
</body>
<script
src=
"http://localhost:3000/gis_sdk/js/CMapLoader.map.js"
></script>
<script>
<!-- <script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script> -->
<script
src=
"./SignalLines.js"
></script>
</head>
<script>
var
map
;
var
map
;
var
layer
;
var
layer
;
var
road
;
var
road
;
...
@@ -198,12 +288,15 @@
...
@@ -198,12 +288,15 @@
var
compassItem
=
null
;
// 指北针
var
compassItem
=
null
;
// 指北针
var
perceptualroad
=
null
;
var
perceptualroad
=
null
;
var
perceptual
=
false
;
//是否加载了感知物
var
perceptual
=
false
;
//是否加载了感知物
var
perceptualshow
=
false
;
//热力图否显示
var
perceptualshow
=
false
;
//热力图否显示
var
trafficIncidentArr
=
[];
//热力图否显示
var
trafficIncidentArr
=
[];
//热力图否显示
var
polygon
=
null
;
// 感知区域
var
polygon
=
null
;
// 感知区域
var
v2xSocket
=
null
;
var
v2xSocket
=
null
;
var
v2xArr
=
[];
// 记录所有v2x
var
v2xArr
=
[];
// 记录所有v2x
var
trafficEventSocket
=
null
;
var
trafficEventArr
=
[];
// 记录所有的交通事件
//高亮模型Id
//高亮模型Id
var
highlightModelId
=
null
;
var
highlightModelId
=
null
;
var
handler
=
(
e
)
=>
{
var
handler
=
(
e
)
=>
{
...
@@ -243,7 +336,11 @@
...
@@ -243,7 +336,11 @@
// 设置地图中心点和级别
// 设置地图中心点和级别
document
.
getElementById
(
"
setZoomAndCenter
"
).
onclick
=
setZoomAndCenter
;
document
.
getElementById
(
"
setZoomAndCenter
"
).
onclick
=
setZoomAndCenter
;
function
setZoomAndCenter
()
{
function
setZoomAndCenter
()
{
var
options
=
{
"
longitude
"
:
117.346635
,
"
latitude
"
:
38.99408
,
"
height
"
:
51.43313
}
var
options
=
{
longitude
:
117.346635
,
latitude
:
38.99408
,
height
:
51.43313
,
};
map
.
setZoomAndCenter
(
options
);
map
.
setZoomAndCenter
(
options
);
}
}
...
@@ -699,19 +796,19 @@
...
@@ -699,19 +796,19 @@
document
.
getElementById
(
"
addTrafficFlow
"
).
onclick
=
addTrafficFlow
;
document
.
getElementById
(
"
addTrafficFlow
"
).
onclick
=
addTrafficFlow
;
async
function
addTrafficFlow
()
{
async
function
addTrafficFlow
()
{
const
json
=
{
const
json
=
{
id
:
'
21e7a9e6d2884122804788dac1e002cc
'
,
id
:
"
21e7a9e6d2884122804788dac1e002cc
"
,
url
:
'
ws://192.168.60.137:31000/ws/streamer/a9219e09346a44a28ee3d0aed79c27ea
'
// 全部车辆
url
:
"
ws://192.168.60.137:31000/ws/streamer/a9219e09346a44a28ee3d0aed79c27ea
"
,
// 全部车辆
}
}
;
map
.
bindVehicle
(
json
)
map
.
bindVehicle
(
json
)
;
}
}
document
.
getElementById
(
"
addTrafficFlow6
"
).
onclick
=
addTrafficFlow6
;
document
.
getElementById
(
"
addTrafficFlow6
"
).
onclick
=
addTrafficFlow6
;
async
function
addTrafficFlow6
()
{
async
function
addTrafficFlow6
()
{
const
json
=
{
const
json
=
{
id
:
'
21e7a9e6d2884122804788dac1e002cc
'
,
id
:
"
21e7a9e6d2884122804788dac1e002cc
"
,
url
:
'
ws://192.168.60.137:31000/ws/streamer/e7c584dd5d294347bbc3ccec2f0aa8ea
'
// 6号车
url
:
"
ws://192.168.60.137:31000/ws/streamer/e7c584dd5d294347bbc3ccec2f0aa8ea
"
,
// 6号车
}
}
;
map
.
bindVehicle
(
json
)
map
.
bindVehicle
(
json
)
;
}
}
// 删除交通流
// 删除交通流
...
@@ -804,7 +901,7 @@
...
@@ -804,7 +901,7 @@
}
}
const
json
=
{
const
json
=
{
id
:
"
111
"
,
//ID
id
:
"
111
"
,
//ID
url
:
'
ws://192.168.60.137:31000/ws/streamer/86bf3faefe5f423483e4cd4d9782b046
'
,
// 全路口
url
:
"
ws://192.168.60.137:31000/ws/streamer/86bf3faefe5f423483e4cd4d9782b046
"
,
// 全路口
// url: 'ws://192.168.60.137:31000/ws/streamer/eccd0f8b060d4bb088a1b9af1ad4070f', // 6号路口
// url: 'ws://192.168.60.137:31000/ws/streamer/eccd0f8b060d4bb088a1b9af1ad4070f', // 6号路口
};
};
perceptualroad
.
bindObjects
(
json
);
perceptualroad
.
bindObjects
(
json
);
...
@@ -815,7 +912,6 @@
...
@@ -815,7 +912,6 @@
// orientation: [-34.930073, -44.426579],
// orientation: [-34.930073, -44.426579],
// };
// };
// camera.flyTo(options);
// camera.flyTo(options);
}
}
// 显示感知目标物
// 显示感知目标物
document
.
getElementById
(
"
showPerceptual
"
).
onclick
=
showPerceptual
;
document
.
getElementById
(
"
showPerceptual
"
).
onclick
=
showPerceptual
;
...
@@ -917,55 +1013,86 @@
...
@@ -917,55 +1013,86 @@
road
.
removeSignalStopLine
();
road
.
removeSignalStopLine
();
}
}
var
arr
=
[]
//开始交通事件
//开始交通事件
document
.
getElementById
(
"
addTrafficIncident
"
).
onclick
=
addTrafficIncident
;
document
.
getElementById
(
"
addTrafficIncident
"
).
onclick
=
addTrafficIncident
;
async
function
addTrafficIncident
()
{
async
function
addTrafficIncident
()
{
let
options
=
{
// 订阅事件 websocket事件
position
:
[
117.325401
,
38.996133
,
28.12
],
const
url
=
"
wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=5&reType=51world
"
;
//&intersectionCode=51-D-JD0003
const
socket
=
new
WebSocket
(
url
);
socket
.
onopen
=
function
(
event
)
{
console
.
log
(
"
socket连接成功!
"
);
};
window
.
trafficIncidentArr
=
trafficIncidentArr
;
let
index
=
0
;
let
show
=
false
;
const
fun1
=
async
(
json
)
=>
{
const
{
endTime
,
id
,
name
,
location
}
=
json
;
console
.
log
(
"
idididididid
"
,
index
,
id
,
name
);
if
(
name
==
"
违规停车/停车占道
"
&&
!
show
)
{
show
=
true
;
console
.
log
(
"
违规停车/停车占道违规停车/停车占道
"
,
json
,
id
);
let
optionsTest
=
{
position
:
[
location
[
0
].
longitude
,
location
[
0
].
latitude
,
28.12
],
orientation
:
[
-
34.930073
,
-
44.426579
],
orientation
:
[
-
34.930073
,
-
44.426579
],
};
};
camera
.
flyTo
(
options
);
camera
.
flyTo
(
optionsTest
);
}
const
json
=
{
// 从 trafficIncidentArr 中的每一项中找出 trafficIncidentId== id 的数据
"
id
"
:
"
600286
"
,
const
find
=
trafficIncidentArr
.
find
(
"
type
"
:
"
ROADSIDE_TRAFFIC_EVENT
"
,
(
item
)
=>
item
.
trafficIncidentId
==
id
"
name
"
:
"
异常停车预警
"
,
);
"
ptcIds
"
:
[
'
1200002282
'
],
//字符串数组
if
(
find
)
{
"
location
"
:
[
if
(
index
>
50
&&
name
==
"
违规停车/停车占道
"
)
{
{
map
.
stopTrafficIncident
(
id
,
json
);
longitude
:
117.32559766689558
,
latitude
:
38.99628656347781
,
elevation
:
null
,
}
}
],
return
;
"
level
"
:
1
,
"
description
"
:
null
,
"
imagesUrl
"
:
null
,
"
videosUrl
"
:
null
,
"
startTime
"
:
null
,
"
endTime
"
:
null
,
"
reportTime
"
:
null
,
"
mqttTime
"
:
null
,
"
accessTime
"
:
null
}
}
trafficIncidentArr
=
await
map
.
renderTrafficIncident
(
json
);
index
++
;
console
.
log
(
"
tc.................
"
,
trafficIncidentArr
);
let
index
=
0
;
const
timer
=
setInterval
(
async
()
=>
{
// if (index > 50) {
if
(
index
==
10
)
{
// if (name == "违规停车/停车占道") {
json
.
endTime
=
1741777564646
;
// if (find) {
// debugger;
// map.stopTrafficIncident(id, json);
// }
// }
// return;
// } else {
// }
console
.
log
(
"
index
"
,
index
,
name
);
if
(
endTime
)
{
// trafficIncidentArr = map.stopTrafficIncident(id, json);
// debugger
// return;
}
trafficIncidentArr
=
await
map
.
renderTrafficIncident
(
json
);
trafficIncidentArr
=
await
map
.
renderTrafficIncident
(
json
);
clearInterval
(
timer
);
};
socket
.
onmessage
=
async
function
(
event
)
{
const
json
=
JSON
.
parse
(
event
.
data
);
fun1
(
json
);
if
(
arr
.
length
<
100
)
{
arr
.
push
(
json
)
}
}
index
++
;
},
200
)
;
}
;
}
}
// 不在交通流中的交通事件
// 不在交通流中的交通事件
document
.
getElementById
(
"
addTrafficIncident2
"
).
onclick
=
addTrafficIncident2
;
document
.
getElementById
(
"
addTrafficIncident2
"
).
onclick
=
addTrafficIncident2
;
async
function
addTrafficIncident2
()
{
async
function
addTrafficIncident2
()
{
let
options
=
{
let
options
=
{
position
:
[
117.325401
,
38.996133
,
28.12
],
position
:
[
117.325401
,
38.996133
,
28.12
],
...
@@ -973,30 +1100,8 @@
...
@@ -973,30 +1100,8 @@
};
};
camera
.
flyTo
(
options
);
camera
.
flyTo
(
options
);
const
json
=
{
"
id
"
:
"
600286
"
,
"
type
"
:
"
ROAD_ICE
"
,
"
name
"
:
"
道路结冰
"
,
"
ptcIds
"
:
null
,
"
location
"
:
[
{
longitude
:
117.32559766689558
,
latitude
:
38.99628656347781
,
elevation
:
null
,
}
],
"
level
"
:
1
,
"
description
"
:
null
,
"
imagesUrl
"
:
null
,
"
videosUrl
"
:
null
,
"
startTime
"
:
null
,
"
endTime
"
:
null
,
"
reportTime
"
:
null
,
"
mqttTime
"
:
null
,
"
accessTime
"
:
null
}
trafficIncidentArr
=
await
map
.
renderTrafficIncident
(
json
);
trafficIncidentArr
=
await
map
.
renderTrafficIncident
(
json
);
console
.
log
(
"
tc.................
"
,
trafficIncidentArr
);
console
.
log
(
"
tc.................
"
,
trafficIncidentArr
);
let
index
=
0
;
let
index
=
0
;
...
@@ -1012,7 +1117,8 @@
...
@@ -1012,7 +1117,8 @@
}
}
// 区域坐标的交通事件
// 区域坐标的交通事件
document
.
getElementById
(
"
addTrafficIncident3
"
).
onclick
=
addTrafficIncident3
;
document
.
getElementById
(
"
addTrafficIncident3
"
).
onclick
=
addTrafficIncident3
;
async
function
addTrafficIncident3
()
{
async
function
addTrafficIncident3
()
{
let
options
=
{
let
options
=
{
position
:
[
117.325401
,
38.996133
,
28.12
],
position
:
[
117.325401
,
38.996133
,
28.12
],
...
@@ -1021,14 +1127,14 @@
...
@@ -1021,14 +1127,14 @@
camera
.
flyTo
(
options
);
camera
.
flyTo
(
options
);
const
json
=
{
const
json
=
{
"
id
"
:
"
600286
"
,
id
:
"
600286
"
,
"
type
"
:
"
TRAFFIC_CONGESTION
"
,
type
:
"
TRAFFIC_CONGESTION
"
,
"
name
"
:
"
交通拥堵
"
,
name
:
"
交通拥堵
"
,
"
ptcIds
"
:
null
,
ptcIds
:
null
,
"
location
"
:
[
location
:
[
{
{
longitude
:
117.32564783
,
longitude
:
117.32564783
,
latitude
:
38.9963299
0
,
latitude
:
38.9963299
,
elevation
:
null
,
elevation
:
null
,
},
},
{
{
...
@@ -1042,21 +1148,21 @@
...
@@ -1042,21 +1148,21 @@
elevation
:
null
,
elevation
:
null
,
},
},
{
{
longitude
:
117.3255222
0
,
longitude
:
117.3255222
,
latitude
:
38.99636725
,
latitude
:
38.99636725
,
elevation
:
null
,
elevation
:
null
,
},
},
],
],
"
level
"
:
1
,
level
:
1
,
"
description
"
:
null
,
description
:
null
,
"
imagesUrl
"
:
null
,
imagesUrl
:
null
,
"
videosUrl
"
:
null
,
videosUrl
:
null
,
"
startTime
"
:
null
,
startTime
:
null
,
"
endTime
"
:
null
,
endTime
:
null
,
"
reportTime
"
:
null
,
reportTime
:
null
,
"
mqttTime
"
:
null
,
mqttTime
:
null
,
"
accessTime
"
:
null
accessTime
:
null
,
}
}
;
trafficIncidentArr
=
await
map
.
renderTrafficIncident
(
json
);
trafficIncidentArr
=
await
map
.
renderTrafficIncident
(
json
);
console
.
log
(
"
tc.................
"
,
trafficIncidentArr
);
console
.
log
(
"
tc.................
"
,
trafficIncidentArr
);
...
@@ -1152,15 +1258,17 @@
...
@@ -1152,15 +1258,17 @@
// 开始V2V
// 开始V2V
document
.
getElementById
(
"
startV2X
"
).
onclick
=
startV2X
;
document
.
getElementById
(
"
startV2X
"
).
onclick
=
startV2X
;
function
startV2X
()
{
function
startV2X
()
{
const
url
=
'
wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world
'
const
url
=
startVehicleV2X
(
url
)
"
wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world
"
;
startVehicleV2X
(
url
);
}
}
// 6号车V2X
// 6号车V2X
document
.
getElementById
(
"
startV2X6
"
).
onclick
=
startV2X6
;
document
.
getElementById
(
"
startV2X6
"
).
onclick
=
startV2X6
;
function
startV2X6
()
{
function
startV2X6
()
{
const
url
=
'
wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=267
'
const
url
=
startVehicleV2X
(
url
)
"
wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=267
"
;
startVehicleV2X
(
url
);
}
}
// 开始车辆V2X
// 开始车辆V2X
...
@@ -1173,7 +1281,6 @@
...
@@ -1173,7 +1281,6 @@
// };
// };
// map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
// map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
// const options2 = {
// const options2 = {
// vehicleId: ['1200001992', 'sxt000045'],//车辆ID
// vehicleId: ['1200001992', 'sxt000045'],//车辆ID
// color: [255, 0, 0, 1],
// color: [255, 0, 0, 1],
...
@@ -1185,7 +1292,6 @@
...
@@ -1185,7 +1292,6 @@
// }, 200)
// }, 200)
// return
// return
// 257 XM140001
// 257 XM140001
// 259 XM140002
// 259 XM140002
// 261 XM140003
// 261 XM140003
...
@@ -1209,90 +1315,99 @@
...
@@ -1209,90 +1315,99 @@
// 当接收到消息时执行
// 当接收到消息时执行
v2xSocket
.
onmessage
=
function
(
event
)
{
v2xSocket
.
onmessage
=
function
(
event
)
{
let
data
=
JSON
.
parse
(
event
.
data
)
let
data
=
JSON
.
parse
(
event
.
data
)
;
let
{
objects
,
endTime
,
typeName
,
id
}
=
data
let
{
objects
,
endTime
,
typeName
,
id
}
=
data
;
// objects 如果只有一项,则是单车预警;如果有两项,则需要有两个车辆的通信效果
// objects 如果只有一项,则是单车预警;如果有两项,则需要有两个车辆的通信效果
let
mainCar
=
objects
[
0
]
let
mainCar
=
objects
[
0
]
;
// 如果id不在v2xArr中,则添加
// 如果id不在v2xArr中,则添加
const
find
=
v2xArr
.
find
(
item
=>
item
.
id
===
id
)
const
find
=
v2xArr
.
find
(
(
item
)
=>
item
.
id
===
id
)
;
if
(
!
find
)
{
if
(
!
find
)
{
v2xArr
.
push
(
data
)
v2xArr
.
push
(
data
)
;
}
}
let
options
=
{
let
options
=
{
id
:
id
,
id
:
id
,
color
:
[
255
,
255
,
0
,
1
],
color
:
[
255
,
255
,
0
,
1
],
vehicleId
:
mainCar
.
id
,
vehicleId
:
mainCar
.
id
,
name
:
typeName
name
:
typeName
,
};
};
map
.
getVehicle
(
"
21e7a9e6d2884122804788dac1e002cc
"
).
startV2x
(
options
);
map
.
getVehicle
(
"
21e7a9e6d2884122804788dac1e002cc
"
).
startV2x
(
options
);
if
(
objects
.
length
>
1
)
{
if
(
objects
.
length
>
1
)
{
const
options2
=
{
const
options2
=
{
id
,
id
,
vehicleId
:
[
mainCar
.
id
,
objects
[
1
].
id
],
//车辆ID
vehicleId
:
[
mainCar
.
id
,
objects
[
1
].
id
],
//车辆ID
color
:
[
255
,
0
,
0
,
1
],
color
:
[
255
,
0
,
0
,
1
],
}
}
;
map
.
renderCommunication
(
options2
)
map
.
renderCommunication
(
options2
)
;
if
(
objects
.
length
>
1
)
{
if
(
objects
.
length
>
1
)
{
console
.
log
(
'
开始
'
,
mainCar
.
id
,
objects
[
1
].
id
,
data
)
console
.
log
(
"
开始
"
,
mainCar
.
id
,
objects
[
1
].
id
,
data
)
;
}
else
{
}
else
{
console
.
log
(
'
开始
'
,
mainCar
.
id
,
data
)
console
.
log
(
"
开始
"
,
mainCar
.
id
,
data
)
;
}
}
}
}
if
(
endTime
)
{
if
(
endTime
)
{
map
.
getVehicle
(
"
21e7a9e6d2884122804788dac1e002cc
"
).
stopV2x
(
mainCar
.
id
)
map
v2xArr
.
splice
(
v2xArr
.
findIndex
(
item
=>
item
.
id
===
id
),
1
)
.
getVehicle
(
"
21e7a9e6d2884122804788dac1e002cc
"
)
.
stopV2x
(
mainCar
.
id
);
v2xArr
.
splice
(
v2xArr
.
findIndex
((
item
)
=>
item
.
id
===
id
),
1
);
// v2x的效果只能添加一个,但车辆能同时存在多个v2x
// v2x的效果只能添加一个,但车辆能同时存在多个v2x
const
lastV2x
=
v2xArr
[
v2xArr
.
length
-
1
]
const
lastV2x
=
v2xArr
[
v2xArr
.
length
-
1
]
;
if
(
lastV2x
)
{
if
(
lastV2x
)
{
const
options
=
{
const
options
=
{
id
:
lastV2x
.
id
,
id
:
lastV2x
.
id
,
color
:
[
255
,
255
,
0
,
1
],
color
:
[
255
,
255
,
0
,
1
],
vehicleId
:
lastV2x
.
objects
[
0
].
id
,
vehicleId
:
lastV2x
.
objects
[
0
].
id
,
name
:
lastV2x
.
name
name
:
lastV2x
.
name
,
};
};
map
.
getVehicle
(
"
21e7a9e6d2884122804788dac1e002cc
"
).
startV2x
(
options
);
map
.
getVehicle
(
"
21e7a9e6d2884122804788dac1e002cc
"
)
.
startV2x
(
options
);
}
}
const
options2
=
{
const
options2
=
{
id
,
id
,
vehicleId
:
[
mainCar
.
id
,
objects
[
1
].
id
],
//车辆ID
vehicleId
:
[
mainCar
.
id
,
objects
[
1
].
id
],
//车辆ID
}
}
;
console
.
log
(
'
前端结束通信
'
,
id
,
mainCar
.
id
,
objects
[
1
].
id
)
console
.
log
(
"
前端结束通信
"
,
id
,
mainCar
.
id
,
objects
[
1
].
id
)
;
map
.
stopCommunication
(
options2
)
map
.
stopCommunication
(
options2
)
;
if
(
objects
.
length
>
1
)
{
if
(
objects
.
length
>
1
)
{
// console.log('结束结束结束', mainCar.id, objects[1].id)
// console.log('结束结束结束', mainCar.id, objects[1].id)
}
else
{
}
else
{
// console.log('结束结束结束', mainCar.id)
// console.log('结束结束结束', mainCar.id)
}
}
};
}
}
};
}
}
// 清除V2V
// 清除V2V
document
.
getElementById
(
"
removeV2X
"
).
onclick
=
removeV2X
;
document
.
getElementById
(
"
removeV2X
"
).
onclick
=
removeV2X
;
function
removeV2X
()
{
function
removeV2X
()
{
v2xSocket
.
close
()
v2xSocket
.
close
()
;
v2xArr
.
forEach
(
item
=>
{
v2xArr
.
forEach
((
item
)
=>
{
map
.
getVehicle
(
"
21e7a9e6d2884122804788dac1e002cc
"
).
stopV2x
(
item
.
objects
[
0
].
id
)
map
.
getVehicle
(
"
21e7a9e6d2884122804788dac1e002cc
"
)
.
stopV2x
(
item
.
objects
[
0
].
id
);
if
(
item
.
objects
.
length
>
1
)
{
if
(
item
.
objects
.
length
>
1
)
{
const
options2
=
{
const
options2
=
{
id
,
id
,
vehicleId
:
[
item
.
objects
[
0
].
id
,
item
.
objects
[
1
].
id
],
//车辆ID
vehicleId
:
[
item
.
objects
[
0
].
id
,
item
.
objects
[
1
].
id
],
//车辆ID
}
}
;
map
.
stopCommunication
(
options2
)
map
.
stopCommunication
(
options2
)
;
}
}
})
})
;
v2xArr
=
[]
v2xArr
=
[]
;
}
}
// 绘制感知区域
// 绘制感知区域
...
@@ -1300,21 +1415,21 @@
...
@@ -1300,21 +1415,21 @@
async
function
addPolygon
()
{
async
function
addPolygon
()
{
const
options
=
{
const
options
=
{
id
:
"
polygons
"
,
id
:
"
polygons
"
,
type
:
'
polygon3d
'
,
type
:
"
polygon3d
"
,
position
:
[
position
:
[
[
117.31930248
,
38.99171243
],
[
117.31930248
,
38.99171243
],
[
117.32246328
,
38.99176425
],
[
117.32246328
,
38.99176425
],
[
117.32174648
,
38.99001976
],
[
117.32174648
,
38.99001976
],
[
117.3192593
0
,
38.99073655
],
[
117.3192593
,
38.99073655
],
],
],
color
:
[
25
,
25
,
112
,
1
],
//设置填充颜色
color
:
[
25
,
25
,
112
,
1
],
//设置填充颜色
maxHeight
:
20
,
maxHeight
:
20
,
extrudedHeight
:
60
,
extrudedHeight
:
60
,
}
}
;
// 添加感知区域
// 添加感知区域
polygon
=
await
map
.
addPolygonOverlay
(
options
)
polygon
=
await
map
.
addPolygonOverlay
(
options
)
;
map
.
zoomToOverlay
(
polygon
)
map
.
zoomToOverlay
(
polygon
)
;
}
}
// 显示感知区域
// 显示感知区域
...
@@ -1336,7 +1451,8 @@
...
@@ -1336,7 +1451,8 @@
}
}
// 注册模型点击高亮 modelClickHighLight
// 注册模型点击高亮 modelClickHighLight
document
.
getElementById
(
"
modelClickHighLight
"
).
onclick
=
modelClickHighLight
;
document
.
getElementById
(
"
modelClickHighLight
"
).
onclick
=
modelClickHighLight
;
async
function
modelClickHighLight
()
{
async
function
modelClickHighLight
()
{
map
.
on
(
map
.
EventType
.
ON_EQUIPMENT_CLICKED
,
pick_model_hightlight
);
map
.
on
(
map
.
EventType
.
ON_EQUIPMENT_CLICKED
,
pick_model_hightlight
);
}
}
...
@@ -1349,8 +1465,8 @@
...
@@ -1349,8 +1465,8 @@
map
.
setModelHighlight
(
modelId
);
map
.
setModelHighlight
(
modelId
);
map
.
addPopWindow
({
map
.
addPopWindow
({
id
:
modelId
,
id
:
modelId
,
info
:
'
普通信号灯
'
info
:
"
普通信号灯
"
,
})
})
;
return
;
return
;
}
}
console
.
warn
(
"
没有模型Id
"
,
e
);
console
.
warn
(
"
没有模型Id
"
,
e
);
...
@@ -1383,27 +1499,26 @@
...
@@ -1383,27 +1499,26 @@
camera
.
flyTo
(
options
);
camera
.
flyTo
(
options
);
const
json
=
{
const
json
=
{
"
id
"
:
"
1200002282
"
,
id
:
"
1200002282
"
,
"
color
"
:
"
0ffff0FF
"
,
color
:
"
0ffff0FF
"
,
"
opacity
"
:
0.4
,
opacity
:
0.4
,
"
xFov
"
:
90
,
//横向范围
xFov
:
90
,
//横向范围
"
yFov
"
:
30
,
//纵向范围
yFov
:
30
,
//纵向范围
"
yawValue
"
:
90
,
//朝向,0为默认向东
yawValue
:
90
,
//朝向,0为默认向东
"
pitchValue
"
:
0
,
//俯仰角
pitchValue
:
0
,
//俯仰角
"
radius
"
:
1000
//辐射范围
radius
:
1000
,
//辐射范围
};
}
map
.
addMillimeterWave
(
json
);
map
.
addMillimeterWave
(
json
);
}
}
// 移除毫米波雷达
// 移除毫米波雷达
document
.
getElementById
(
"
removeMillimeterWave
"
).
onclick
=
removeMillimeterWave
;
document
.
getElementById
(
"
removeMillimeterWave
"
).
onclick
=
removeMillimeterWave
;
function
removeMillimeterWave
()
{
function
removeMillimeterWave
()
{
const
json
=
{
const
json
=
{
ids
:
[
"
1200002282
"
]
ids
:
[
"
1200002282
"
]
,
}
}
;
map
.
removeMillimeterWave
(
json
);
map
.
removeMillimeterWave
(
json
);
}
}
</script>
</script>
</html>
</html>
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