Skip to content

GitLab

Commit 1347d4d5 authored by chengdong.lv@inzymeits.com's avatar chengdong.lv@inzymeits.com
Browse files

提交

parent 79a65e8e
Show whitespace changes
Inline Side-by-side
index.html
View file @ 1347d4d5
<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,49 @@
<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 type="button" id="addTrafficIncident2" value="不在交通流中的事件" />
<input type="button" id="addTrafficIncident3" value="区域坐标的交通事件" />
<input
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" />
......@@ -172,22 +242,42 @@
<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="移除毫米波雷达"
/>
</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="./SignalLines.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>
</head>
<script>
var map;
var layer;
var road;
......@@ -198,12 +288,15 @@
var compassItem = null; // 指北针
var perceptualroad = null;
var perceptual = false; //是否加载了感知物
var perceptualshow = false;//热力图否显示
var trafficIncidentArr = [];//热力图否显示
var perceptualshow = false; //热力图否显示
var trafficIncidentArr = []; //热力图否显示
var polygon = null; // 感知区域
var v2xSocket = null;
var v2xArr = []; // 记录所有v2x
var trafficEventSocket = null;
var trafficEventArr = []; // 记录所有的交通事件
//高亮模型Id
var highlightModelId = null;
var handler = (e) => {
......@@ -243,7 +336,11 @@
// 设置地图中心点和级别
document.getElementById("setZoomAndCenter").onclick = 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);
}
......@@ -699,19 +796,19 @@
document.getElementById("addTrafficFlow").onclick = addTrafficFlow;
async function addTrafficFlow() {
const json = {
id: '21e7a9e6d2884122804788dac1e002cc',
url: 'ws://192.168.60.137:31000/ws/streamer/a9219e09346a44a28ee3d0aed79c27ea' // 全部车辆
}
map.bindVehicle(json)
id: "21e7a9e6d2884122804788dac1e002cc",
url: "ws://192.168.60.137:31000/ws/streamer/a9219e09346a44a28ee3d0aed79c27ea", // 全部车辆
};
map.bindVehicle(json);
}
document.getElementById("addTrafficFlow6").onclick = addTrafficFlow6;
async function addTrafficFlow6() {
const json = {
id: '21e7a9e6d2884122804788dac1e002cc',
url: 'ws://192.168.60.137:31000/ws/streamer/e7c584dd5d294347bbc3ccec2f0aa8ea' // 6号车
}
map.bindVehicle(json)
id: "21e7a9e6d2884122804788dac1e002cc",
url: "ws://192.168.60.137:31000/ws/streamer/e7c584dd5d294347bbc3ccec2f0aa8ea", // 6号车
};
map.bindVehicle(json);
}
// 删除交通流
......@@ -804,7 +901,7 @@
}
const json = {
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号路口
};
perceptualroad.bindObjects(json);
......@@ -815,7 +912,6 @@
// orientation: [-34.930073, -44.426579],
// };
// camera.flyTo(options);
}
// 显示感知目标物
document.getElementById("showPerceptual").onclick = showPerceptual;
......@@ -917,55 +1013,86 @@
road.removeSignalStopLine();
}
var arr = []
//开始交通事件
document.getElementById("addTrafficIncident").onclick = addTrafficIncident;
async function addTrafficIncident() {
let options = {
position: [117.325401, 38.996133, 28.12],
// 订阅事件 websocket事件
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],
};
camera.flyTo(options);
camera.flyTo(optionsTest);
}
const json = {
"id": "600286",
"type": "ROADSIDE_TRAFFIC_EVENT",
"name": "异常停车预警",
"ptcIds": ['1200002282'], //字符串数组
"location": [
{
longitude: 117.32559766689558,
latitude: 38.99628656347781,
elevation: null,
// 从 trafficIncidentArr 中的每一项中找出 trafficIncidentId== id 的数据
const find = trafficIncidentArr.find(
(item) => item.trafficIncidentId == id
);
if (find ) {
if(index > 50 && name == "违规停车/停车占道") {
map.stopTrafficIncident(id, json);
}
],
"level": 1,
"description": null,
"imagesUrl": null,
"videosUrl": null,
"startTime": null,
"endTime": null,
"reportTime": null,
"mqttTime": null,
"accessTime": null
return;
}
trafficIncidentArr = await map.renderTrafficIncident(json);
console.log("tc.................", trafficIncidentArr);
index++;
let index = 0;
const timer = setInterval(async () => {
if (index == 10) {
json.endTime = 1741777564646;
// if (index > 50) {
// if (name == "违规停车/停车占道") {
// 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);
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() {
let options = {
position: [117.325401, 38.996133, 28.12],
......@@ -973,30 +1100,8 @@
};
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);
console.log("tc.................", trafficIncidentArr);
let index = 0;
......@@ -1012,7 +1117,8 @@
}
// 区域坐标的交通事件
document.getElementById("addTrafficIncident3").onclick = addTrafficIncident3;
document.getElementById("addTrafficIncident3").onclick =
addTrafficIncident3;
async function addTrafficIncident3() {
let options = {
position: [117.325401, 38.996133, 28.12],
......@@ -1021,14 +1127,14 @@
camera.flyTo(options);
const json = {
"id": "600286",
"type": "TRAFFIC_CONGESTION",
"name": "交通拥堵",
"ptcIds": null,
"location": [
id: "600286",
type: "TRAFFIC_CONGESTION",
name: "交通拥堵",
ptcIds: null,
location: [
{
longitude: 117.32564783,
latitude: 38.99632990,
latitude: 38.9963299,
elevation: null,
},
{
......@@ -1042,21 +1148,21 @@
elevation: null,
},
{
longitude: 117.32552220,
longitude: 117.3255222,
latitude: 38.99636725,
elevation: null,
},
],
"level": 1,
"description": null,
"imagesUrl": null,
"videosUrl": null,
"startTime": null,
"endTime": null,
"reportTime": null,
"mqttTime": null,
"accessTime": null
}
level: 1,
description: null,
imagesUrl: null,
videosUrl: null,
startTime: null,
endTime: null,
reportTime: null,
mqttTime: null,
accessTime: null,
};
trafficIncidentArr = await map.renderTrafficIncident(json);
console.log("tc.................", trafficIncidentArr);
......@@ -1152,15 +1258,17 @@
// 开始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'
startVehicleV2X(url)
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'
startVehicleV2X(url)
const url =
"wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=267";
startVehicleV2X(url);
}
// 开始车辆V2X
......@@ -1173,7 +1281,6 @@
// };
// map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
// const options2 = {
// vehicleId: ['1200001992', 'sxt000045'],//车辆ID
// color: [255, 0, 0, 1],
......@@ -1185,7 +1292,6 @@
// }, 200)
// return
// 257 XM140001
// 259 XM140002
// 261 XM140003
......@@ -1209,90 +1315,99 @@
// 当接收到消息时执行
v2xSocket.onmessage = function (event) {
let data = JSON.parse(event.data)
let { objects, endTime, typeName, id } = data
let data = JSON.parse(event.data);
let { objects, endTime, typeName, id } = data;
// objects 如果只有一项，则是单车预警；如果有两项，则需要有两个车辆的通信效果
let mainCar = objects[0]
let mainCar = objects[0];
// 如果id不在v2xArr中，则添加
const find = v2xArr.find(item => item.id === id)
const find = v2xArr.find((item) => item.id === id);
if (!find) {
v2xArr.push(data)
v2xArr.push(data);
}
let options = {
id: id,
color: [255, 255, 0, 1],
vehicleId: mainCar.id,
name: typeName
name: typeName,
};
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
if (objects.length > 1) {
const options2 = {
id,
vehicleId: [mainCar.id, objects[1].id],//车辆ID
vehicleId: [mainCar.id, objects[1].id], //车辆ID
color: [255, 0, 0, 1],
}
map.renderCommunication(options2)
};
map.renderCommunication(options2);
if (objects.length > 1) {
console.log('开始', mainCar.id, objects[1].id, data)
console.log("开始", mainCar.id, objects[1].id, data);
} else {
console.log('开始', mainCar.id, data)
console.log("开始", mainCar.id, data);
}
}
if (endTime) {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").stopV2x(mainCar.id)
v2xArr.splice(v2xArr.findIndex(item => item.id === id), 1)
map
.getVehicle("21e7a9e6d2884122804788dac1e002cc")
.stopV2x(mainCar.id);
v2xArr.splice(
v2xArr.findIndex((item) => item.id === id),
1
);
// v2x的效果只能添加一个，但车辆能同时存在多个v2x
const lastV2x = v2xArr[v2xArr.length - 1]
const lastV2x = v2xArr[v2xArr.length - 1];
if (lastV2x) {
const options = {
id: lastV2x.id,
color: [255, 255, 0, 1],
vehicleId: lastV2x.objects[0].id,
name: lastV2x.name
name: lastV2x.name,
};
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
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)
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
document.getElementById("removeV2X").onclick = removeV2X;
function removeV2X() {
v2xSocket.close()
v2xSocket.close();
v2xArr.forEach(item => {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").stopV2x(item.objects[0].id)
v2xArr.forEach((item) => {
map
.getVehicle("21e7a9e6d2884122804788dac1e002cc")
.stopV2x(item.objects[0].id);
if (item.objects.length > 1) {
const options2 = {
id,
vehicleId: [item.objects[0].id, item.objects[1].id],//车辆ID
}
map.stopCommunication(options2)
vehicleId: [item.objects[0].id, item.objects[1].id], //车辆ID
};
map.stopCommunication(options2);
}
})
v2xArr = []
});
v2xArr = [];
}
// 绘制感知区域
......@@ -1300,21 +1415,21 @@
async function addPolygon() {
const options = {
id: "polygons",
type: 'polygon3d',
type: "polygon3d",
position: [
[117.31930248, 38.99171243],
[117.32246328, 38.99176425],
[117.32174648, 38.99001976],
[117.31925930, 38.99073655],
[117.3192593, 38.99073655],
],
color: [25, 25, 112, 1], //设置填充颜色
maxHeight: 20,
extrudedHeight: 60,
}
};
// 添加感知区域
polygon = await map.addPolygonOverlay(options)
map.zoomToOverlay(polygon)
polygon = await map.addPolygonOverlay(options);
map.zoomToOverlay(polygon);
}
// 显示感知区域
......@@ -1336,7 +1451,8 @@
}
// 注册模型点击高亮 modelClickHighLight
document.getElementById("modelClickHighLight").onclick = modelClickHighLight;
document.getElementById("modelClickHighLight").onclick =
modelClickHighLight;
async function modelClickHighLight() {
map.on(map.EventType.ON_EQUIPMENT_CLICKED, pick_model_hightlight);
}
......@@ -1349,8 +1465,8 @@
map.setModelHighlight(modelId);
map.addPopWindow({
id: modelId,
info: '普通信号灯'
})
info: "普通信号灯",
});
return;
}
console.warn("没有模型Id", e);
......@@ -1383,27 +1499,26 @@
camera.flyTo(options);
const json = {
"id": "1200002282",
"color": "0ffff0FF",
"opacity": 0.4,
"xFov": 90,//横向范围
"yFov": 30,//纵向范围
"yawValue": 90,//朝向，0为默认向东
"pitchValue": 0,//俯仰角
"radius": 1000//辐射范围
}
id: "1200002282",
color: "0ffff0FF",
opacity: 0.4,
xFov: 90, //横向范围
yFov: 30, //纵向范围
yawValue: 90, //朝向，0为默认向东
pitchValue: 0, //俯仰角
radius: 1000, //辐射范围
};
map.addMillimeterWave(json);
}
// 移除毫米波雷达
document.getElementById("removeMillimeterWave").onclick = removeMillimeterWave;
document.getElementById("removeMillimeterWave").onclick =
removeMillimeterWave;
function removeMillimeterWave() {
const json = {
ids: ["1200002282"]
}
ids: ["1200002282"],
};
map.removeMillimeterWave(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