Cesium部分区域显示（反向遮罩）

最新推荐文章于 2025-10-11 14:14:02 发布

原创最新推荐文章于 2025-10-11 14:14:02 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Cesium #前端 #html

请在有前端基础下阅读

先上效果图（通州区的数据DataV.GeoAtlas地理小工具系列可以在这网站上选取下载GEOJSON）

上代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通州区显示</title>
    <!-- Cesium 样式文件 -->
    <link href="https://cdn.jsdelivr.net/npm/cesium@1.108/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <!-- Cesium JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/cesium@1.108/Build/Cesium/Cesium.js"></script>
    <!-- <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/cesium/1.103.0/Widgets/widgets.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/cesium/1.103.0/Cesium.js"></script> -->
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #cesiumContainer {
            width: 100%;
            height: 100vh;
        }
    </style>
</head>

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

    <script type="module">
        import Hook from './hook.js';

        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwN2QwOTJhOS02Y2VmLTQ5YzItOWIzMC1jYmEwMTY3ODY3MjQiLCJpZCI6MjE0Njk2LCJpYXQiOjE3MTU1NzYwNDR9.fMKXCDKhWbcr74wQlgbzZzG_0_217taC98egroDcRlk'
        // 初始化 Cesium Viewer
        const viewer = new Cesium.Viewer('cesiumContainer', {
            // 基础配置
            shouldAnimate: false, // 启用动画
            baseLayerPicker: false, // 基础图层选择器
            geocoder: false, // 地址搜索框
            homeButton: false, // 主页按钮
            infoBox: false, // 信息框
            timeline: false, // 时间轴
            navigationHelpButton: false, // 导航帮助按钮
            sceneModePicker: false, // 场景模式选择器（2D/3D）
            fullscreenButton: false, // 全屏按钮
            animation: false, // 动画控件
            selectionIndicator: false, // 选择指示器
            vrButton: false, // VR 按钮
            imageryProvider: false,
            sceneMode: Cesium.SceneMode.SCENE2D,
        });
        const MapHook = new Hook(viewer);
        MapHook.init()

    </script>
</body>

</html>

反向遮罩class代码

export default class Hook {
  constructor(viewer) {
    this.viewer = viewer;
  }
  init() {
    const viewer = this.viewer;
    // 隐藏版权信息
    viewer._cesiumWidget._creditContainer.style.display = 'none';

    // 添加自定义的图层
    const tdtLayer = new Cesium.UrlTemplateImageryProvider({
      url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      minimumLevel: 3,
      maximumLevel: 18,
    });
    viewer.imageryLayers.addImageryProvider(tdtLayer);
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(116.75735, 39.85946, 135000.0), // 设置位置
    });

    // 添加自定义的图层;
    const dataSources = Cesium.GeoJsonDataSource.load('../data/通州区.json', {
      fill: Cesium.Color.WHITE.withAlpha(0.05), //多边形填充颜色
      strokeWidth: 3,
      stroke: Cesium.Color.RED,
    });
    dataSources.then((dataSource) => {
      viewer.dataSources.add(dataSource);
      this.createReverseMask(dataSource);
    });
  }

  createReverseMask(dataSource) {
    const viewer = this.viewer;
    // 获取通州区的多边形坐标
    const entities = dataSource.entities.values;
    const positionArray = [];

    // 提取所有多边形的坐标
    for (let i = 0; i < entities.length; i++) {
      const entity = entities[i];
      if (entity.polygon) {
        // 处理Polygon实体
        if (entity.polygon.hierarchy.getValue()) {
          const hierarchy = entity.polygon.hierarchy.getValue();
          if (hierarchy.positions) {
            // 简单多边形
            positionArray.push(hierarchy.positions);
          } else if (hierarchy.children) {
            // 带有洞的多边形或MultiPolygon
            for (let j = 0; j < hierarchy.children.length; j++) {
              positionArray.push(hierarchy.children[j].positions);
            }
          }
        }
      }
    }

    let polygonEntity = new Cesium.Entity({
      polygon: {
        hierarchy: {
          // 添加外部区域为1/4半圆，设置为180会报错
          positions: Cesium.Cartesian3.fromDegreesArray([0, 0, 0, 90, 179, 90, 179, 0]),
          // 中心挖空的“洞”
          holes: [
            {
              positions: positionArray[0],
            },
          ],
        },
        material: Cesium.Color.ALICEBLUE.withAlpha(0.8),
      },
    });

    viewer.entities.add(polygonEntity);
  }
}