Skip to content

GitLab

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

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

parent 3ab403c3
Show whitespace changes
Inline Side-by-side
index.html
View file @ c8a26586
<html>
<head>
<head>
<meta charset="utf-8" />
<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>
html {
margin: 0;
......@@ -32,7 +34,7 @@
margin-bottom: 20px;
}
#btn-list>div>[type="button"] {
#btn-list > div > [type="button"] {
background: rgb(59, 98, 226);
color: #fff;
border: 0;
......@@ -41,16 +43,24 @@
cursor: pointer;
}
#btn-list>div:last-child {
#btn-list > div:last-child {
margin-bottom: 20px;
}
</style>
<body>
<body>
<div id="btn-list">
<div>
<input type="button" id="getZoomAndCenter" value="获取地图中心点和级别" />
<input type="button" id="setZoomAndCenter" value="设置地图中心点和级别" />
<input
type="button"
id="getZoomAndCenter"
value="获取地图中心点和级别"
/>
<input
type="button"
id="setZoomAndCenter"
value="设置地图中心点和级别"
/>
</div>
<div>
<input type="button" id="lockMap" value="限制地图显示范围和级别" />
......@@ -60,7 +70,11 @@
<input type="button" id="flyTo" value="设置相机" />
<input type="button" id="getCameraView" value="获取相机参数" />
<input type="button" id="addCameraEvent" value="监听相机参数" />
<input type="button" id="removeCameraEvent" value="移除相机监听事件" />
<input
type="button"
id="removeCameraEvent"
value="移除相机监听事件"
/>
</div>
<div>
<input type="button" id="startFly" value="开始相机导览" />
......@@ -69,14 +83,38 @@
<input type="button" id="stopFly" value="结束相机导览" />
</div>
<div>
<input type="button" id="addMapChangeEvent" value="注册地图变化事件" />
<input type="button" id="removeMapChangeEvent" value="注销地图变化事件" />
<input type="button" id="addMouseClickEvent" value="注册鼠标点击事件" />
<input type="button" id="removeMouseClickEvent" value="注销鼠标点击事件" />
<input
type="button"
id="addMapChangeEvent"
value="注册地图变化事件"
/>
<input
type="button"
id="removeMapChangeEvent"
value="注销地图变化事件"
/>
<input
type="button"
id="addMouseClickEvent"
value="注册鼠标点击事件"
/>
<input
type="button"
id="removeMouseClickEvent"
value="注销鼠标点击事件"
/>
</div>
<div>
<input type="button" id="addModelClickEvent" value="注册模型点击事件" />
<input type="button" id="removeModelClickEvent" value="注销模型点击事件" />
<input
type="button"
id="addModelClickEvent"
value="注册模型点击事件"
/>
<input
type="button"
id="removeModelClickEvent"
value="注销模型点击事件"
/>
<input type="button" id="cancleHighLight" value="取消模型高亮" />
<input type="button" id="removePopup" value="取消弹窗" />
</div>
......@@ -129,10 +167,18 @@
<input type="button" id="focusNoneCar" value="清除定位" />
</div>
<div>
<input type="button" id="loadarrowLineLaye" value="加载车辆路径规划" />
<input
type="button"
id="loadarrowLineLaye"
value="加载车辆路径规划"
/>
<input type="button" id="hideRoute" value="显示车辆路径规划" />
<input type="button" id="showRoute" value="隐藏车辆路径规划" />
<input type="button" id="cleanarrowLineLaye" value="清除车辆路径规划" />
<input
type="button"
id="cleanarrowLineLaye"
value="清除车辆路径规划"
/>
</div>
<div>
<input type="button" id="loadPerceptual" value="感知目标物渲染" />
......@@ -140,25 +186,50 @@
<input type="button" id="hidePerceptual" value="隐藏感知目标物" />
<input type="button" id="removePerceptual" value="清除感知目标物" />
<input type="button" id="addPerceptualheat" value="添加交通热力图" />
<input type="button" id="deletePerceptualheat" value="删除交通热力图" />
<input
type="button"
id="deletePerceptualheat"
value="删除交通热力图"
/>
</div>
<div>
<input type="button" id="addPerceptualheatEffect" value="热力图宏观效果" />
<input type="button" id="removePerceptualheatEffect" value="移除热力图宏观效果" />
<input
type="button"
id="addPerceptualheatEffect"
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>
<input type="button" id="addTrafficIncident" value="交通流中的事件" />
<input style="display: none" type="button" id="addTrafficIncident2" value="不在交通流中的事件" />
<input type="button" id="addTrafficIncident3" value="区域坐标的交通事件" />
<input
style="display: none"
type="button"
id="addTrafficIncident2"
value="不在交通流中的事件"
/>
<input
type="button"
id="addTrafficIncident3"
value="区域坐标的交通事件"
/>
</div>
<div>
<input type="button" id="bindHistoryVehicle" value="开始历史轨迹" />
<input type="button" id="removeHistoryVehicle" value="结束历史轨迹" />
<input type="button" id="pauseHistoryVehicle" value="暂停历史轨迹" />
<input type="button" id="resumeHistoryVehicle" value="重新开始历史轨迹" />
<input
type="button"
id="resumeHistoryVehicle"
value="重新开始历史轨迹"
/>
</div>
<div>
<input type="button" id="startV2X" value="全部车辆V2X" />
......@@ -173,30 +244,53 @@
<input type="button" id="removePolygon" value="删除感知区域" />
</div>
<div>
<input type="button" id="modelClickHighLight" value="注册场景内模型点击高亮" />
<input type="button" id="cancelModelHighlight" value="清除场景内模型高亮" />
<input type="button" id="modelClickRemove" value="注销场景内模型点击事件" />
<input
type="button"
id="modelClickHighLight"
value="注册场景内模型点击高亮"
/>
<input
type="button"
id="cancelModelHighlight"
value="清除场景内模型高亮"
/>
<input
type="button"
id="modelClickRemove"
value="注销场景内模型点击事件"
/>
</div>
<div>
<input type="button" id="addMillimeterWave" value="毫米波雷达" />
<input type="button" id="removeMillimeterWave" value="移除毫米波雷达" />
<input
type="button"
id="removeMillimeterWave"
value="移除毫米波雷达"
/>
<input type="button" id="addRadar" 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="移除路口融合" />
<input
type="button"
id="removeFusionPerception"
value="移除路口融合"
/>
</div>
</div>
<div id="main-container" style="width: 100vw; height: 100vh; overflow: hidden"></div>
</body>
<script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script>
<!-- <script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script> -->
<script src="./SignalLines.js"></script>
<!-- <script src="./data.js"></script> -->
</head>
<script>
<div
id="main-container"
style="width: 100vw; height: 100vh; overflow: hidden"
></div>
</body>
<script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script>
<!-- <script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script> -->
<script src="./SignalLines.js"></script>
<!-- <script src="./data.js"></script> -->
</head>
<script>
var map;
var layer;
var road;
......@@ -234,6 +328,7 @@
config.gis_sdk = gis_sdk;
map = await CMapLoader.loadMap("main-container", config, url, secretKey);
window.map = map;
await map.initMap(); //地图加载
drawControl = map.getControl(1); //类型 1 ：绘制 2：量算
......@@ -740,7 +835,7 @@
document.getElementById("focusCar1").onclick = focusCar1;
async function focusCar1() {
let options = {
vehicleId: "XM140004",// 仿AYZQS001
vehicleId: "XM140004", // 仿AYZQS001
perspective: 1, // 1第一人称视角、3第三人称视角
};
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").focusVehicle(options);
......@@ -750,7 +845,7 @@
document.getElementById("focusCar3").onclick = focusCar3;
async function focusCar3() {
let options = {
vehicleId: "XM140004",//仿AYZQS001
vehicleId: "XM140004", //仿AYZQS001
perspective: 3, // 1第一人称视角、3第三人称视角
};
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").focusVehicle(options);
......@@ -938,76 +1033,54 @@
async function addTrafficIncident() {
document.getElementById("btn-list").style.display = "none";
let fly = true
let fly = 0;
// 订阅事件 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 =
"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 = "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连接成功!");
};
// let optionsTest1 = {
// 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);
// }
// 测试某一个类型
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);
json.color = [255, 0, 0, 1]
json.color = [255, 0, 0, 1];
trafficIncidentArr.push(json);
await map.renderTrafficIncident(json);
}
}
// 真实渲染
json.color = [255, 0, 0, 1];
trafficIncidentArr.push(json);
await map.renderTrafficIncident(json);
};
socket.onmessage = async function (event) {
const json = JSON.parse(event.data);
console.log("onmessage", json.name, json.type);
await fun(json);
};
}
......@@ -1180,22 +1253,25 @@
// 开始V2V
document.getElementById("startV2X").onclick = startV2X;
function startV2X() {
const url = "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world";
const url =
"wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world";
startVehicleV2X(url);
}
// 6号车V2X
document.getElementById("startV2X6").onclick = startV2X6;
function startV2X6() {
const url = "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=267";
const url =
"wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=267";
startVehicleV2X(url);
}
// 7号车V2X
document.getElementById("startV2X7").onclick = startV2X7;
function startV2X7() {
const url = 'wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=269'
startVehicleV2X(url)
const url =
"wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=269";
startVehicleV2X(url);
}
// 开始车辆V2X
......@@ -1426,17 +1502,17 @@
camera.flyTo(options);
const json = {
type: 'millimeterWave',
type: "millimeterWave",
options: {
id: "1200002282",
color: [255, 0, 0, 1],
opacity: 0.4,
xFov: 90, //横向范围
yFov: 30, //纵向范围
yawValue: 90, //朝向，0为默认向东
pitchValue: 0, //俯仰角
radius: 1000, //辐射范围
}
xFov: 50, //特效横向范围
yFov: 20, //特效纵向范围
yawValue: 135, //朝向，0为默认向东
pitchValue: -19, //俯仰角
radius: 4300, //辐射范围
},
};
map.addPerceptionEffect(json);
}
......@@ -1446,15 +1522,14 @@
removeMillimeterWave;
function removeMillimeterWave() {
const json = {
type: 'millimeterWave',
type: "millimeterWave",
options: {
ids: ["1200002282"],
}
},
};
map.removePerceptionEffect(json);
}
// 添加雷达
document.getElementById("addRadar").onclick = addRadar;
function addRadar() {
......@@ -1465,23 +1540,22 @@
camera.flyTo(options);
const json = {
type: 'radar',
type: "radar",
options: {
id: "1200002282",
type: "Radar",//设备类型 雷达：Radar
is360: false,//是否使用360环绕
color: [255, 0, 0, 1],//特效颜色
scanColor: [255, 255, 0, 1],//扫描特效颜色
speed: 0.3,//扫描速度
opacity: 0.4,//特效透明度
xFov: 90,//特效横向范围
yFov: 30,//特效纵向范围
scanRange: 30,//扫描范围
yawValue: 90,//朝向，0为默认向东
pitchValue: -10,//俯仰角
radius: 1000//辐射范围
}
type: "Radar", //设备类型 雷达：Radar
is360: false, //是否使用360环绕
color: [255, 0, 0, 1], //特效颜色
scanColor: [255, 255, 0, 1], //扫描特效颜色
speed: 0.3, //扫描速度
opacity: 0.4, //特效透明度
xFov: 50, //特效横向范围
yFov: 20, //特效纵向范围
scanRange: 30, //扫描范围
yawValue: 135, //朝向，0为默认向东
pitchValue: -18, //俯仰角
radius: 4000, //辐射范围
},
};
map.addPerceptionEffect(json);
}
......@@ -1490,17 +1564,17 @@
document.getElementById("removeRadar").onclick = removeRadar;
function removeRadar() {
const json = {
type: 'radar',
type: "radar",
options: {
ids: ["1200002282"],
}
},
};
map.removePerceptionEffect(json);
}
// 添加感知融合
document.getElementById("addFusionPerception").onclick = addFusionPerception;
document.getElementById("addFusionPerception").onclick =
addFusionPerception;
function addFusionPerception() {
let options = {
position: [117.327313, 38.999729, 18.53],
......@@ -1509,23 +1583,47 @@
camera.flyTo(options);
const json = {
type: 'fusionPerception',
type: "fusionPerception",
options: {
id: "2200002282", //感知区域ID
outline: true, // 是否使用边框
height: 2, // 区域尺寸高度
heightOffset: 300, // 区域生成位置高度
coordinates: [ // 区域范围经纬度
[117.327313, 38.999729],
[117.327233, 38.999555],
[117.327065, 38.999671],
[117.326734, 38.999867],
[117.32688, 38.999869],
[117.327095, 38.999798]
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],
],
}
},
};
map.addPerceptionEffect(json);
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],
],
},
});
}
// 移除毫米波雷达
......@@ -1533,10 +1631,10 @@
removeFusionPerception;
function removeFusionPerception() {
const json = {
type: 'fusionPerception',
type: "fusionPerception",
options: {
ids: ["2200002282"],
}
},
};
map.removePerceptionEffect(json);
}
......@@ -1549,20 +1647,20 @@
orientation: [-34.930073, -44.426579],
};
camera.flyTo(options);
const json = {
type: 'camera',
type: "camera",
options: {
id: "1200002282", //摄像头ID
color: [255, 255, 0, 1], //特效颜色
opacity: 0.4, //特效透明度
xFov: 90, //横向范围
yFov: 30, //纵向范围
yawValue: 180, //朝向，0为默认向东
pitchValue: 0, //俯仰角
radius: 1000, //辐射范围
}
xFov: 50, //横向范围
yFov: 20, //纵向范围
yawValue: 135, //朝向，0为默认向东
pitchValue: -19, //俯仰角
radius: 4600, //辐射范围
},
};
map.addPerceptionEffect(json);
}
......@@ -1570,13 +1668,12 @@
document.getElementById("removeCamera").onclick = removeCamera;
function removeCamera() {
const json = {
type: 'camera',
type: "camera",
options: {
ids: ["1200002282"],
}
},
};
map.removePerceptionEffect(json);
}
</script>
</script>
</html>
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