Skip to content

GitLab

Commit c8a26586 authored by 吕 成东's avatar 吕 成东
Browse files

优化HTML结构，调整样式缩进，更新感知效果和事件处理逻辑，增强用户交互体验。

parent 3ab403c3
Hide whitespace changes
Inline Side-by-side
index.html
View file @ c8a26586
<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;
padding: 0; padding: 0;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
div { div {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#btn-list { #btn-list {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 14px; padding: 14px;
line-height: 40px; line-height: 40px;
overflow: auto; overflow: auto;
height: 100%; height: 100%;
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;
padding: 4px 6px; padding: 4px 6px;
border-radius: 4px; border-radius: 4px;
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="限制地图显示范围和级别" />
<input type="button" id="unlockMap" value="解锁地图显示范围和级别" /> <input type="button" id="unlockMap" value="解锁地图显示范围和级别" />
</div> </div>
<div> <div>
<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="开始相机导览" />
<input type="button" id="pauseFly" value="暂停相机导览" /> <input type="button" id="pauseFly" value="暂停相机导览" />
<input type="button" id="resuFly" value="继续相机导览" /> <input type="button" id="resuFly" value="继续相机导览" />
<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"
<input type="button" id="cancleHighLight" value="取消模型高亮" /> id="addModelClickEvent"
<input type="button" id="removePopup" value="取消弹窗" /> value="注册模型点击事件"
/>
<input
type="button"
id="removeModelClickEvent"
value="注销模型点击事件"
/>
<input type="button" id="cancleHighLight" value="取消模型高亮" />
<input type="button" id="removePopup" value="取消弹窗" />
</div> </div>
<div> <div>
<input type="button" id="addMarker" value="添加路口标签" /> <input type="button" id="addMarker" value="添加路口标签" />
<input type="button" id="showMarker" value="显示标签" /> <input type="button" id="showMarker" value="显示标签" />
<input type="button" id="hideMarker" value="隐藏标签" /> <input type="button" id="hideMarker" value="隐藏标签" />
<input type="button" id="removeMarker" value="删除标签" /> <input type="button" id="removeMarker" value="删除标签" />
</div> </div>
<div> <div>
<input type="button" id="startRsu" value="开始Rsu特效" /> <input type="button" id="startRsu" value="开始Rsu特效" />
<input type="button" id="stopRsu" value="停止Rsu特效" /> <input type="button" id="stopRsu" value="停止Rsu特效" />
<input type="button" id="hideRsu" value="隐藏Rsu特效" /> <input type="button" id="hideRsu" value="隐藏Rsu特效" />
<input type="button" id="showRsu" value="显示Rsu特效" /> <input type="button" id="showRsu" value="显示Rsu特效" />
</div> </div>
<div> <div>
<input type="button" id="rain" value="开始下雨" /> <input type="button" id="rain" value="开始下雨" />
<input type="button" id="stopRain" value="停止下雨" /> <input type="button" id="stopRain" value="停止下雨" />
<input type="button" id="snow" value="开始下雪" /> <input type="button" id="snow" value="开始下雪" />
<input type="button" id="stopSnow" value="停止下雪" /> <input type="button" id="stopSnow" value="停止下雪" />
<input type="button" id="fog" value="雾" /> <input type="button" id="fog" value="雾" />
<input type="button" id="stopFog" value="清除雾" /> <input type="button" id="stopFog" value="清除雾" />
</div> </div>
<div> <div>
<input type="button" id="point" value="绘制点" /> <input type="button" id="point" value="绘制点" />
<input type="button" id="polyline" value="绘制线" /> <input type="button" id="polyline" value="绘制线" />
<input type="button" id="polygon" value="绘制面" /> <input type="button" id="polygon" value="绘制面" />
<input type="button" id="remove" value="清除绘制" /> <input type="button" id="remove" value="清除绘制" />
</div> </div>
<div> <div>
<input type="button" id="start1" value="坐标点" /> <input type="button" id="start1" value="坐标点" />
<input type="button" id="start2" value="直线测量" /> <input type="button" id="start2" value="直线测量" />
<input type="button" id="start6" value="地表面积" /> <input type="button" id="start6" value="地表面积" />
<input type="button" id="stopMeasurement" value="停止量算" /> <input type="button" id="stopMeasurement" value="停止量算" />
</div> </div>
<div> <div>
<input type="button" id="toNorth" value="显示指北针" /> <input type="button" id="toNorth" value="显示指北针" />
<input type="button" id="hideNorth" value="移除指北针" /> <input type="button" id="hideNorth" value="移除指北针" />
</div> </div>
<div> <div>
<input type="button" id="setDark" value="夜景" /> <input type="button" id="setDark" value="夜景" />
<input type="button" id="setday" value="取消夜景" /> <input type="button" id="setday" value="取消夜景" />
</div> </div>
<div> <div>
<input type="button" id="addTrafficFlow" value="全部车辆" /> <input type="button" id="addTrafficFlow" value="全部车辆" />
<input type="button" id="addTrafficFlow6" value="6号车" /> <input type="button" id="addTrafficFlow6" value="6号车" />
<input type="button" id="removeTrafficFlow" value="清除联网车辆" /> <input type="button" id="removeTrafficFlow" value="清除联网车辆" />
<input type="button" id="focusCar1" value="定位车辆（第一人称）" /> <input type="button" id="focusCar1" value="定位车辆（第一人称）" />
<input type="button" id="focusCar3" value="定位车辆（第三人称）" /> <input type="button" id="focusCar3" value="定位车辆（第三人称）" />
<input type="button" id="focusNoneCar" value="清除定位" /> <input type="button" id="focusNoneCar" value="清除定位" />
</div> </div>
<div> <div>
<input type="button" id="loadarrowLineLaye" value="加载车辆路径规划" /> <input
<input type="button" id="hideRoute" value="显示车辆路径规划" /> type="button"
<input type="button" id="showRoute" value="隐藏车辆路径规划" /> id="loadarrowLineLaye"
<input type="button" id="cleanarrowLineLaye" value="清除车辆路径规划" /> value="加载车辆路径规划"
/>
<input type="button" id="hideRoute" value="显示车辆路径规划" />
<input type="button" id="showRoute" value="隐藏车辆路径规划" />
<input
type="button"
id="cleanarrowLineLaye"
value="清除车辆路径规划"
/>
</div> </div>
<div> <div>
<input type="button" id="loadPerceptual" value="感知目标物渲染" /> <input type="button" id="loadPerceptual" value="感知目标物渲染" />
<input type="button" id="showPerceptual" value="显示感知目标物" /> <input type="button" id="showPerceptual" value="显示感知目标物" />
<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"
<input type="button" id="addSignal" value="信号灯" /> id="addPerceptualheatEffect"
<input type="button" id="CreateTIMSignal" value="创建停止线" /> value="热力图宏观效果"
<input type="button" id="DeleteTIMSignal" value="删除停止线" /> />
<input
type="button"
id="removePerceptualheatEffect"
value="移除热力图宏观效果"
/>
<input type="button" id="addSignal" value="信号灯" />
<input type="button" id="CreateTIMSignal" value="创建停止线" />
<input type="button" id="DeleteTIMSignal" value="删除停止线" />
</div> </div>
<div> <div>
<input type="button" id="addTrafficIncident" value="交通流中的事件" /> <input type="button" id="addTrafficIncident" value="交通流中的事件" />
<input style="display: none" type="button" id="addTrafficIncident2" value="不在交通流中的事件" /> <input
<input type="button" id="addTrafficIncident3" value="区域坐标的交通事件" /> style="display: none"
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" />
<input type="button" id="startV2X6" value="6号车V2X" /> <input type="button" id="startV2X6" value="6号车V2X" />
<input type="button" id="startV2X7" value="7号车V2X" /> <input type="button" id="startV2X7" value="7号车V2X" />
<input type="button" id="removeV2X" value="清除V2X" /> <input type="button" id="removeV2X" value="清除V2X" />
</div> </div>
<div> <div>
<input type="button" id="addPolygon" value="绘制感知区域" /> <input type="button" id="addPolygon" value="绘制感知区域" />
<input type="button" id="showPolygon" value="显示感知区域" /> <input type="button" id="showPolygon" value="显示感知区域" />
<input type="button" id="hidePolygon" value="隐藏感知区域" /> <input type="button" id="hidePolygon" value="隐藏感知区域" />
<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
<input type="button" id="addRadar" value="激光雷达" /> type="button"
<input type="button" id="removeRadar" value="移除激光雷达" /> id="removeMillimeterWave"
<input type="button" id="addCamera" value="摄像头" /> value="移除毫米波雷达"
<input type="button" id="removeCamera" value="移除摄像头" /> />
<input type="button" id="addFusionPerception" value="路口融合" /> <input type="button" id="addRadar" value="激光雷达" />
<input type="button" id="removeFusionPerception" value="移除路口融合" /> <input type="button" id="removeRadar" value="移除激光雷达" />
<input type="button" id="addCamera" value="摄像头" />
<input type="button" id="removeCamera" value="移除摄像头" />
<input type="button" id="addFusionPerception" value="路口融合" />
<input
type="button"
id="removeFusionPerception"
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="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script> --> ></div>
<script src="./SignalLines.js"></script> </body>
<!-- <script src="./data.js"></script> --> <script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script>
</head> <!-- <script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script> -->
<script src="./SignalLines.js"></script>
<script> <!-- <script src="./data.js"></script> -->
</head>
<script>
var map; var map;
var layer; var layer;
var road; var road;
...@@ -219,717 +313,718 @@ ...@@ -219,717 +313,718 @@
//高亮模型Id //高亮模型Id
var highlightModelId = null; var highlightModelId = null;
var handler = (e) => { var handler = (e) => {
alert(JSON.stringify(e)); alert(JSON.stringify(e));
}; };
initMap("51world"); initMap("51world");
async function initMap(gis_sdk) { async function initMap(gis_sdk) {
var url = "http://localhost:3000/hdmap-platform/gateway/cmap2"; var url = "http://localhost:3000/hdmap-platform/gateway/cmap2";
var secretKey = "10b79c61bf1b42e2"; var secretKey = "10b79c61bf1b42e2";
var config = { var config = {
gis_sdk: gis_sdk, gis_sdk: gis_sdk,
}; };
config.gis_sdk = gis_sdk; config.gis_sdk = gis_sdk;
map = await CMapLoader.loadMap("main-container", config, url, secretKey); map = await CMapLoader.loadMap("main-container", config, url, secretKey);
await map.initMap(); //地图加载 window.map = map;
await map.initMap(); //地图加载
drawControl = map.getControl(1); //类型 1 ：绘制 2：量算 drawControl = map.getControl(1); //类型 1 ：绘制 2：量算
measureControl = map.getControl(2); //类型 1 ：绘制 2：量算 measureControl = map.getControl(2); //类型 1 ：绘制 2：量算
camera = map.getCamera(); camera = map.getCamera();
road = map.initRoads({ road = map.initRoads({
id: "1600840132389756930", id: "1600840132389756930",
}); });
} }
// 获取地图中心点和级别 // 获取地图中心点和级别
document.getElementById("getZoomAndCenter").onclick = getZoomAndCenter; document.getElementById("getZoomAndCenter").onclick = getZoomAndCenter;
async function getZoomAndCenter() { async function getZoomAndCenter() {
var points = await map.getZoomAndCenter(); var points = await map.getZoomAndCenter();
alert(JSON.stringify(points)); alert(JSON.stringify(points));
} }
// 设置地图中心点和级别 // 设置地图中心点和级别
document.getElementById("setZoomAndCenter").onclick = setZoomAndCenter; document.getElementById("setZoomAndCenter").onclick = setZoomAndCenter;
function setZoomAndCenter() { function setZoomAndCenter() {
var options = { var options = {
longitude: 117.346635, longitude: 117.346635,
latitude: 38.99408, latitude: 38.99408,
height: 51.43313, height: 51.43313,
}; };
map.setZoomAndCenter(options); map.setZoomAndCenter(options);
} }
// 限制地图显示范围和级别 // 限制地图显示范围和级别
document.getElementById("lockMap").onclick = lockMap; document.getElementById("lockMap").onclick = lockMap;
function lockMap() { function lockMap() {
var options = { var options = {
xmin: 117.31, xmin: 117.31,
ymin: 38.842072, ymin: 38.842072,
zmin: 500, zmin: 500,
xmax: 117.37358, xmax: 117.37358,
ymax: 39.109915, ymax: 39.109915,
zmax: 15000, zmax: 15000,
}; };
var points = map.lockMap(options); var points = map.lockMap(options);
} }
// 解锁地图显示范围和级别 // 解锁地图显示范围和级别
document.getElementById("unlockMap").onclick = unlockMap; document.getElementById("unlockMap").onclick = unlockMap;
function unlockMap() { function unlockMap() {
map.unlockMap(); map.unlockMap();
} }
// 获取相机参数 // 获取相机参数
document.getElementById("getCameraView").onclick = getCameraView; document.getElementById("getCameraView").onclick = getCameraView;
async function getCameraView() { async function getCameraView() {
var points = await camera.getCameraView(); var points = await camera.getCameraView();
alert(JSON.stringify(points)); alert(JSON.stringify(points));
} }
// 监听相机参数变化 // 监听相机参数变化
document.getElementById("addCameraEvent").onclick = addCameraEvent; document.getElementById("addCameraEvent").onclick = addCameraEvent;
function addCameraEvent() { function addCameraEvent() {
camera.addCameraEvent("changed", (e) => { camera.addCameraEvent("changed", (e) => {
alert(JSON.stringify(e)); alert(JSON.stringify(e));
}); });
} }
// 移除相机参数监听事件 // 移除相机参数监听事件
document.getElementById("removeCameraEvent").onclick = removeCameraEvent; document.getElementById("removeCameraEvent").onclick = removeCameraEvent;
function removeCameraEvent() { function removeCameraEvent() {
camera.removeCameraEvent("changed"); camera.removeCameraEvent("changed");
} }
// 设置相机 // 设置相机
document.getElementById("flyTo").onclick = flyTo; document.getElementById("flyTo").onclick = flyTo;
function flyTo() { function flyTo() {
var options = { var options = {
position: [117.34584096, 38.99557144, 276.84], position: [117.34584096, 38.99557144, 276.84],
orientation: [-34.930073, -44.426579], //[0, -90], //设置俯视 orientation: [-34.930073, -44.426579], //[0, -90], //设置俯视
}; };
camera.flyTo(options); camera.flyTo(options);
} }
// 开始相机导览 // 开始相机导览
document.getElementById("startFly").onclick = startFly; document.getElementById("startFly").onclick = startFly;
function startFly() { function startFly() {
const options = { const options = {
id: "startFly1", id: "startFly1",
pathList: [ pathList: [
{ {
cameraState: { cameraState: {
longitude: 117.31875105674682, longitude: 117.31875105674682,
latitude: 38.98881187638633, latitude: 38.98881187638633,
height: 16.151980453069932, height: 16.151980453069932,
pitch: -3, pitch: -3,
heading: -89.45378112792969, heading: -89.45378112792969,
}, },
time: 10, time: 10,
}, },
{ {
cameraState: { cameraState: {
longitude: 117.31839940049078, longitude: 117.31839940049078,
latitude: 38.99208154792654, latitude: 38.99208154792654,
height: 100.212235805514, height: 100.212235805514,
pitch: -29.176807403564453, pitch: -29.176807403564453,
heading: 37.64432144165039, heading: 37.64432144165039,
}, },
time: 10, time: 10,
}, },
{ {
cameraState: { cameraState: {
longitude: 117.32332105679387, longitude: 117.32332105679387,
latitude: 38.99363368117575, latitude: 38.99363368117575,
height: 110.1469806258995, height: 110.1469806258995,
pitch: -33.12812805175781, pitch: -33.12812805175781,
heading: 130.16888427734375, heading: 130.16888427734375,
}, },
time: 10, time: 10,
}, },
], ],
}; };
camera.startFly(options); camera.startFly(options);
} }
// 暂停相机导览 // 暂停相机导览
document.getElementById("pauseFly").onclick = pauseFly; document.getElementById("pauseFly").onclick = pauseFly;
function pauseFly() { function pauseFly() {
camera.pauseFly(); camera.pauseFly();
} }
// 继续相机导览 // 继续相机导览
document.getElementById("resuFly").onclick = resuFly; document.getElementById("resuFly").onclick = resuFly;
function resuFly() { function resuFly() {
camera.resuFly(); camera.resuFly();
} }
// 结束相机导览 // 结束相机导览
document.getElementById("stopFly").onclick = stopFly; document.getElementById("stopFly").onclick = stopFly;
function stopFly() { function stopFly() {
camera.stopFly(); camera.stopFly();
} }
// 地图变化事件 // 地图变化事件
document.getElementById("addMapChangeEvent").onclick = addMapChangeEvent; document.getElementById("addMapChangeEvent").onclick = addMapChangeEvent;
function addMapChangeEvent() { function addMapChangeEvent() {
map.on(map.EventType.MAP_CHANGE, handler); map.on(map.EventType.MAP_CHANGE, handler);
} }
// 注销地图变化事件 // 注销地图变化事件
document.getElementById("removeMapChangeEvent").onclick = document.getElementById("removeMapChangeEvent").onclick =
removeMapChangeEvent; removeMapChangeEvent;
function removeMapChangeEvent() { function removeMapChangeEvent() {
map.off(map.EventType.MAP_CHANGE, handler); map.off(map.EventType.MAP_CHANGE, handler);
} }
// 注册鼠标点击事件 // 注册鼠标点击事件
document.getElementById("addMouseClickEvent").onclick = addMouseClickEvent; document.getElementById("addMouseClickEvent").onclick = addMouseClickEvent;
function addMouseClickEvent() { function addMouseClickEvent() {
map.on(map.EventType.LEFT_CLICK, handler); map.on(map.EventType.LEFT_CLICK, handler);
} }
// 注销鼠标点击事件 // 注销鼠标点击事件
document.getElementById("removeMouseClickEvent").onclick = document.getElementById("removeMouseClickEvent").onclick =
removeMouseClickEvent; removeMouseClickEvent;
function removeMouseClickEvent() { function removeMouseClickEvent() {
map.off(map.EventType.LEFT_CLICK, handler); map.off(map.EventType.LEFT_CLICK, handler);
} }
// 注册模型点击事件 // 注册模型点击事件
let clickModel = null; let clickModel = null;
let pick_model_handler = (e) => { let pick_model_handler = (e) => {
console.log("模型点击事件", e); console.log("模型点击事件", e);
if (e) { if (e) {
pickModel = map.getModel(e); pickModel = map.getModel(e);
if (pickModel) { if (pickModel) {
// 高亮 // 高亮
pickModel.highLight(); pickModel.highLight();
var content = (content = { var content = (content = {
popupSize: [200, 200], popupSize: [200, 200],
imagePath: `@path:images/radar_online.png`, imagePath: `@path:images/radar_online.png`,
popupURL: `http://172.29.128.30:65535/yizhuangDevicePopup.html?name=汽车&brand=厂商&code=型号&mode=通信模式`, popupURL: `http://172.29.128.30:65535/yizhuangDevicePopup.html?name=汽车&brand=厂商&code=型号&mode=通信模式`,
}); });
pickModel.showPopup(content); pickModel.showPopup(content);
}
} }
}
}; };
document.getElementById("addModelClickEvent").onclick = addModelClickEvent; document.getElementById("addModelClickEvent").onclick = addModelClickEvent;
async function addModelClickEvent() { async function addModelClickEvent() {
if (!clickModel) { if (!clickModel) {
let option = { let option = {
id: "model1", //对象ID id: "model1", //对象ID
url: "SM_VEH_Bus_02_01", url: "SM_VEH_Bus_02_01",
position: [117.318863, 38.989795, 4], //坐标 position: [117.318863, 38.989795, 4], //坐标
rotation: [0, 0, 190], rotation: [0, 0, 190],
}; };
clickModel = await map.addModel(option); clickModel = await map.addModel(option);
clickModel.focusModel(); clickModel.focusModel();
} }
map.on(map.EventType.PICK_MODEL, pick_model_handler); map.on(map.EventType.PICK_MODEL, pick_model_handler);
} }
// 注销模型点击事件 // 注销模型点击事件
document.getElementById("removeModelClickEvent").onclick = document.getElementById("removeModelClickEvent").onclick =
removeModelClickEvent; removeModelClickEvent;
async function removeModelClickEvent() { async function removeModelClickEvent() {
map.off(map.EventType.PICK_MODEL, pick_model_handler); map.off(map.EventType.PICK_MODEL, pick_model_handler);
} }
// 取消模型高亮 // 取消模型高亮
document.getElementById("cancleHighLight").onclick = cancleHighLight; document.getElementById("cancleHighLight").onclick = cancleHighLight;
function cancleHighLight() { function cancleHighLight() {
pickModel.cancleHighLight(); pickModel.cancleHighLight();
} }
// 取消模型弹窗 // 取消模型弹窗
document.getElementById("removePopup").onclick = removePopup; document.getElementById("removePopup").onclick = removePopup;
function removePopup() { function removePopup() {
pickModel.removePopup(); pickModel.removePopup();
} }
// 添加路口标签 // 添加路口标签
document.getElementById("addMarker").onclick = addMarker; document.getElementById("addMarker").onclick = addMarker;
async function addMarker() { async function addMarker() {
var options = { var options = {
id: "marker", id: "marker",
name: "一号路口", name: "一号路口",
textColor: [255, 215, 0, 1], textColor: [255, 215, 0, 1],
fontSize: "16", fontSize: "16",
position: [117.318863, 38.98979], //设置Marker位置 position: [117.318863, 38.98979], //设置Marker位置
imageSize: [184, 126], //[1.5,1.6] imageSize: [184, 126], //[1.5,1.6]
textOffset: [50, 50], //[0, -140] textOffset: [50, 50], //[0, -140]
image: image:
"http://wdpapi.51aes.com/doc-static/images/static/markerNormal.png", //mapbox图片 "http://wdpapi.51aes.com/doc-static/images/static/markerNormal.png", //mapbox图片
iconOffset: [0, -80], //mapbox图标的偏移 iconOffset: [0, -80], //mapbox图标的偏移
}; };
// 添加路口标签 // 添加路口标签
marker = await map.addMarkerOverlay(options); marker = await map.addMarkerOverlay(options);
// 定位到路口标签 // 定位到路口标签
map.zoomToOverlay(marker); map.zoomToOverlay(marker);
} }
// 显示标签 // 显示标签
document.getElementById("showMarker").onclick = showMarker; document.getElementById("showMarker").onclick = showMarker;
async function showMarker() { async function showMarker() {
map.showOverlay(marker); map.showOverlay(marker);
} }
// 隐藏标签 // 隐藏标签
document.getElementById("hideMarker").onclick = hideMarker; document.getElementById("hideMarker").onclick = hideMarker;
function hideMarker() { function hideMarker() {
map.hideOverlay(marker); map.hideOverlay(marker);
} }
// 删除标签 // 删除标签
document.getElementById("removeMarker").onclick = removeMarker; document.getElementById("removeMarker").onclick = removeMarker;
async function removeMarker() { async function removeMarker() {
map.removeOverlay(marker); map.removeOverlay(marker);
} }
// 开始Rsu特效 // 开始Rsu特效
document.getElementById("startRsu").onclick = startRsu; document.getElementById("startRsu").onclick = startRsu;
function startRsu() { function startRsu() {
var data = [ var data = [
{ {
equipmentCode: "S-LC-2503", //编号 equipmentCode: "S-LC-2503", //编号
longitude: 117.318166, longitude: 117.318166,
latitude: 38.98827, latitude: 38.98827,
height: 5, height: 5,
radius: 20, //辐射圈的大小，这个字段目前是晶众使用有效 radius: 20, //辐射圈的大小，这个字段目前是晶众使用有效
}, },
{ {
equipmentCode: "S-LC-2504", //编号 equipmentCode: "S-LC-2504", //编号
longitude: 117.319236, longitude: 117.319236,
latitude: 38.98829, latitude: 38.98829,
height: 5, height: 5,
radius: 20, //辐射圈的大小，这个字段目前是晶众使用有效 radius: 20, //辐射圈的大小，这个字段目前是晶众使用有效
}, },
]; ];
rsuArr = road.startRsu(data); rsuArr = road.startRsu(data);
} }
// 停止Rsu特效 // 停止Rsu特效
document.getElementById("stopRsu").onclick = stopRsu; document.getElementById("stopRsu").onclick = stopRsu;
function stopRsu() { function stopRsu() {
road.stopRsu(); road.stopRsu();
} }
// 隐藏Rsu特效 // 隐藏Rsu特效
document.getElementById("hideRsu").onclick = hideRsu; document.getElementById("hideRsu").onclick = hideRsu;
function hideRsu() { function hideRsu() {
road.hideRsu(); road.hideRsu();
} }
// 显示Rsu特效 // 显示Rsu特效
document.getElementById("showRsu").onclick = showRsu; document.getElementById("showRsu").onclick = showRsu;
function showRsu() { function showRsu() {
road.showRsu(); road.showRsu();
} }
// 开始下雨 // 开始下雨
document.getElementById("rain").onclick = rain; document.getElementById("rain").onclick = rain;
async function rain() { async function rain() {
map.addRainEffect({ map.addRainEffect({
speed: 0.5, // 速度，取值范围:[0~1]，默认为0.5 speed: 0.5, // 速度，取值范围:[0~1]，默认为0.5
size: 0.5, // 大小，取值范围:[0~1]，默认为0.5 size: 0.5, // 大小，取值范围:[0~1]，默认为0.5
density: 0.5, // 密度，取值范围:[0~1]，默认为0.5 density: 0.5, // 密度，取值范围:[0~1]，默认为0.5
}); });
} }
// 停止下雨 // 停止下雨
document.getElementById("stopRain").onclick = stopRain; document.getElementById("stopRain").onclick = stopRain;
async function stopRain() { async function stopRain() {
map.stopRainEffect(); map.stopRainEffect();
} }
// 开始下雪 // 开始下雪
document.getElementById("snow").onclick = snow; document.getElementById("snow").onclick = snow;
async function snow() { async function snow() {
map.addSnowEffect({ map.addSnowEffect({
speed: 0.5, // 速度，取值范围:[0~1]，默认为0.5 speed: 0.5, // 速度，取值范围:[0~1]，默认为0.5
size: 0.5, // 大小，取值范围:[0~1]，默认为0.5 size: 0.5, // 大小，取值范围:[0~1]，默认为0.5
density: 0.5, // 密度，取值范围:[0~1]，默认为0.5 density: 0.5, // 密度，取值范围:[0~1]，默认为0.5
}); });
} }
// 停止下雪 // 停止下雪
document.getElementById("stopSnow").onclick = stopSnow; document.getElementById("stopSnow").onclick = stopSnow;
async function stopSnow() { async function stopSnow() {
map.stopSnowEffect(); map.stopSnowEffect();
} }
// 雾 // 雾
document.getElementById("fog").onclick = fog; document.getElementById("fog").onclick = fog;
async function fog() { async function fog() {
map.addFogEffect(); map.addFogEffect();
} }
// 清除雾 // 清除雾
document.getElementById("stopFog").onclick = stopFog; document.getElementById("stopFog").onclick = stopFog;
async function stopFog() { async function stopFog() {
map.stopFogEffect(); map.stopFogEffect();
} }
// 绘制点 // 绘制点
document.getElementById("point").onclick = point; document.getElementById("point").onclick = point;
function point() { function point() {
drawControl.startDraw( drawControl.startDraw(
{ {
type: "point", type: "point",
}, },
function (e) { function (e) {
console.log(e); console.log(e);
} }
); );
} }
// 绘制线 // 绘制线
document.getElementById("polyline").onclick = polyline; document.getElementById("polyline").onclick = polyline;
async function polyline() { async function polyline() {
drawControl.startDraw( drawControl.startDraw(
{ {
type: "polyline", type: "polyline",
lineColor: [255, 246, 45, 0.5], lineColor: [255, 246, 45, 0.5],
width: 1, width: 1,
}, },
function (e) { function (e) {
console.log(e); console.log(e);
} }
); );
} }
// 绘制面 // 绘制面
document.getElementById("polygon").onclick = polygon; document.getElementById("polygon").onclick = polygon;
async function polygon() { async function polygon() {
drawControl.startDraw( drawControl.startDraw(
{ {
type: "polygon", type: "polygon",
fill: [255, 246, 45, 0.5], fill: [255, 246, 45, 0.5],
lineColor: [0, 255, 0, 0.5], lineColor: [0, 255, 0, 0.5],
}, },
function (e) { function (e) {
console.log(e); console.log(e);
} }
); );
} }
// 清除绘制 // 清除绘制
document.getElementById("remove").onclick = remove; document.getElementById("remove").onclick = remove;
async function remove() { async function remove() {
drawControl.stopDraw(); drawControl.stopDraw();
} }
// 坐标点 // 坐标点
document.getElementById("start1").onclick = start1; document.getElementById("start1").onclick = start1;
async function start1() { async function start1() {
measureControl.startMeasurement(1); //1:坐标点 2:直线测量 6 :地表面积 measureControl.startMeasurement(1); //1:坐标点 2:直线测量 6 :地表面积
} }
// 直线测量 // 直线测量
document.getElementById("start2").onclick = start2; document.getElementById("start2").onclick = start2;
async function start2() { async function start2() {
measureControl.startMeasurement(2, { measureControl.startMeasurement(2, {
pointSize: 4, // 点大小 pointSize: 4, // 点大小
pointColor: [33, 176, 219], // 点颜色 pointColor: [33, 176, 219], // 点颜色
textSize: 16, // 文字大小 textSize: 16, // 文字大小
textColor: [239, 76, 41], // 文字颜色 textColor: [239, 76, 41], // 文字颜色
lineWidth: 2, // 线宽度 lineWidth: 2, // 线宽度
lineColor: [33, 176, 219], // 线颜色 lineColor: [33, 176, 219], // 线颜色
}); //1:坐标点 2:直线测量 6 :地表面积 }); //1:坐标点 2:直线测量 6 :地表面积
} }
// 地表面积 // 地表面积
document.getElementById("start6").onclick = start6; document.getElementById("start6").onclick = start6;
async function start6() { async function start6() {
measureControl.startMeasurement(6, { measureControl.startMeasurement(6, {
pointSize: 4, // 点大小 pointSize: 4, // 点大小
pointColor: [33, 176, 219], // 点颜色 pointColor: [33, 176, 219], // 点颜色
textSize: 16, // 文字大小 textSize: 16, // 文字大小
textColor: [239, 76, 41], // 文字颜色 textColor: [239, 76, 41], // 文字颜色
lineColor: [33, 176, 219], // 边框颜色 lineColor: [33, 176, 219], // 边框颜色
lineWidth: 2, // 边框宽度 lineWidth: 2, // 边框宽度
fillColor: [33, 176, 219], // 线颜色 fillColor: [33, 176, 219], // 线颜色
}); //1:坐标点 2:直线测量 6 :地表面积 }); //1:坐标点 2:直线测量 6 :地表面积
} }
// 停止量算 // 停止量算
document.getElementById("stopMeasurement").onclick = stopMeasurement; document.getElementById("stopMeasurement").onclick = stopMeasurement;
async function stopMeasurement() { async function stopMeasurement() {
measureControl.stopMeasurement(); measureControl.stopMeasurement();
} }
// 创建指北针 // 创建指北针
document.getElementById("toNorth").onclick = toNorth; document.getElementById("toNorth").onclick = toNorth;
async function toNorth() { async function toNorth() {
if (compassItem) return; if (compassItem) return;
// 绑定指北针 // 绑定指北针
compassItem = new map.widgets.Compass({ compassItem = new map.widgets.Compass({
position: { position: {
left: "20px", left: "20px",
top: "60px", top: "60px",
}, },
declaredClass: ["compass-class"], declaredClass: ["compass-class"],
iconClass: iconClass:
"https://th.bing.com/th/id/R.9ac814eb0d80f60139dc27d8ef3193ad?rik=MLzrMDu9QdKAOQ&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20150530%2f2531170_201029314000_2.jpg&ehk=JODHCujwu7ut71vU4vVswA%2f3ljNn9MAdpziiOQMxFnE%3d&risl=&pid=ImgRaw&r=0", //替换指北针图片 "https://th.bing.com/th/id/R.9ac814eb0d80f60139dc27d8ef3193ad?rik=MLzrMDu9QdKAOQ&riu=http%3a%2f%2fpic.ntimg.cn%2ffile%2f20150530%2f2531170_201029314000_2.jpg&ehk=JODHCujwu7ut71vU4vVswA%2f3ljNn9MAdpziiOQMxFnE%3d&risl=&pid=ImgRaw&r=0", //替换指北针图片
}); });
} }
// 销毁指南针 // 销毁指南针
document.getElementById("hideNorth").onclick = hideNorth; document.getElementById("hideNorth").onclick = hideNorth;
async function hideNorth() { async function hideNorth() {
if (!compassItem) return; if (!compassItem) return;
// 销毁 // 销毁
compassItem.destroy(); compassItem.destroy();
compassItem = null; compassItem = null;
} }
// 设置夜景 // 设置夜景
document.getElementById("setDark").onclick = setDark; document.getElementById("setDark").onclick = setDark;
async function setDark() { async function setDark() {
let option = { let option = {
dark: true, dark: true,
time: 1668009599000, time: 1668009599000,
}; };
map.setDark(option); map.setDark(option);
} }
// 取消夜景 // 取消夜景
document.getElementById("setday").onclick = setday; document.getElementById("setday").onclick = setday;
async function setday() { async function setday() {
let option = { let option = {
dark: false, dark: false,
time: 1667966400000, time: 1667966400000,
}; };
map.setDark(option); map.setDark(option);
} }
// 创建交通流 // 创建交通流
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);
} }
// 删除交通流 // 删除交通流
document.getElementById("removeTrafficFlow").onclick = removeTrafficFlow; document.getElementById("removeTrafficFlow").onclick = removeTrafficFlow;
async function removeTrafficFlow() { async function removeTrafficFlow() {
map.removeVehicles(); map.removeVehicles();
} }
// 定位车辆（第一人称） // 定位车辆（第一人称）
document.getElementById("focusCar1").onclick = focusCar1; document.getElementById("focusCar1").onclick = focusCar1;
async function focusCar1() { async function focusCar1() {
let options = { let options = {
vehicleId: "XM140004",// 仿AYZQS001 vehicleId: "XM140004", // 仿AYZQS001
perspective: 1, // 1第一人称视角、3第三人称视角 perspective: 1, // 1第一人称视角、3第三人称视角
}; };
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").focusVehicle(options); map.getVehicle("21e7a9e6d2884122804788dac1e002cc").focusVehicle(options);
} }
// 定位车辆（第三人称） // 定位车辆（第三人称）
document.getElementById("focusCar3").onclick = focusCar3; document.getElementById("focusCar3").onclick = focusCar3;
async function focusCar3() { async function focusCar3() {
let options = { let options = {
vehicleId: "XM140004",//仿AYZQS001 vehicleId: "XM140004", //仿AYZQS001
perspective: 3, // 1第一人称视角、3第三人称视角 perspective: 3, // 1第一人称视角、3第三人称视角
}; };
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").focusVehicle(options); map.getVehicle("21e7a9e6d2884122804788dac1e002cc").focusVehicle(options);
} }
// 清除定位 // 清除定位
document.getElementById("focusNoneCar").onclick = focusNoneCar; document.getElementById("focusNoneCar").onclick = focusNoneCar;
async function focusNoneCar() { async function focusNoneCar() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").unfocusVehicle(); map.getVehicle("21e7a9e6d2884122804788dac1e002cc").unfocusVehicle();
} }
// 加载车辆路径规划 // 加载车辆路径规划
document.getElementById("loadarrowLineLaye").onclick = loadarrowLineLaye; document.getElementById("loadarrowLineLaye").onclick = loadarrowLineLaye;
function loadarrowLineLaye() { function loadarrowLineLaye() {
let timestamp = 1739419194500; let timestamp = 1739419194500;
var pp = []; var pp = [];
for (var key in roadPoints) { for (var key in roadPoints) {
timestamp = timestamp + 2000; timestamp = timestamp + 2000;
let tt = { let tt = {
vid: "1", vid: "1",
vmodel: "1020001", vmodel: "1020001",
vtype: "0", vtype: "0",
coord: roadPoints[key][0] + "," + roadPoints[key][1] + "," + "0.00", coord: roadPoints[key][0] + "," + roadPoints[key][1] + "," + "0.00",
speed: 46.92, speed: 46.92,
timestamp: timestamp, timestamp: timestamp,
}; };
pp.push(tt); pp.push(tt);
} }
console.log(pp); console.log(pp);
//行驶路线 //行驶路线
// var option = { // var option = {
// "id": '1604729991369719809', // "id": '1604729991369719809',
// "vehicleId": '津A78F30', // "vehicleId": '津A78F30',
// "coordinates": roadPoints, // "coordinates": roadPoints,
// "height": 21, // "height": 21,
// "width": 28, // "width": 28,
// "color": "red" //red green yellow // "color": "red" //red green yellow
// } // }
// map.getVehicle("21e7a9e6d2884122804788dac1e002cc").addRoute(option) //初始化行驶路线 // map.getVehicle("21e7a9e6d2884122804788dac1e002cc").addRoute(option) //初始化行驶路线
} }
// 清除车辆路径规划 // 清除车辆路径规划
document.getElementById("cleanarrowLineLaye").onclick = cleanarrowLineLaye; document.getElementById("cleanarrowLineLaye").onclick = cleanarrowLineLaye;
function cleanarrowLineLaye() { function cleanarrowLineLaye() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").removeRoute(); map.getVehicle("21e7a9e6d2884122804788dac1e002cc").removeRoute();
} }
// 显示车辆路径规划 // 显示车辆路径规划
document.getElementById("showRoute").onclick = showRoute; document.getElementById("showRoute").onclick = showRoute;
function showRoute() { function showRoute() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").showRoute(); map.getVehicle("21e7a9e6d2884122804788dac1e002cc").showRoute();
} }
// 隐藏车辆路径规划 // 隐藏车辆路径规划
document.getElementById("hideRoute").onclick = hideRoute; document.getElementById("hideRoute").onclick = hideRoute;
function hideRoute() { function hideRoute() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").hideRoute(); map.getVehicle("21e7a9e6d2884122804788dac1e002cc").hideRoute();
} }
// 创建感知目标物 // 创建感知目标物
document.getElementById("loadPerceptual").onclick = loadPerceptual; document.getElementById("loadPerceptual").onclick = loadPerceptual;
async function loadPerceptual() { async function loadPerceptual() {
if (perceptualroad == null) { if (perceptualroad == null) {
perceptualroad = map.initRoads({ perceptualroad = map.initRoads({
id: "123456789", id: "123456789",
}); });
} }
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);
perceptual = true; //是否加载了感知物 perceptual = true; //是否加载了感知物
// let options = { // let options = {
// position: [117.34671, 38.9990358, 100.53], // position: [117.34671, 38.9990358, 100.53],
// 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;
async function showPerceptual() { async function showPerceptual() {
perceptualroad.getObject("111").show(); perceptualroad.getObject("111").show();
} }
// 隐藏感知目标物 // 隐藏感知目标物
document.getElementById("hidePerceptual").onclick = hidePerceptual; document.getElementById("hidePerceptual").onclick = hidePerceptual;
async function hidePerceptual() { async function hidePerceptual() {
perceptualroad.getObject("111").hide(); perceptualroad.getObject("111").hide();
} }
// 删除感知目标物 // 删除感知目标物
document.getElementById("removePerceptual").onclick = removePerceptual; document.getElementById("removePerceptual").onclick = removePerceptual;
async function removePerceptual() { async function removePerceptual() {
perceptualroad.getObject("111").remove(); perceptualroad.getObject("111").remove();
perceptual = false; //是否加载了感知物 perceptual = false; //是否加载了感知物
} }
// 添加交通热力图 // 添加交通热力图
document.getElementById("addPerceptualheat").onclick = addPerceptualheat; document.getElementById("addPerceptualheat").onclick = addPerceptualheat;
async function addPerceptualheat() { async function addPerceptualheat() {
const json = { const json = {
id: "222", //ID id: "222", //ID
height: "10", //高度 height: "10", //高度
opacity: "0.75", //透明度 opacity: "0.75", //透明度
dataUrl: "D://51world//rlt//hdmap1.4(GCJ02_Ortho)_v2.xodr", //文件地址 dataUrl: "D://51world//rlt//hdmap1.4(GCJ02_Ortho)_v2.xodr", //文件地址
url: "ws://192.168.60.137:33021/AnalyzeResult", //ws地址 url: "ws://192.168.60.137:33021/AnalyzeResult", //ws地址
colorSymbols: [ colorSymbols: [
{ minSpeed: 0, maxSpeed: 30, color: "#FF0000" }, { minSpeed: 0, maxSpeed: 30, color: "#FF0000" },
{ minSpeed: 30, maxSpeed: 60, color: "#FFFF00" }, { minSpeed: 30, maxSpeed: 60, color: "#FFFF00" },
{ minSpeed: 60, maxSpeed: 90, color: "#0000FF" }, { minSpeed: 60, maxSpeed: 90, color: "#0000FF" },
{ minSpeed: 90, maxSpeed: 200, color: "#00FF00" }, { minSpeed: 90, maxSpeed: 200, color: "#00FF00" },
], //颜色 ], //颜色
}; };
perceptualroad.bindPerceptualheat(json); perceptualroad.bindPerceptualheat(json);
perceptualshow = true; perceptualshow = true;
} }
// 删除交通热力图 // 删除交通热力图
document.getElementById("deletePerceptualheat").onclick = document.getElementById("deletePerceptualheat").onclick =
deletePerceptualheat; deletePerceptualheat;
async function deletePerceptualheat() { async function deletePerceptualheat() {
perceptualroad.getPerceptualheat("222").remove(); perceptualroad.getPerceptualheat("222").remove();
perceptualshow = false; perceptualshow = false;
} }
// 交通热力图宏观效果 // 交通热力图宏观效果
document.getElementById("addPerceptualheatEffect").onclick = document.getElementById("addPerceptualheatEffect").onclick =
addPerceptualheatEffect; addPerceptualheatEffect;
async function addPerceptualheatEffect() { async function addPerceptualheatEffect() {
if (!perceptual) { if (!perceptual) {
loadPerceptual(); //加载感知物 loadPerceptual(); //加载感知物
} }
map.on(map.EventType.MAP_CHANGE, PerceptualheatEffecthandler); map.on(map.EventType.MAP_CHANGE, PerceptualheatEffecthandler);
} }
PerceptualheatEffecthandler = (e) => { PerceptualheatEffecthandler = (e) => {
let result = JSON.stringify(e); let result = JSON.stringify(e);
console.log("高度为====" + e.height); console.log("高度为====" + e.height);
if (e.height > 500) { if (e.height > 500) {
hidePerceptual(); hidePerceptual();
if (!perceptualshow) { if (!perceptualshow) {
addPerceptualheat(); addPerceptualheat();
} }
} else { } else {
showPerceptual(); showPerceptual();
if (perceptualshow) { if (perceptualshow) {
deletePerceptualheat(); deletePerceptualheat();
}
} }
}
}; };
// 移除交通热力图宏观效果 // 移除交通热力图宏观效果
document.getElementById("removePerceptualheatEffect").onclick = document.getElementById("removePerceptualheatEffect").onclick =
removePerceptualheatEffect; removePerceptualheatEffect;
async function removePerceptualheatEffect() { async function removePerceptualheatEffect() {
map.off(map.EventType.MAP_CHANGE, PerceptualheatEffecthandler); map.off(map.EventType.MAP_CHANGE, PerceptualheatEffecthandler);
removePerceptual(); removePerceptual();
deletePerceptualheat(); deletePerceptualheat();
} }
//添加信号灯 //添加信号灯
document.getElementById("addSignal").onclick = addSignal; document.getElementById("addSignal").onclick = addSignal;
function addSignal() { function addSignal() {
// let options = { // let options = {
// position: [117.325673, 38.996374, 18.53], // position: [117.325673, 38.996374, 18.53],
// orientation: [-34.930073, -44.426579], // orientation: [-34.930073, -44.426579],
// }; // };
// camera.flyTo(options); // camera.flyTo(options);
road.initSignals({ road.initSignals({
id: "51worldinitSignals", //ID id: "51worldinitSignals", //ID
url: "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=3&reType=51world", url: "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=3&reType=51world",
}); });
} }
// 创建停止线 // 创建停止线
document.getElementById("CreateTIMSignal").onclick = CreateTIMSignal; document.getElementById("CreateTIMSignal").onclick = CreateTIMSignal;
async function CreateTIMSignal() { async function CreateTIMSignal() {
road.addSignalStopLine(SignalLines); road.addSignalStopLine(SignalLines);
} }
// 删除停止线 // 删除停止线
document.getElementById("DeleteTIMSignal").onclick = DeleteTIMSignal; document.getElementById("DeleteTIMSignal").onclick = DeleteTIMSignal;
async function DeleteTIMSignal() { async function DeleteTIMSignal() {
road.removeSignalStopLine(); road.removeSignalStopLine();
} }
var arr = []; var arr = [];
...@@ -937,168 +1032,146 @@ ...@@ -937,168 +1032,146 @@
document.getElementById("addTrafficIncident").onclick = addTrafficIncident; document.getElementById("addTrafficIncident").onclick = addTrafficIncident;
async function addTrafficIncident() { async function addTrafficIncident() {
document.getElementById("btn-list").style.display = "none"; document.getElementById("btn-list").style.display = "none";
let fly = true let fly = 0;
// 订阅事件 websocket事件 // 订阅事件 websocket事件
const url = "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=5&reType=51world&intersectionCode=51-D-JD0006"; //&intersectionCode=51-D-JD0003 const url =
// const url = "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=5&reType=51world"; //&intersectionCode=51-D-JD0003 "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=5&reType=51world&intersectionCode=51-D-JD0006"; //&intersectionCode=51-D-JD0003
const socket = new WebSocket(url); // const url = "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=5&reType=51world"; //&intersectionCode=51-D-JD0003
socket.onopen = function (event) { const socket = new WebSocket(url);
console.log("socket连接成功!"); socket.onopen = function (event) {
}; console.log("socket连接成功!");
};
const fun = async (json) => {
const { id, name, type, location, ptcIds } = json;
const find = trafficIncidentArr.find((item) => item.id == id);
if (json.endTime) {
if (find) {
map.stopTrafficIncident(id, json);
return;
}
return;
}
// 测试某一个类型
if (false && type == "ROADWORK") {
fly++;
if (fly == 3) {
const optionsTest1 = {
position: [location[0].longitude, location[0].latitude, 23.12],
orientation: [-40, 20],
};
camera.flyTo(optionsTest1);
// let optionsTest1 = { json.color = [255, 0, 0, 1];
// position: ["117.3445813", "39.0059179", 28.12],
// orientation: [-34.930073, -0.426579],
// };
// camera.flyTo(optionsTest1);
const fun = async (json) => {
const { id, name, type, location, ptcIds } = json;
const find = trafficIncidentArr.find((item) => item.id == id);
if (json.endTime) {
if (find) {
// 视角飞到这个位置
// if (
// type == "MOTOR_VEHICLE_RUN_RED_LIGHT"
// ) {
// console.log("结束事件", json);
// map.stopTrafficIncident(id, json);
// }
map.stopTrafficIncident(id, json);
return;
}
return;
}
if (find) {
return;
}
// if (
// type == "MOTOR_VEHICLE_RUN_RED_LIGHT"
// ) {
// // 飞到
// if (fly) {
// optionsTest1 = {
// position: [location[0].longitude, location[0].latitude, 23.12],
// orientation: [-40, 20],
// };
// camera.flyTo(optionsTest1);
// fly = false
// }
// console.log("开始事件 ", json);
// json.color = [255, 0, 0, 1]
// trafficIncidentArr.push(json);
// await map.renderTrafficIncident(json);
// }
json.color = [255, 0, 0, 1]
trafficIncidentArr.push(json); trafficIncidentArr.push(json);
await map.renderTrafficIncident(json); await map.renderTrafficIncident(json);
}; }
}
// 真实渲染
json.color = [255, 0, 0, 1];
trafficIncidentArr.push(json);
await map.renderTrafficIncident(json);
};
socket.onmessage = async function (event) { socket.onmessage = async function (event) {
const json = JSON.parse(event.data); const json = JSON.parse(event.data);
await fun(json); console.log("onmessage", json.name, json.type);
}; await fun(json);
};
} }
// 不在交通流中的交通事件 // 不在交通流中的交通事件
document.getElementById("addTrafficIncident2").onclick = document.getElementById("addTrafficIncident2").onclick =
addTrafficIncident2; 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],
orientation: [-34.930073, -44.426579], orientation: [-34.930073, -44.426579],
}; };
camera.flyTo(options); camera.flyTo(options);
trafficIncidentArr = await map.renderTrafficIncident(json); trafficIncidentArr = await map.renderTrafficIncident(json);
console.log("tc.................", trafficIncidentArr); console.log("tc.................", trafficIncidentArr);
let index = 0; let index = 0;
const timer = setInterval(async () => { const timer = setInterval(async () => {
if (index == 10) { if (index == 10) {
json.endTime = 1741777564646; json.endTime = 1741777564646;
trafficIncidentArr = await map.renderTrafficIncident(json); trafficIncidentArr = await map.renderTrafficIncident(json);
clearInterval(timer); clearInterval(timer);
} }
index++; index++;
}, 200); }, 200);
} }
// 区域坐标的交通事件 // 区域坐标的交通事件
document.getElementById("addTrafficIncident3").onclick = document.getElementById("addTrafficIncident3").onclick =
addTrafficIncident3; 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],
orientation: [-34.930073, -44.426579], orientation: [-34.930073, -44.426579],
}; };
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, latitude: 38.9963299,
elevation: null, elevation: null,
}, },
{ {
longitude: 117.32611745, longitude: 117.32611745,
latitude: 38.99734492, latitude: 38.99734492,
elevation: null, elevation: null,
}, },
{ {
longitude: 117.32596738, longitude: 117.32596738,
latitude: 38.99737506, latitude: 38.99737506,
elevation: null, elevation: null,
}, },
{ {
longitude: 117.3255222, 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);
let index = 0; let index = 0;
const timer = setInterval(async () => { const timer = setInterval(async () => {
if (index == 10) { if (index == 10) {
json.endTime = 1741777564646; json.endTime = 1741777564646;
trafficIncidentArr = await map.renderTrafficIncident(json); trafficIncidentArr = await map.renderTrafficIncident(json);
clearInterval(timer); clearInterval(timer);
} }
index++; index++;
}, 200); }, 200);
} }
// //结束交通事件 // //结束交通事件
...@@ -1145,438 +1218,462 @@ ...@@ -1145,438 +1218,462 @@
//开始历史轨迹 //开始历史轨迹
document.getElementById("bindHistoryVehicle").onclick = bindHistoryVehicle; document.getElementById("bindHistoryVehicle").onclick = bindHistoryVehicle;
async function bindHistoryVehicle() { async function bindHistoryVehicle() {
let options = { let options = {
position: [117.36914548090871335, 39.01187038664559026, 100.12], position: [117.36914548090871335, 39.01187038664559026, 100.12],
orientation: [-90, 0], orientation: [-90, 0],
}; };
camera.flyTo(options); camera.flyTo(options);
const json = { const json = {
id: "21002cc", id: "21002cc",
url: "ws://192.168.60.137:31000/ws/streamer/489d02b4-80de-42e6-b0fc-95c4bd006760", url: "ws://192.168.60.137:31000/ws/streamer/489d02b4-80de-42e6-b0fc-95c4bd006760",
}; };
map.bindHistoryVehicle(json); map.bindHistoryVehicle(json);
} }
//结束历史轨迹 //结束历史轨迹
document.getElementById("removeHistoryVehicle").onclick = document.getElementById("removeHistoryVehicle").onclick =
removeHistoryVehicle; removeHistoryVehicle;
async function removeHistoryVehicle() { async function removeHistoryVehicle() {
map.removeHistoryVehicle(); map.removeHistoryVehicle();
} }
// 暂停历史轨迹 // 暂停历史轨迹
document.getElementById("pauseHistoryVehicle").onclick = document.getElementById("pauseHistoryVehicle").onclick =
pauseHistoryVehicle; pauseHistoryVehicle;
function pauseHistoryVehicle() { function pauseHistoryVehicle() {
map.pauseHistoryVehicle("21002cc"); map.pauseHistoryVehicle("21002cc");
} }
// 重新开始历史轨迹 // 重新开始历史轨迹
document.getElementById("resumeHistoryVehicle").onclick = document.getElementById("resumeHistoryVehicle").onclick =
resumeHistoryVehicle; resumeHistoryVehicle;
function resumeHistoryVehicle() { function resumeHistoryVehicle() {
map.resumeHistoryVehicle("21002cc"); map.resumeHistoryVehicle("21002cc");
} }
// 开始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);
} }
// 7号车V2X // 7号车V2X
document.getElementById("startV2X7").onclick = startV2X7; document.getElementById("startV2X7").onclick = startV2X7;
function startV2X7() { function startV2X7() {
const url = 'wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=269' const url =
startVehicleV2X(url) "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=269";
startVehicleV2X(url);
} }
// 开始车辆V2X // 开始车辆V2X
function startVehicleV2X(url) { function startVehicleV2X(url) {
// let options = { // let options = {
// color: [255, 255, 0, 1], // color: [255, 255, 0, 1],
// vehicleId: "仿AYZQS001", //鄂A17U5N // vehicleId: "仿AYZQS001", //鄂A17U5N
// // vehicleId: "测试车辆001", //鄂A17U5N // // vehicleId: "测试车辆001", //鄂A17U5N
// name: '注意行人' // name: '注意行人'
// }; // };
// 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],
// } // }
// map.renderCommunication(options2) // map.renderCommunication(options2)
// setTimeout(() => { // setTimeout(() => {
// map.stopCommunication(options2) // map.stopCommunication(options2)
// }, 200) // }, 200)
// return // return
// 257 XM140001 // 257 XM140001
// 259 XM140002 // 259 XM140002
// 261 XM140003 // 261 XM140003
// 263 XM140004 // 263 XM140004
// 265 XM140005 // 265 XM140005
// 267 XM140006 // 267 XM140006
// 269 XM140007 // 269 XM140007
// 271 XM140008 // 271 XM140008
// 219 仿AYZQS001 // 219 仿AYZQS001
// 221 仿A-0234DA // 221 仿A-0234DA
v2xArr = []; // 记录所有v2x v2xArr = []; // 记录所有v2x
// 创建一个WebSocket实例 // 创建一个WebSocket实例
v2xSocket = new WebSocket(url); v2xSocket = new WebSocket(url);
// 当WebSocket打开时执行 // 当WebSocket打开时执行
v2xSocket.onopen = function (event) { v2xSocket.onopen = function (event) {
console.log("socket连接成功!"); console.log("socket连接成功!");
};
// 当接收到消息时执行
v2xSocket.onmessage = function (event) {
let data = JSON.parse(event.data);
let { objects, endTime, typeName, id } = data;
// objects 如果只有一项，则是单车预警；如果有两项，则需要有两个车辆的通信效果
let mainCar = objects[0];
// 如果id不在v2xArr中，则添加
const find = v2xArr.find((item) => item.id === id);
if (!find) {
v2xArr.push(data);
}
let options = {
id: id,
color: [255, 0, 0, 1],
vehicleId: mainCar.id,
name: typeName,
}; };
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
if (objects.length > 1) {
const options2 = {
id,
vehicleId: [mainCar.id, objects[1].id], //车辆ID
color: [255, 255, 0, 1],
};
map.renderCommunication(options2);
if (objects.length > 1) {
console.log("开始", mainCar.id, objects[1].id, data);
} else {
console.log("开始", mainCar.id, data);
}
}
// 当接收到消息时执行 if (endTime) {
v2xSocket.onmessage = function (event) { map
let data = JSON.parse(event.data); .getVehicle("21e7a9e6d2884122804788dac1e002cc")
let { objects, endTime, typeName, id } = data; .stopV2x(mainCar.id);
v2xArr.splice(
// objects 如果只有一项，则是单车预警；如果有两项，则需要有两个车辆的通信效果 v2xArr.findIndex((item) => item.id === id),
let mainCar = objects[0]; 1
);
// 如果id不在v2xArr中，则添加
const find = v2xArr.find((item) => item.id === id); // v2x的效果只能添加一个，但车辆能同时存在多个v2x
if (!find) { const lastV2x = v2xArr[v2xArr.length - 1];
v2xArr.push(data); if (lastV2x) {
} const options = {
id: lastV2x.id,
let options = { color: [255, 0, 0, 1],
id: id, vehicleId: lastV2x.objects[0].id,
color: [255, 0, 0, 1], name: lastV2x.name,
vehicleId: mainCar.id,
name: typeName,
}; };
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options); map
.getVehicle("21e7a9e6d2884122804788dac1e002cc")
if (objects.length > 1) { .startV2x(options);
const options2 = { }
id,
vehicleId: [mainCar.id, objects[1].id], //车辆ID const options2 = {
color: [255, 255, 0, 1], id,
}; vehicleId: [mainCar.id, objects[1].id], //车辆ID
map.renderCommunication(options2); };
console.log("前端结束通信", id, mainCar.id, objects[1].id);
if (objects.length > 1) { map.stopCommunication(options2);
console.log("开始", mainCar.id, objects[1].id, data);
} else { if (objects.length > 1) {
console.log("开始", mainCar.id, data); // console.log('结束结束结束', mainCar.id, objects[1].id)
} } else {
} // console.log('结束结束结束', mainCar.id)
}
if (endTime) { }
map };
.getVehicle("21e7a9e6d2884122804788dac1e002cc")
.stopV2x(mainCar.id);
v2xArr.splice(
v2xArr.findIndex((item) => item.id === id),
1
);
// v2x的效果只能添加一个，但车辆能同时存在多个v2x
const lastV2x = v2xArr[v2xArr.length - 1];
if (lastV2x) {
const options = {
id: lastV2x.id,
color: [255, 0, 0, 1],
vehicleId: lastV2x.objects[0].id,
name: lastV2x.name,
};
map
.getVehicle("21e7a9e6d2884122804788dac1e002cc")
.startV2x(options);
}
const options2 = {
id,
vehicleId: [mainCar.id, objects[1].id], //车辆ID
};
console.log("前端结束通信", id, mainCar.id, objects[1].id);
map.stopCommunication(options2);
if (objects.length > 1) {
// console.log('结束结束结束', mainCar.id, objects[1].id)
} else {
// 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 map
.getVehicle("21e7a9e6d2884122804788dac1e002cc") .getVehicle("21e7a9e6d2884122804788dac1e002cc")
.stopV2x(item.objects[0].id); .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 = [];
} }
// 绘制感知区域 // 绘制感知区域
document.getElementById("addPolygon").onclick = addPolygon; document.getElementById("addPolygon").onclick = addPolygon;
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, 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);
} }
// 显示感知区域 // 显示感知区域
document.getElementById("showPolygon").onclick = showPolygon; document.getElementById("showPolygon").onclick = showPolygon;
function showPolygon() { function showPolygon() {
map.showOverlay(polygon); map.showOverlay(polygon);
} }
// 隐藏感知区域 // 隐藏感知区域
document.getElementById("hidePolygon").onclick = hidePolygon; document.getElementById("hidePolygon").onclick = hidePolygon;
function hidePolygon() { function hidePolygon() {
map.hideOverlay(polygon); map.hideOverlay(polygon);
} }
// 删除感知区域 // 删除感知区域
document.getElementById("removePolygon").onclick = removePolygon; document.getElementById("removePolygon").onclick = removePolygon;
function removePolygon() { function removePolygon() {
map.removeOverlay(polygon); map.removeOverlay(polygon);
} }
// 注册模型点击高亮 modelClickHighLight // 注册模型点击高亮 modelClickHighLight
document.getElementById("modelClickHighLight").onclick = document.getElementById("modelClickHighLight").onclick =
modelClickHighLight; 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);
} }
function pick_model_hightlight(e) { function pick_model_hightlight(e) {
// 取出id // 取出id
const modelId = e?.result?.Id || ""; const modelId = e?.result?.Id || "";
console.log("模型点击高亮", e); console.log("模型点击高亮", e);
if (modelId) { if (modelId) {
highlightModelId = modelId; highlightModelId = modelId;
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);
} }
// 清除模型高亮 // 清除模型高亮
document.getElementById("cancelModelHighlight").onclick = document.getElementById("cancelModelHighlight").onclick =
cancelModelHighlight; cancelModelHighlight;
function cancelModelHighlight() { function cancelModelHighlight() {
console.log("清除模型高亮", highlightModelId); console.log("清除模型高亮", highlightModelId);
if (highlightModelId) { if (highlightModelId) {
map.cancelModelHighlight(highlightModelId); map.cancelModelHighlight(highlightModelId);
map.removePopWindow(highlightModelId); map.removePopWindow(highlightModelId);
// highlightModelId = null; // highlightModelId = null;
} }
} }
// 注销模型点击事件 // 注销模型点击事件
document.getElementById("modelClickRemove").onclick = modelClickRemove; document.getElementById("modelClickRemove").onclick = modelClickRemove;
function modelClickRemove() { function modelClickRemove() {
map.off(map.EventType.ON_EQUIPMENT_CLICKED, pick_model_hightlight); map.off(map.EventType.ON_EQUIPMENT_CLICKED, pick_model_hightlight);
} }
// 添加毫米波雷达 // 添加毫米波雷达
document.getElementById("addMillimeterWave").onclick = addMillimeterWave; document.getElementById("addMillimeterWave").onclick = addMillimeterWave;
function addMillimeterWave() { function addMillimeterWave() {
let options = { let options = {
position: [117.325673, 38.996374, 18.53], position: [117.325673, 38.996374, 18.53],
orientation: [-34.930073, -44.426579], orientation: [-34.930073, -44.426579],
}; };
camera.flyTo(options); camera.flyTo(options);
const json = { const json = {
type: 'millimeterWave', type: "millimeterWave",
options: { options: {
id: "1200002282", id: "1200002282",
color: [255, 0, 0, 1], color: [255, 0, 0, 1],
opacity: 0.4, opacity: 0.4,
xFov: 90, //横向范围 xFov: 50, //特效横向范围
yFov: 30, //纵向范围 yFov: 20, //特效纵向范围
yawValue: 90, //朝向，0为默认向东 yawValue: 135, //朝向，0为默认向东
pitchValue: 0, //俯仰角 pitchValue: -19, //俯仰角
radius: 1000, //辐射范围 radius: 4300, //辐射范围
} },
}; };
map.addPerceptionEffect(json); map.addPerceptionEffect(json);
} }
// 移除毫米波雷达 // 移除毫米波雷达
document.getElementById("removeMillimeterWave").onclick = document.getElementById("removeMillimeterWave").onclick =
removeMillimeterWave; removeMillimeterWave;
function removeMillimeterWave() { function removeMillimeterWave() {
const json = { const json = {
type: 'millimeterWave', type: "millimeterWave",
options: { options: {
ids: ["1200002282"], ids: ["1200002282"],
} },
}; };
map.removePerceptionEffect(json); map.removePerceptionEffect(json);
} }
// 添加雷达 // 添加雷达
document.getElementById("addRadar").onclick = addRadar; document.getElementById("addRadar").onclick = addRadar;
function addRadar() { function addRadar() {
let options = { let options = {
position: [117.325673, 38.996374, 18.53], position: [117.325673, 38.996374, 18.53],
orientation: [-34.930073, -44.426579], orientation: [-34.930073, -44.426579],
}; };
camera.flyTo(options); camera.flyTo(options);
const json = { const json = {
type: 'radar', type: "radar",
options: { options: {
id: "1200002282", id: "1200002282",
type: "Radar",//设备类型 雷达：Radar type: "Radar", //设备类型 雷达：Radar
is360: false,//是否使用360环绕 is360: false, //是否使用360环绕
color: [255, 0, 0, 1],//特效颜色 color: [255, 0, 0, 1], //特效颜色
scanColor: [255, 255, 0, 1],//扫描特效颜色 scanColor: [255, 255, 0, 1], //扫描特效颜色
speed: 0.3,//扫描速度 speed: 0.3, //扫描速度
opacity: 0.4,//特效透明度 opacity: 0.4, //特效透明度
xFov: 90,//特效横向范围 xFov: 50, //特效横向范围
yFov: 30,//特效纵向范围 yFov: 20, //特效纵向范围
scanRange: 30,//扫描范围 scanRange: 30, //扫描范围
yawValue: 90,//朝向，0为默认向东 yawValue: 135, //朝向，0为默认向东
pitchValue: -10,//俯仰角 pitchValue: -18, //俯仰角
radius: 1000//辐射范围 radius: 4000, //辐射范围
},
} };
}; map.addPerceptionEffect(json);
map.addPerceptionEffect(json);
} }
// 移除雷达 // 移除雷达
document.getElementById("removeRadar").onclick = removeRadar; document.getElementById("removeRadar").onclick = removeRadar;
function removeRadar() { function removeRadar() {
const json = { const json = {
type: 'radar', type: "radar",
options: { options: {
ids: ["1200002282"], ids: ["1200002282"],
} },
}; };
map.removePerceptionEffect(json); map.removePerceptionEffect(json);
} }
// 添加感知融合 // 添加感知融合
document.getElementById("addFusionPerception").onclick = addFusionPerception; document.getElementById("addFusionPerception").onclick =
addFusionPerception;
function addFusionPerception() { function addFusionPerception() {
let options = { let options = {
position: [117.327313, 38.999729, 18.53], position: [117.327313, 38.999729, 18.53],
orientation: [-34.930073, -44.426579], orientation: [-34.930073, -44.426579],
}; };
camera.flyTo(options); camera.flyTo(options);
const json = { const json = {
type: 'fusionPerception', type: "fusionPerception",
options: { options: {
id: "2200002282", //感知区域ID id: "2200002282", //感知区域ID
outline: true, // 是否使用边框 outline: true, // 是否使用边框
height: 2, // 区域尺寸高度 height: 2, // 区域尺寸高度
heightOffset: 300, // 区域生成位置高度 heightOffset: 300, // 区域生成位置高度
coordinates: [ // 区域范围经纬度 opacity: 0.2,
[117.327313, 38.999729], coordinates: [
[117.327233, 38.999555], // 区域范围经纬度
[117.327065, 38.999671], [117.32701900000001, 38.999834],
[117.326734, 38.999867], [117.32768, 38.999651999999998],
[117.32688, 38.999869], [117.327579, 38.999527999999998],
[117.327095, 38.999798] [117.327307, 38.999614999999999],
], [117.32723799999999, 38.999487000000002],
} [117.327061, 38.999552999999999],
}; [117.327112, 38.999678000000003],
map.addPerceptionEffect(json); [117.326925, 38.999741999999998],
],
},
};
map.addPerceptionEffect({
type: "fusionPerception",
options: {
id: "2200002282", //感知区域ID
outline: true, // 是否使用边框
height: 2, // 区域尺寸高度
heightOffset: 300, // 区域生成位置高度
opacity: 0.2,
coordinates: [
// 区域范围经纬度
[117.32701900000001, 38.999834],
[117.32768, 38.999651999999998],
[117.327579, 38.999527999999998],
[117.327307, 38.999614999999999],
[117.32723799999999, 38.999487000000002],
[117.327061, 38.999552999999999],
[117.327112, 38.999678000000003],
[117.326925, 38.999741999999998],
],
},
});
} }
// 移除毫米波雷达 // 移除毫米波雷达
document.getElementById("removeFusionPerception").onclick = document.getElementById("removeFusionPerception").onclick =
removeFusionPerception; removeFusionPerception;
function removeFusionPerception() { function removeFusionPerception() {
const json = { const json = {
type: 'fusionPerception', type: "fusionPerception",
options: { options: {
ids: ["2200002282"], ids: ["2200002282"],
} },
}; };
map.removePerceptionEffect(json); map.removePerceptionEffect(json);
} }
// 添加摄像头 // 添加摄像头
document.getElementById("addCamera").onclick = addCamera; document.getElementById("addCamera").onclick = addCamera;
function addCamera() { function addCamera() {
let options = { let options = {
position: [117.325673, 38.996374, 18.53], position: [117.325673, 38.996374, 18.53],
orientation: [-34.930073, -44.426579], orientation: [-34.930073, -44.426579],
}; };
camera.flyTo(options); camera.flyTo(options);
const json = {
const json = { type: "camera",
type: 'camera', options: {
options: { id: "1200002282", //摄像头ID
id: "1200002282", //摄像头ID color: [255, 255, 0, 1], //特效颜色
color: [255, 255, 0, 1], //特效颜色 opacity: 0.4, //特效透明度
opacity: 0.4, //特效透明度 xFov: 50, //横向范围
xFov: 90, //横向范围 yFov: 20, //纵向范围
yFov: 30, //纵向范围 yawValue: 135, //朝向，0为默认向东
yawValue: 180, //朝向，0为默认向东 pitchValue: -19, //俯仰角
pitchValue: 0, //俯仰角 radius: 4600, //辐射范围
radius: 1000, //辐射范围 },
} };
};
map.addPerceptionEffect(json); map.addPerceptionEffect(json);
} }
// 移除摄像头 // 移除摄像头
document.getElementById("removeCamera").onclick = removeCamera; document.getElementById("removeCamera").onclick = removeCamera;
function removeCamera() { function removeCamera() {
const json = { const json = {
type: 'camera', type: "camera",
options: { options: {
ids: ["1200002282"], ids: ["1200002282"],
} },
}; };
map.removePerceptionEffect(json); map.removePerceptionEffect(json);
} }
</script> </script>
</html>
</html>
\ No newline at end of file
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