Cesium虚线圆 - 技术栈

封装的方法

js 复制代码

import * as Cesium from 'cesium'

export interface DashedCircleOptions {
  width?: number
  segments?: number
  color?: Cesium.Color
  gapColor?: Cesium.Color
  dashLength?: number
  dashPattern?: number
  height?: number
}

export function addDashedCircle (
  viewer: Cesium.Viewer,
  lon: number,
  lat: number,
  radiusMeters: number,
  options: DashedCircleOptions = {}
): Cesium.Primitive | undefined {
  if (!viewer || !Number.isFinite(lon) || !Number.isFinite(lat) || !Number.isFinite(radiusMeters)) return

  const width = options.width ?? 2
  const segments = options.segments ?? 64
  const color = options.color ?? Cesium.Color.YELLOW
  const gapColor = options.gapColor ?? Cesium.Color.TRANSPARENT
  const dashLength = options.dashLength ?? 16.0
  const dashPattern = options.dashPattern ?? 255.0
  const height = options.height ?? 0

  const earthRadius = 6378137
  const latRad = Cesium.Math.toRadians(lat)

  const positions: Cesium.Cartesian3[] = []
  for (let k = 0; k <= segments; k++) {
    const a = (Math.PI * 2 * k) / segments
    const dx = Math.cos(a) * radiusMeters
    const dy = Math.sin(a) * radiusMeters
    const cLat = lat + (dy / earthRadius) * (180 / Math.PI)
    const cLon = lon + (dx / (earthRadius * Math.cos(latRad))) * (180 / Math.PI)
    positions.push(Cesium.Cartesian3.fromDegrees(cLon, cLat, height))
  }

  const polylineGeometry = new Cesium.PolylineGeometry({
    positions,
    width,
    vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
    arcType: Cesium.ArcType.NONE,
  })

  const primitive = viewer.scene.primitives.add(new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: polylineGeometry,
    }),
    appearance: new Cesium.PolylineMaterialAppearance({
      material: new Cesium.Material({
        fabric: {
          type: 'PolylineDash',
          uniforms: {
            color,
            gapColor,
            dashLength,
            dashPattern,
          },
        },
      }),
    }),
    asynchronous: true,
  }))

  return primitive
}

调用

js 复制代码

    // 在目标位置绘制虚线圆
    addDashedCircle(viewer, newLon, newLat, 7000, {
      width: 2,
      segments: 128,
      color: Cesium.Color.CYAN,
      gapColor: Cesium.Color.TRANSPARENT,
      dashLength: 16,
      dashPattern: 255,
    })