MCHMAP 丨 地图引擎
MCHMAP 丨 地图引擎 > 快速开始 > MCHMAP > 多边形区域裁剪

多边形区域裁剪

关键引入文件：    

  • 第一步：引入框架地图关键文件        
    • https://mhc.ixiera.com/mhc/main.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/PolygonClipManager/js/PolygonClipManager.min.js  

1. 初始化

clipManager = new PolygonClipManager(viewer, positions, options);

2. 参数说明

一、构造函数参数

参数数据类型是否必填说明
viewerObject必填Cesium Viewer 实例
positionsArray必填裁剪多边形底面坐标，格式 [[lon, lat], ...]（经纬度二维数组）
optionsObject选填全局配置参数（详见下方表格）

二、options 配置参数

参数数据类型是否必填默认值说明
inverseboolean选填true裁剪方向：
true 为反向裁剪（多边形外部挖空，内部保留）；
false 为正向裁剪（多边形内部挖空，外部保留）
showBorderboolean选填false是否显示多边形边界线（红色边框）
lineColorCesium.Color选填Cesium.Color.RED边界线颜色（如 Cesium.Color.YELLOW）
lineWidthnumber选填4边界线宽度（像素）

三、API 方法

方法名参数返回值说明
show()无void显示/应用多边形裁剪效果（如果已隐藏则恢复）
hide()无void隐藏/移除多边形裁剪效果，恢复完整地形
toggleInverse()无void切换反向/正向裁剪模式（保留与挖空互换）
updatePositions(newCoords, newOptions)Array, Objectvoid更新裁剪多边形的坐标范围，并可选覆盖配置参数
destroy()无void销毁实例，释放 WebGL 内存资源

4. 使用示例

4.1 基础绘制（反向裁剪 + 黄色边框）

// 定义多边形区域坐标

const positions = [

    [116.3860, 39.9060],

    [116.3940, 39.9060],

    [116.3940, 39.9140],

    [116.3860, 39.9140]

];

// 实例化并应用裁剪

const clipManager = new PolygonClipManager(viewer, positions, {

    inverse: true,

    showBorder: true,

    lineColor: Cesium.Color.YELLOW,

    lineWidth: 4

});

// 注：实例化后默认自动生效，无需手动调用 clipManager.show();

4.2 反向/正向切换（保留与挖空互换）

// 当前为外部挖空、内部保留。调用该方法变为：内部挖空、外部保留。

clipManager.toggleInverse();

// 再次调用，恢复为原来的状态。

clipManager.toggleInverse();

4.3 更新多边形范围（保留当前状态）

// 定义新的多边形坐标

const newPositions = [

    [116.3800, 39.9000],

    [116.4000, 39.9000],

    [116.4000, 39.9200],

    [116.3800, 39.9200]

];

// 更新范围（可选：在更新时把边框改成蓝色）

clipManager.updatePositions(newPositions, { lineColor: Cesium.Color.BLUE });

4.4 显示控制

// 隐藏裁剪效果（地形恢复正常）

clipManager.hide();

// 再次显示裁剪效果（重新应用多边形区域裁剪）

clipManager.show();

4.5 注销与销毁

// 彻底销毁实例，释放内存

clipManager.destroy();

clipManager = null;

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/PolygonClipManager/js/PolygonClipManager.min.js"></script>

    <style>

        html,body,#cesiumContainer { width:100%; height:100%; margin:0; padding:0; overflow:hidden; background-color: #000; }

        .btns { position:fixed; top:10px; left:10px; z-index:1000; display:flex; gap:8px; flex-wrap:wrap; }

        .btns button { background:#fff; border:1px solid #ccc; border-radius:4px; padding:5px 12px; cursor:pointer; font-size:12px; }

        .info { position:fixed; bottom:10px; left:10px; z-index:1000; background:rgba(0,0,0,0.8); color:#fff; padding:10px 15px; border-radius:6px; font-size:12px; }

    </style>

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

    <div class="btns">

        <button onclick="doShow()">显示</button>

        <button onclick="doHide()">隐藏</button>

        <button onclick="doToggleInverse()">切换方向</button>

        <button onclick="doUpdate()">更新范围</button>

        <button onclick="doDestroy()">销毁</button>

    </div>

    <div class="info" id="info">点击按钮测试裁剪功能</div>

    <script>

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

        const viewer = MchCesium.viewer;

        viewer.scene.globe.depthTestAgainstTerrain = true;

        let clipManager = null;

        const positions = [

            [116.3860, 39.9060],

            [116.3940, 39.9060],

            [116.3940, 39.9140],

            [116.3860, 39.9140]

        ];

        function initManager() {

            if (clipManager) return;

            clipManager = new PolygonClipManager(viewer, positions, {

                inverse: true,

                showBorder: true,

                lineColor: Cesium.Color.YELLOW,

                lineWidth: 4

            });

            document.getElementById('info').innerText = '裁剪已初始化（黄色边框）';

        }

        function doShow() {

            if (clipManager) {

                clipManager.show();

                document.getElementById('info').innerText = '裁剪已显示';

            }

        }

        function doHide() {

            if (clipManager) {

                clipManager.hide();

                document.getElementById('info').innerText = '裁剪已隐藏';

            }

        }

        function doToggleInverse() {

            if (clipManager) {

                clipManager.toggleInverse();

                document.getElementById('info').innerText = '方向已切换';

            }

        }

        function doUpdate() {

            if (clipManager) {

                const newPos = [

                    [116.3800, 39.9000],

                    [116.4000, 39.9000],

                    [116.4000, 39.9200],

                    [116.3800, 39.9200]

                ];

                clipManager.updatePositions(newPos, { lineColor: Cesium.Color.BLUE });

                document.getElementById('info').innerText = '范围已更新 (蓝色边框)';

            }

        }

        function doDestroy() {

            if (clipManager) {

                clipManager.destroy();

                clipManager = null;

                document.getElementById('info').innerText = '已销毁';

            }

        }

        // 默认自动初始化

        setTimeout(initManager, 500);

    </script>

6. 效果展示

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

 

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