NEXA - 文档

Appearance

行政区划标注（ChinaRegion 示例） ​

中国省级行政区划面 + 省级名称标注。对齐源案例 LabelPlotting/ChinaRegion：用 GeoJsonDataSource 加载省级 Polygon（逐要素随机半透明着色），再用 SDK 的 DivPointLayer 批量渲染省名 HTML 标注 —— 源案例的 CesiumLabel3D（每点一个 div + postRender 投影）已由 DivPointLayer 等价覆盖。

能力定位 ​

适合：行政区划概览、区域统计着色、地名/标注图层演示。

  • 区域面：chinaregion.json（34 个省，WGS84 Polygon），半透明随机着色 + 细描边；
  • 省级标注：chinalabel.json（34 个省名 Point），DivPointLayer 圆角胶囊样式；
  • 交互：重新着色、标注显隐、区域显隐、恢复全国视图。

数据来源与授权：数据文件来自 cesium-example 源仓库 （src/static/data/chinaregion.json / chinalabel.json），已拷贝至 packages/gis-cesium/public/static/data/。源仓库无 LICENSE 文件，按迁移规范标注 license-unclear（详见 public/static/data/SOURCE.md）。

示例运行 ​

在示例应用中打开「行政区划标注」：

  1. 加载区域面：fetch('/static/data/chinaregion.json') → Cesium.GeoJsonDataSource.load → 逐要素随机着色；
  2. 加载省级标注：fetch('/static/data/chinalabel.json') → DivPointLayer.addPoint 批量添加省名；
  3. 恢复全国视图（105°E, 35°N, 1300 万米高空俯视）。

关键代码 ​

ts
import { DivPointLayer } from '@nexa/gis-cesium'

// 区域面：GeoJsonDataSource 加载省级 Polygon
const res = await fetch('/static/data/chinaregion.json')
const geo = await res.json()
const dataSource = await Cesium.GeoJsonDataSource.load(geo)
viewer.dataSources.add(dataSource)
dataSource.entities.values.forEach(entity => {
  entity.polygon.material = Cesium.Color.fromRandom({ alpha: 0.35 })
})

// 省级标注：DivPointLayer 等价覆盖源案例 CesiumLabel3D
const labelLayer = new DivPointLayer({ hideHeight: 16000000 }) // 全国视图不隐藏
labelLayer.on(viewer)
const labelRes = await fetch('/static/data/chinalabel.json')
const labelGeo = await labelRes.json()
labelGeo.features.forEach(feature => {
  const [lon, lat] = feature.geometry.coordinates
  labelLayer.addPoint({
    position: Cesium.Cartesian3.fromDegrees(lon, lat, 0),
    content: () => `<div class="china-region-label">${feature.properties.NAME}</div>`,
  })
})

hideHeight 说明：DivPointLayer 默认相机视高超过 14000 米即隐藏全部标注。 本示例为全国视图（视高约 1300 万米），需显式调大 hideHeight（如 16000000） 才能让省名在俯视全国时可见 —— 这是对源案例 CesiumLabel3D「相机拉近显示、 拉远隐藏」语义的适配。

与源案例的差异 ​

项目源案例（LabelPlotting/ChinaRegion）本 SDK 示例
区域面GeoJsonDataSource + Color.fromRandom().withAlpha(0.4)同，另加细描边便于离线底图辨识
省级标注CesiumLabel3D（div + postRender 逐点投影）DivPointLayer（SDK 覆盖，批量 addPoint）
底图网络影像（UrlTemplateImageryProvider）无影像，纯离线（椭球底色 + 区域填充）
交互无面板重新着色 / 标注显隐 / 区域显隐 / 全国视图

清理责任 ​

ts
viewer.dataSources.remove(dataSource, true) // 释放区域面
labelLayer.destroy(viewer)                  // 移除标注层（DOM + postRender 监听）

示例外壳卸载时自动调用 cleanup()，重复执行安全。