ino-cesium

extend for Cesium

• @ino-cesium/common 公共基础包
• @ino-cesium/draw 绘制, 量测
• @ino-cesium/layers 各类图层加载
• @ino-cesium/material 自定义材质
• @ino-cesium/primitive 自定义primitive
• @ino-cesium/analysis 客户端分析
• @ino-cesium/effects 后期处理，特效

安装

  pnpm install cesium ino-cesium

  // vite
  pnpm install vite-plugin-cesiumjs
  import Cesiumjs from 'vite-plugin-cesiumjs'
  import { inoCesiumVitePlugin } from 'ino-cesium/vite'
  plugins: [
    Cesiumjs(),
    inoCesiumVitePlugin()
  ],

创建cesium

初始化

import 'ino-cesium/ino-css'

import { initCesium }  from "ino-cesium";

const viewer = initCesium('cesium-container',{
  token:'cesium token',
  // cesium 配置项
  animation: false, // 是否创建动画小器件，左下角仪表
  baseLayerPicker: false, // 是否显示图层选择器
  fullscreenButton: false, // 是否显示全屏按钮
  geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
  ...
})

事件监听

 initCesiumEvent(viewer, {
    // 左键获取位置，经纬度，笛卡尔,当前视角，鼠标位置
    LEFT_POSITION: (e) => {
    },
    // 左键拾取要素
    PICK_FEATURE: (pickModel,feature) => {
    },
    // 鼠标移动获取位置，经纬度，笛卡尔,当前视角，鼠标位置
    MOVE_POSITION: (e) => {
    },
    // 鼠标移动拾取要素
    MOVE_PICK_FEATURE: (pickModel, feature) => {
    },
  })

测绘

初始化

  // 创建绘制工具
  const drawHadler = createDrawHandler(viewer)

  // 绘制
  drawHadler.draw({
    // "polyline" | "polygon" | "point" | "circle" | "rectangle" | "vertical-line" | "vertical-surface-line"
    shape: "polyline", // 绘制形状
    edit: true, // 是否可编辑
    measure: true, // 是否可测量
    measureLabel: true, // 是否显示测量结果
    measureUnit: ['m','㎡'], // 测量单位 [距离测量单位，面积测量单位]
    clampToGround: false, // 是否贴地
  })

绘制类型

  'polyline' 线  距离测量
  'polygon'  面 面积测量
  'point'  点 经纬度测量
  'circle' 圆 面积测量
  'rectangle' 矩形  面积测量
  'vertical-line' 垂直线  高度测量
  'vertical-surface-line' 离地垂直线  离地高度测量

事件监听

  drawHadler.Event.drawEnd = (drawData) => {
    console.log('drawEnd', drawData)
  }

  drawHadler.Event.drawEditEnd = (drawData) => {
    console.log('drawEditEnd', drawData)
  }

  drawHadler.Event.drawRemove = (drawData) => {
    console.log('drawRemove', drawData)
  }

删除

   // 删除绘制
  drawHadler.remove(drawData)

  // 删除所有绘制
  drawHadler.removeAll()

设置测量样式

  //  测量点，线，面样式默认值
  drawHadler.setDrawStyle({
    point: {
      color: 'rgba(255,255,0,0.8)',
      pixelSize: 8,
      outlineColor: 'rgba(255,255,255,0.8)',
      outlineWidth: 2,
      disableDepthTestDistance: Number.POSITIVE_INFINITY,
    },
    polyline: {
      width: 2,
      color: 'rgba(81,255,0,0.8)',
      depthFailColor: 'rgba(255,0,0,0.5)',
    },
    polygon: {
      color: 'rgba(255,255,54,0.3)',
      depthFailColor: 'rgba(255,0,0,0.3)',
    },
  })

测量单位

    // 距离单位
    const DistanceUnits = {
      cm: 'cm',
      厘米: '厘米',
      m: 'm',
      米: '米',
      km: 'km',
      千米: '千米',
      公里: '公里',
    }
    // 面积单位
    const AreaUnits = {
      cm2: '㎡',
      平方厘米: '平方厘米',
      m2: '㎡',
      平方米: '平方米',
      km2: 'km²',
      平方千米: '平方千米',
      平方公里: '平方公里',
      亩: '亩',
      公顷: '公顷',
    }
    // 距离单位映射面积单位默认值
    const UnitDisAndAreaMap = {
      cm: 'cm²',
      m: '㎡',
      km: 'km²',
      米: '平方米',
      千米: '平方千米',
      公里: '平方公里',
    }

测量扩展

• 基于现有绘制工具扩展其他形状的绘制,点生线，线生面，需要传入自定义的primitive

扇形绘制

import type { IDrawAttrInfo } from 'ino-cesium'
import { addDrawActions } from 'ino-cesium'

addDrawActions({
    type: 'sector', // 绘制类型
    action: setSectorPrimitive,  // 绘制primitive
    outline: true,  // 是否使用自有的边线生产方法
    pointCount: 3,  // 需要有固定点数量的绘制，则传入该值
})

const setSectorPrimitive = (drawData: IDrawAttrInfo) => {
    const primitive = new SectorPrimitive(drawData)
    drawData.primitives.add(primitive)
}

• 自定义SectorPrimitive

export class SectorPrimitive extends BasePrimitive<any> {
    private positions: Cesium.Cartesian3[]
    private drawData: Draw.IDrawAttrInfo
    private depthFailAppearance: Cesium.Appearance | undefined

    constructor(drawData: Draw.IDrawAttrInfo) {
        super()
        this.drawData = drawData
        this.positions = drawData.positions
        // 绘制样式
        this.setAppearance()
    }

    getPrimitive() {
        if (!this.drawData.isEditing) {
            return this._primitive
        }
        this.calcShapePositions(this.positions)
        if (this.positions.length < 2) {
            // 小于两个点 不生成点数据
            return this._primitive
        }
        const positions = JSON.parse(JSON.stringify(this.drawData.shapePositions || []))
        const geometryInstances = [
            new Cesium.GeometryInstance({
                geometry: new Cesium.PolygonGeometry({
                    polygonHierarchy: new Cesium.PolygonHierarchy(positions),
                    perPositionHeight: true,
                }),
                id: `draw-${this.drawData.id}`,
            }),
        ]
        if (this.drawData.clampToGround) {
            return new Cesium.GroundPrimitive({
                geometryInstances,
                appearance: this.appearance,
                asynchronous: false,
            })
        } else {
            // 不贴地
            return new Cesium.Primitive({
                geometryInstances,
                appearance: this.appearance,
                depthFailAppearance: !this.drawData.disDepthFail ? this.depthFailAppearance : undefined,
                asynchronous: false,
            })
        }
    }

    setAppearance() {
        this.appearance = new Cesium.MaterialAppearance({
            material: Cesium.Material.fromType('Color', {
                color: Cesium.Color.fromCssColorString(DrawStyle.polygon.color),
            }),
        })

        this.depthFailAppearance = new Cesium.MaterialAppearance({
            material: Cesium.Material.fromType('Color', {
                color: Cesium.Color.fromCssColorString(DrawStyle.polygon.depthFailColor),
            }),
        })
    }
    
    calcShapePositions(positions: Cesium.Cartesian3[]) {
        // 在此处计算当前绘制的形状数据
    }
}