cesium-alpha-earth 1.0.0

package/src/core/CesiumAlphaGeoJsonLayer/index.ts

@@ -0,0 +1,815 @@
+import { GeoJsonLayerType } from "./type";
+import { nanoid } from "nanoid";
+import * as Cesium from "cesium";
+import { parseColorToCesium } from "@/util/parseColor";
+import { getPositionsCenter } from "@/util/getPositionCenters/getPositionCenter";
+import {
+  crsLinkHrefs,
+  crsLinkTypes,
+  crsNames,
+  geoJsonObjectTypes,
+  defaultCrsFunction,
+} from "./method/geojson-util";
+const DefaultColor = "rgb(255,0,0)";
+
+const DefaultOptions: GeoJsonLayerType.GeoJsonLayerOptions = {
+  name: nanoid(),
+  pointSize: 32,
+  pointColor: DefaultColor,
+  pointClampToGround: false,
+  pointLabelFields: "",
+  lineColor: DefaultColor,
+  lineWidth: 2,
+  lineLabelFields: undefined,
+  lineClampToGround: false,
+  gonColor: DefaultColor,
+  gonClampToGround: false,
+  gonLabelFields: "",
+  labelDistanceDisplay: [0, 5000],
+  labelColor: "rgb(50,200,0)",
+  labelFont: "24px sans-serif",
+  showLevel: 0,
+  sourceUri: "",
+  pointSymbol: "",
+  depthTest: false,
+  bathSize: 30,
+  show: true,
+  zIndex: 0,
+  pixelOffset: [0, 0],
+  allowPick: true,
+  finishFun: () => {},
+  popupShowFields: ["*"],
+  fieldsAlias: [],
+  popupType:'attribute'
+};
+
+export class GeoJsonLayer {
+  //图层名称
+  private _name: string;
+  //图层ID
+  private _layerId: string;
+  //当前加载状态
+  public _isLoading: boolean;
+  //点线面的管理容器
+  private _primitiveCollection: Cesium.PrimitiveCollection;
+  //数据请求的promiss对象
+  readonly _promises: Promise<any>[];
+  //所有点线面的数据容器
+  private _featureItems: GeoJsonLayerType.PrimitiveItem[] = [];
+  //geojson数据对象
+  private _geojson: GeoJSON.FeatureCollection | undefined;
+  //当前图层的点线面的相关配置
+  private _options: Required<GeoJsonLayerType.GeoJsonLayerOptions>;
+  //点的数据基元集合
+  private _pointCollection: Cesium.PointPrimitiveCollection;
+  private _billboardCollection: Cesium.BillboardCollection;
+  private _labelCollection: Cesium.LabelCollection;
+  //线的基元对象集合
+  private _polylinePrimitive: Cesium.PrimitiveCollection | undefined;
+  private _polylineInstances: Cesium.GeometryInstance[] = [];
+  private _polylineFinish: boolean = false;
+  //面的基元对象集合
+  private _polygonPrimitive: Cesium.PrimitiveCollection | undefined;
+  private _polygonInstances: Cesium.GeometryInstance[] = [];
+  private _polygonFinish: boolean = false;
+
+  public cluster: any = undefined;
+  //================================
+  private _showLevel: number;
+  private _isDestroyed = false;
+
+  constructor(options: {
+    name?: string;
+    options?: GeoJsonLayerType.GeoJsonLayerOptions;
+  }) {
+    this._isLoading = false;
+    this._primitiveCollection = new Cesium.PrimitiveCollection();
+    this._billboardCollection = new Cesium.BillboardCollection();
+    this._labelCollection = new Cesium.LabelCollection();
+    this._pointCollection = new Cesium.PointPrimitiveCollection({
+      blendOption: Cesium.BlendOption.TRANSLUCENT,
+    });
+    //@ts-ignore
+    this._options = { ...DefaultOptions, ...options.options };
+
+    this._promises = [];
+    this._showLevel = 0;
+    this._isLoading = true;
+    this._name = options.name || "未知图层";
+    this._layerId = this._generateId();
+    //@ts-ignore
+    this.show = this._options.show;
+  }
+
+  get layerId() {
+    return this._layerId;
+  }
+
+  get primitiveCollection() {
+    return this._primitiveCollection;
+  }
+
+  get billboardCollection() {
+    return this._billboardCollection;
+  }
+
+  get labelCollection() {
+    return this._labelCollection;
+  }
+
+  get pointPrimitiveCollection() {
+    return this._pointCollection;
+  }
+
+  get polygonPrimitive() {
+    return this._polygonPrimitive;
+  }
+
+  get polylinePrimitive() {
+    return this._polylinePrimitive;
+  }
+
+  get featureItems() {
+    return this._featureItems;
+  }
+  get zIndex() {
+    return this._options.zIndex;
+  }
+  //**
+  // 图层名称
+  // */
+  get name() {
+    return this._name;
+  }
+
+  set name(value) {
+    if (this._name !== value) {
+      this._name = value;
+    }
+  }
+  //**
+  // 是否正在加载
+  //  */
+  get loading() {
+    return this._isLoading;
+  }
+  //**
+  // 整个图层的显隐控制器
+  // */
+  get show() {
+    return this._primitiveCollection.show;
+  }
+  set show(value) {
+    this._primitiveCollection.show = value;
+  }
+  /**
+   *获取一个对象，该对象将crs的名称映射到一个接受GeoJSON坐标的回调函数
+   *并将其转换为WGS84地球固定笛卡尔坐标系。旧版本的GeoJSON
+   *通过指定完整的EPSG名称，
+   *例如“EPSG:4326”。.
+   * @type {Object}
+   */
+  get crsNames() {
+    return crsNames;
+  }
+
+  /**
+   *获取一个对象，该对象将crs链接的href属性映射到回调函数
+   *它接受crs属性对象并返回一个Promise，该Promise解析
+   *该函数接受GeoJSON坐标并将其转换为WGS84地球固定笛卡尔坐标。
+   *此对象中的项目优先于<code>crsLinkHrefs</code>中定义的项目，假设
+   *链接具有指定的类型。
+   * @type {Object}
+   */
+  get crsLinkHrefs() {
+    return crsLinkHrefs;
+  }
+
+  get option() {
+    return this._options;
+  }
+
+  /**
+   *获取一个对象，该对象将crs链接的类型属性映射到回调函数
+   *它接受crs属性对象并返回一个Promise，该Promise解析
+   *该函数接受GeoJSON坐标并将其转换为WGS84地球固定笛卡尔坐标。
+   *<code>crsLinkHrefs</code>中的项优先于此对象。
+   * @type {Object}
+   */
+  get crsLinkTypes() {
+    return crsLinkTypes;
+  }
+
+  get isDestroyed() {
+    return this._isDestroyed;
+  }
+
+  get geojson() {
+    return this._geojson;
+  }
+
+  public _generateId() {
+    return nanoid();
+  }
+
+  addBillboard(item: GeoJsonLayerType.BillboardPrimitiveItem) {
+    const { position, style, properties, type, uid } = item;
+    const id = {
+      uid: uid,
+      type,
+      properties,
+      popupAttributes: {
+        title: this._name,
+        attributes: createAttribute(
+          properties,
+          this.option.fieldsAlias,
+          this.option.popupShowFields
+        ),
+      },
+      layer: this,
+      allowPick: this.option.allowPick,
+    };
+    const instance = this._billboardCollection.add({
+      id,
+      ...(style as Cesium.Billboard.ConstructorOptions),
+      position,
+    });
+    this.addFeatureItem({
+      ...item,
+      id,
+      instance,
+      center: { cartesian3: position },
+    });
+    return instance;
+  }
+
+  addLabel(item: GeoJsonLayerType.LabelPrimitiveItem) {
+    const { position, style, uid } = item;
+    const id = uid;
+    const instance = this._labelCollection.add({
+      id,
+      ...(style as Cesium.Label.ConstructorOptions),
+      position,
+    });
+    return instance;
+  }
+
+  addPoint(item: GeoJsonLayerType.PointPrimitiveItem) {
+    const { position, style, uid, type, properties } = item;
+    const id = {
+      uid: uid,
+      type,
+      popupAttributes: {
+        title: this._name,
+        attributes: createAttribute(
+          properties,
+          this.option.fieldsAlias,
+          this.option.popupShowFields
+        ),
+      },
+      properties,
+      layer: this,
+      allowPick: this.option.allowPick,
+    };
+    const instance = this._pointCollection.add({
+      id,
+      position,
+      ...style,
+      color: parseColorToCesium(style?.color || this._options.pointColor),
+    });
+    this.addFeatureItem({
+      ...item,
+      id,
+      instance,
+      center: { cartesian3: position },
+    });
+    return instance;
+  }
+
+  addPolygon(item: GeoJsonLayerType.PolygonPrimitiveItem) {
+    const { positions, style, holes, uid, type, properties } = item;
+    const id = {
+      uid: uid,
+      type,
+      popupAttributes: {
+        title: this._name,
+        attributes: createAttribute(
+          properties,
+          this.option.fieldsAlias,
+          this.option.popupShowFields
+        ),
+      },
+      properties,
+      layer: this,
+      allowPick: this.option.allowPick,
+    };
+
+    const geometry = new Cesium.PolygonGeometry({
+      polygonHierarchy: new Cesium.PolygonHierarchy(
+        positions,
+        holes.map((hole) => new Cesium.PolygonHierarchy(hole))
+      ),
+      vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
+      extrudedHeight: style?.extrudedHeight,
+      arcType: Cesium.ArcType.RHUMB,
+    });
+
+    const instance = new Cesium.GeometryInstance({
+      geometry,
+      attributes: {
+        color: Cesium.ColorGeometryInstanceAttribute.fromColor(
+          Cesium.Color.fromCssColorString(
+            style?.material ?? this._options.gonColor ?? DefaultOptions.gonColor
+          )
+        ),
+      },
+      id,
+    });
+
+    this._polygonInstances.push(instance);
+
+    this.addFeatureItem({
+      ...item,
+      id,
+      instance: geometry,
+      center: getPositionsCenter(item.positions, style?.extrudedHeight),
+    });
+
+    this.addPolyline(
+      {
+        type: "Polyline",
+        positions,
+        uid: this._generateId(),
+        center: {
+          cartesian3: item.positions[Math.floor(item.positions.length / 2)],
+        },
+        style: {
+          width: style?.outlineWidth,
+          material: style?.outlineColor,
+        },
+      },
+      false
+    );
+
+    return instance;
+  }
+
+  addPolyline(item: GeoJsonLayerType.PolylinePrimitiveItem, addFeature = true) {
+    const { positions, style, uid, properties, type } = item;
+    const id = {
+      uid: uid,
+      type,
+      popupAttributes: {
+        title: this._name,
+        attributes: createAttribute(
+          properties,
+          this.option.fieldsAlias,
+          this.option.popupShowFields
+        ),
+      },
+      properties,
+      layer: this,
+      allowPick: this.option.allowPick,
+    };
+    let geometry = null;
+
+    if (this._options.lineClampToGround) {
+      geometry = new Cesium.GroundPolylineGeometry({
+        positions: positions,
+        width: style?.width,
+        arcType: Cesium.ArcType.RHUMB,
+      });
+    } else {
+      geometry = new Cesium.PolylineGeometry({
+        positions,
+        vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
+        width: style?.width,
+        arcType: Cesium.ArcType.RHUMB,
+      });
+    }
+
+    const instance = new Cesium.GeometryInstance({
+      geometry,
+      attributes: {
+        color: Cesium.ColorGeometryInstanceAttribute.fromColor(
+          Cesium.Color.fromCssColorString(
+            style?.material ??
+              this._options.lineColor ??
+              DefaultOptions.lineColor
+          )
+        ),
+      },
+      id,
+    });
+
+    this._polylineInstances.push(instance);
+
+    if (addFeature)
+      this.addFeatureItem({
+        ...item,
+        id,
+        instance: geometry,
+        center: {
+          cartesian3: item.positions[Math.floor(item.positions.length / 2)],
+        },
+      });
+
+    return instance;
+  }
+
+  addFeatureItem(item: GeoJsonLayerType.PrimitiveItem) {
+    this._featureItems.push(item);
+    return item;
+  }
+
+  findFeatureItemByUID(uid: string) {
+    return this.featureItems.find((feature) => {
+      return uid == feature.uid;
+    });
+  }
+
+  static async load(
+    url: any,
+    options: GeoJsonLayerType.GeoJsonLayerOptions = {}
+  ): Promise<GeoJsonLayer> {
+    let data = url;
+
+    let name = options.name || nanoid();
+    //创建图层对象
+    const layer = new GeoJsonLayer({ name: name, options });
+    //查看data是否定义
+    if (!Cesium.defined(data)) {
+      throw new Cesium.DeveloperError("数据无内容.");
+    }
+
+    let promise: any = data;
+    let sourceUri = options.sourceUri;
+
+    if (typeof data === "string") {
+      data = new Cesium.Resource({ url: data });
+    }
+    if (data instanceof Cesium.Resource) {
+      promise = data.fetchJson();
+
+      sourceUri = sourceUri ?? data.getUrlComponent();
+    }
+
+    try {
+      const geoJson = await Promise.resolve(promise);
+      layer._geojson = geoJson;
+      await layer.preload(geoJson, options, sourceUri, true);
+      return layer;
+    } catch (error: any) {
+      layer._isLoading = false;
+      throw error;
+    }
+  }
+
+  //前置处理函数
+  async preload(
+    geoJson: GeoJSON.GeoJSON,
+    layerOptions: GeoJsonLayerType.GeoJsonLayerOptions,
+    sourceUri: string | undefined,
+    clear: boolean
+  ) {
+    const options = { ...this._options, ...layerOptions };
+
+    let name: string | undefined;
+
+    if (options.name) {
+      name = options.name;
+    } else if (sourceUri) {
+      name = Cesium.getFilenameFromUri(sourceUri);
+    } else {
+      name = "未知图层";
+    }
+
+    if (name && this._name !== name) {
+      this._name = name;
+    }
+
+    const typeHandler = geoJsonObjectTypes[geoJson.type];
+    if (!Cesium.defined(typeHandler)) {
+      throw new Cesium.RuntimeError(
+        `Unsupported GeoJSON object type: ${geoJson.type}`
+      );
+    }
+
+    //检查坐标系是否合规
+    const crs = (geoJson as any).crs;
+    let crsFunction = crs !== null ? defaultCrsFunction : null;
+
+    if (Cesium.defined(crs)) {
+      if (!Cesium.defined(crs.properties)) {
+        throw new Cesium.RuntimeError("crs.properties is undefined.");
+      }
+
+      const properties = crs.properties;
+      if (crs.type === "name") {
+        crsFunction = crsNames[properties.name];
+        if (!Cesium.defined(crsFunction)) {
+          throw new Cesium.RuntimeError(`Unknown crs name: ${properties.name}`);
+        }
+      } else if (crs.type === "link") {
+        let handler = crsLinkHrefs[properties.href];
+        if (!Cesium.defined(handler)) {
+          handler = crsLinkTypes[properties.type];
+        }
+
+        if (!Cesium.defined(handler)) {
+          throw new Cesium.RuntimeError(
+            `Unable to resolve crs link: ${JSON.stringify(properties)}`
+          );
+        }
+
+        crsFunction = handler(properties);
+      } else if (crs.type === "EPSG") {
+        crsFunction = crsNames[`EPSG:${properties.code}`];
+        if (!Cesium.defined(crsFunction)) {
+          throw new Cesium.RuntimeError(
+            `Unknown crs EPSG code: ${properties.code}`
+          );
+        }
+      } else {
+        throw new Cesium.RuntimeError(`Unknown crs type: ${crs.type}`);
+      }
+    }
+
+    return Promise.resolve(crsFunction).then(async (crsFunc) => {
+      if (clear) {
+        this._primitiveCollection.removeAll();
+      }
+
+      // null is a valid value for the crs, but means the entire load process becomes a no-op
+      // because we can't assume anything about the coordinates.
+      if (crsFunc !== null) {
+        typeHandler(
+          this,
+          geoJson,
+          geoJson,
+          crsFunc,
+          options as Required<GeoJsonLayerType.GeoJsonLayerOptions>
+        );
+      }
+
+      await Promise.all(this._promises);
+      this._promises.length = 0;
+      await this.reloadPrimitive();
+      return this;
+    });
+  }
+
+  async reloadPrimitive(depthTest: boolean = this._options.depthTest ?? false) {
+    let that = this;
+    const appearance = depthTest
+      ? new Cesium.PerInstanceColorAppearance({
+          translucent: false,
+          renderState: {
+            depthTest: {
+              enabled: true,
+            },
+            depthMask: true,
+            blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
+          },
+        })
+      : new Cesium.PerInstanceColorAppearance({
+          flat: true,
+          translucent: false,
+          closed: true,
+          renderState: {
+            depthTest: false,
+            depthMask: false,
+            blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
+          },
+        });
+
+    this._polygonPrimitive = new Cesium.PrimitiveCollection();
+    let gonCollection = this._polygonPrimitive;
+    if (this._polygonInstances.length == 0) {
+      that._polygonFinish = true;
+    }
+    //贴地面或者不贴地面（由面贴地属性决定）
+    if (this._options.gonClampToGround) {
+      let taskArr = splitArrayIntoGroups(
+        this._polygonInstances,
+        this._options.bathSize
+      );
+      let index = 0;
+      async function executeBatch() {
+        gonCollection.add(
+          new Cesium.GroundPrimitive({
+            geometryInstances: taskArr[index],
+            appearance,
+            asynchronous: true,
+            releaseGeometryInstances: true,
+          })
+        );
+
+        index++;
+        if (index >= taskArr.length) {
+          that._polygonFinish = true;
+
+          that.checkLoadingStatus();
+
+          return;
+        }
+
+        await new Promise(requestAnimationFrame);
+        await executeBatch();
+      }
+
+      await new Promise(requestAnimationFrame);
+      await executeBatch();
+    } else {
+      let taskArr = splitArrayIntoGroups(
+        this._polygonInstances,
+        this._options.bathSize
+      );
+      let index = 0;
+      async function executeBatch() {
+        gonCollection.add(
+          new Cesium.Primitive({
+            geometryInstances: taskArr[index],
+            appearance,
+            asynchronous: true,
+            releaseGeometryInstances: true,
+          })
+        );
+
+        index++;
+        if (index >= taskArr.length) {
+          that._polygonFinish = true;
+          that.checkLoadingStatus();
+          return;
+        }
+        await new Promise(requestAnimationFrame);
+        await executeBatch();
+      }
+
+      await new Promise(requestAnimationFrame);
+      await executeBatch();
+    }
+    //必须初始化否则没有地形无法加载地球
+    // await Cesium.GroundPolylinePrimitive.initializeTerrainHeights();
+    this._polylinePrimitive = new Cesium.PrimitiveCollection();
+    //贴地线或者不贴地线（由线贴地属性决定）
+    if (this._polylineInstances.length == 0) {
+      that._polylineFinish = true;
+    }
+
+    let lineCollection = this._polylinePrimitive;
+
+    let appearanceLine = this.option.lineMaterial
+      ? new Cesium.PolylineMaterialAppearance({
+          material: this.option.lineMaterial,
+        })
+      : new Cesium.PolylineColorAppearance({
+          translucent: false,
+        });
+
+    if (this._options.lineClampToGround) {
+      let taskArr = splitArrayIntoGroups(
+        this._polylineInstances,
+        this._options.bathSize
+      );
+      let index = 0;
+      async function executeBatch() {
+        lineCollection.add(
+          new Cesium.GroundPolylinePrimitive({
+            geometryInstances: taskArr[index],
+            appearance: appearanceLine,
+            asynchronous: true,
+            releaseGeometryInstances: true,
+            classificationType: Cesium.ClassificationType.TERRAIN,
+          })
+        );
+
+        index++;
+        if (index >= taskArr.length) {
+          that._polylineFinish = true;
+          that.checkLoadingStatus();
+          return;
+        }
+        await new Promise(requestAnimationFrame);
+        await executeBatch();
+      }
+
+      await new Promise(requestAnimationFrame);
+
+      await executeBatch();
+    } else {
+      let taskArr = splitArrayIntoGroups(
+        this._polylineInstances,
+        this._options.bathSize
+      );
+      let index = 0;
+
+      async function executeBatch() {
+        lineCollection.add(
+          new Cesium.Primitive({
+            geometryInstances: taskArr[index],
+            appearance: appearanceLine,
+            asynchronous: true,
+            releaseGeometryInstances: true,
+          })
+        );
+
+        index++;
+        if (index >= taskArr.length) {
+          that._polylineFinish = true;
+          that.checkLoadingStatus();
+          return;
+        }
+        await new Promise(requestAnimationFrame);
+        await executeBatch();
+      }
+
+      await new Promise(requestAnimationFrame);
+      await executeBatch();
+    }
+
+    this._primitiveCollection.add(this._polygonPrimitive);
+    //@ts-ignore
+    this._polygonPrimitive.featureType = "polygonFeature";
+
+    this._primitiveCollection.add(this._polylinePrimitive);
+    //@ts-ignore
+    this._polylinePrimitive.featureType = "polylineFeature";
+
+    this._primitiveCollection.add(this._billboardCollection);
+    //@ts-ignore
+    this._billboardCollection.featureType = "pointFeature";
+
+    this._primitiveCollection.add(this._labelCollection);
+    //@ts-ignore
+    this._labelCollection.featureType = "labelFeature";
+
+    this._primitiveCollection.add(this._pointCollection);
+    //@ts-ignore
+    this._pointCollection.featureType = "pointFeature";
+  }
+
+  destroy() {
+    this._pointCollection.removeAll();
+    this._billboardCollection.removeAll();
+    this._polygonPrimitive?.removeAll();
+    this._polylinePrimitive?.removeAll();
+    this._labelCollection.removeAll();
+    this._primitiveCollection.removeAll();
+    this._featureItems = [];
+
+    this._geojson = undefined;
+
+    this._polylineInstances = [];
+    this._polygonInstances = [];
+
+    this._isDestroyed = true;
+  }
+
+  //检查加载状态
+  checkLoadingStatus() {
+    if (this._polygonFinish && this._polylineFinish) {
+      this._isLoading = false;
+      this._options.finishFun && this._options.finishFun();
+      return true;
+    } else {
+      return false;
+    }
+  }
+}
+
+function createAttribute(properties: any, aliasArr: any[], showAttr: any[]) {
+  let attribute: any = {};
+
+  for (let key in properties) {
+    let attrName = showAttr?.find((attr) => {
+      return attr == key || attr == "*";
+    });
+    if (!attrName) {
+      continue;
+    }
+
+    if (properties.hasOwnProperty(key)) {
+      let alias = aliasArr.find((ali) => {
+        return ali.name == key;
+      });
+
+      if (alias) {
+        attribute[alias.alias] = properties[key];
+      } else {
+        attribute[key] = properties[key];
+      }
+    }
+  }
+
+  return attribute;
+}
+
+function splitArrayIntoGroups(array: any, groupSize: any) {
+  let result: any = [];
+  for (let i = 0; i < array.length; i += groupSize) {
+    result.push(array.slice(i, i + groupSize));
+  }
+
+  return result;
+}