Skip to content

GitLab

Commit f34e539c authored by heng.zhang3@inzymeits.com's avatar heng.zhang3@inzymeits.com
Browse files

51world示例集合

parent d4557fba
Hide whitespace changes
Inline Side-by-side
gis_sdk/world51/51timapi/Plugins/tim/utils/logs.d.ts 0 → 100644
View file @ f34e539c
export declare const wdpApipStr = "WDPAPI";
gis_sdk/world51/51timapi/Plugins/tim/utils/request-controller.d.ts 0 → 100644
View file @ f34e539c
interface requestManagerType {
requestFunc: (path: string, data: any) => Promise<any>;
requestFuncProtobuff: (path: string, data: any) => Promise<any>;
}
export declare class RequestController implements requestManagerType {
private obj;
constructor(obj: any);
private setOptions;
requestFuncProtobuff(path: string, data: any): Promise<any>;
requestFunc(path: string, data: any): Promise<any>;
requestFuncCustomize(path: string, data: any): Promise<any>;
}
export {};
gis_sdk/world51/51timapi/README.md 0 → 100644
View file @ f34e539c
## 介绍
51timapi是一个交通行业的Wdp插件，其运行依赖于wdpapi
#### 安装
```bash
$ npm i 51timapi --registry http://10.100.10.63/
```
#### 引入
```javascript
import WdpApi from 'wdpapi'
import TimApi from '51timapi'
```
#### 初始化
```javascript
const config = {
"id": "player", //[required] Render scene container(DOM node id)
"url": "http://10.66.8.158:8889/Renderers/Any/order", //[optional] Cloud rendering service address
"order": "cba557541abbdccaed3c2043b7e9db35", //[optional] Rendering order, obtained on the cloud rendering client
"resolution": [ window.screen.width, window.screen.height ], //[optional] Set the cloud rendering output resolution[width, height]
"debugMode": "normal", //[optional] none: does not print logs, normal: normal logs
"keyboard": { //[optional] keyboard event
"normal": false, //[optional] Keyboard event, exclude F1~F12 [default disabled]
"func": false //[optional] Browser F1 ~ F12 function keys [default disabled]
}
}
const App = new WdpApi(config) as WdpApi & TimApi
App.Plugin.Install(TimApi).then(r=>{
App.Renderer.Start().then((res) => {
if (res.success) {
App.Renderer.RegisterEvent([
{
name: 'onVideoStreamLoaded', func: function () {
// 视频流加载成功
}
}
])
}
})
});
/** 停止推流 **/
App.Renderer.Stop();
```
#### 加载 Xodr 高精路网
```javascript
const TrafficOdRoad = new App.TrafficODRoad({
"Online": true, // 是否为离线数据
"AutoFocus": true, // 加载后自动聚焦至路网
"Url": "test.xodr", // 路网地址
"Lon": 116.31,
"Lat": 31.31,
"Height": 20000
})
const res = await App.Scene.Add(TrafficODRoad)
/** 更新车流 **/
TrafficODRoad.Update({
"Url": "ws://10.66.9.186:5681/965" // 符合规范的websocket链接
})
/** 删除车流 **/
TrafficODRoad.Delete()
```
#### 车流
```javascript
/** 创建车流 **/
const TrafficFlow = new App.TrafficFlow({
trafficDataUrl: "ws://10.66.9.186:5681/965" // 符合规范的websocket链接
})
const res = await App.Scene.Add(TrafficFlow)
/** 更新车流 **/
TrafficFlow.Update({
trafficDataUrl: "ws://10.66.9.186:5681/965" // 符合规范的websocket链接
})
/** 删除车流 **/
TrafficFlow.Delete()
/** 获取车流信息 **/
TrafficFlow.GetTrafficFlowInfo()
/** 根据id获取车流中的车辆信息 **/
TrafficFlow.GetTrafficVehicleInfo("v-10") // v-10为车辆ID
/** 获取全量车辆信息 **/
TrafficFlow.GetAllTrafficVehicleInfo() // v-10为车辆ID
/** 车流控制 **/
TrafficFlow.RunTrafficFlowAction({
actionName: "Pause" //车流暂停：Pause；播放：Play；显示：Show；隐藏：Hide；气泡隐藏：HideBubbles；气泡显示：ShowBubbles；开启点击查询：EnableQuery；关闭点击查询：DisableQuery
})
/** 车流气泡控制 **/
TrafficFlow.ToggleBubbles(true) // 打开ture，关闭 false
/** 车流速度包围盒控制 **/
TrafficFlow.ToggleSpeedBox(true) // 打开ture，关闭 false
/** 设置聚焦显示交通体气泡 **/
TrafficFlow.FocusTrafficVehicles(["id1","id2"]) //仅显示当前气泡交通体id的气泡。传空数组表示显示所有气泡
/** 获取聚焦显示交通体id **/
TrafficFlow.GetFocusedTrafficVehicles()
/** 创建历史车流(除下列方法外，其他方法同实时车流) **/
const TrafficHistoryFlow = new App.TrafficHistoryFlow({
trafficDataUrl: "ws://10.66.9.186:5681/965", // 符合规范的websocket链接
isCompare: false // ture 表示对比车流
})
const res = await App.Scene.Add(TrafficHistoryFlow)
/** 历史车流播放控制 **/
TrafficHistoryFlow.Play()
TrafficHistoryFlow.Pause()
TrafficHistoryFlow.Stop()
TrafficHistoryFlow.JumpTo(100) // 跳转到指定时间，车流时间在加载回调中获取
/** 历史车流加载回调 **/
App.Scene.Covering.TrafficFlowHistory.OnProcessControlledTrackTime((res)=>{
console.log("=============OnProcessControlledTrackTime===========", res)
})
/** 交通流统计围栏 **/
const boundary = new App.TrafficFlowBoundary([
{
"boundaryId": "TestId", //围界id（自定义）
"positions": [ //围界顶点
[ 121, 31, 0 ],
[ 121, 31, 0 ],
[ 121, 31, 0 ]
]
},
{
"boundaryId": "TestId2",
"positions": [
[ 121, 31, 0 ],
[ 121, 31, 0 ],
[ 121, 31, 0 ]
]
}
])
const res = await App.Scene.Add(boundary)
/**车流**/
App.Scene.Covering.TrafficFlowBoundary.OnProcessAlertBoundary((res)=>{
console.log("=============OnProcessAlertBoundary===========", res)
})
```
#### 相机
```javascript
/** 点击鼠标跟车 **/
App.TrafficCamAPI.FollowVehicleByClick({
clickToFollow: true,
followMode: "Follower" //None不跟车，Driver驾驶视角，Follower第三人称跟车视角
})
/** 通过车辆ID跟车 **/
App.TrafficCamAPI.FollowVehicleByID({
vehicleId: "", // 车辆ID
followMode: "Follower" //None不跟车，Driver驾驶视角，Follower第三人称跟车视角
})
/** 取消跟车模式 **/
App.TrafficCamAPI.CancelFollowVehicle()
/** 加载桩号文件 **/
App.TrafficCamAPI.LoadTrafficCameraTourData({
"url": "D:/ZS_1.js", //桩号文件路径
"list_id": "1" // 数据ID
})
/** 场景镜头沿桩号文件漫游 **/
App.TrafficCamAPI.StartTrafficCameraTour({
"list_id": "1",
"start_station_name": "ZSK1+181", //漫游起点桩号 ，可置空，置空时将从距离镜头最近的桩号开始漫游
"target_station_name": "ZSK2+533", //漫游终点桩号
"speed": "50", //漫游速度
"time": 1, //总体运动时间（speed缺省时有效）
"height": 5, //镜头高度
"target_offset": [1, 10, 20],//相对终点桩号的偏移量，单位m，车道方向为x轴正方向，上方为z轴正方向，右手坐标系
"rotation": { //镜头角度
"pitch": -10, //俯仰角（0，-90）
"yaw": 0 //偏航角（车道方向为0度，左负右正）
}
})
/** 漫游开始、暂停 **/
App.TrafficCamAPI.UpdateTrafficCameraTour({
"Mode": "Pause" //Pause暂停；play开始；stop停止
})
/** 相机变化回调事件 **/
App.TrafficCamAPI.OnTrafficCamStatusChanged((info) => {
console.log(info)
});
```
#### 高精路网热力图
```javascript
/** 创建高精路网热力图 **/
const TrafficRoadHeatMap = new App.TrafficRoadHeatMap({
openDriveUrl: "v1.xodr", //路网文件路径
densitySettings:
{
mode: "MaxSpeed", //车道最大速度：MaxSpeed;车道内所有车辆平均速度：AvgSpeed;VehCount:车道上的最大车辆数。
min: 10, //阈值下限。当Mode中的统计类型值小于等于LevelMin值时，热力图显示为绿色。
max: 100 //阈值上限。当Mode中的统计类型值大于等于LevelMax值时，热力图显示为红色。
},
offset:[0,0,1000], //位置偏移 xyz，单位：cm
isVisible: false //是否可见
})
const res = await App.Scene.Add(TrafficRoadHeatMap)
/** 更新热力图 **/
TrafficRoadHeatMap.Update({
openDriveUrl: "v1.xodr", //路网文件路径
densitySettings:
{
mode: "MaxSpeed", //车道最大速度：MaxSpeed;车道内所有车辆平均速度：AvgSpeed;VehCount:车道上的最大车辆数。
min: 10, //阈值下限。当Mode中的统计类型值小于等于LevelMin值时，热力图显示为绿色。
max: 100 //阈值上限。当Mode中的统计类型值大于等于LevelMax值时，热力图显示为红色。
},
offset:[0,0,1000], //位置偏移 xyz，单位：cm
isVisible: false //是否可见
})
/** 删除热力图 **/
TrafficRoadHeatMap.Delete()
/** 微观道路热力图 **/
const TrafficRoadHeatMap = new App.TrafficRoadHeatMap({
openDriveUrl: "v1.xodr", //路网文件路径
densitySettings:
{
mode: "MaxSpeed", //车道最大速度：MaxSpeed;车道内所有车辆平均速度：AvgSpeed;VehCount:车道上的最大车辆数。
min: 10, //阈值下限。当Mode中的统计类型值小于等于LevelMin值时，热力图显示为绿色。
max: 100 //阈值上限。当Mode中的统计类型值大于等于LevelMax值时，热力图显示为红色。
},
offset:[0,0,1000], //位置偏移 xyz，单位：cm
isVisible: false //是否可见
})
const res = await App.Scene.Add(TrafficRoadHeatMap)
/** 车道热力图 **/
const TrafficRoadNetworkHeatMap = new App.TrafficRoadNetworkHeatMap({
"RoadMeshDataUrl":"E://Projects//URP0823//NanNing_ortho1.xodr", // 路网文件路径
"HeatMapPointsDataUrl": "ws://10.66.8.162:33021/AnalyzeResult", // 热力图数据地址
"height": 0.25, // 热力图高度
"compare": true // 是否开启对比车流
})
const res = await App.Scene.Add(TrafficRoadNetworkHeatMap)
```
#### GeoJson线段热力图
```javascript
/** 创建GeoJson线段热力图 **/
const TrafficAnalysis = new App.TrafficAnalysis({
"roadDataUrl": "roadDataUrl", // Geojson在线请求地址
"height": 30,
"width": 5,
"field": "fieldKey", // Geojson中需计算的属性
"symbolMap": {
"0": "#00ffff",
"0.5": "#ffff00",
"1": "#ff00ff"
}
});
const res = await App.Scene.Add(TrafficRoadHeatMap)
/** 更新热力图 **/
TrafficAnalysis.Update({
"height": 30,
"width": 5,
"field": "fieldKey", // Geojson中需计算的属性
"symbolMap": {
"0": "#00ffff",
"0.5": "#ffff00",
"1": "#ff00ff"
}
})
/** 删除热力图 **/
TrafficAnalysis.Delete()
```
#### 截面流量统计
```javascript
/** 创建截面流量统计 **/
const TrafficSectionFlow = new App.TrafficSectionFlow({
startLonLat: [],//截面起点
endLonLat: [], //截面终点
opacity: 0, //透明度，取值范围0到1
hexColor: "",//颜色，HEX值
height: 0 //高度
})
const res = await App.Scene.Add(TrafficSectionFlow)
/** 获取截面流量统计 **/
TrafficSectionFlow.GetSectionFlowStatistics()
/** 删除截面 **/
TrafficSectionFlow.Delete()
```
#### 全局设置
```javascript
/** 启用 / 关闭 编辑模式 此模式在下方模型点击回调 OnModelClicked 中有模型信息 **/
App.TimGlobal.toggleEditMode(true);
/** 启用 / 关闭 Gizmo **/
App.TimGlobal.toggleGizmo(true);
/** 加载场景 **/
App.TimGlobal.loadScene('FS'); // 场景名称
```
#### 模型
```javascript
/** 模型加载 **/
const Asset = new App.TimAsset({
"model": {
"sourceType": "Imported", // BuiltIn内置模型, Imported外部导入模型
"url": "http://10.66.8.158:5173/1.fbx" // fbx文件地址
},
"scale": [0,0,0],
"location": [0,0,0],
"rotation": [0,0,0]
})
/** 模型更新 **/
Asset.Update({
"scale": [0,0,0],
})
/** 模型删除 **/
Asset.Delete()
/** 模型设置自定义属性 **/
App?.Scene.Covering.TimAsset.SetCustomProperties({
"params":
{
"customId": "", //自定义ID
"customProperties": { //自定义属性，键值对的key和value可自定义
"P_A": 1,
"D_B": 2
}
},
"eid": "-123456789" //eid
})
/** 通过EID查询自定义ID和属性 **/
App?.Scene.Covering.TimAsset.GetTimModelInfoByEid(eid)
/** 通过EID控制资产功能 **/
App?.Scene.Covering.TimAsset.ModelControl({
type: 'dashboard', // type类型待定
params: {} // params 格式随type类型变化
})
/** 模型材质替换 **/
App?.Scene.Covering.TimAsset.UpdateSelectionMaterial(
{
"materialInfo": {
"materialParams":
{
"textures": {},
"colors": {},
"scalars": {}
},
"sourceType": "BuiltIn",
"assetId": "",
"url": ""
}
}
)
/** 模型加载状态回调 **/
App.Scene.Covering.TimAsset.OnModelProcessState(()=>{
console.log("=============OnModelProcessState===========")
})
/** 开启编辑状态后的模型点击回调 **/
App.Scene.Covering.TimAsset.OnModelProcessState(()=>{
console.log("=============OnModelProcessState===========")
})
/** 加载储存场景 **/
App?.Scene.Covering.TimAsset.LoadTimModelScene()
App?.Scene.Covering.TimAsset.SaveTimModelScene()
App?.Scene.Covering.TimAsset.LoadTimModelSceneOnline()
App?.Scene.Covering.TimAsset.SaveTimModelSceneOnline()
```
## License
Copyright (c) 2023-present, 51WORLD
gis_sdk/world51/51timapi/package.json 0 → 100644
View file @ f34e539c
{
"name": "51timapi",
"version": "1.2.1",
"description": "TimApi is a traffic ralated plugin for WdpApi.",
"type": "module",
"main": "Plugins/tim/index.js",
"types": "Plugins/tim/plugins/tim/index.d.ts",
"files": [
"Plugins/**/*"
],
"unpkg": "Plugins/tim/tim.min.js",
"homepage": "http://superapi.51aes.com/",
"scripts": {
"dev": "rollup -w -c rollup.config.js --environment MODE:dev",
"build": "rollup -c rollup.config.js --environment MODE:prod",
"test": "echo \"Error: no test specified\" && exit 1",
"copy": "cp CimApi/index.js ./ && cp CimApi/index.d.ts ./ && cp CimApi/index.js lib/ && cp CimApi/index.cjs.js lib/ && cp CimApi/index.umd.js lib/ && cp CimApi/wdpApi.min.js lib/",
"build:copy": "npm run build && npm run copy",
"dev:tim": "rollup -w -c rollup-tim.config.js --environment MODE:dev",
"build:tim": "rollup -w -c rollup-tim.config.js --environment MODE:prod"
},
"repository": {
"type": "git",
"url": "http://gitlab.51cloud.local/paas/wdpapi.git"
},
"keywords": [
"51WORLD",
"51AES",
"51Cloud",
"51WDP",
"51TIM",
"51Sim"
],
"author": {
"name": "51TIM"
},
"license": "MIT",
"dependencies": {
"axios": "^0.27.2",
"cloudapi": "1.5.0",
"crypto-js": "^4.1.1",
"socket.io-client": "^4.5.4",
"uuid": "^9.0.0",
"webrtc-adapter": "^8.1.2"
},
"devDependencies": {
"@babel/core": "^7.20.12",
"@babel/plugin-external-helpers": "^7.18.6",
"@babel/plugin-transform-runtime": "^7.19.6",
"@babel/preset-env": "^7.20.2",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^24.0.0",
"@rollup/plugin-eslint": "^9.0.1",
"@rollup/plugin-json": "^6.0.0",
"@rollup/plugin-node-resolve": "^15.0.1",
"@rollup/plugin-strip": "^3.0.2",
"@rollup/plugin-terser": "^0.3.0",
"@rollup/plugin-typescript": "^11.0.0",
"@typescript-eslint/eslint-plugin": "^5.48.1",
"@typescript-eslint/parser": "^5.48.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"core-js": "^3.27.1",
"eslint": "^8.31.0",
"prettier": "^2.8.2",
"rollup": "^3.9.1",
"rollup-plugin-node-builtins": "^2.1.2",
"rollup-plugin-node-externals": "^5.1.0",
"rollup-plugin-node-globals": "^1.4.0",
"tslib": "^2.6.2",
"typescript": "^4.9.4",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"
}
}
gis_sdk/world51/wdpApi.min.js 0 → 100644
View file @ f34e539c
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html 0 → 100644
View file @ f34e539c
<html>
<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">
<style>
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
}
#btn-list {
position: fixed;
left: 0;
top: 0;
z-index: 1;
padding: 14px;
line-height: 40px;
}
#btn-list>div>[type="button"] {
background: rgb(59, 98, 226);
color: #fff;
border: 0;
padding: 4px 6px;
border-radius: 4px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
<body>
<div id="btn-list">
<div>
<input type="button" id="getZoomAndCenter" value="获取地图中心点和级别" />
<input type="button" id="setZoomAndCenter" value="设置地图中心点和级别" />
</div>
<div>
<input type="button" id="lockMap" value="限制地图显示范围和级别" />
<input type="button" id="unlockMap" value="解锁地图显示范围和级别" />
</div>
<div>
<input type="button" id="flyTo" value="设置相机" />
<input type="button" id="getCameraView" value="获取相机参数" />
<input type="button" id="addCameraEvent" value="监听相机参数" />
<input type="button" id="removeCameraEvent" value="移除相机监听事件" />
</div>
<div>
<input type="button" id="startFly" value="开始相机导览" />
<input type="button" id="pauseFly" value="暂停相机导览" />
<input type="button" id="resuFly" value="继续相机导览" />
<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="注销鼠标点击事件" />
</div>
<div>
<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>
<div>
<input type="button" id="addMarker" value="添加路口标签" />
<input type="button" id="showMarker" value="显示标签" />
<input type="button" id="hideMarker" value="隐藏标签" />
<input type="button" id="removeMarker" value="删除标签" />
</div>
<div>
<input type="button" id="startRsu" value="开始Rsu特效" />
<input type="button" id="stopRsu" value="停止Rsu特效" />
<input type="button" id="hideRsu" value="隐藏Rsu特效" />
<input type="button" id="showRsu" value="显示Rsu特效" />
</div>
<div>
<input type="button" id="rain" value="开始下雨" />
<input type="button" id="stopRain" value="停止下雨" />
<input type="button" id="snow" value="开始下雪" />
<input type="button" id="stopSnow" value="停止下雪" />
<input type="button" id="fog" value="雾" />
<input type="button" id="stopFog" value="清除雾" />
</div>
<div>
<input type="button" id="point" value="绘制点" />
<input type="button" id="polyline" value="绘制线" />
<input type="button" id="polygon" value="绘制面" />
<input type="button" id="remove" value="清除绘制" />
</div>
<div>
<input type="button" id="start1" value="坐标点" />
<input type="button" id="start2" value="直线测量" />
<input type="button" id="start6" value="地表面积" />
<input type="button" id="stopMeasurement" value="停止量算" />
</div>
<div>
<input type="button" id="toNorth" value="显示指北针" />
<input type="button" id="hideNorth" value="移除指北针" />
</div>
<div>
<input type="button" id="setDark" value="夜景" />
<input type="button" id="setday" value="取消夜景" />
</div>
<div>
<input type="button" id="addTrafficFlow" value="联网车辆渲染" />
<input type="button" id="removeTrafficFlow" value="清除联网车辆" />
<input type="button" id="focusCar1" value="定位车辆（第一人称）" />
<input type="button" id="focusCar3" value="定位车辆（第三人称）" />
<input type="button" id="focusNoneCar" value="清除定位" />
</div>
<div>
<input type="button" id="loadarrowLineLaye" value="加载车辆路径规划" />
<input type="button" id="hideRoute" value="显示车辆路径规划" />
<input type="button" id="showRoute" value="隐藏车辆路径规划" />
<input type="button" id="cleanarrowLineLaye" value="清除车辆路径规划" />
</div>
<div>
<input type="button" id="loadPerceptual" value="感知目标物渲染" />
<input type="button" id="showPerceptual" value="显示感知目标物" />
<input type="button" id="hidePerceptual" value="隐藏感知目标物" />
<input type="button" id="removePerceptual" value="清除感知目标物" />
<input type="button" id="addPerceptualheat" 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="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="removeTrafficIncident" 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="重新开始历史轨迹" />
</div>
<div>
<input type="button" id="startV2X" value="开始V2X" />
<input type="button" id="hideV2X" value="隐藏V2X" />
<input type="button" id="removeV2X" value="清除V2X" />
</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="./pathplan.js"></script>
</head>
<script>
var map;
var layer;
var road;
var camera; // 相机
var rsuArr = [];
var drawControl; // 量算
var measureControl; // 量算
var compassItem = null; // 指北针
var perceptualroad = null;
var perceptual = false; //是否加载了感知物
var perceptualshow = false;//热力图否显示
var trafficIncidentArr = [];//热力图否显示
var handler = (e) => {
alert(JSON.stringify(e))
};
initMap("51world")
async function initMap(gis_sdk) {
var url = "http://localhost:3000/hdmap-platform/gateway/cmap2"
var secretKey = "10b79c61bf1b42e2";
var config = {
gis_sdk: gis_sdk
}
config.gis_sdk = gis_sdk;
map = await CMapLoader.loadMap("main-container", config, url, secretKey);
await map.initMap();//地图加载
drawControl = map.getControl(1); //类型 1 ：绘制 2：量算
measureControl = map.getControl(2); //类型 1 ：绘制 2：量算
camera = map.getCamera()
road = map.initRoads({
id: '1600840132389756930'
});
}
// 创建停止线
// document.getElementById("CreateTIMSignal").onclick = CreateTIMSignal;
async function CreateTIMSignal() {
const options = [
{
id: '1001',
startPosition: [117.31884370955275, 38.989795506281467],
endPosition: [117.31890374051923, 38.989940666684802]
},
{
id: '1002',
startPosition: [117.31886370955275, 38.989795506281467],
endPosition: [117.31892374051923, 38.989940666684802]
}
]
road.addSignalStopLine(options)
var focusjsondata = {
"longitude": 117.318852,
"latitude": 38.989403,
"height": 15,
}
map.setZoomAndCenter(focusjsondata)
}
// 删除停止线
// document.getElementById("DeleteTIMSignal").onclick = DeleteTIMSignal;
async function DeleteTIMSignal() {
road.removeSignalStopLine()
}
// 获取地图中心点和级别
document.getElementById("getZoomAndCenter").onclick = getZoomAndCenter;
async function getZoomAndCenter() {
var points = await map.getZoomAndCenter()
alert(JSON.stringify(points))
}
// 设置地图中心点和级别
document.getElementById("setZoomAndCenter").onclick = setZoomAndCenter;
function setZoomAndCenter() {
var options = {
"longitude": 117.31884370955275,
"latitude": 38.989795506281467,
"height": 527.966445,
"zoom": 16
}
map.setZoomAndCenter(options)
}
// 限制地图显示范围和级别
document.getElementById("lockMap").onclick = lockMap;
function lockMap() {
var options = {
xmin: 117.31000,
ymin: 38.842072,
zmin: 500,
xmax: 117.37358,
ymax: 39.109915,
zmax: 15000
}
var points = map.lockMap(options)
}
// 解锁地图显示范围和级别
document.getElementById("unlockMap").onclick = unlockMap;
function unlockMap() {
map.unlockMap()
}
// 获取相机参数
document.getElementById("getCameraView").onclick = getCameraView;
async function getCameraView() {
var points = await camera.getCameraView()
alert(JSON.stringify(points))
}
// 监听相机参数变化
document.getElementById("addCameraEvent").onclick = addCameraEvent;
function addCameraEvent() {
camera.addCameraEvent('changed', (e) => {
alert(JSON.stringify(e))
});
}
// 移除相机参数监听事件
document.getElementById("removeCameraEvent").onclick = removeCameraEvent;
function removeCameraEvent() {
camera.removeCameraEvent('changed');
}
// 设置相机
document.getElementById("flyTo").onclick = flyTo;
function flyTo() {
var options = {
position: [117.3670360408276, 39.00412281044355, 276.84],
orientation: [0, -90],
}
camera.flyTo(options)
}
// 开始相机导览
document.getElementById("startFly").onclick = startFly;
function startFly() {
const options = {
id: "startFly1",
pathList: [
{
cameraState: {
"longitude": 117.31875105674682,
"latitude": 38.98881187638633,
"height": 16.151980453069932,
"pitch": -3,
"heading": -89.45378112792969
},
time: 10
},
{
cameraState: {
"longitude": 117.31839940049078,
"latitude": 38.99208154792654,
"height": 100.212235805514,
"pitch": -29.176807403564453,
"heading": 37.64432144165039
},
time: 10
},
{
cameraState: {
"longitude": 117.32332105679387,
"latitude": 38.99363368117575,
"height": 110.1469806258995,
"pitch": -33.12812805175781,
"heading": 130.16888427734375
},
time: 10
},
]
}
camera.startFly(options)
}
// 暂停相机导览
document.getElementById("pauseFly").onclick = pauseFly;
function pauseFly() {
camera.pauseFly()
}
// 继续相机导览
document.getElementById("resuFly").onclick = resuFly;
function resuFly() {
camera.resuFly()
}
// 结束相机导览
document.getElementById("stopFly").onclick = stopFly;
function stopFly() {
camera.stopFly()
}
// 地图变化事件
document.getElementById("addMapChangeEvent").onclick = addMapChangeEvent;
function addMapChangeEvent() {
map.on(map.EventType.MAP_CHANGE, handler)
}
// 注销地图变化事件
document.getElementById("removeMapChangeEvent").onclick = removeMapChangeEvent;
function removeMapChangeEvent() {
map.off(map.EventType.MAP_CHANGE, handler);
}
// 注册鼠标点击事件
document.getElementById("addMouseClickEvent").onclick = addMouseClickEvent;
function addMouseClickEvent() {
map.on(map.EventType.LEFT_CLICK, handler)
}
// 注销鼠标点击事件
document.getElementById("removeMouseClickEvent").onclick = removeMouseClickEvent;
function removeMouseClickEvent() {
map.off(map.EventType.LEFT_CLICK, handler);
}
// 注册模型点击事件
let clickModel = null;
let pick_model_handler = (e) => {
if (e) {
pickModel = map.getModel(e);
if (pickModel) {
// 高亮
pickModel.highLight();
var content = content = {
popupSize: [200, 200],
imagePath: `@path:images/radar_online.png`,
popupURL: `http://172.29.128.30:65535/yizhuangDevicePopup.html?name=汽车&brand=厂商&code=型号&mode=通信模式`
};
pickModel.showPopup(content);
}
}
};
document.getElementById("addModelClickEvent").onclick = addModelClickEvent;
async function addModelClickEvent() {
if (!clickModel) {
let option = {
"id": "model1", //对象ID
"url": 'SM_VEH_Bus_02_01',
"position": [117.318863, 38.989795, 4],//坐标
"rotation": [0, 0, 190],
}
clickModel = await map.addModel(option);
clickModel.focusModel();
}
map.on(map.EventType.PICK_MODEL, pick_model_handler)
}
// 注销模型点击事件
document.getElementById("removeModelClickEvent").onclick = removeModelClickEvent;
async function removeModelClickEvent() {
map.off(map.EventType.PICK_MODEL, pick_model_handler);
}
// 取消模型高亮
document.getElementById("cancleHighLight").onclick = cancleHighLight;
function cancleHighLight() {
pickModel.cancleHighLight();
}
// 取消模型弹窗
document.getElementById("removePopup").onclick = removePopup;
function removePopup() {
pickModel.removePopup();
}
// 添加路口标签
document.getElementById("addMarker").onclick = addMarker;
async function addMarker() {
var options = {
id: "marker",
name: '一号路口',
textColor: [255, 215, 0, 1],
fontSize: '16',
position: [117.318863, 38.98979], //设置Marker位置
imageSize: [184, 126], //[1.5,1.6]
textOffset: [50, 50],//[0, -140]
image: "http://wdpapi.51aes.com/doc-static/images/static/markerNormal.png",//mapbox图片
iconOffset: [0, -80] //mapbox图标的偏移
}
// 添加路口标签
marker = await map.addMarkerOverlay(options);
// 定位到路口标签
map.zoomToOverlay(marker);
}
// 显示标签
document.getElementById("showMarker").onclick = showMarker;
async function showMarker() {
map.showOverlay(marker);
}
// 隐藏标签
document.getElementById("hideMarker").onclick = hideMarker;
function hideMarker() {
map.hideOverlay(marker)
}
// 删除标签
document.getElementById("removeMarker").onclick = removeMarker;
async function removeMarker() {
map.removeOverlay(marker)
}
// 开始Rsu特效
document.getElementById("startRsu").onclick = startRsu;
function startRsu() {
var data =
[
{
"equipmentCode": "S-LC-2503",//编号
"longitude": 117.318166,
"latitude": 38.98827,
"height": 5,
"radius": 20,//辐射圈的大小，这个字段目前是晶众使用有效
},
{
"equipmentCode": "S-LC-2504",//编号
"longitude": 117.319236,
"latitude": 38.98829,
"height": 5,
"radius": 20,//辐射圈的大小，这个字段目前是晶众使用有效
}
]
rsuArr = road.startRsu(data)
}
// 停止Rsu特效
document.getElementById("stopRsu").onclick = stopRsu;
function stopRsu() {
road.stopRsu()
}
// 隐藏Rsu特效
document.getElementById("hideRsu").onclick = hideRsu;
function hideRsu() {
road.hideRsu()
}
// 显示Rsu特效
document.getElementById("showRsu").onclick = showRsu;
function showRsu() {
road.showRsu()
}
// 开始下雨
document.getElementById("rain").onclick = rain;
async function rain() {
map.addRainEffect({
speed: 0.5, // 速度，取值范围:[0~1]，默认为0.5
size: 0.5, // 大小，取值范围:[0~1]，默认为0.5
density: 0.5 // 密度，取值范围:[0~1]，默认为0.5
});
}
// 停止下雨
document.getElementById("stopRain").onclick = stopRain;
async function stopRain() {
map.stopRainEffect();
}
// 开始下雪
document.getElementById("snow").onclick = snow;
async function snow() {
map.addSnowEffect({
speed: 0.5, // 速度，取值范围:[0~1]，默认为0.5
size: 0.5, // 大小，取值范围:[0~1]，默认为0.5
density: 0.5 // 密度，取值范围:[0~1]，默认为0.5
});
}
// 停止下雪
document.getElementById("stopSnow").onclick = stopSnow;
async function stopSnow() {
map.stopSnowEffect();
}
// 雾
document.getElementById("fog").onclick = fog;
async function fog() {
map.addFogEffect();
}
// 清除雾
document.getElementById("stopFog").onclick = stopFog;
async function stopFog() {
map.stopFogEffect();
}
// 绘制点
document.getElementById("point").onclick = point;
function point() {
drawControl.startDraw({
type: 'point'
}, function (e) {
console.log(e)
})
}
// 绘制线
document.getElementById("polyline").onclick = polyline;
async function polyline() {
drawControl.startDraw({
type: 'polyline',
lineColor: [255, 246, 45, 0.5],
width: 1
}, function (e) {
console.log(e)
})
}
// 绘制面
document.getElementById("polygon").onclick = polygon;
async function polygon() {
drawControl.startDraw({
type: 'polygon',
fill: [255, 246, 45, 0.5],
lineColor: [0, 255, 0, 0.5],
}, function (e) {
console.log(e)
})
}
// 清除绘制
document.getElementById("remove").onclick = remove;
async function remove() {
drawControl.stopDraw();
}
// 坐标点
document.getElementById("start1").onclick = start1;
async function start1() {
measureControl.startMeasurement(1) //1:坐标点 2:直线测量 6 :地表面积
}
// 直线测量
document.getElementById("start2").onclick = start2;
async function start2() {
measureControl.startMeasurement(2, {
pointSize: 4, // 点大小
pointColor: [33, 176, 219], // 点颜色
textSize: 16, // 文字大小
textColor: [239, 76, 41], // 文字颜色
lineWidth: 2, // 线宽度
lineColor: [33, 176, 219], // 线颜色
}) //1:坐标点 2:直线测量 6 :地表面积
}
// 地表面积
document.getElementById("start6").onclick = start6;
async function start6() {
measureControl.startMeasurement(6, {
pointSize: 4, // 点大小
pointColor: [33, 176, 219], // 点颜色
textSize: 16, // 文字大小
textColor: [239, 76, 41], // 文字颜色
lineColor: [33, 176, 219], // 边框颜色
lineWidth: 2, // 边框宽度
fillColor: [33, 176, 219], // 线颜色
}) //1:坐标点 2:直线测量 6 :地表面积
}
// 停止量算
document.getElementById("stopMeasurement").onclick = stopMeasurement;
async function stopMeasurement() {
measureControl.stopMeasurement()
}
// 创建指北针
document.getElementById("toNorth").onclick = toNorth;
async function toNorth() {
if (compassItem) return
// 绑定指北针
compassItem = new map.widgets.Compass({
position: {
left: '20px',
top: '60px'
},
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'//替换指北针图片
})
}
// 销毁指南针
document.getElementById("hideNorth").onclick = hideNorth;
async function hideNorth() {
if (!compassItem) return
// 销毁
compassItem.destroy();
compassItem = null;
}
// 设置夜景
document.getElementById("setDark").onclick = setDark;
async function setDark() {
let option = {
dark: true,
time: 1668009599000
}
map.setDark(option)
}
// 取消夜景
document.getElementById("setday").onclick = setday;
async function setday() {
let option = {
dark: false,
time: 1667966400000
}
map.setDark(option)
}
// 创建交通流
document.getElementById("addTrafficFlow").onclick = addTrafficFlow;
async function addTrafficFlow() {
const json = {
id: '21e7a9e6d2884122804788dac1e002cc',
url: 'ws://192.168.60.137:31000/ws/streamer/d56e53e5e9cd44f4b66188caa15c2089'
}
map.bindVehicle(json)
}
// 删除交通流
document.getElementById("removeTrafficFlow").onclick = removeTrafficFlow;
async function removeTrafficFlow() {
map.removeVehicles()
}
// 定位车辆（第一人称）
document.getElementById("focusCar1").onclick = focusCar1;
async function focusCar1() {
let options = {
"vehicleId": '仿AYZQS001',
"perspective": 1 // 1第一人称视角、3第三人称视角
}
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").focusVehicle(options)
}
// 定位车辆（第三人称）
document.getElementById("focusCar3").onclick = focusCar3;
async function focusCar3() {
let options = {
"vehicleId": '仿AYZQS001',
"perspective": 3 // 1第一人称视角、3第三人称视角
}
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").focusVehicle(options)
}
// 清除定位
document.getElementById("focusNoneCar").onclick = focusNoneCar;
async function focusNoneCar() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").unfocusVehicle()
}
// 加载车辆路径规划
document.getElementById("loadarrowLineLaye").onclick = loadarrowLineLaye;
function loadarrowLineLaye() {
let timestamp = 1739419194500
var pp = []
for (var key in roadPoints) {
timestamp = timestamp + 2000
let tt = {
"vid": "1",
"vmodel": "1020001",
"vtype": "0",
"coord": roadPoints[key][0] + ',' + roadPoints[key][1] + ',' + '0.00',
"speed": 46.92,
"timestamp": timestamp
}
pp.push(tt)
}
console.log(pp)
//行驶路线
// var option = {
// "id": '1604729991369719809',
// "vehicleId": '津A78F30',
// "coordinates": roadPoints,
// "height": 21,
// "width": 28,
// "color": "red" //red green yellow
// }
// map.getVehicle("21e7a9e6d2884122804788dac1e002cc").addRoute(option) //初始化行驶路线
}
// 清除车辆路径规划
document.getElementById("cleanarrowLineLaye").onclick = cleanarrowLineLaye;
function cleanarrowLineLaye() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").removeRoute()
}
// 显示车辆路径规划
document.getElementById("showRoute").onclick = showRoute;
function showRoute() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").showRoute()
}
// 隐藏车辆路径规划
document.getElementById("hideRoute").onclick = hideRoute;
function hideRoute() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").hideRoute()
}
// 创建感知目标物
document.getElementById("loadPerceptual").onclick = loadPerceptual;
async function loadPerceptual() {
if (perceptualroad == null) {
perceptualroad = map.initRoads({
id: '123456789'
});
}
const json = {
id: '111',//ID
url: 'ws://192.168.60.137:33011/InfoTrans',
}
perceptualroad.bindObjects(json)
perceptual = true; //是否加载了感知物
}
// 显示感知目标物
document.getElementById("showPerceptual").onclick = showPerceptual;
async function showPerceptual() {
perceptualroad.getObject("111").show();
}
// 隐藏感知目标物
document.getElementById("hidePerceptual").onclick = hidePerceptual;
async function hidePerceptual() {
perceptualroad.getObject("111").hide();
}
// 删除感知目标物
document.getElementById("removePerceptual").onclick = removePerceptual;
async function removePerceptual() {
perceptualroad.getObject("111").remove();
perceptual = false; //是否加载了感知物
}
// 添加交通热力图
document.getElementById("addPerceptualheat").onclick = addPerceptualheat;
async function addPerceptualheat() {
const json = {
id: '222',//ID
height: '10',//高度
opacity: '0.75',//透明度
dataUrl: 'D://51world//rlt//hdmap1.4(GCJ02_Ortho)_v2.xodr',//文件地址
url: 'ws://192.168.60.137:33021/AnalyzeResult',//ws地址
colorSymbols: [
{ "minSpeed": 0, "maxSpeed": 30, "color": "#FF0000" },
{ "minSpeed": 30, "maxSpeed": 60, "color": "#FFFF00" },
{ "minSpeed": 60, "maxSpeed": 90, "color": "#0000FF" },
{ "minSpeed": 90, "maxSpeed": 200, "color": "#00FF00" }
] //颜色
}
perceptualroad.bindPerceptualheat(json)
perceptualshow = true
}
// 删除交通热力图
document.getElementById("deletePerceptualheat").onclick = deletePerceptualheat;
async function deletePerceptualheat() {
perceptualroad.getPerceptualheat("222").remove()
perceptualshow = false
}
// 交通热力图宏观效果
document.getElementById("addPerceptualheatEffect").onclick = addPerceptualheatEffect;
async function addPerceptualheatEffect() {
if (!perceptual) {
loadPerceptual()//加载感知物
}
map.on(map.EventType.MAP_CHANGE, PerceptualheatEffecthandler)
}
PerceptualheatEffecthandler = (e) => {
let result = JSON.stringify(e)
console.log("高度为====" + e.height)
if (e.height > 500) {
hidePerceptual()
if (!perceptualshow) {
addPerceptualheat()
}
} else {
showPerceptual()
if (perceptualshow) {
deletePerceptualheat()
}
}
};
// 移除交通热力图宏观效果
document.getElementById("removePerceptualheatEffect").onclick = removePerceptualheatEffect;
async function removePerceptualheatEffect() {
map.off(map.EventType.MAP_CHANGE, PerceptualheatEffecthandler);
removePerceptual()
deletePerceptualheat()
}
//添加信号灯
document.getElementById("addSignal").onclick = addSignal;
function addSignal() {
let options = {
position: [117.325673, 38.996374, 10.53],
orientation: [-34.930073, -44.426579]
}
camera.flyTo(options)
road.initSignals({
id: '51worldinitSignals',//ID
url: 'wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?msgType=3'
});
}
//开始交通事件
document.getElementById("addTrafficIncident").onclick = addTrafficIncident;
async function addTrafficIncident() {
let options = {
position: [117.325401, 38.996133, 28.12],
orientation: [-34.930073, -44.426579]
}
camera.flyTo(options)
const json = {
"msgId": "973fcdea-e1ea-4fe7-af1c-9ea4e7b637af",
"msgType": "ROADSIDE_TRAFFIC_EVENT",
"deviceId": null,
"collectTime": null,
"reportTime": 1741777564646,
"receiveTime": null,
"message": {
"id": "600354",
"type": "ABNORMAL_PARKING_ALERT",
"type": "9",
"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,
"eventStatus": 0
}
}
trafficIncidentArr = await map.renderTrafficIncident(json)
console.log("tc.................", trafficIncidentArr)
let index = 0;
const timer = setInterval(async () => {
if (index == 20) {
json.endTime = 1741777564646
trafficIncidentArr = await map.renderTrafficIncident(json)
clearInterval(timer)
}
index++;
}, 200)
}
//结束交通事件
document.getElementById("removeTrafficIncident").onclick = removeTrafficIncident;
async function removeTrafficIncident() {
trafficIncidentArr.forEach(item => {
map.stopTrafficIncident(item.trafficIncidentId)
})
}
//开始历史轨迹
document.getElementById("bindHistoryVehicle").onclick = bindHistoryVehicle;
async function bindHistoryVehicle() {
let options = {
position: [117.36914548090871335, 39.01187038664559026, 100.12],
orientation: [-90, 0]
}
camera.flyTo(options)
const json = {
id: '21002cc',
url: 'ws://192.168.60.137:31000/ws/streamer/2a9e3045-8ff6-4da8-970c-8bb1e4ca1ed9'
}
map.bindHistoryVehicle(json)
}
//结束历史轨迹
document.getElementById("removeHistoryVehicle").onclick = removeHistoryVehicle;
async function removeHistoryVehicle() {
map.removeHistoryVehicle()
}
// 暂停历史轨迹
document.getElementById("pauseHistoryVehicle").onclick = pauseHistoryVehicle;
function pauseHistoryVehicle() {
map.pauseHistoryVehicle('21002cc')
}
// 重新开始历史轨迹
document.getElementById("resumeHistoryVehicle").onclick = resumeHistoryVehicle;
function resumeHistoryVehicle() {
map.resumeHistoryVehicle('21002cc')
}
// 开始V2V
document.getElementById("startV2X").onclick = startV2X;
function startV2X() {
let options = {
color: [255, 0, 0, 1],
vehicleId: "鄂A17U5N"
}
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options)
}
// 隐藏V2V
document.getElementById("hideV2X").onclick = hideV2X;
function hideV2X() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").hideV2x()
}
// 清除V2V
document.getElementById("removeV2X").onclick = removeV2X;
function removeV2X() {
map.getVehicle("21e7a9e6d2884122804788dac1e002cc").stopV2x()
}
</script>
</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