类 Editor

地图编辑器类

提供地图要素绘制、编辑、测量、样式管理、数据导入导出等功能。支持多边形、线、点、圆、矩形等几何类型的操作。

示例

// 绘制模式示例
const editor = engine.add(new mapvthree.Editor({
    type: mapvthree.Editor.DrawerType.POLYGON,
    showLabel: false,
    enableMidpointHandles: true,
    continuousDrawing: false,
    renderOptions: {
        depthTest: false,
        transparent: true,
        renderOrder: 0
    }
}));

editor.setStyle({
    fillColor: '#ff0000',
    strokeColor: '#00ff00'
});
editor.start();
editor.enableEdit();
const data = editor.exportData();

层级 (查看层级一览)

Object3D
- Editor
  - Measure

索引

构造函数

constructor

new Editor(
    options?: {
        continuousDrawing?: boolean;
        enableMidpointHandles?: boolean;
        renderOptions?: {
            depthTest?: boolean;
            renderOrder?: number;
            transparent?: boolean;
        };
        showLabel?: boolean;
        singleMode?: boolean;
        type?: string;
    },
): Editor
构造函数
参数
- 可选options: {
      continuousDrawing?: boolean;
      enableMidpointHandles?: boolean;
      renderOptions?: {
          depthTest?: boolean;
          renderOrder?: number;
          transparent?: boolean;
      };
      showLabel?: boolean;
      singleMode?: boolean;
      type?: string;
  } = {}
  配置参数
  - 可选continuousDrawing?: boolean
    是否启用连续绘制模式
  - 可选enableMidpointHandles?: boolean
    是否启用中点标记
  - 可选renderOptions?: { depthTest?: boolean; renderOrder?: number; transparent?: boolean }
    渲染选项配置
    
    可选depthTest?: boolean
    是否启用深度测试
    
    可选renderOrder?: number
    渲染顺序
    
    可选transparent?: boolean
    是否启用透明度
  - 可选showLabel?: boolean
    是否显示标签（测量模式）
  - 可选singleMode?: boolean
    是否启用单要素模式
  - 可选type?: string
    默认绘制类型
返回 Editor
重写了 Object3D.constructor

属性

`静态` `只读`DrawerType

DrawerType: any = DrawerType

绘制器类型常量

包含所有支持的绘制类型：

POLYGON - 多边形绘制
LINE - 线段绘制
CIRCLE - 圆形绘制
POINT - 点绘制
RECTANGLE - 矩形绘制

示例

// 使用绘制器类型常量
const editor = new mapvthree.Editor({
    type: mapvthree.Editor.DrawerType.POLYGON
});
editor.type = mapvthree.Editor.DrawerType.LINE;

`静态` `只读`MeasureType

MeasureType: any = MeasureType

测量类型常量

包含所有支持的测量类型：

DISTANCE - 距离测量（基于线段）
AREA - 面积测量（基于多边形）
POINT - 点坐标测量

示例

// 使用测量类型常量
editor.showLabel = true;
editor.type = mapvthree.Editor.DrawerType.LINE; // 对应距离测量

renderOptions

renderOptions: any

渲染选项配置

示例

editor.renderOptions = {
    depthTest: false,
    transparent: true,
    renderOrder: 100
};

showLabel

showLabel: boolean

是否显示标签（测量模式）

默认值

false

示例

editor.showLabel = true; // 启用测量模式

singleMode

singleMode: boolean

是否为单要素模式

默认值

false

Description

启用后，每次绘制新要素时会自动清除之前的要素

示例

editor.singleMode = true; // 启用单要素模式

type

type: string

当前编辑器类型

默认值

DrawerType.POLYGON

示例

editor.type = mapvthree.Editor.DrawerType.LINE;

方法

delete

delete(type?: string): number
删除指定类型的所有要素

根据要素类型删除对应的要素，同时会清理相关的测量标签数据。
参数
- 可选type: string
  指定要删除的要素类型，不传则删除所有要素
返回 number
删除的要素数量
示例
```
// 删除所有要素
const count = editor.delete();
```
示例
```
// 删除多边形要素
const polygonCount = editor.delete(mapvthree.Editor.DrawerType.POLYGON);
```

deleteById

deleteById(featureIdOrIds: string | string[]): number
根据 ID 删除要素（支持单个 ID 或 ID 数组）
参数
- featureIdOrIds: string | string[]
  要素 ID 或 ID 数组
返回 number
成功删除的要素数量
示例
```
// 删除单个要素
editor.deleteById('feature-1');

// 删除多个要素
editor.deleteById(['feature-1', 'feature-2', 'feature-3']);
```

disableEdit

disableEdit(): void
关闭编辑模式

停止所有要素的编辑操作，清除编辑控件和选中状态。

返回 void
示例
```
// 退出编辑模式
editor.disableEdit();
```

enableEdit

enableEdit(
featureIdOrFilter?: string | Function,
createMeasureLabels?: boolean,
): void
启用要素编辑功能

允许用户编辑已绘制的要素，支持通过要素ID或过滤函数指定要编辑的要素。在测量模式下，还可以选择是否为编辑的要素创建测量标签。
参数
- 可选featureIdOrFilter: string | Function
  要素ID或过滤函数，用于指定要编辑的要素。如果不指定，则编辑所有要素
- 可选createMeasureLabels: boolean = false
  是否为编辑的要素创建测量标签
返回 void
示例
```
// 编辑所有要素
editor.enableEdit();
```
示例
```
// 编辑指定ID的要素
editor.enableEdit('feature-123');
```
示例
```
// 编辑符合条件的要素
editor.enableEdit((feature) => {
    return feature.properties.type === 'polygon';
});
```
示例
```
// 编辑要素并创建测量标签
editor.enableEdit(null, true);
```

exportData

exportData(type?: string): any
导出编辑器中的所有数据

将编辑器中的要素数据导出为GeoJSON格式的数据，支持按类型筛选导出。
参数
- 可选type: string
  指定要导出的要素类型，不传则导出所有类型
返回 any
GeoJSON格式的数据对象
示例
```
// 导出所有数据
const allData = editor.exportData();
```
示例
```
// 导出多边形数据
const polygonData = editor.exportData(mapvthree.Editor.DrawerType.POLYGON);
```

getStyle

getStyle(type?: string): any
获取指定类型的默认样式

获取某种要素类型的默认样式配置，用于了解当前的样式设置或作为新样式的基础。
参数
- 可选type: string
  要素类型
返回 any
样式配置对象
示例
```
// 获取多边形默认样式
const polygonStyle = editor.getStyle(mapvthree.Editor.DrawerType.POLYGON);
```

hide

hide(type?: string): number
隐藏指定类型的要素

控制要素的可见性，可以选择隐藏所有要素或特定类型的要素。
参数
- 可选type: string
  指定要隐藏的要素类型，不传则隐藏所有类型
返回 number
隐藏的要素数量
示例
```
// 隐藏所有要素
const count = editor.hide();
```
示例
```
// 只隐藏线段要素
const lineCount = editor.hide(mapvthree.Editor.DrawerType.LINE);
```

importData

importData(
data: any,
options?: { clear?: boolean; fitBounds?: boolean },
): boolean
导入GeoJSON格式数据到编辑器

支持导入标准的GeoJSON数据，并将其转换为编辑器可编辑的要素。
参数
- data: any
  GeoJSON格式的数据对象
- 可选options: { clear?: boolean; fitBounds?: boolean }
  导入选项配置
  - 可选clear?: boolean
    是否清除现有数据
  - 可选fitBounds?: boolean
    是否自动调整视图范围
返回 boolean
导入是否成功
示例
```
const geojson = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [[[0, 0], [1, 0], [1, 1], [0, 1], [0, 0]]]
            }
        }
    ]
};
editor.importData(geojson);
```

setStyle

setStyle(
    style: {
        fillColor?: string;
        opacity?: number;
        strokeColor?: string;
        strokeWidth?: number;
    },
    type?: string,
): void
设置要素样式

为指定类型的要素设置样式配置，该样式将用于后续的绘制操作。
参数
- style: {
      fillColor?: string;
      opacity?: number;
      strokeColor?: string;
      strokeWidth?: number;
  }
  样式配置对象
  - 可选fillColor?: string
    填充颜色
  - 可选opacity?: number
    透明度
  - 可选strokeColor?: string
    边框颜色
  - 可选strokeWidth?: number
    边框宽度
- 可选type: string
  要素类型，不传则设置为所有类型的默认样式
返回 void
示例
```
// 设置所有要素的默认样式
editor.setStyle({
    fillColor: '#ff0000',
    strokeColor: '#00ff00',
    strokeWidth: 2,
    opacity: 0.8
});
```
示例
```
// 设置多边形专用样式
editor.setStyle({
    fillColor: '#0000ff',
    fillOpacity: 0.5
}, mapvthree.Editor.DrawerType.POLYGON);
```

show

show(type?: string): number
显示指定类型的要素

控制要素的可见性，可以选择显示所有要素或特定类型的要素。
参数
- 可选type: string
  指定要显示的要素类型，不传则显示所有类型
返回 number
显示的要素数量
示例
```
// 显示所有要素
const count = editor.show();
```
示例
```
// 只显示多边形要素
const polygonCount = editor.show(mapvthree.Editor.DrawerType.POLYGON);
```

start

start(options?: { continuous?: boolean }): any
开始绘制或测量操作

根据 showLabel 配置决定调用绘制功能还是测量功能。当 showLabel 为 true 时，会根据当前 type 自动判断测量类型。
参数
- 可选options: { continuous?: boolean }
  操作选项
  - 可选continuous?: boolean
    是否启用连续绘制/测量模式
返回 any
操作结果
示例
```
// 开始绘制多边形
editor.type = mapvthree.Editor.DrawerType.POLYGON;
editor.start({ continuous: false });
```
示例
```
// 开始距离测量
editor.showLabel = true;
editor.type = mapvthree.Editor.DrawerType.LINE;
editor.start();
```

stop

stop(): void
停止当前的绘制或测量操作

根据当前模式停止相应的操作。如果是测量模式，会同时停止底层的绘制操作。

返回 void
示例
```
// 停止正在进行的绘制或测量
editor.stop();
```

updateFeatureStyle

updateFeatureStyle(
    featureId: string | string[],
    style: {
        fillColor?: string;
        opacity?: number;
        strokeColor?: string;
        strokeWidth?: number;
    },
    replace?: boolean,
): void
更新指定要素的样式

为已存在的要素更新样式，支持单个要素或批量更新。
参数
- featureId: string | string[]
  要素ID或ID数组
- style: {
      fillColor?: string;
      opacity?: number;
      strokeColor?: string;
      strokeWidth?: number;
  }
  新的样式配置
  - 可选fillColor?: string
    填充颜色
  - 可选opacity?: number
    透明度
  - 可选strokeColor?: string
    边框颜色
  - 可选strokeWidth?: number
    边框宽度
- 可选replace: boolean = false
  是否完全替换样式，false表示合并样式
返回 void
示例
```
// 更新单个要素样式（合并）
editor.updateFeatureStyle('feature-123', {
    fillColor: '#ff0000'
});
```
示例
```
// 更新多个要素样式（替换）
editor.updateFeatureStyle(['feature-1', 'feature-2'], {
    fillColor: '#00ff00',
    strokeColor: '#0000ff',
    strokeWidth: 3
}, true);
```

访问器

isDrawing

get isDrawing(): boolean
获取当前是否处于绘制模式

只读属性，用于判断编辑器当前是否正在进行要素绘制操作。

返回 boolean
是否正在绘制
示例
```
if (editor.isDrawing) {
    console.log('正在绘制要素...');
}
```

isEditing

get isEditing(): boolean
获取当前是否处于编辑模式

只读属性，用于判断编辑器当前是否正在进行要素编辑操作。

返回 boolean
是否正在编辑
示例
```
if (editor.isEditing) {
    console.log('正在编辑要素...');
}
```

类 Editor

示例

层级 (查看层级一览)

索引

构造函数

属性

方法

访问器

构造函数

constructor

参数

可选continuousDrawing?: boolean

可选enableMidpointHandles?: boolean

可选renderOptions?: { depthTest?: boolean; renderOrder?: number; transparent?: boolean }

可选depthTest?: boolean

可选renderOrder?: number

可选transparent?: boolean

可选showLabel?: boolean

可选singleMode?: boolean

可选type?: string

返回 Editor

属性

静态 只读DrawerType

示例

静态 只读MeasureType

示例

renderOptions

示例

showLabel

默认值

示例

singleMode

默认值

Description

示例

type

默认值

示例

方法

delete

参数

返回 number

示例

示例

deleteById

参数

返回 number

示例

disableEdit

返回 void

示例

enableEdit

参数

返回 void

示例

示例

示例

示例

exportData

参数

返回 any

示例

示例

getStyle

参数

返回 any

示例

hide

参数

返回 number

示例

示例

importData

参数

可选clear?: boolean

可选fitBounds?: boolean

返回 boolean

示例

setStyle

参数

`可选`continuousDrawing?: boolean

`可选`enableMidpointHandles?: boolean

`可选`renderOptions?: { depthTest?: boolean; renderOrder?: number; transparent?: boolean }

`可选`depthTest?: boolean

`可选`renderOrder?: number

`可选`transparent?: boolean

`可选`showLabel?: boolean

`可选`singleMode?: boolean

`可选`type?: string

`静态` `只读`DrawerType

`静态` `只读`MeasureType

`可选`clear?: boolean

`可选`fitBounds?: boolean

`可选`fillColor?: string

`可选`opacity?: number

`可选`strokeColor?: string

`可选`strokeWidth?: number

`可选`continuous?: boolean

`可选`fillColor?: string

`可选`opacity?: number

`可选`strokeColor?: string

`可选`strokeWidth?: number