使用vue封装cesium创建点、线、面、包含增、删、改等功能一个类

以下是一个使用Vue封装Cesium创建点、线、面、包含增、删、改等功能的类示例：

import * as Cesium from 'cesium/Cesium';

export default class CesiumHelper {
  constructor(viewer) {
    this.viewer = viewer;
    this.entities = new Cesium.EntityCollection();
    this.viewer.entities.add(this.entities);
  }

  createPoint(position, options) {
    const entity = this.entities.add({
      position: Cesium.Cartesian3.fromDegrees(position.lon, position.lat),
      point: {
        pixelSize: options.size || 5,
        color: options.color || Cesium.Color.YELLOW,
        outlineColor: options.outlineColor || Cesium.Color.BLACK,
        outlineWidth: options.outlineWidth || 1
      }
    });
    return entity;
  }

  createLine(positions, options) {
    const entity = this.entities.add({
      polyline: {
        positions: positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat)),
        width: options.width || 2,
        material: options.material || Cesium.Color.RED
      }
    });
    return entity;
  }

  createPolygon(positions, options) {
    const entity = this.entities.add({
      polygon: {
        hierarchy: new Cesium.PolygonHierarchy(
          positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat))
        ),
        material: options.material || Cesium.Color.BLUE.withAlpha(0.5),
        outline: options.outline !== undefined ? options.outline : true,
        outlineColor: options.outlineColor || Cesium.Color.BLACK,
        outlineWidth: options.outlineWidth || 1
      }
    });
    return entity;
  }

  addOrUpdatePoint(entity, position, options) {
    entity.position = Cesium.Cartesian3.fromDegrees(position.lon, position.lat);
    entity.point.pixelSize = options.size || entity.point.pixelSize;
    entity.point.color = options.color || entity.point.color;
    entity.point.outlineColor = options.outlineColor || entity.point.outlineColor;
    entity.point.outlineWidth = options.outlineWidth || entity.point.outlineWidth;
  }

  addOrUpdateLine(entity, positions, options) {
    entity.polyline.positions = positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat));
    entity.polyline.width = options.width || entity.polyline.width;
    entity.polyline.material = options.material || entity.polyline.material;
  }

  addOrUpdatePolygon(entity, positions, options) {
    entity.polygon.hierarchy = new Cesium.PolygonHierarchy(
      positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat))
    );
    entity.polygon.material = options.material || entity.polygon.material;
    entity.polygon.outline = options.outline !== undefined ? options.outline : entity.polygon.outline;
    entity.polygon.outlineColor = options.outlineColor || entity.polygon.outlineColor;
    entity.polygon.outlineWidth = options.outlineWidth || entity.polygon.outlineWidth;
  }

  remove(entity) {
    this.entities.remove(entity);
  }

  removeAll() {
    this.entities.removeAll();
  }
}

使用示例：

import CesiumHelper from './CesiumHelper';

const viewer = new Cesium.Viewer('cesiumContainer');
const cesiumHelper = new CesiumHelper(viewer);

// 创建点
const point = cesiumHelper.createPoint({ lon: 114.06667, lat: 22.61667 }, {
  size: 10,
  color: Cesium.Color.RED
});

// 创建线
const line = cesiumHelper.createLine([
  { lon: 114.06667, lat: 22.61667 },
  { lon: 115.883333, lat: 28.683333 }
], {
  width: 5,
  material: Cesium.Color.GREEN
});

// 创建面
const polygon = cesiumHelper.createPolygon([
  { lon: 114.06667, lat: 22.61667 },
  { lon: 115.883333, lat: 28.683333 },
  { lon: 108.948021, lat: 34.263161 }
], {
  material: Cesium.Color.YELLOW.withAlpha(0.5),
  outlineColor: Cesium.Color.BLACK.withAlpha(0.5)
});

// 修改点
cesiumHelper.addOrUpdatePoint(point, { lon: 115.883333, lat: 28.683333 }, {
  size: 20,
  color: Cesium.Color.BLUE
});

// 修改线
cesiumHelper.addOrUpdateLine(line, [
  { lon: 114.06667, lat: 22.61667 },
  { lon: 108.948021, lat: 34.263161 }
], {
  width: 10,
  material: Cesium.Color.ORANGE
});

// 修改面
cesiumHelper.addOrUpdatePolygon(polygon, [
  { lon: 114.06667, lat: 22.61667 },
  { lon: 115.883333, lat: 28.683333 },
  { lon: 108.948021, lat: 34.263161 },
  { lon: 104.065735, lat: 30.659462 }
], {
  material: Cesium.Color.PURPLE.withAlpha(0.5),
  outline: false
});

// 删除实体
cesiumHelper.remove(point);

// 删除所有实体
cesiumHelper.removeAll();