MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MchCesium > 可视域空间分析管道效果

可视域空间分析管道效果

关键引入文件：

  • 第一步：引入框架地图关键文件          
    • https://mhc.ixiera.com/mhc/main_min.js       
    • https://mhc.ixiera.com/mhc/Cesium-1.120/Build/Cesium/Cesium.js        
    • https://mhc.ixiera.com/mhc/Cesium3DTile.js    
  • 第二步：引入可视域空间分析文件              
    • https://mhc.ixiera.com/mhc/mchmap/UAVpathTrajectory/js/UAVPathTrajectoryManager.min.js
    • https://mhc.ixiera.com/mhc/mchmap/Viewershed/js/Viewershed.min.js      
    • https://mhc.ixiera.com/mhc/mchmap/Viewershed/js/DroneViewershed.min.js    

1.初始化

var uavManager = new UAVPathTrajectoryManager(viewer, {

            dronecontroller: {pathPoints: initialPositions },

            pipeGenerator: {pathPoints: initialPositions },

 });       //加载飞行路径    如果想配置更多，请参考无人机轨道

droneViewershed = new DroneViewershed(viewer,uavManager.droneController,params);    //初始化可视域分析控制器

2.参数说明：

viewer：创建的view实例。

droneController：创建无人机飞行实例-参考无人机管道飞行。

params：（Array）参数 (可不传)

param 参数数据类型是否必填说明
horizontalViewAnglenumber选填水平视角，默认值：60°
verticalViewAnglenumber选填// 垂直视角，默认值：45°
shadowMappingSizenumber选填阴影贴图大小，默认值：1024 （值越大计算越大，对cpu的占用越高）
visibleColorCesium.Color选填可视区域颜色，默认值：Cesium.Color.GREEN.withAlpha(0.5)
invisibleColorCesium.Color选填不可视区域颜色，默认值：Cesium.Color.RED.withAlpha(0.5)
viewDistancenumber选填可视距离，默认值：50
isShowSketchboolean选填是否显示锥体线条草图，默认值：true

3.显示/隐藏可视域分析 toggleAnalysis

droneViewershed.toggleAnalysis();

4.更新param 参数方法 updateConfig

例：droneViewershed.updateConfig({ isShowSketch: false})

5.完成代码实例

    <script src="https://mhc.ixiera.com/mhc/main.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="https://mhc.ixiera.com/mhc/mchmap/UAVpathTrajectory/js/UAVPathTrajectoryManager.min.js"></script>

    <script src="https://mhc.ixiera.com/mhc/mchmap/Viewershed/js/Viewershed.js"></script>

    <script src="https://mhc.ixiera.com/mhc/mchmap/Viewershed/js/DroneViewershed.js"></script>

    <style>

        .btnsBox {position: fixed;top: 10px;left: 10px;width: 70%;height: 30px;}

        .btnsBox button {background-color: #fff;border-radius: 2px;color: #333;line-height: 30px;margin-right: 15px;font-size: 12px;padding: 0 15px;cursor: pointer;}

        #controlPanel {position: absolute;top: 50px;left: 10px;background: rgba(42, 42, 42, 0.8);color: white;padding: 10px;border-radius: 5px;z-index: 1000;}

        .config-item {margin: 8px 0;display: flex; align-items: center;gap: 10px;}

        .radio-group { display: flex; gap: 15px; margin-left: 10px;}

        .radio-group label { display: flex;align-items: center; gap: 5px;}

        .config-item input[type="range"] { flex-grow: 1; }

        .config-item span { min-width: 30px;text-align: right;}

    </style>

<body>

    <div id="cesiumContainer"></div>

    <div class="btnsBox">

        <button onclick="createShed()">创建可视域分析</button>

        <button onclick="toggleShed()">开启/关闭可视域分析</button>

        <button onclick="toggleShowSketch()">配置：关闭网格</button>

    </div>

    <div id="controlPanel">

        <div class="config-section">

            <h4>更直观可视域参数配置</h4>

            <div class="config-item">

                <label>阴影贴图大小:</label>

                <div class="radio-group">

                    <label>

                        <input type="radio" name="shadowSize" value="512" > 512x512

                    </label>

                    <label>

                        <input type="radio" name="shadowSize" value="1024" checked> 1024x1024

                    </label>

                </div>

            </div>

            <div class="config-item">

                <label for="viewDistance">可视距离:</label>

                <input type="range" id="viewDistance" min="10" max="200" value="100">

                <span id="viewDistanceValue">100</span>m

            </div>

            <div class="config-item">

                <label for="horizontalAngle">水平视角:</label>

                <input type="range" id="horizontalAngle" min="30" max="120" value="50">

                <span id="horizontalAngleValue">50</span>°

            </div>

            <div class="config-item">

                <label for="verticalAngle">垂直视角:</label>

                <input type="range" id="verticalAngle" min="20" max="90" value="50">

                <span id="verticalAngleValue">50</span>°

            </div>

        </div>

    </div>

    <script>

        // 一、初始化Cesium

        const view3D = MchCesium.init('cesiumContainer', true);

        const viewer = MchCesium.viewer;

        // 步骤2、加载飞行路径

        const initialPositions = [

            {longitude: 116.57698639239828, latitude: 40.44350820706789, height: 350},

            {longitude: 116.58320680517834, latitude: 40.44479157439789, height: 520},

            {longitude: 116.59045717108023, latitude: 40.44650471866103, height: 717},

            {longitude: 116.5937053223204, latitude: 40.46687213916627, height: 356},

            {longitude: 116.60861780306922, latitude: 40.46324631398799, height: 396},

            {longitude: 116.6140555010281, latitude: 40.46220665726538, height: 478},

            {longitude: 116.6212575410881, latitude: 40.45092817732121, height: 299},

            {longitude: 116.62335032128567, latitude: 40.44037501874135, height: 257},

            {longitude: 116.62394086232717, latitude: 40.433133068203865, height: 193},

            {longitude: 116.62457226126685, latitude: 40.4238096714677, height: 269},

            {longitude: 116.62071108955061, latitude: 40.42420769481539, height: 467},

            {longitude: 116.61699406933735, latitude: 40.42004691573184, height: 390},

            {longitude: 116.61146238156039, latitude: 40.41812121010256, height: 269},

            {longitude: 116.60758142674928, latitude: 40.418143300483024, height: 278},

            {longitude: 116.60563107800976, latitude: 40.418244152176726, height: 248},

            {longitude: 116.60330911218746, latitude: 40.41873325173327, height: 314},

            {longitude: 116.59964349716748, latitude: 40.4199524058387, height: 377},

            {longitude: 116.59519680136547, latitude: 40.41855415772477, height: 250},

            {longitude: 116.59433475696123, latitude: 40.424735576304926, height: 326},

            {longitude: 116.58861938295638, latitude: 40.424052048802636, height: 227},

            {longitude: 116.5869596683047, latitude: 40.4316354100928, height: 411},

            {longitude: 116.58136534810056, latitude: 40.43044293009731, height: 255}]

 

        var uavManager = new UAVPathTrajectoryManager(viewer, {

            dronecontroller: {

                pathPoints: initialPositions,

            },

            pipeGenerator: {

                pathPoints: initialPositions

            },

            isSmoothedPath: false,

        });

       

        // 步骤3：初始化可视域分析控制器

        let droneViewershed = null;

        function createShed(){

            const params = {

                horizontalViewAngle: 50,  // 水平视角

                verticalViewAngle: 50,    // 垂直视角

                shadowMappingSize: 1024,  // 阴影贴图大小

                visibleColor: Cesium.Color.GREEN.withAlpha(0.5),    // 可视区域颜色

                invisibleColor: Cesium.Color.RED.withAlpha(0.5),    // 不可视区域颜色

                viewDistance: 100,

                isShowSketch: true, // 是否显示网格草图

            }

            droneViewershed = new DroneViewershed(viewer,uavManager.droneController,params);

        }

        function toggleShowSketch(){

             droneViewershed.updateConfig({ isShowSketch: false});

        }

        function toggleShed(){

            droneViewershed.toggleAnalysis();

        }

 

        // 添加阴影大小变化事件监听

        document.querySelectorAll('input[name="shadowSize"]').forEach(radio => {

            radio.addEventListener('change', (e) => {

                const shadowSize = parseInt(e.target.value);

                droneViewershed.updateConfig({ shadowMappingSize: shadowSize });

                console.log(`阴影贴图大小已更新为: ${shadowSize}x${shadowSize}`);

            });

        });

 

        // 添加参数变化事件监听

        document.getElementById('viewDistance').addEventListener('input', (e) => {

            const value = parseInt(e.target.value);

            document.getElementById('viewDistanceValue').textContent = value;

            droneViewershed.updateConfig({ viewDistance: value });

        });

 

        document.getElementById('horizontalAngle').addEventListener('input', (e) => {

            const value = parseInt(e.target.value);

            document.getElementById('horizontalAngleValue').textContent = value;

            droneViewershed.updateConfig({ horizontalViewAngle: value });

        });

 

        document.getElementById('verticalAngle').addEventListener('input', (e) => {

            const value = parseInt(e.target.value);

            document.getElementById('verticalAngleValue').textContent = value;

            droneViewershed.updateConfig({ verticalViewAngle: value });

        });

        // 步骤8：窗口关闭时清理资源

        window.addEventListener('beforeunload', () => {

            if (uavManager) {

                uavManager.destroy();

            }

        });

    </script>

</body>

6.效果展示

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

 

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