仅显示某个行政区划（cesium 挖孔）

添加polygon, 中间挖孔, 仅显示某个区域

1
  // 3.1. 定义一个矩形作为遮罩的“外环”, 大致覆盖整个中国
2
  // 格式：[lng, lat, lng, lat, ...]
3
  const worldRectangle = [73.5, 4.5, 73.5, 53.5, 135.5, 53.5, 135.5, 4.5]
4

5
  // 3.2. 从 lt.json 中提取理塘县的边界作为“孔洞”
6
  // lt.json 是一个 FeatureCollection，我们获取第一个 feature
7
  const litangFeature = (GeoJSON as any).features[0]
8
  const litangPolygons = litangFeature.geometry.coordinates
9
  console.log(litangPolygons)
10
  // 3.3. 创建遮罩多边形的层级
11
  // Cesium 的 PolygonHierarchy 需要一个外环和一组内环（孔洞）
12
  const holes: Cesium.PolygonHierarchy[] = []
13
  let holeCoords: number[] = []
14
  // lt.json 是 MultiPolygon，所以需要遍历它包含的每一个 Polygon
15
  litangPolygons.forEach((polygon: number[][][]) => {
16
    // 每个 Polygon 又是环的数组（第一个是外环，后面是内环）
17
    // 在我们的遮罩中，理塘的*所有*环都是孔洞
18
    polygon.forEach((ring: number[][]) => {
19
      // Cesium.Cartesian3.fromDegreesArray 需要一个扁平的 [lng, lat, lng, lat, ...] 数组
20
      holeCoords = ring.flat()
21
      holes.push(new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(holeCoords)))
22
    })
23
  })
24
  // 3.4. 创建最终的遮罩层级
25
  const maskHierarchy = new Cesium.PolygonHierarchy(
26
    Cesium.Cartesian3.fromDegreesArray(worldRectangle), // 全球外环
27
    holes // 理塘县孔洞
28
  )
29
  // 3.5. 将遮罩添加到地球上
30
  viewer.entities.add({
31
    name: 'Litang Mask',
32
    polygon: {
33
      hierarchy: maskHierarchy,
34
      perPositionHeight: false,
35
      // material: Cesium.Color.fromCssColorString('#071B32'),
36
      material: '/bg.png',
37
      // material: 'https://p8.itc.cn/images01/20200723/b48a6c775c944f7d89043ab8e0154197.jpeg',
38
      // fill: true, // 默认
39
      // outline: false, // 默认
40
    },
41
  })

Array.prototype.flat() flat() 创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。
1
const arr2 = [0, 1, [2, [3, [4, 5]]]];
2

3
console.log(arr2.flat());
4
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]
5

6
console.log(arr2.flat(2));
7
// expected output: Array [0, 1, 2, 3, Array [4, 5]]
8

9
console.log(arr2.flat(Infinity));
10
// expected output: Array [0, 1, 2, 3, 4, 5]

限制camera视角范围

遍历GeoJSON获取边界矩形, 返回 new Cesium.Rectangle(west, south, east, north)

1
const getLitangBoundingBox = (geoJson: any): Cesium.Rectangle => {
2
  let minLng = 180,
3
    minLat = 90,
4
    maxLng = -180,
5
    maxLat = -90
6

7
  // 遍历 lt.json 的坐标
8
  const polygons = geoJson.features[0].geometry.coordinates
9
  polygons.forEach((polygon: number[][][]) => {
10
    polygon.forEach((ring: number[][]) => {
11
      ring.forEach((point: number[]) => {
12
        const lng = point[0]
13
        const lat = point[1]
14
        minLng = Math.min(minLng, lng)
15
        maxLng = Math.max(maxLng, lng)
16
        minLat = Math.min(minLat, lat)
17
        maxLat = Math.max(maxLat, lat)
18
      })
19
    })
20
  })
21
  return Cesium.Rectangle.fromDegrees(minLng, minLat, maxLng, maxLat)
22
}

初始化时, camera定位到该区域

1
  const MAX_ALTITUDE = 500000 // 500km (最远)
2
  const MIN_ALTITUDE = 1000 // 1km (最近)
3

4
  // 将地球背景和天空盒设置为透明
5
  viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT
6
  viewer.scene.globe.baseColor = Cesium.Color.TRANSPARENT
7

8
  viewer._cesiumWidget._creditContainer.style.display = 'none'
9
  viewer.scene.globe.depthTestAgainstTerrain = false
10

11
  // --- 设置相机缩放和倾斜限制 ---
12
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = MIN_ALTITUDE
13
  viewer.scene.screenSpaceCameraController.maximumZoomDistance = MAX_ALTITUDE
14
  viewer.scene.screenSpaceCameraController.enableTilt = false // 2D 模式下禁止倾斜
15

16
  //  设置camera
17
  const litangBoundsDeg = getLitangBoundingBox(GeoJSON)
18
  viewer.camera.setView({
19
    destination: litangBoundsDeg,
20
  })

仅显示某个行政区划（cesium 挖孔）

文章分享