feat(foundry): complete HGeoZone live layer

2026-07-22 09:25:32 +03:00
parent de060c105b
commit 309cddef73
9 changed files with 391 additions and 83 deletions
@@ -12,11 +12,17 @@ import {
  CallbackProperty,
  CallbackPositionProperty,
  Cartographic,
+  ClassificationType,
+  ColorGeometryInstanceAttribute,
  ConstantPositionProperty,
  CustomDataSource,
  DefaultProxy,
  EllipsoidTerrainProvider,
  Entity,
+  GeometryInstance,
+  GroundPolylineGeometry,
+  GroundPolylinePrimitive,
+  GroundPrimitive,
  HeightReference,
  HeadingPitchRange,
  HorizontalOrigin,
@@ -25,9 +31,11 @@ import {
  LabelGraphics,
  Matrix4,
  Math as CesiumMath,
+  PerInstanceColorAppearance,
  PointGraphics,
-  PolygonGraphics,
+  PolygonGeometry,
  PolygonHierarchy,
+  PolylineColorAppearance,
  PolylineGraphics,
  Resource,
  sampleTerrainMostDetailed,
@@ -54,6 +62,7 @@ import {
 const MAX_SPIRAL_SUBSTEPS_PER_FRAME = 300;
 const TERRAIN_SAMPLE_TIMEOUT_MS = 12_000;
 const SPIRAL_TILE_WAIT_TIMEOUT_MS = 45_000;
+const MAX_HGEOZONE_INSTANCES_PER_BATCH = 256;
 type RuntimeConfig = {
  cesiumVersion: string;
  provider: string;
@@ -325,9 +334,255 @@ function runtimePointColor(fact: MapRuntimeFact) {
  return fact.semanticType === "map.moving_object" ? accent : violet;
 }

+type HGeoZonePickId = {
+  kind: "nodedc-hgeozone";
+  entityId: string;
+  instanceId: string;
+};
+
+type HGeoZoneFillPart = {
+  pickId: HGeoZonePickId;
+  hierarchy: PolygonHierarchy;
+  color: Color;
+};
+
+type HGeoZoneOutlinePart = {
+  pickId: HGeoZonePickId;
+  positions: Cartesian3[];
+  color: Color;
+};
+
+type HGeoZonePrimitiveBatch<TPart> = {
+  primitive: GroundPrimitive | GroundPolylinePrimitive;
+  parts: TPart[];
+};
+
+type HGeoZoneProjectionLayer = {
+  geometryKey: string;
+  styleKey: string;
+  hideCameraHeightMeters: number | null;
+  fills: Array<HGeoZonePrimitiveBatch<HGeoZoneFillPart>>;
+  outlines: Array<HGeoZonePrimitiveBatch<HGeoZoneOutlinePart>>;
+};
+
+function hGeoZoneRingPositions(ring: Array<[number, number]>) {
+  const first = ring[0];
+  const last = ring[ring.length - 1];
+  const openRing = first && last && first[0] === last[0] && first[1] === last[1]
+    ? ring.slice(0, -1)
+    : ring;
+  return openRing.map(([longitude, latitude]) => Cartesian3.fromDegrees(longitude, latitude, 0));
+}
+
+function hGeoZoneHierarchy(polygon: Array<Array<[number, number]>>) {
+  return new PolygonHierarchy(
+    hGeoZoneRingPositions(polygon[0]),
+    polygon.slice(1).map((ring) => new PolygonHierarchy(hGeoZoneRingPositions(ring))),
+  );
+}
+
+function hGeoZoneBatches<T>(items: T[]) {
+  const batches: T[][] = [];
+  for (let index = 0; index < items.length; index += MAX_HGEOZONE_INSTANCES_PER_BATCH) {
+    batches.push(items.slice(index, index + MAX_HGEOZONE_INSTANCES_PER_BATCH));
+  }
+  return batches;
+}
+
+function removeHGeoZoneLayer(viewer: Viewer, layer: HGeoZoneProjectionLayer) {
+  for (const batch of [...layer.fills, ...layer.outlines]) {
+    viewer.scene.groundPrimitives.remove(batch.primitive);
+  }
+}
+
+function syncHGeoZoneVisibility(viewer: Viewer, layers: Map<string, HGeoZoneProjectionLayer>) {
+  const cameraHeight = Number(viewer.camera.positionCartographic?.height || 0);
+  for (const layer of layers.values()) {
+    const show = layer.hideCameraHeightMeters === null || cameraHeight <= layer.hideCameraHeightMeters;
+    for (const batch of [...layer.fills, ...layer.outlines]) batch.primitive.show = show;
+  }
+  viewer.scene.requestRender();
+}
+
+function updateHGeoZoneColors<TPart extends { pickId: HGeoZonePickId; color: Color }>(
+  batches: Array<HGeoZonePrimitiveBatch<TPart>>,
+  nextParts: TPart[],
+) {
+  const nextColors = new Map(nextParts.map((part) => [part.pickId.instanceId, part.color]));
+  for (const batch of batches) {
+    for (const part of batch.parts) {
+      const color = nextColors.get(part.pickId.instanceId);
+      if (!color) continue;
+      const attributes = batch.primitive.getGeometryInstanceAttributes(part.pickId);
+      if (attributes) attributes.color = ColorGeometryInstanceAttribute.toValue(color);
+      part.color = color;
+    }
+  }
+}
+
+function createHGeoZoneLayer(
+  viewer: Viewer,
+  geometryKey: string,
+  styleKey: string,
+  hideCameraHeightMeters: number | null,
+  fillParts: HGeoZoneFillPart[],
+  outlineParts: HGeoZoneOutlinePart[],
+  outlineWidthPx: number,
+) {
+  const fills = hGeoZoneBatches(fillParts).map((parts) => {
+    const primitive = viewer.scene.groundPrimitives.add(new GroundPrimitive({
+      geometryInstances: parts.map((part) => new GeometryInstance({
+        id: part.pickId,
+        geometry: new PolygonGeometry({
+          polygonHierarchy: part.hierarchy,
+          vertexFormat: PerInstanceColorAppearance.FLAT_VERTEX_FORMAT,
+        }),
+        attributes: { color: ColorGeometryInstanceAttribute.fromColor(part.color) },
+      })),
+      appearance: new PerInstanceColorAppearance({ flat: true, translucent: true }),
+      allowPicking: true,
+      asynchronous: true,
+      classificationType: ClassificationType.TERRAIN,
+      releaseGeometryInstances: true,
+    }));
+    return { primitive, parts };
+  });
+  const outlines = outlineWidthPx <= 0 ? [] : hGeoZoneBatches(outlineParts).map((parts) => {
+    const primitive = viewer.scene.groundPrimitives.add(new GroundPolylinePrimitive({
+      geometryInstances: parts.map((part) => new GeometryInstance({
+        id: part.pickId,
+        geometry: new GroundPolylineGeometry({
+          positions: part.positions,
+          width: outlineWidthPx,
+          loop: true,
+        }),
+        attributes: { color: ColorGeometryInstanceAttribute.fromColor(part.color) },
+      })),
+      appearance: new PolylineColorAppearance({ translucent: true }),
+      allowPicking: true,
+      asynchronous: true,
+      classificationType: ClassificationType.TERRAIN,
+      releaseGeometryInstances: true,
+    }));
+    return { primitive, parts };
+  });
+  const layer = { geometryKey, styleKey, hideCameraHeightMeters, fills, outlines };
+  syncHGeoZoneVisibility(viewer, new Map([["layer", layer]]));
+  return layer;
+}
+
+function syncHGeoZoneLayers(
+  viewer: Viewer,
+  layers: Map<string, HGeoZoneProjectionLayer>,
+  bindings: MapRuntimeBinding[],
+  presentationProfiles: MapPresentationProfile[],
+  presentationFilters: MapPresentationFilters,
+) {
+  const activeBindings = new Set(bindings.filter((binding) => binding.slotId === "zones").map((binding) => binding.bindingId));
+  for (const [bindingId, layer] of layers) {
+    if (activeBindings.has(bindingId)) continue;
+    removeHGeoZoneLayer(viewer, layer);
+    layers.delete(bindingId);
+  }
+
+  for (const binding of bindings) {
+    if (binding.slotId !== "zones") continue;
+    const fillParts: HGeoZoneFillPart[] = [];
+    const outlineParts: HGeoZoneOutlinePart[] = [];
+    const geometryMembers: string[] = [];
+    let outlineWidthPx = 1.5;
+    let hideCameraHeightMeters: number | null = null;
+    let outlineColor = Color.fromCssColorString("#c9b6ff").withAlpha(0.9);
+    const styleMembers: string[] = [];
+
+    for (const fact of binding.facts) {
+      const profile = mapPresentationProfileForFact(
+        presentationProfiles,
+        binding.presentationProfileId,
+        fact.semanticType,
+      );
+      if (
+        !fact.geometry
+        || fact.geometry.type === "Point"
+        || (profile && profile.target.variant !== "surface-fill")
+        || (profile && !mapRuntimeFactIsVisible(fact, profile, presentationFilters, binding.bindingId))
+      ) continue;
+      const presentationClass = profile ? resolveMapPresentationClass(fact, profile) : undefined;
+      const resolvedStyle = profile ? resolveMapPresentationStyle(profile, presentationClass) : undefined;
+      const fillColor = resolvedStyle
+        ? Color.fromCssColorString(resolvedStyle.color).withAlpha(resolvedStyle.opacity)
+        : runtimePointColor(fact).withAlpha(0.28);
+      if (profile?.target.variant === "surface-fill") {
+        outlineWidthPx = profile.target.outlineWidthPx;
+        hideCameraHeightMeters = profile.target.hideCameraHeightMeters;
+        outlineColor = Color.fromCssColorString(profile.target.outlineColor).withAlpha(profile.target.outlineOpacity);
+      }
+      const polygons = fact.geometry.type === "Polygon" ? [fact.geometry.coordinates] : fact.geometry.coordinates;
+      const baseEntityId = mapRuntimeEntityId(binding.bindingId, fact);
+      for (const [polygonIndex, polygon] of polygons.entries()) {
+        const instanceBase = `${baseEntityId}:part:${polygonIndex}`;
+        const fillPickId: HGeoZonePickId = {
+          kind: "nodedc-hgeozone",
+          entityId: baseEntityId,
+          instanceId: `${instanceBase}:fill`,
+        };
+        fillParts.push({ pickId: fillPickId, hierarchy: hGeoZoneHierarchy(polygon), color: fillColor });
+        geometryMembers.push(fillPickId.instanceId);
+        styleMembers.push(`${fillPickId.instanceId}:${resolvedStyle?.id ?? "default"}:${fillColor.toCssHexString()}:${fillColor.alpha}`);
+        for (const [ringIndex, ring] of polygon.entries()) {
+          const outlinePickId: HGeoZonePickId = {
+            kind: "nodedc-hgeozone",
+            entityId: baseEntityId,
+            instanceId: `${instanceBase}:ring:${ringIndex}`,
+          };
+          outlineParts.push({ pickId: outlinePickId, positions: hGeoZoneRingPositions(ring), color: outlineColor });
+          geometryMembers.push(outlinePickId.instanceId);
+        }
+      }
+    }
+
+    const geometryKey = JSON.stringify([binding.cursor, outlineWidthPx, geometryMembers]);
+    const styleKey = JSON.stringify([styleMembers, outlineColor.toCssHexString(), outlineColor.alpha]);
+    const current = layers.get(binding.bindingId);
+    if (!fillParts.length) {
+      if (current) removeHGeoZoneLayer(viewer, current);
+      layers.delete(binding.bindingId);
+      continue;
+    }
+    if (current?.geometryKey === geometryKey) {
+      current.hideCameraHeightMeters = hideCameraHeightMeters;
+      if (current.styleKey !== styleKey) {
+        const ready = [...current.fills, ...current.outlines].every((batch) => batch.primitive.ready);
+        if (ready) {
+          updateHGeoZoneColors(current.fills, fillParts);
+          updateHGeoZoneColors(current.outlines, outlineParts);
+          current.styleKey = styleKey;
+          syncHGeoZoneVisibility(viewer, layers);
+          continue;
+        }
+      } else {
+        syncHGeoZoneVisibility(viewer, layers);
+        continue;
+      }
+    }
+    if (current) removeHGeoZoneLayer(viewer, current);
+    layers.set(binding.bindingId, createHGeoZoneLayer(
+      viewer,
+      geometryKey,
+      styleKey,
+      hideCameraHeightMeters,
+      fillParts,
+      outlineParts,
+      outlineWidthPx,
+    ));
+  }
+  viewer.scene.requestRender();
+}
+
 function syncRuntimeDataSources(
  viewer: Viewer,
  dataSources: Map<string, CustomDataSource>,
+  hGeoZoneLayers: Map<string, HGeoZoneProjectionLayer>,
  bindings: MapRuntimeBinding[],
  presentationProfiles: MapPresentationProfile[],
  presentationFilters: MapPresentationFilters,
@@ -459,71 +714,46 @@ function syncRuntimeDataSources(
        || (profile && profile.target.variant !== "surface-fill")
      ) continue;
      const polygons = fact.geometry.type === "Polygon" ? [fact.geometry.coordinates] : fact.geometry.coordinates;
-      for (const [polygonIndex, polygon] of polygons.entries()) {
-        const entityId = polygonIndex === 0 ? baseEntityId : `${baseEntityId}:part:${polygonIndex}`;
-        wanted.add(entityId);
-        const outerRing = polygon[0];
-        const toCartesian = (ring: Array<[number, number]>) => ring.map(([longitude, latitude]) => (
-          Cartesian3.fromDegrees(longitude, latitude, 0)
-        ));
-        const hierarchy = new PolygonHierarchy(
-          toCartesian(outerRing),
-          polygon.slice(1).map((ring) => new PolygonHierarchy(toCartesian(ring))),
-        );
-        const labelAnchor = outerRing.slice(0, -1).reduce(
-          (accumulator, [longitude, latitude]) => [accumulator[0] + longitude, accumulator[1] + latitude] as [number, number],
-          [0, 0] as [number, number],
-        );
-        const divisor = Math.max(1, outerRing.length - 1);
-        const entity = dataSource.entities.getById(entityId) ?? dataSource.entities.add({ id: entityId });
-        const target = profile?.target.variant === "surface-fill" ? profile.target : null;
-        const visibleBelowLod = target ? showBelowCameraHeight(viewer, target.hideCameraHeightMeters) : true;
-        entity.name = label;
-        entity.position = new ConstantPositionProperty(Cartesian3.fromDegrees(labelAnchor[0] / divisor, labelAnchor[1] / divisor, 0));
-        entity.point = undefined;
-        entity.polygon = new PolygonGraphics({
-          hierarchy,
-          material: color,
-          height: 0,
-          heightReference: HeightReference.CLAMP_TO_GROUND,
-          show: visibleBelowLod,
-        });
-        entity.polyline = new PolylineGraphics({
-          positions: toCartesian(outerRing),
-          width: target?.outlineWidthPx ?? 1.5,
-          material: target
-            ? Color.fromCssColorString(target.outlineColor).withAlpha(target.outlineOpacity)
-            : Color.fromCssColorString("#c9b6ff").withAlpha(0.9),
-          clampToGround: true,
-          show: visibleBelowLod,
-        });
-        entity.label = new LabelGraphics({
-          text: label,
-          font: profile ? `${profile.label.fontWeight} ${profile.label.sizePx}px Arial` : "700 13px Arial",
-          fillColor: profile ? Color.fromCssColorString(profile.label.color) : Color.WHITE,
-          outlineColor: profile ? Color.fromCssColorString(profile.label.outlineColor) : Color.BLACK,
-          outlineWidth: profile?.label.outlineWidthPx ?? 1,
-          style: 2,
-          showBackground: (profile?.label.backgroundOpacity ?? 0.72) > 0,
-          backgroundColor: profile
-            ? Color.fromCssColorString(profile.label.backgroundColor).withAlpha(profile.label.backgroundOpacity)
-            : Color.BLACK.withAlpha(0.72),
-          backgroundPadding: new Cartesian2(profile?.label.paddingX ?? 10, profile?.label.paddingY ?? 7),
-          pixelOffset: new Cartesian2(profile?.label.offsetX ?? 10, profile?.label.offsetY ?? 0),
-          horizontalOrigin: HorizontalOrigin.LEFT,
-          verticalOrigin: VerticalOrigin.BOTTOM,
-          heightReference: HeightReference.CLAMP_TO_GROUND,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY,
-          show: polygonIndex === 0
-            && (profile?.label.mode ?? "attributes") !== "none"
-            && (profile ? showBelowCameraHeight(viewer, profile.label.hideCameraHeightMeters) : true),
-        });
-      }
+      const outerRing = polygons[0]?.[0] ?? [];
+      if (!outerRing.length) continue;
+      wanted.add(baseEntityId);
+      const labelAnchor = outerRing.reduce(
+        (accumulator, [longitude, latitude]) => [accumulator[0] + longitude, accumulator[1] + latitude] as [number, number],
+        [0, 0] as [number, number],
+      );
+      const divisor = Math.max(1, outerRing.length);
+      const entity = dataSource.entities.getById(baseEntityId) ?? dataSource.entities.add({ id: baseEntityId });
+      entity.name = label;
+      entity.position = new ConstantPositionProperty(Cartesian3.fromDegrees(labelAnchor[0] / divisor, labelAnchor[1] / divisor, 0));
+      entity.point = undefined;
+      entity.polygon = undefined;
+      entity.polyline = undefined;
+      entity.label = new LabelGraphics({
+        text: label,
+        font: profile ? `${profile.label.fontWeight} ${profile.label.sizePx}px Arial` : "700 13px Arial",
+        fillColor: profile ? Color.fromCssColorString(profile.label.color) : Color.WHITE,
+        outlineColor: profile ? Color.fromCssColorString(profile.label.outlineColor) : Color.BLACK,
+        outlineWidth: profile?.label.outlineWidthPx ?? 1,
+        style: 2,
+        showBackground: (profile?.label.backgroundOpacity ?? 0.72) > 0,
+        backgroundColor: profile
+          ? Color.fromCssColorString(profile.label.backgroundColor).withAlpha(profile.label.backgroundOpacity)
+          : Color.BLACK.withAlpha(0.72),
+        backgroundPadding: new Cartesian2(profile?.label.paddingX ?? 10, profile?.label.paddingY ?? 7),
+        pixelOffset: new Cartesian2(profile?.label.offsetX ?? 10, profile?.label.offsetY ?? 0),
+        horizontalOrigin: HorizontalOrigin.LEFT,
+        verticalOrigin: VerticalOrigin.BOTTOM,
+        heightReference: HeightReference.CLAMP_TO_GROUND,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        show: (profile?.label.mode ?? "attributes") !== "none"
+          && (profile ? showBelowCameraHeight(viewer, profile.label.hideCameraHeightMeters) : true),
+      });
    }
    for (const entity of [...dataSource.entities.values]) {
      if (typeof entity.id === "string" && !wanted.has(entity.id)) dataSource.entities.remove(entity);
    }
  }
+  syncHGeoZoneLayers(viewer, hGeoZoneLayers, bindings, presentationProfiles, presentationFilters);
  viewer.scene.requestRender();
 }

@@ -681,6 +911,7 @@ export const CesiumMapRenderer = forwardRef<CesiumMapRendererHandle, {
  const terrainRef = useRef<{ world: CesiumTerrainProvider | null; ellipsoid: EllipsoidTerrainProvider } | null>(null);
  const rebuildGridRef = useRef<(() => void) | null>(null);
  const runtimeDataSourcesRef = useRef(new Map<string, CustomDataSource>());
+  const hGeoZoneLayersRef = useRef(new Map<string, HGeoZoneProjectionLayer>());
  const presentationRef = useRef(presentation);
  const runtimeBindingsRef = useRef(runtimeBindings);
  const presentationProfilesRef = useRef(presentationProfiles);
@@ -1119,6 +1350,7 @@ export const CesiumMapRenderer = forwardRef<CesiumMapRendererHandle, {
      syncRuntimeDataSources(
        viewerRef.current,
        runtimeDataSourcesRef.current,
+        hGeoZoneLayersRef.current,
        runtimeBindings,
        presentationProfiles,
        presentationFilters,
@@ -1204,6 +1436,7 @@ export const CesiumMapRenderer = forwardRef<CesiumMapRendererHandle, {
        syncRuntimeDataSources(
          viewer,
          runtimeDataSourcesRef.current,
+          hGeoZoneLayersRef.current,
          runtimeBindingsRef.current,
          presentationProfilesRef.current,
          presentationFiltersRef.current,
@@ -1214,6 +1447,7 @@ export const CesiumMapRenderer = forwardRef<CesiumMapRendererHandle, {
        rebuildGridRef.current = rebuildGrid;
        removeGridCameraListener = viewer.camera.moveEnd.addEventListener(() => {
          rebuildGrid();
+          syncHGeoZoneVisibility(viewer!, hGeoZoneLayersRef.current);
          onCameraChangeRef.current?.(getCameraView(viewer!));
        });

@@ -1361,8 +1595,17 @@ export const CesiumMapRenderer = forwardRef<CesiumMapRendererHandle, {
        handler = new ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction((movement: { position: Cartesian2 }) => {
          const picked = viewer?.scene.pick(movement.position);
-          const entity = picked?.id instanceof Entity ? picked.id : undefined;
-          if (entity?.id) onSelectRef.current?.(entity.id);
+          const pickedId = picked?.id;
+          if (pickedId instanceof Entity && pickedId.id) {
+            onSelectRef.current?.(pickedId.id);
+            return;
+          }
+          if (
+            pickedId
+            && typeof pickedId === "object"
+            && (pickedId as Partial<HGeoZonePickId>).kind === "nodedc-hgeozone"
+            && typeof (pickedId as Partial<HGeoZonePickId>).entityId === "string"
+          ) onSelectRef.current?.((pickedId as HGeoZonePickId).entityId);
        }, ScreenSpaceEventType.LEFT_CLICK);
        resizeObserver = new ResizeObserver(() => {
          if (!viewer || viewer.isDestroyed()) return;
@@ -1404,6 +1647,7 @@ export const CesiumMapRenderer = forwardRef<CesiumMapRendererHandle, {
      terrainRef.current = null;
      rebuildGridRef.current = null;
      runtimeDataSourcesRef.current.clear();
+      hGeoZoneLayersRef.current.clear();
    };
  }, [onGatewayHealth, onProviderStatus, stopSpiralAnimation]);