cesium-alpha-earth 1.0.0

package/src/core/CesiumAlphaGeoJsonLayer/method/geojson-util.ts

@@ -0,0 +1,374 @@
+import {
+  Cartesian3,
+  defined,
+  RuntimeError,
+  VerticalOrigin,
+  HorizontalOrigin,
+  DistanceDisplayCondition,
+  Cartesian2,
+} from "cesium";
+import { getPositionsCenter } from "@/util/getPositionCenters/getPositionCenter";
+import type { GeoJSON } from "geojson";
+import type { GeoJsonLayer } from "..";
+import { GeoJsonLayerType } from "../type";
+import { parseColorToCesium } from "@/util/parseColor";
+export type CrsFunction = (coors: number[]) => Cartesian3;
+export function defaultCrsFunction(coordinates: number[]) {
+  return Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2]);
+}
+
+export const crsNames: Record<string, CrsFunction> = {
+  "urn:ogc:def:crs:OGC:1.3:CRS84": defaultCrsFunction,
+  "EPSG:4326": defaultCrsFunction,
+  "urn:ogc:def:crs:EPSG::4326": defaultCrsFunction,
+};
+
+export const crsLinkHrefs: Record<string, (properties: any) => CrsFunction> =
+  {};
+export const crsLinkTypes: Record<string, (properties: any) => CrsFunction> =
+  {};
+
+export function coordinatesArrayToCartesianArray(
+  coordinates: number[][],
+  crsFunction: CrsFunction
+) {
+  const positions: Cartesian3[] = new Array(coordinates.length);
+  coordinates.map((coor, i) => {
+    positions[i] = crsFunction(coor);
+  });
+  return positions;
+}
+
+type GetKey<T extends { type: string }> = {
+  [K in T["type"]]: (
+    geoJsonLayer: GeoJsonLayer,
+    geoJson: any,
+    geometryCollection: any,
+    crsFunction: CrsFunction,
+    options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+  ) => void;
+};
+
+export const geoJsonObjectTypes: GetKey<GeoJSON.GeoJSON> = {
+  Feature: processFeature,
+  FeatureCollection: processFeatureCollection,
+  GeometryCollection: processGeometryCollection,
+  LineString: processLineString,
+  MultiLineString: processMultiLineString,
+  MultiPoint: processMultiPoint,
+  MultiPolygon: processMultiPolygon,
+  Point: processPoint,
+  Polygon: processPolygon,
+};
+
+export const geometryTypes: GetKey<GeoJSON.Geometry> = {
+  GeometryCollection: processGeometryCollection,
+  LineString: processLineString,
+  MultiLineString: processMultiLineString,
+  MultiPoint: processMultiPoint,
+  MultiPolygon: processMultiPolygon,
+  Point: processPoint,
+  Polygon: processPolygon,
+};
+
+export function processFeature(
+  geoJsonLayer: GeoJsonLayer,
+  feature: GeoJSON.Feature,
+  notUsed: GeoJSON.Feature | undefined,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  if (feature.geometry === null) {
+    return;
+  }
+
+  if (!defined(feature.geometry)) {
+    throw new RuntimeError("feature.geometry is required.");
+  }
+
+  const geometryType = feature.geometry.type;
+  const geometryHandler = geometryTypes[geometryType];
+  if (!defined(geometryHandler)) {
+    throw new RuntimeError(`Unknown geometry type: ${geometryType}`);
+  }
+  geometryHandler(
+    geoJsonLayer,
+    feature,
+    feature.geometry,
+    crsFunction,
+    options
+  );
+}
+
+export function processFeatureCollection(
+  geoJsonLayer: GeoJsonLayer,
+  featureCollection: GeoJSON.FeatureCollection,
+  notUsed: GeoJSON.FeatureCollection,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  const features = featureCollection.features;
+  features.map((feature) => {
+    processFeature(geoJsonLayer, feature, undefined, crsFunction, options);
+  });
+}
+
+export function processGeometryCollection(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON,
+  geometryCollection: GeoJSON.GeometryCollection,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  const geometries = geometryCollection.geometries;
+  geometries.map((geometry) => {
+    const geometryType = geometry.type;
+    const geometryHandler = geometryTypes[geometryType];
+    if (!defined(geometryHandler)) {
+      throw new RuntimeError(`Unknown geometry type: ${geometryType}`);
+    }
+    geometryHandler(geoJsonLayer, geoJson, geometry, crsFunction, options);
+  });
+}
+
+export function createPoint(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  crsFunction: CrsFunction,
+  coordinates: number[],
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  const symbol = options.pointSymbol;
+  const color = options.pointSymbol;
+  const size = options.pointSize;
+  const properties = geoJson.properties ?? {};
+  const labelDistanceDisplay = options.labelDistanceDisplay ?? [0, 5000];
+  const labelColor = options.labelColor ?? "red";
+  if (!symbol) {
+    geoJsonLayer.addPoint({
+      type: "Point",
+      position: crsFunction(coordinates),
+      uid: geoJsonLayer._generateId(),
+      style: {
+        color: color,
+        pixelSize: size,
+      },
+      properties,
+    });
+  } else {
+    const billboard = geoJsonLayer.addBillboard({
+      type: "Billboard",
+      position: crsFunction(coordinates),
+      uid: geoJsonLayer._generateId(),
+      style: {
+        verticalOrigin: VerticalOrigin.BOTTOM,
+        image: symbol,
+        width: size,
+        height: size,
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+      },
+      properties,
+    });
+  }
+  if (options.pointLabelFields) {
+    geoJsonLayer.addLabel({
+      type: "Label",
+      position: crsFunction(coordinates),
+      uid: geoJsonLayer._generateId(),
+      style: {
+        font: options.labelFont,
+        verticalOrigin: VerticalOrigin.CENTER,
+        horizontalOrigin: HorizontalOrigin.CENTER,
+        pixelOffset: new Cartesian2(
+          options.pixelOffset[0],
+          options.pixelOffset[1]
+        ),
+        fillColor: parseColorToCesium(labelColor),
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        distanceDisplayCondition: new DistanceDisplayCondition(
+          labelDistanceDisplay[0],
+          labelDistanceDisplay[1]
+        ),
+        text: properties[options.pointLabelFields],
+      },
+    });
+  }
+}
+
+export function processPoint(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  geometry: GeoJSON.Point,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  createPoint(
+    geoJsonLayer,
+    geoJson,
+    crsFunction,
+    geometry.coordinates,
+    options
+  );
+}
+
+export function processMultiPoint(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  geometry: GeoJSON.MultiPoint,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  geometry.coordinates.map((coor) =>
+    createPoint(geoJsonLayer, geoJson, crsFunction, coor, options)
+  );
+}
+
+export function createLineString(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  crsFunction: CrsFunction,
+  coordinates: number[][],
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  const properties = geoJson.properties ?? {};
+  const positions = coordinatesArrayToCartesianArray(coordinates, crsFunction);
+  const labelColor = options.labelColor;
+  const labelDistanceDisplay = options.labelDistanceDisplay ?? [0, 5000];
+  geoJsonLayer.addPolyline({
+    type: "Polyline",
+    uid: geoJsonLayer._generateId(),
+    positions,
+    properties,
+    style: {
+      material: options.lineColor,
+      width: options.lineWidth,
+    },
+  });
+
+  // positions.forEach((point) => {
+  //   geoJsonLayer.labelCollection.add({
+  //     position: point,
+  //     font: options.labelFont,
+  //     verticalOrigin: VerticalOrigin.CENTER,
+  //     horizontalOrigin: HorizontalOrigin.CENTER,
+  //     pixelOffset: new Cartesian2(options.pixelOffset[0], options.pixelOffset[1]),
+  //     fillColor: parseColorToCesium(labelColor),
+  //     disableDepthTestDistance: Number.POSITIVE_INFINITY,
+  //     distanceDisplayCondition: new DistanceDisplayCondition(labelDistanceDisplay[0], labelDistanceDisplay[1]),
+  //     text: properties[options.lineLabelFields]
+  //   })
+  // })
+}
+
+export function processLineString(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  geometry: GeoJSON.LineString,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  createLineString(
+    geoJsonLayer,
+    geoJson,
+    crsFunction,
+    geometry.coordinates,
+    options
+  );
+}
+
+export function processMultiLineString(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  geometry: GeoJSON.MultiLineString,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  const lineStrings = geometry.coordinates;
+  let geometryLine: any[] = [];
+  lineStrings.map((lineString) => {
+    geometryLine.push(...lineString);
+  });
+  createLineString(geoJsonLayer, geoJson, crsFunction, geometryLine, options);
+}
+
+export function createPolygon(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  crsFunction: CrsFunction,
+  coordinates: GeoJSON.Position[][],
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  if (coordinates.length === 0 || coordinates[0].length === 0) {
+    return;
+  }
+  const properties = geoJson.properties ?? {};
+  const labelDistanceDisplay = options.labelDistanceDisplay ?? [0, 5000];
+  const labelColor = options.labelColor ?? "red";
+  const cartesian3Coords = coordinates.map((it) =>
+    coordinatesArrayToCartesianArray(it, crsFunction)
+  );
+  geoJsonLayer.addPolygon({
+    type: "Polygon",
+    positions: cartesian3Coords[0],
+    holes: cartesian3Coords.slice(1),
+    uid: geoJsonLayer._generateId(),
+    style: {
+      material: options.gonColor,
+    },
+    properties,
+  });
+  if (options.gonLabelFields) {
+    geoJsonLayer.addLabel({
+      type: "Label",
+      position: getPositionsCenter(cartesian3Coords[0], 500).cartesian3,
+      uid: geoJsonLayer._generateId(),
+      style: {
+        font: options.labelFont,
+        verticalOrigin: VerticalOrigin.CENTER,
+        horizontalOrigin: HorizontalOrigin.CENTER,
+        pixelOffset: new Cartesian2(
+          options.pixelOffset[0],
+          options.pixelOffset[1]
+        ),
+        fillColor: parseColorToCesium(labelColor),
+        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        distanceDisplayCondition: new DistanceDisplayCondition(
+          labelDistanceDisplay[0],
+          labelDistanceDisplay[1]
+        ),
+        text: properties[options.gonLabelFields],
+      },
+    });
+  }
+}
+
+export function processPolygon(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  geometry: GeoJSON.Polygon,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  createPolygon(
+    geoJsonLayer,
+    geoJson,
+    crsFunction,
+    geometry.coordinates,
+    options
+  );
+}
+
+export function processMultiPolygon(
+  geoJsonLayer: GeoJsonLayer,
+  geoJson: GeoJSON.Feature,
+  geometry: GeoJSON.MultiPolygon,
+  crsFunction: CrsFunction,
+  options: Required<GeoJsonLayerType.GeoJsonLayerOptions>
+) {
+  const polygons = geometry.coordinates;
+  let polygonGeo: any[] = [];
+  polygons.map((polygon) => {
+    polygonGeo.push(...polygon)
+  });
+  createPolygon(geoJsonLayer, geoJson, crsFunction, polygonGeo, options);
+}

package/src/core/CesiumAlphaGeoJsonLayer/type.ts

@@ -0,0 +1,108 @@
+import * as Cesium from "cesium";
+export declare namespace GeoJsonLayerType {
+  type GeoJsonLayerOptions = {
+    name?: string;
+    sourceUri?: string;
+    pointSize?: number;
+    pointSymbol?: string;
+    pointColor?: string;
+    pointLabelFields?: string;
+    pointClampToGround?: boolean;
+    lineColor?: string;
+    lineWidth?: number;
+    lineClampToGround?: boolean;
+    lineLabelFields?: string;
+    lineMaterial?: Cesium.Material;
+    gonColor?: string;
+    gonLabelFields?: string;
+    gonClampToGround?: boolean;
+    labelDistanceDisplay?: [number, number];
+    labelColor?: string;
+    labelFont?: string;
+    pixelOffset?: [number, number];
+    showLevel?: number;
+    zIndex?: number;
+    depthTest?: boolean;
+    bathSize?: number;
+    show?: boolean;
+    finishFun?: Function;
+    allowPick?: boolean;
+    popupType?: LayerPopupType;
+    popupShowFields?: string[];
+    fieldsAlias?: Array<{
+      name: string;
+      alias: string;
+      [key: string]: any;
+    }>;
+  };
+
+  type LayerPopupType = "attribute" | "rtsp";
+
+  type PrimitiveItem =
+    | PointPrimitiveItem
+    | BillboardPrimitiveItem
+    | PolygonPrimitiveItem
+    | PolylinePrimitiveItem
+    | LabelPrimitiveItem;
+
+  type GeoJsonFeatureItem = {
+    id?: any;
+    properties?: Record<string, any>;
+    uid: string;
+    center?: {
+      cartesian3: Cesium.Cartesian3;
+      height?: number;
+    };
+  };
+
+  type PointPrimitiveItem = {
+    type: "Point";
+    position: Cesium.Cartesian3;
+    style?: {
+      pixelSize?: number;
+      heightReference?: Cesium.HeightReference;
+      color?: string;
+      outlineColor?: string;
+      outlineWidth?: number;
+    };
+    instance?: Cesium.PointPrimitive;
+  } & GeoJsonFeatureItem;
+
+  type BillboardPrimitiveItem = {
+    type: "Billboard";
+    position: Cesium.Cartesian3;
+    style?: Cesium.BillboardGraphics.ConstructorOptions;
+    instance?: Cesium.Billboard;
+  } & GeoJsonFeatureItem;
+
+  type LabelPrimitiveItem = {
+    type: "Label";
+    position: Cesium.Cartesian3;
+    style?: Cesium.LabelGraphics.ConstructorOptions;
+    instance?: Cesium.Label;
+  } & GeoJsonFeatureItem;
+
+  type PolygonPrimitiveItem = {
+    type: "Polygon";
+    positions: Cesium.Cartesian3[];
+    holes: Cesium.Cartesian3[][];
+    style?: {
+      material?: string;
+      height?: number;
+      extrudedHeight?: number;
+      outlineColor?: string;
+      outlineWidth?: number;
+    };
+    instance?: Cesium.PolygonGeometry;
+  } & GeoJsonFeatureItem;
+
+  type PolylinePrimitiveItem = {
+    type: "Polyline";
+    positions: Cesium.Cartesian3[];
+    style?: {
+      material?: string;
+      width?: number;
+    };
+    instance?: Cesium.PolylineGeometry | Cesium.GroundPolylineGeometry;
+  } & GeoJsonFeatureItem;
+}

package/src/core/CesiumAlphaViewer/index.ts

@@ -0,0 +1,106 @@
+import {
+  Cartesian3,
+  Cartographic,
+  Cesium3DTileset,
+  EllipsoidTerrainProvider,
+  sampleTerrainMostDetailed,
+  Viewer,
+} from "cesium";
+import {
+  ViewerOption,
+  FlyToOptionType,
+  FlyToTargetType,
+  LayerInfoOption,
+  ModelInfoOption,
+} from "./type";
+import { createViewer } from "./method/createViewer";
+import { goTo } from "./method/goTo";
+import { GeoJsonLayer } from "../CesiumAlphaGeoJsonLayer";
+import { enableCluster } from "./method/clusterFun";
+import { load3DtilestModel } from "./method/load3DtilestModel";
+import { loadGeoJsonLayer } from "./method/loadGeoJsonLayer";
+import { toRaw } from "vue";
+
+export default class CesiumAlphaViewer {
+  private _layerDatasource: GeoJsonLayer[] = [];
+
+  viewer: Viewer;
+
+  private _modelDatasource: any;
+
+  get modelDatasource() {
+    return this._modelDatasource;
+  }
+
+  get layerDatasource() {
+    return this._layerDatasource;
+  }
+
+  constructor(container: string | HTMLElement, option?: ViewerOption) {
+    this.viewer = createViewer(container, option);
+  }
+
+  //飞向目标
+  public goTo(target: FlyToTargetType, flyToOption?: FlyToOptionType): void {
+    if (this.viewer) goTo(this.viewer, target, flyToOption);
+  }
+
+  //开启图层聚合
+  public enableLayerCluster(layer: GeoJsonLayer) {
+    layer.cluster = enableCluster(this, layer);
+    return layer.cluster;
+  }
+
+  //关闭图层聚合
+  public closeLayerCluster(layer: GeoJsonLayer) {
+    layer.show = true;
+
+    layer.cluster.get(0).destroy();
+
+    layer.cluster = undefined;
+
+    return true;
+  }
+
+  //加载3D模型
+  public load3DtilestModel(modelInfo: ModelInfoOption[]) {
+    return load3DtilestModel(this, modelInfo);
+  }
+
+  //根据UID寻找图层
+  public findLayerByUID(uid: string): GeoJsonLayer | undefined {
+    return this._layerDatasource.find((layer) => {
+      return layer.layerId == uid;
+    });
+  }
+
+  public async loadGeoJsonLayer(layerInfo: LayerInfoOption[]) {
+    return loadGeoJsonLayer(this, layerInfo);
+  }
+
+  //根据图层ID移除图层
+  public removeLayerById(layerId: string) {
+    this.layerDatasource?.forEach((item: GeoJsonLayer, index: number) => {
+      if (item.layerId == layerId) {
+        item.destroy();
+        //@ts-ignore
+        this.layerDatasource.splice(index, 1);
+      }
+    });
+  }
+
+  //重置当前场景
+  resetScene() {
+    this._layerDatasource.forEach((layer: GeoJsonLayer) => {
+      layer.destroy();
+    });
+    this._layerDatasource = [];
+
+    this._modelDatasource.forEach((model: Cesium3DTileset) => {
+      this.viewer?.scene.primitives.remove(model);
+    });
+    this._modelDatasource = [];
+  }
+
+ 
+}

package/src/core/CesiumAlphaViewer/method/clusterFun.ts

@@ -0,0 +1,116 @@
+import { GeoJsonLayer } from "../layer/GeoJsonLayer";
+import * as Cesium from "cesium"
+import PrimitiveCluster from "@/util/PrimitiveCuster/index.js"
+import { EarthViewMap } from "./EarthViewMap";
+export function enableCluster(that:EarthViewMap,layer: GeoJsonLayer) {
+    layer.show = false
+    // 使用primitives 添加点
+    var labels = new Cesium.LabelCollection()
+    var billboards = new Cesium.BillboardCollection()
+    var collection = new Cesium.PrimitiveCollection()
+
+    for (let i = 0; i < layer.billboardCollection.length; i++) {
+        let element = layer.billboardCollection.get(i)
+
+        let center = element.position
+
+        let title = {
+            id: element.id,
+            position: center,
+            font: "30px Source Han Sans CN", //字体样式
+            fillColor: Cesium.Color.fromCssColorString("#ffffff"), //字体颜色
+            showBackground: true, //是否显示背景颜色
+            backgroundColor: Cesium.Color.fromCssColorString("#000000"), //背景颜色
+            verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
+            disableDepthTestDistance: Number.POSITIVE_INFINITY
+        }
+
+        let img = {
+            id: element.id,
+            position: center,
+            image: element.image,
+            width: 50,
+            height: 50,
+            scale: 1,
+            verticalOrigin: Cesium.VerticalOrigin.CENTER, //垂直位置
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, //水平位置
+            disableDepthTestDistance: Number.POSITIVE_INFINITY
+        }
+        labels.add(title)
+        billboards.add(img)
+    }
+
+    let primitivecluster = null
+    primitivecluster = new PrimitiveCluster()
+    primitivecluster.enabled = true
+    primitivecluster.pixelRange = 60
+    primitivecluster.minimumClusterSize = 2
+    primitivecluster._billboardCollection = billboards
+    // 同时在赋值时调用_initialize方法
+    primitivecluster._initialize(that.viewer?.scene)
+    collection.add(primitivecluster)
+    let primitivesCluster = that.viewer?.scene.primitives.add(collection)
+    primitivecluster.clusterEvent.addEventListener((clusteredEntities: any, cluster: any) => {
+
+        if (that.viewer) {
+            if (that.viewer.scene.camera.positionCartographic.height < 30000) {
+                primitivecluster.show = false
+                layer.show = true
+            } else {
+                primitivecluster.show = true
+                layer.show = false
+            }
+        }
+
+        // 关闭自带的显示聚合数量的标签
+        cluster.label.show = false;
+        cluster.billboard.show = true;
+        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
+        // 根据聚合数量的多少设置不同层级的图片以及大小
+        cluster.billboard.image = combineIconAndLabel(
+            layer.option.pointSymbol || "",
+            clusteredEntities.length,
+            64
+        );
+        cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY
+        cluster.billboard._imageHeight = 30;
+        cluster.billboard._imageWidth = 30;
+        cluster.billboard._dirty = false;
+        cluster.billboard.width = 40;
+        cluster.billboard.height = 40;
+    })
+
+    return primitivesCluster
+}
+
+
+
+export function combineIconAndLabel(url: string, label: string, size: number) {
+    // 创建画布对象
+    let canvas = document.createElement("canvas");
+    canvas.width = size;
+    canvas.height = size;
+    let ctx = canvas.getContext("2d");
+    let promise: any = Cesium.Resource.fetchImage({ url })?.then((image: any) => {
+        // 异常判断
+        try {
+            ctx?.drawImage(image, 0, 0, canvas.width, canvas.height);
+        } catch (e) {
+            console.log(e);
+        }
+
+        if (ctx) {
+            // 渲染字体
+            // font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
+            ctx.fillStyle = Cesium.Color.BLACK.toCssColorString();
+            ctx.font = "bold 20px Microsoft YaHei";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(label, size / 2, size / 2);
+        }
+
+        return canvas;
+    });
+    return promise;
+}