mirror of
https://github.com/ethan-zf/cesium-plot-js.git
synced 2025-07-04 06:57:26 +00:00
update docs
This commit is contained in:
parent
f81cc61e4b
commit
854abd14a4
85
README.md
85
README.md
@ -1,13 +1,15 @@
|
|||||||
# CesiumDraw
|
# CesiumDraw
|
||||||
|
|
||||||
cesium 绘制插件
|
cesium 标绘插件
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
在线示例:[demo](https://ethan-zf.github.io/CesiumDraw/examples/index.html)
|
[在线示例:demo](https://ethan-zf.github.io/CesiumDraw/examples/index.html)
|
||||||
|
|
||||||
### 类
|
### 类
|
||||||
|
|
||||||
|
每个图形为独立的类,绑定事件或其他操作通过类的实例来实现
|
||||||
|
|
||||||
| 类名 | 类型 | 描述 |
|
| 类名 | 类型 | 描述 |
|
||||||
| ---------------------- | --------- | ---------------- |
|
| ---------------------- | --------- | ---------------- |
|
||||||
| Polygon | 'polygon' | 多边形 |
|
| Polygon | 'polygon' | 多边形 |
|
||||||
@ -29,9 +31,49 @@ cesium 绘制插件
|
|||||||
| Ellipse | 'polygon' | 椭圆 |
|
| Ellipse | 'polygon' | 椭圆 |
|
||||||
| Lune | 'polygon' | 半月面 |
|
| Lune | 'polygon' | 半月面 |
|
||||||
|
|
||||||
```
|
### 构造函数
|
||||||
const geometry = new CesiumPlot.Polygon(Cesium, viewer);
|
|
||||||
|
|
||||||
|
所有图形的构造函数:
|
||||||
|
|
||||||
|
类名(cesium: Cesium, viewer: Cesium.Viewer, style:[PolygonStyle](#PolygonStyle) | [LineStyle](#LineStyle))
|
||||||
|
|
||||||
|
<h4 id='PolygonStyle'>PolygonStyle</h4>
|
||||||
|
|
||||||
|
```
|
||||||
|
{
|
||||||
|
material?: Cesium.MaterialProperty;
|
||||||
|
outlineWidth?: number;
|
||||||
|
outlineMaterial?: Cesium.MaterialProperty;
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
<h4 id='LineStyle'>LineStyle</h4>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
{
|
||||||
|
material?: Cesium.Color;
|
||||||
|
lineWidth?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
示例
|
||||||
|
|
||||||
|
```
|
||||||
|
// 初始化viewer
|
||||||
|
const viewer = new Cesium.Viewer('cesiumContainer');
|
||||||
|
// 抗锯齿
|
||||||
|
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||||||
|
// 创建图形实例,使用默认样式
|
||||||
|
new CesiumPlot.Reactangle(Cesium, viewer);
|
||||||
|
// 设置自定义样式
|
||||||
|
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,
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### 类的实例方法
|
### 类的实例方法
|
||||||
@ -44,34 +86,41 @@ const geometry = new CesiumPlot.Polygon(Cesium, viewer);
|
|||||||
| on | (event: EventType, listener: (eventData?: any) => void) | 绑定事件 |
|
| on | (event: EventType, listener: (eventData?: any) => void) | 绑定事件 |
|
||||||
| off | (event: EventType) | 解绑事件 |
|
| off | (event: EventType) | 解绑事件 |
|
||||||
|
|
||||||
|
```
|
||||||
|
// 隐藏图形
|
||||||
|
const geometry = new CesiumPlot.Reactangle(Cesium, viewer);
|
||||||
|
geometry.hide();
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
// 绑定事件
|
||||||
|
const geometry = new CesiumPlot.Reactangle(Cesium, viewer);
|
||||||
|
geometry.on('drawEnd', (data)=>{
|
||||||
|
console.log(data)
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
### 事件
|
### 事件
|
||||||
|
|
||||||
- 'drawStart'
|
- 'drawStart'
|
||||||
|
|
||||||
绘制开始
|
绘制开始
|
||||||
|
|
||||||
```
|
|
||||||
geometry.on('drawStart', () => {
|
|
||||||
console.log('draw start');
|
|
||||||
});
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
- 'drawUpdate'
|
- 'drawUpdate'
|
||||||
|
|
||||||
绘制过程中点位更新,回调事件返回更新的 Cartesian3 点位
|
绘制过程中点位更新,回调事件返回更新的 Cartesian3 点位
|
||||||
|
|
||||||
```
|
|
||||||
geometry.on('drawUpdate', () => {
|
|
||||||
console.log('draw start');
|
|
||||||
});
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
- 'drawEnd'
|
- 'drawEnd'
|
||||||
|
|
||||||
绘制结束,回调事件返回图形的关键点位
|
绘制结束,回调事件返回图形的关键点位
|
||||||
|
|
||||||
|
```
|
||||||
|
geometry.on('drawEnd', (data) => {
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
- 'editStart'
|
- 'editStart'
|
||||||
|
|
||||||
编辑开始
|
编辑开始
|
||||||
|
@ -6,21 +6,21 @@ let raster = new Cesium.ArcGisMapServerImageryProvider({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const viewer = new Cesium.Viewer('cesiumContainer', {
|
const viewer = new Cesium.Viewer('cesiumContainer', {
|
||||||
animation: false,
|
// animation: false,
|
||||||
shouldAnimate: true,
|
// shouldAnimate: true,
|
||||||
geocoder: false,
|
// geocoder: false,
|
||||||
homeButton: false,
|
// homeButton: false,
|
||||||
infoBox: false,
|
// infoBox: false,
|
||||||
fullscreenButton: false,
|
// fullscreenButton: false,
|
||||||
sceneModePicker: false,
|
// sceneModePicker: false,
|
||||||
selectionIndicator: false,
|
// selectionIndicator: false,
|
||||||
timeline: false,
|
// timeline: false,
|
||||||
navigationHelpButton: false,
|
// navigationHelpButton: false,
|
||||||
baseLayerPicker: false,
|
// baseLayerPicker: false,
|
||||||
imageryProvider: raster,
|
// imageryProvider: raster,
|
||||||
contextOptions: {
|
// contextOptions: {
|
||||||
requestWebgl2: true,
|
// requestWebgl2: true,
|
||||||
},
|
// },
|
||||||
});
|
});
|
||||||
|
|
||||||
viewer.scene.postProcessStages.fxaa.enabled = true;
|
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||||||
|
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "cesium-plot",
|
"name": "cesium-plot",
|
||||||
"version": "0.0.0",
|
"version": "0.0.1",
|
||||||
"lockfileVersion": 2,
|
"lockfileVersion": 2,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "cesium-plot",
|
"name": "cesium-plot",
|
||||||
"version": "0.0.0",
|
"version": "0.0.1",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||||
"@typescript-eslint/parser": "^6.0.0",
|
"@typescript-eslint/parser": "^6.0.0",
|
||||||
|
Loading…
Reference in New Issue
Block a user