mirror of
https://github.com/ethan-zf/cesium-plot-js.git
synced 2025-06-24 03:27:29 +00:00
169 lines
4.9 KiB
Markdown
169 lines
4.9 KiB
Markdown
# cesium-plot-js
|
||
|
||
cesium 军事标绘插件,支持绘制多边形、曲线、箭头等图形
|
||
|
||
|
||
|
||
[在线示例：demo](https://ethan-zf.github.io/cesium-plot-js/examples/index.html)
|
||
|
||
### CDN
|
||
|
||
1. 引入文件
|
||
|
||
```
|
||
<script src="https://unpkg.com/cesium-plot-js"></script>
|
||
```
|
||
|
||
2. 调用绘制 api
|
||
|
||
```
|
||
new CesiumPlot.FineArrow(Cesium, viewer);
|
||
```
|
||
|
||
### NPM
|
||
|
||
1. install
|
||
|
||
```
|
||
npm i cesium-plot-js
|
||
```
|
||
|
||
2. import
|
||
|
||
```
|
||
import CesiumPlot from 'cesium-plot-js';
|
||
```
|
||
|
||
3. 调用绘制 api
|
||
|
||
```
|
||
new CesiumPlot.FineArrow(Cesium, viewer);
|
||
```
|
||
|
||
### Classes
|
||
|
||
每个图形为独立的类，绑定事件或其他操作通过类的实例来实现
|
||
|
||
| 类名 | 类型 | 描述 | 生长动画 |
|
||
| ---------------------- | --------- | ---------------- | -------- |
|
||
| Polygon | 'polygon' | 多边形 | ❌ |
|
||
| Reactangle | 'polygon' | 矩形 | ❌ |
|
||
| Triangle | 'polygon' | 三角形 | ❌ |
|
||
| Circle | 'polygon' | 圆形 | ❌ |
|
||
| StraightArrow | 'line' | 细直箭头 | ✔️ |
|
||
| CurvedArrow | 'line' | 曲线箭头 | ✔️ |
|
||
| FineArrow | 'polygon' | 直箭头 | ✔️ |
|
||
| AttackArrow | 'polygon' | 进攻方向箭头 | ✔️ |
|
||
| SwallowtailAttackArrow | 'polygon' | 燕尾进攻方向箭头 | ✔️ |
|
||
| SquadCombat | 'polygon' | 分队战斗方向 | ✔️ |
|
||
| SwallowtailSquadCombat | 'polygon' | 燕尾分队战斗方向 | ✔️ |
|
||
| AssaultDirection | 'polygon' | 突击方向 | ✔️ |
|
||
| DoubleArrow | 'polygon' | 双箭头 | ✔️ |
|
||
| FreehandLine | 'line' | 自由线 | ❌ |
|
||
| FreehandPolygon | 'polygon' | 自由面 | ❌ |
|
||
| Curve | 'line' | 曲线 | ❌ |
|
||
| Ellipse | 'polygon' | 椭圆 | ❌ |
|
||
| Lune | 'polygon' | 半月面 | ❌ |
|
||
|
||
### 构造函数
|
||
|
||
所有图形的构造函数：
|
||
|
||
<类名>(cesium: Cesium, viewer: Cesium.Viewer, style?: [PolygonStyle](#PolygonStyle) | [LineStyle](#LineStyle))
|
||
|
||
<h5 id='PolygonStyle'>PolygonStyle类型</h5>
|
||
|
||
```
|
||
{
|
||
material?: Cesium.MaterialProperty;
|
||
outlineWidth?: number;
|
||
outlineMaterial?: Cesium.MaterialProperty;
|
||
};
|
||
```
|
||
|
||
<h5 id='LineStyle'>LineStyle类型</h5>
|
||
|
||
```
|
||
{
|
||
material?: Cesium.Color;
|
||
lineWidth?: number;
|
||
};
|
||
```
|
||
|
||
示例
|
||
|
||
```
|
||
// 初始化viewer
|
||
const viewer = new Cesium.Viewer('cesiumContainer');
|
||
// 抗锯齿
|
||
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||
// 设置自定义样式
|
||
const geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
|
||
material: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
|
||
outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
|
||
outlineWidth: 3,
|
||
});
|
||
```
|
||
|
||
### 类的实例方法
|
||
|
||
| 方法名 | 参数 | 描述 |
|
||
| ------ | --------------------------------------------------------------------- | ---------------------------------------------------- |
|
||
| hide | options?: [VisibleAnimationOpts](#VisibleAnimationOpts) | 隐藏，options 可配置过度动画，参数缺省时，不显示动画 |
|
||
| show | options?: [VisibleAnimationOpts](#VisibleAnimationOpts) | 显示，options 可配置过度动画，参数缺省时，不显示动画 |
|
||
| remove | | 删除 |
|
||
| on | (event: [EventType](#EventType), listener: (eventData?: any) => void) | 绑定事件 |
|
||
| off | (event: [EventType](#EventType)) | 解绑事件 |
|
||
|
||
<h5 id='VisibleAnimationOpts'>VisibleAnimationOpts类型</h5>
|
||
|
||
```
|
||
{
|
||
duration?: number; // 动画持续时间（ms）,默认1000
|
||
delay?: number; // 动画延迟启动时间（ms），默认0
|
||
callback?: (() => void) // 动画结束回调
|
||
};
|
||
```
|
||
|
||
```
|
||
// 隐藏图形
|
||
const geometry = new CesiumPlot.Reactangle(Cesium, viewer);
|
||
geometry.hide();
|
||
```
|
||
|
||
```
|
||
// 绑定事件
|
||
const geometry = new CesiumPlot.Reactangle(Cesium, viewer);
|
||
geometry.on('drawEnd', (data)=>{
|
||
console.log(data)
|
||
});
|
||
```
|
||
|
||
<h3 id='EventType'>Events</h3>
|
||
|
||
- **drawStart**
|
||
|
||
绘制开始
|
||
|
||
- **drawUpdate**
|
||
|
||
绘制过程中点位更新，回调事件返回更新的 Cartesian3 点位
|
||
|
||
- **drawEnd**
|
||
|
||
绘制结束，回调事件返回图形的关键点位
|
||
|
||
```
|
||
geometry.on('drawEnd', (data) => {
|
||
console.log(data);
|
||
});
|
||
```
|
||
|
||
- **editStart**
|
||
|
||
编辑开始
|
||
|
||
- **editEnd**
|
||
|
||
编辑结束，回调事件返回图形的关键点位
|