The Other Cesium Mask: Darkening a District Interior While Keeping the Map Clear
Internal masking is the natural complement to hollow-highlight masking for geospatial dashboards. Knowing that Cesium's `holes` API cannot produce this effect saves a developer from a dead-end approach and points straight to the simpler polygon-fill solution.
The previous approach used a global rectangle with holes to produce a dark-outside, bright-inside highlight. This technique flips the effect: the base map remains clear everywhere except inside the target district, which gets a dark overlay and a blue boundary line.
GeoJSON coordinates are flattened recursively and converted to Cartesian3 positions, then drawn as a single polygon entity with `clampToGround: true`. A separate polyline entity traces the same boundary for a sharp outline. The result is a clean internal mask with no dependency on Cesium's `holes` mechanism, which cannot invert its logic.
A complete Vue 3 + Cesium component is provided, including Amap tile layers, a vector/imagery toggle, and a camera fly-to preset over Shanghai's Songjiang District.
The two-mask pattern — external darkening via holes and internal darkening via direct polygon fill — covers nearly all administrative-district highlighting needs in Cesium without third-party plugins.
Flattening GeoJSON coordinates is a recurring friction point in Cesium that many tutorials skip; the recursive reducer shown here handles arbitrary nesting depths.
Using a separate polyline for the boundary rather than a polygon outline property gives finer control over stroke width and color, which matters when the mask fill is dark.