介绍

51timapi是一个交通行业的Wdp插件，其运行依赖于wdpapi

安装

$ npm i 51timapi --registry http://10.100.10.63/

引入

import WdpApi from 'wdpapi'
import TimApi from '51timapi'

初始化

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 高精路网

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()

车流

/** 创建车流 **/
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.FocusTrafficVehicles(["id1","id2"]) //仅显示当前气泡交通体id的气泡。传空数组表示显示所有气泡

/** 获取聚焦显示交通体id **/
TrafficFlow.GetFocusedTrafficVehicles()

跟车

/** 点击鼠标跟车 **/
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.OnTrafficCamStatusChanged((info) => {
    console.log(info)
});

高精路网热力图

/** 创建高精路网热力图 **/
const TrafficRoadHeatMap = new App.TrafficRoadHeatMap({
    openDriveUrl: "v1.xodr", //路网文件路径
    densitySettings:
        {
            mode: "MaxSpeed",  //车道最大速度：MaxSpeed;车道内所有车辆平均速度：AvgSpeed;VehCount:车道上的最大车辆数。
            min: 10, //阈值下限。当Mode中的统计类型值小于等于LevelMin值时，热力图显示为绿色。
            max: 100 //阈值上限。当Mode中的统计类型值大于等于LevelMax值时，热力图显示为红色。
        },
    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值时，热力图显示为红色。
        },
    isVisible: false //是否可见
})

/** 删除热力图 **/
TrafficRoadHeatMap.Delete()

GeoJson线段热力图

/** 创建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()

截面流量统计

/** 创建截面流量统计 **/
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()

全局设置

/** 启用 / 关闭 编辑模式 此模式在下方模型点击回调 OnModelClicked 中有模型信息 **/
App.TimGlobal.toggleEditMode(true);

/** 启用 / 关闭 Gizmo **/
App.TimGlobal.toggleGizmo(true);

模型

/** 模型加载 **/
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.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