当前位置：首页 > news >正文

前端~三维地图（cesium）地图遮罩蒙层

news 来源：原创 2025/6/7 6:27:42

前提遮当通过geoJson行政区划边界以外的区域，主体突出行政区划范围，效果如下，相当去在一个比较大的黑色区域内挖出一个另外一个区域
在这里插入图片描述

具体相关API

在这里插入图片描述

代码实现逻辑

tips: 网上是通过geoJson 遍历获取所有行政区划的点位，但是这里已经加载了行政区划，无需再次加载，而且通过dataSource也可以遍历所有的点位，是一样的道理。

通过阿里云地理数据获取行政区划 geoJson 行政区划边界
通过cesium GeoJsonDataSource 加载行政区划边界，并设置边界样式
通过 GeoJsonDataSource 获取已经选中的行政区划边界点位
遮罩蒙层设置

第一种实现逻辑

// 加载行政区划边界
const geoBorderDataSource = new Cesium.GeoJsonDataSource()
const datasource = await geoBorderDataSource.load(`${BaseUrl}geoData/huinan_geo.json`, {stroke: Cesium.Color.fromCssColorString('#fb7014'),fill: Cesium.Color.fromAlpha(Cesium.Color.WHITE, 0),strokeWidth: 5.0})
await this.viewer.dataSources.add(datasource)
// 通过datasource 获取点位
const polygonPoints: Cesium.Cartesian3[] = []datasource.entities.values.forEach((entity) => {if (entity.polygon) {const hierarchy = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now())if (hierarchy) {const positions = hierarchy.positionspolygonPoints.push(...positions)}}})
// 蒙层遮罩
this.viewer.entities.add({polygon: {hierarchy: new PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 160, 89, 160, 0]),[new PolygonHierarchy(polygonPoints)]),// 这里是网上的写法，虽然也能实现，但是API升级之后写法有些许变化// hierarchy: {//   positions: Cesium.Cartesian3.fromDegreesArray([100, 0, 100, 89, 160, 89, 160, 0]), //外部区域//   holes: [//     {//       positions: polygonPoints//     }//   ]// },material: Cesium.Color.BLACK.withAlpha(0.2)}})