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

1

parent f34e539c
<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;
...@@ -29,7 +31,7 @@ ...@@ -29,7 +31,7 @@
line-height: 40px; line-height: 40px;
} }
#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;
...@@ -40,11 +42,19 @@ ...@@ -40,11 +42,19 @@
} }
</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="限制地图显示范围和级别" />
...@@ -54,7 +64,11 @@ ...@@ -54,7 +64,11 @@
<input type="button" id="flyTo" value="设置相机" /> <input type="button" id="flyTo" value="设置相机" />
<input type="button" id="getCameraView" value="获取相机参数" /> <input type="button" id="getCameraView" value="获取相机参数" />
<input type="button" id="addCameraEvent" value="监听相机参数" /> <input type="button" id="addCameraEvent" value="监听相机参数" />
<input type="button" id="removeCameraEvent" value="移除相机监听事件" /> <input
type="button"
id="removeCameraEvent"
value="移除相机监听事件"
/>
</div> </div>
<div> <div>
<input type="button" id="startFly" value="开始相机导览" /> <input type="button" id="startFly" value="开始相机导览" />
...@@ -63,14 +77,38 @@ ...@@ -63,14 +77,38 @@
<input type="button" id="stopFly" value="结束相机导览" /> <input type="button" id="stopFly" value="结束相机导览" />
</div> </div>
<div> <div>
<input type="button" id="addMapChangeEvent" value="注册地图变化事件" /> <input
<input type="button" id="removeMapChangeEvent" value="注销地图变化事件" /> type="button"
<input type="button" id="addMouseClickEvent" value="注册鼠标点击事件" /> id="addMapChangeEvent"
<input type="button" id="removeMouseClickEvent" value="注销鼠标点击事件" /> value="注册地图变化事件"
/>
<input
type="button"
id="removeMapChangeEvent"
value="注销地图变化事件"
/>
<input
type="button"
id="addMouseClickEvent"
value="注册鼠标点击事件"
/>
<input
type="button"
id="removeMouseClickEvent"
value="注销鼠标点击事件"
/>
</div> </div>
<div> <div>
<input type="button" id="addModelClickEvent" value="注册模型点击事件" /> <input
<input type="button" id="removeModelClickEvent" value="注销模型点击事件" /> type="button"
id="addModelClickEvent"
value="注册模型点击事件"
/>
<input
type="button"
id="removeModelClickEvent"
value="注销模型点击事件"
/>
<input type="button" id="cancleHighLight" value="取消模型高亮" /> <input type="button" id="cancleHighLight" value="取消模型高亮" />
<input type="button" id="removePopup" value="取消弹窗" /> <input type="button" id="removePopup" value="取消弹窗" />
</div> </div>
...@@ -122,10 +160,18 @@ ...@@ -122,10 +160,18 @@
<input type="button" id="focusNoneCar" value="清除定位" /> <input type="button" id="focusNoneCar" value="清除定位" />
</div> </div>
<div> <div>
<input type="button" id="loadarrowLineLaye" value="加载车辆路径规划" /> <input
type="button"
id="loadarrowLineLaye"
value="加载车辆路径规划"
/>
<input type="button" id="hideRoute" value="显示车辆路径规划" /> <input type="button" id="hideRoute" value="显示车辆路径规划" />
<input type="button" id="showRoute" value="隐藏车辆路径规划" /> <input type="button" id="showRoute" value="隐藏车辆路径规划" />
<input type="button" id="cleanarrowLineLaye" value="清除车辆路径规划" /> <input
type="button"
id="cleanarrowLineLaye"
value="清除车辆路径规划"
/>
</div> </div>
<div> <div>
<input type="button" id="loadPerceptual" value="感知目标物渲染" /> <input type="button" id="loadPerceptual" value="感知目标物渲染" />
...@@ -133,39 +179,70 @@ ...@@ -133,39 +179,70 @@
<input type="button" id="hidePerceptual" value="隐藏感知目标物" /> <input type="button" id="hidePerceptual" value="隐藏感知目标物" />
<input type="button" id="removePerceptual" value="清除感知目标物" /> <input type="button" id="removePerceptual" value="清除感知目标物" />
<input type="button" id="addPerceptualheat" value="添加交通热力图" /> <input type="button" id="addPerceptualheat" value="添加交通热力图" />
<input type="button" id="deletePerceptualheat" value="删除交通热力图" /> <input
type="button"
id="deletePerceptualheat"
value="删除交通热力图"
/>
</div> </div>
<div> <div>
<input type="button" id="addPerceptualheatEffect" value="热力图宏观效果" /> <input
<input type="button" id="removePerceptualheatEffect" value="移除热力图宏观效果" /> type="button"
id="addPerceptualheatEffect"
value="热力图宏观效果"
/>
<input
type="button"
id="removePerceptualheatEffect"
value="移除热力图宏观效果"
/>
<input type="button" id="addSignal" value="信号灯" /> <input type="button" id="addSignal" value="信号灯" />
<!-- <input type="button" id="CreateTIMSignal" value="创建停止线" /> <!-- <input type="button" id="CreateTIMSignal" value="创建停止线" />
<input type="button" id="DeleteTIMSignal" value="删除停止线" /> --> <input type="button" id="DeleteTIMSignal" value="删除停止线" /> -->
</div> </div>
<div> <div>
<input type="button" id="addTrafficIncident" value="开始交通事件" /> <input type="button" id="addTrafficIncident" value="开始交通事件" />
<input type="button" id="removeTrafficIncident" value="结束交通事件" /> <input
type="button"
id="removeTrafficIncident"
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="hideV2X" value="隐藏V2X" /> <!-- <input type="button" id="hideV2X" value="隐藏V2X" /> -->
<input type="button" id="removeV2X" value="清除V2X" /> <input type="button" id="removeV2X" value="清除V2X" />
</div> </div>
<div>
<input
type="button"
id="modelClickHighLight"
value="注册模型点击高亮"
/>
<input type="button" id="cancelModelHighlight" value="清除模型高亮" />
<input type="button" id="modelClickRemove" value="注销模型点击事件" />
</div> </div>
<div id="main-container" style="width:100vw;height:100vh;overflow: hidden;"></div> </div>
</body> <div
<script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script> id="main-container"
<script src="./pathplan.js"></script> style="width: 100vw; height: 100vh; overflow: hidden"
</head> ></div>
</body>
<script> <script src="http://localhost:3000/gis_sdk/js/CMapLoader.map.js"></script>
<script src="./pathplan.js"></script>
</head>
<script>
var map; var map;
var layer; var layer;
var road; var road;
...@@ -176,32 +253,34 @@ ...@@ -176,32 +253,34 @@
var compassItem = null; // 指北针 var compassItem = null; // 指北针
var perceptualroad = null; var perceptualroad = null;
var perceptual = false; //是否加载了感知物 var perceptual = false; //是否加载了感知物
var perceptualshow = false;//热力图否显示 var perceptualshow = false; //热力图否显示
var trafficIncidentArr = [];//热力图否显示 var trafficIncidentArr = []; //热力图否显示
//高亮模型Id
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();//地图加载 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",
}); });
} }
...@@ -210,92 +289,92 @@ ...@@ -210,92 +289,92 @@
async function CreateTIMSignal() { async function CreateTIMSignal() {
const options = [ const options = [
{ {
id: '1001', id: "1001",
startPosition: [117.31884370955275, 38.989795506281467], startPosition: [117.31884370955275, 38.989795506281467],
endPosition: [117.31890374051923, 38.989940666684802] endPosition: [117.31890374051923, 38.989940666684802],
}, },
{ {
id: '1002', id: "1002",
startPosition: [117.31886370955275, 38.989795506281467], startPosition: [117.31886370955275, 38.989795506281467],
endPosition: [117.31892374051923, 38.989940666684802] endPosition: [117.31892374051923, 38.989940666684802],
} },
] ];
road.addSignalStopLine(options) road.addSignalStopLine(options);
var focusjsondata = { var focusjsondata = {
"longitude": 117.318852, longitude: 117.318852,
"latitude": 38.989403, latitude: 38.989403,
"height": 15, height: 15,
} };
map.setZoomAndCenter(focusjsondata) map.setZoomAndCenter(focusjsondata);
} }
// 删除停止线 // 删除停止线
// document.getElementById("DeleteTIMSignal").onclick = DeleteTIMSignal; // document.getElementById("DeleteTIMSignal").onclick = DeleteTIMSignal;
async function DeleteTIMSignal() { async function DeleteTIMSignal() {
road.removeSignalStopLine() road.removeSignalStopLine();
} }
// 获取地图中心点和级别 // 获取地图中心点和级别
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.31884370955275, longitude: 117.31884370955275,
"latitude": 38.989795506281467, latitude: 38.989795506281467,
"height": 527.966445, height: 527.966445,
"zoom": 16 zoom: 16,
} };
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.31000, 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");
} }
// 设置相机 // 设置相机
...@@ -304,8 +383,8 @@ ...@@ -304,8 +383,8 @@
var options = { var options = {
position: [117.3670360408276, 39.00412281044355, 276.84], position: [117.3670360408276, 39.00412281044355, 276.84],
orientation: [0, -90], orientation: [0, -90],
} };
camera.flyTo(options) camera.flyTo(options);
} }
// 开始相机导览 // 开始相机导览
...@@ -316,65 +395,66 @@ ...@@ -316,65 +395,66 @@
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 = removeMapChangeEvent; document.getElementById("removeMapChangeEvent").onclick =
removeMapChangeEvent;
function removeMapChangeEvent() { function removeMapChangeEvent() {
map.off(map.EventType.MAP_CHANGE, handler); map.off(map.EventType.MAP_CHANGE, handler);
} }
...@@ -382,11 +462,12 @@ ...@@ -382,11 +462,12 @@
// 注册鼠标点击事件 // 注册鼠标点击事件
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 = removeMouseClickEvent; document.getElementById("removeMouseClickEvent").onclick =
removeMouseClickEvent;
function removeMouseClickEvent() { function removeMouseClickEvent() {
map.off(map.EventType.LEFT_CLICK, handler); map.off(map.EventType.LEFT_CLICK, handler);
} }
...@@ -394,17 +475,19 @@ ...@@ -394,17 +475,19 @@
// 注册模型点击事件 // 注册模型点击事件
let clickModel = null; let clickModel = null;
let pick_model_handler = (e) => { let pick_model_handler = (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);
} }
...@@ -414,19 +497,20 @@ ...@@ -414,19 +497,20 @@
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 = removeModelClickEvent; document.getElementById("removeModelClickEvent").onclick =
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);
} }
...@@ -443,22 +527,21 @@ ...@@ -443,22 +527,21 @@
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: "http://wdpapi.51aes.com/doc-static/images/static/markerNormal.png",//mapbox图片 image:
iconOffset: [0, -80] //mapbox图标的偏移 "http://wdpapi.51aes.com/doc-static/images/static/markerNormal.png", //mapbox图片
} iconOffset: [0, -80], //mapbox图标的偏移
};
// 添加路口标签 // 添加路口标签
marker = await map.addMarkerOverlay(options); marker = await map.addMarkerOverlay(options);
...@@ -474,56 +557,53 @@ ...@@ -474,56 +557,53 @@
// 隐藏标签 // 隐藏标签
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();
} }
// 开始下雨 // 开始下雨
...@@ -532,7 +612,7 @@ ...@@ -532,7 +612,7 @@
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
}); });
} }
...@@ -548,7 +628,7 @@ ...@@ -548,7 +628,7 @@
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
}); });
} }
...@@ -573,38 +653,44 @@ ...@@ -573,38 +653,44 @@
// 绘制点 // 绘制点
document.getElementById("point").onclick = point; document.getElementById("point").onclick = point;
function point() { function point() {
drawControl.startDraw({ drawControl.startDraw(
type: 'point' {
}, function (e) { type: "point",
console.log(e) },
}) function (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);
}) }
);
} }
// 清除绘制 // 清除绘制
...@@ -616,7 +702,7 @@ ...@@ -616,7 +702,7 @@
// 坐标点 // 坐标点
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 :地表面积
} }
// 直线测量 // 直线测量
...@@ -629,7 +715,7 @@ ...@@ -629,7 +715,7 @@
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 :地表面积
} }
// 地表面积 // 地表面积
...@@ -643,34 +729,35 @@ ...@@ -643,34 +729,35 @@
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: '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'//替换指北针图片 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", //替换指北针图片
});
} }
// 销毁指南针 // 销毁指南针
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;
...@@ -681,9 +768,9 @@ ...@@ -681,9 +768,9 @@
async function setDark() { async function setDark() {
let option = { let option = {
dark: true, dark: true,
time: 1668009599000 time: 1668009599000,
} };
map.setDark(option) map.setDark(option);
} }
// 取消夜景 // 取消夜景
...@@ -691,72 +778,78 @@ ...@@ -691,72 +778,78 @@
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/d56e53e5e9cd44f4b66188caa15c2089' url: "ws://192.168.60.137:31000/ws/streamer/d56e53e5e9cd44f4b66188caa15c2089",
} };
map.bindVehicle(json) map.bindVehicle(json);
//飞到
let options = {
position: [117.3470556, 39.0027257, 100.12],
orientation: [-90, 0],
};
camera.flyTo(options);
} }
// 删除交通流 // 删除交通流
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": '仿AYZQS001', vehicleId: "仿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": '仿AYZQS001', vehicleId: "仿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',
...@@ -772,19 +865,19 @@ ...@@ -772,19 +865,19 @@
// 清除车辆路径规划 // 清除车辆路径规划
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();
} }
// 创建感知目标物 // 创建感知目标物
...@@ -792,14 +885,14 @@ ...@@ -792,14 +885,14 @@
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:33011/InfoTrans', url: "ws://192.168.60.137:33011/InfoTrans",
} };
perceptualroad.bindObjects(json) perceptualroad.bindObjects(json);
perceptual = true; //是否加载了感知物 perceptual = true; //是否加载了感知物
} }
// 显示感知目标物 // 显示感知目标物
...@@ -822,137 +915,136 @@ ...@@ -822,137 +915,136 @@
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 = deletePerceptualheat; document.getElementById("deletePerceptualheat").onclick =
deletePerceptualheat;
async function deletePerceptualheat() { async function deletePerceptualheat() {
perceptualroad.getPerceptualheat("222").remove() perceptualroad.getPerceptualheat("222").remove();
perceptualshow = false perceptualshow = false;
} }
// 交通热力图宏观效果 // 交通热力图宏观效果
document.getElementById("addPerceptualheatEffect").onclick = addPerceptualheatEffect; document.getElementById("addPerceptualheatEffect").onclick =
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 = removePerceptualheatEffect; document.getElementById("removePerceptualheatEffect").onclick =
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, 10.53], position: [117.325673, 38.996374, 10.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?msgType=3' url: "wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?msgType=3",
}); });
} }
//开始交通事件 //开始交通事件
document.getElementById("addTrafficIncident").onclick = addTrafficIncident; document.getElementById("addTrafficIncident").onclick = addTrafficIncident;
async function addTrafficIncident() { async function addTrafficIncident() {
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 = {
"msgId": "973fcdea-e1ea-4fe7-af1c-9ea4e7b637af", msgId: "973fcdea-e1ea-4fe7-af1c-9ea4e7b637af",
"msgType": "ROADSIDE_TRAFFIC_EVENT", msgType: "ROADSIDE_TRAFFIC_EVENT",
"deviceId": null, deviceId: null,
"collectTime": null, collectTime: null,
"reportTime": 1741777564646, reportTime: 1741777564646,
"receiveTime": null, receiveTime: null,
"message": { message: {
"id": "600354", id: "600354",
"type": "ABNORMAL_PARKING_ALERT", type: "ABNORMAL_PARKING_ALERT",
"type": "9", type: "9",
"name": "异常停车预警", name: "异常停车预警",
"ptcIds": null, ptcIds: null,
"location": [ location: [
{ {
"longitude": 117.32559766689558, longitude: 117.32559766689558,
"latitude": 38.99628656347781, latitude: 38.99628656347781,
"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,
"eventStatus": 0 eventStatus: 0,
} },
} };
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 == 20) { if (index == 20) {
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("removeTrafficIncident").onclick = removeTrafficIncident; document.getElementById("removeTrafficIncident").onclick =
removeTrafficIncident;
async function removeTrafficIncident() { async function removeTrafficIncident() {
trafficIncidentArr.forEach(item => { trafficIncidentArr.forEach((item) => {
map.stopTrafficIncident(item.trafficIncidentId) map.stopTrafficIncident(item.trafficIncidentId);
}) });
} }
//开始历史轨迹 //开始历史轨迹
...@@ -960,55 +1052,96 @@ ...@@ -960,55 +1052,96 @@
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/2a9e3045-8ff6-4da8-970c-8bb1e4ca1ed9' url: "ws://192.168.60.137:31000/ws/streamer/2a9e3045-8ff6-4da8-970c-8bb1e4ca1ed9",
} };
map.bindHistoryVehicle(json) map.bindHistoryVehicle(json);
} }
//结束历史轨迹 //结束历史轨迹
document.getElementById("removeHistoryVehicle").onclick = removeHistoryVehicle; document.getElementById("removeHistoryVehicle").onclick =
removeHistoryVehicle;
async function removeHistoryVehicle() { async function removeHistoryVehicle() {
map.removeHistoryVehicle() map.removeHistoryVehicle();
} }
// 暂停历史轨迹 // 暂停历史轨迹
document.getElementById("pauseHistoryVehicle").onclick = pauseHistoryVehicle; document.getElementById("pauseHistoryVehicle").onclick =
pauseHistoryVehicle;
function pauseHistoryVehicle() { function pauseHistoryVehicle() {
map.pauseHistoryVehicle('21002cc') map.pauseHistoryVehicle("21002cc");
} }
// 重新开始历史轨迹 // 重新开始历史轨迹
document.getElementById("resumeHistoryVehicle").onclick = resumeHistoryVehicle; document.getElementById("resumeHistoryVehicle").onclick =
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() {
let options = { let options = {
color: [255, 0, 0, 1], color: [255, 255, 0, 1],
vehicleId: "鄂A17U5N" vehicleId: "仿AYZQS001", //鄂A17U5N
} };
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options) map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
} }
// 隐藏V2V // 隐藏V2V
document.getElementById("hideV2X").onclick = hideV2X; // document.getElementById("hideV2X").onclick = hideV2X;
function hideV2X() { // function hideV2X() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").hideV2x() // let options = {
} // color: [255, 255, 0, 1],
// vehicleId: "仿AYZQS001", //鄂A17U5N
// };
// map.getVehicle("21e7a9e6d2884122804788dac1e002cc").hideV2x(options);
// }
// 清除V2V // 清除V2V
document.getElementById("removeV2X").onclick = removeV2X; document.getElementById("removeV2X").onclick = removeV2X;
function removeV2X() { function removeV2X() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").stopV2x() let vehicleId = "仿AYZQS001";
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").stopV2x(vehicleId);
} }
</script> // 注册模型点击高亮 modelClickHighLight
document.getElementById("modelClickHighLight").onclick =
modelClickHighLight;
async function modelClickHighLight() {
map.on(map.EventType.ON_EQUIPMENT_CLICKED, pick_model_hightlight);
}
function pick_model_hightlight(e) {
// 取出id
const modelId = e?.result?.Id || "";
console.log("模型点击高亮", e);
if (modelId) {
debugger;
highlightModelId = modelId;
map.setModelHighlight(modelId);
return;
}
console.warn("没有模型Id", e);
}
// 清除模型高亮
document.getElementById("cancelModelHighlight").onclick =
cancelModelHighlight;
function cancelModelHighlight() {
console.log("清除模型高亮", highlightModelId);
if (highlightModelId) {
map.cancelModelHighlight(highlightModelId);
highlightModelId = null;
}
}
// 注销模型点击事件
document.getElementById("modelClickRemove").onclick = modelClickRemove;
function modelClickRemove() {
map.off(map.EventType.ON_EQUIPMENT_CLICKED, pick_model_hightlight);
}
</script>
</html> </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