MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MCHMAP > 点光源(多点光源)

点光源（多点光源）

  1. 初始化

const lightManager = new MultiLightManager(viewer, position);

参数说明

@param {Cesium.Viewer} viewer - Cesium场景主视图实例

@param {Object} options - 初始化配置项

@param {number} options.lightRadius - 全局光源照射半径（默认1000）

@param {Cesium.Cartesian3} options.lightPositions - 初始光源坐标

@param {string} options.lightColors - 初始光源基础颜色，默认rgba(0, 255, 0, 1.0)

@param {Boolean} options.openEvent - 是否开启鼠标点击添加光源交互事件

// 极简调用

const lightManager = new MultiLightManager(viewer, position);

lightManager.loadTilesetWithLight(modelKey,tilesetUrl,heightOffset,initLightPositions)

.then(tileset => {

    console.log("模型加载完成，光照自动绑定", tileset);

});

 

  1. loadTilesetWithLight()加载模型光源

lightManager.loadTilesetWithLight(modelKey,tilesetUrl,heightOffset,initLightPositions);

参数说明：

@param {string} modelKey - 模型唯一标识key

@param {string} tilesetUrl - 3DTiles瓦片服务地址

@param {number} heightOffset - 模型整体抬高高度

@param {Array<Array<number>>} initLightPositions - 初始光源经纬度高程二维数组 [[lng,lat,h],...]

@returns {Promise<Cesium.Cesium3DTileset>} 加载完成Promise，返回瓦片对象

实例：

// 加载3D模型 - 西安大雁塔

const modelConfig = {

    key: "model_3DTiles",

    url: "https://data.mars3d.cn/3dtiles/qx-dyt/tileset.json",

    offsetHeight: 418,

    lightPoints: [

        [108.9609523426839, 34.2197675338844, 405.4394307382153],

        [108.95903168207607, 34.218504290125374, 407.8689031553821]

    ]

};

// 调用封装方法

lightManager.loadTilesetWithLight(

    modelConfig.key,

    modelConfig.url,

    modelConfig.offsetHeight,

    modelConfig.lightPoints

).then(tileset => {

    console.log("模型加载完成，光照自动绑定", tileset);

});

 

  1. toggleLightVisible()显隐切换

lightManager.toggleLightVisible(index); //index - 光源下标索引

 

  1. setAllLightsVisible()所有光源显隐设置

显示：lightManager.setAllLightsVisible(true);

隐藏：lightManager.setAllLightsVisible(false);

 

  1. flyToLight()聚焦指定光源

lightManager.flyToLight(index,duration,range);

参数说明：

@param {number} index - 目标光源下标

@param {number} duration - 飞行动画时长，单位秒，默认2s

@param {number} range - 相机距离光源直线距离，单位米，默认200米

 

  1. flyToAllLights()聚焦全部有效光源

lightManager.flyToAllLights(duration,scale,minRange);

参数说明：

@param {number} duration 动画时长，默认2秒

@param {number} scale 包围盒放大系数，预留取景边距，默认2.5倍

@param {number} minRange 最小安全观测距离，默认150米，光源聚集时兜底

 

  1. destroy()销毁

lightManager.destroy(index);//index - 光源下标索引

 

  1. destroyAll()批量销毁

lightManager.destroyAll();

 

  1. 完整代码实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium点光源效果（多点光源）</title>
    <script src="https://mhc.ixiera.com/mhc/main_min.js"></script>
    <script src="https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js"></script>
    <script src="https://mhc.ixiera.com/mhc/Cesium3DTile.js"></script>
    <script src="js/MultiLightManager.min.js"></script>
    <style type="text/css">
        body{width: 100vw;height: 100vh;display: block;overflow: hidden;position: relative;}
        .cesium-viewer, 
        .cesium-viewer-cesiumWidgetContainer, 
        .cesium-widget, 
        .cesium-widget canvas{width: 100%;height: 100%;}
        .btns-row{position: absolute; top: 15px;left: 15px;}
        .btns-row .item-row{margin-bottom: 10px;}
        .btns-row .item-row input{line-height: 30px;padding: 0px 10px;}
        .btns-row button{min-width: 100px;height: 30px; padding: 0 8px; border-radius: 2px;margin-right: 15px;font-size: 12px;}
    </style>
</head>

<body>
    <!-- Cesium容器 -->
    <div id="cesiumContainer" style="width: 100vw;height: 100vh;display: block;overflow: hidden;"></div>
    <div class="btns-row">
        <div class="item-row">
            <button onclick="render()">单个显隐切换</button>
            <button onclick="render2()">全部显隐切换</button>
            <button onclick="render3()">聚焦单个光源</button>
            <button onclick="render4()">聚焦全部光源</button>
            <button onclick="render5()">删除指定光源</button>
            <button onclick="render6()">删除全部光源</button>
        </div>
    </div>
    <!-- 引入多光源管理器 -->
    <script type="text/javascript">
        // 初始化地图
        MchCesium.init('cesiumContainer', true);
        const viewer = MchCesium.viewer;
        
        // 创建多光源管理器实例
        const lightManager = new MultiLightManager(viewer, {
            lightRadius: 80, //光源半径
            openEvent: true
        });
        
        // 加载3D模型 - 西安大雁塔
        const modelConfig = {
            key: "model_3DTiles",
            url: "https://data.mars3d.cn/3dtiles/qx-dyt/tileset.json",
            offsetHeight: 418,
            lightPoints: [
                [108.9609523426839, 34.2197675338844, 405.4394307382153],
                [108.95903168207607, 34.218504290125374, 407.8689031553821]
            ]
        };
        // 调用封装方法
        lightManager.loadTilesetWithLight(
            modelConfig.key,
            modelConfig.url,
            modelConfig.offsetHeight,
            modelConfig.lightPoints
        ).then(tileset => {
            console.log("模型加载完成，光照自动绑定", tileset);
        });
        
        function render(){
            lightManager.toggleLightVisible(0);
        }
        var isALLshow = true;
        function render2(){
            isALLshow = !isALLshow;
            lightManager.setAllLightsVisible(isALLshow);
        }
        function render3(){
            lightManager.flyToLight(1, 2);
        }
        function render4(){
            lightManager.flyToAllLights();
        }
        function render5(){
            lightManager.destroy(0);
        }
        function render6(){
            lightManager.destroyAll();
        }
    </script>
</body>

</html>

 

  1. 效果展示

 

Demo地址：https://mhc.ixiera.com/mhc/mchmap/MultiLightManager/index.html

 

本文档来自—MCHMAP 丨 地图引擎平台