类 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();

层级 (查看层级一览)

EngineObject3D
- Editor
  - Measure

构造函数

constructor

new Editor(
    options?: {
        continuousDrawing?: boolean;
        controlPoints?: {
            midpoint?: { color?: string; size?: number };
            vertex?: { color?: string; size?: number };
        };
        enableMidpointHandles?: boolean;
        renderOptions?: {
            depthTest?: boolean;
            renderOrder?: number;
            transparent?: boolean;
        };
        showLabel?: boolean;
        singleMode?: boolean;
        type?: string;
    },
): Editor
构造函数
参数
- 可选options: {
      continuousDrawing?: boolean;
      controlPoints?: {
          midpoint?: { color?: string; size?: number };
          vertex?: { color?: string; size?: number };
      };
      enableMidpointHandles?: boolean;
      renderOptions?: {
          depthTest?: boolean;
          renderOrder?: number;
          transparent?: boolean;
      };
      showLabel?: boolean;
      singleMode?: boolean;
      type?: string;
  } = {}
  配置参数
  - 可选continuousDrawing?: boolean
    是否启用连续绘制模式
  - 可选controlPoints?: {
    midpoint?: { color?: string; size?: number };
    vertex?: { color?: string; size?: number };
    }
    控制点样式配置（向后兼容，转译为 theme）
    
    可选midpoint?: { color?: string; size?: number }
    中点辅助点样式
    
    可选color?: string
    中点填充色（→ theme.midpointFill）
    
    可选size?: number
    中点尺寸（→ theme.midpointSize）
    
    可选vertex?: { color?: string; size?: number }
    顶点辅助点样式
    
    可选color?: string
    顶点填充色（→ theme.vertexFill）
    
    可选size?: number
    顶点尺寸（→ theme.vertexSize）
  - 可选enableMidpointHandles?: boolean
    是否启用中点标记
  - 可选renderOptions?: { depthTest?: boolean; renderOrder?: number; transparent?: boolean }
    渲染选项配置
    
    可选depthTest?: boolean
    是否启用深度测试
    
    可选renderOrder?: number
    渲染顺序
    
    可选transparent?: boolean
    是否启用透明度
  - 可选showLabel?: boolean
    是否显示标签（测量模式）
  - 可选singleMode?: boolean
    是否启用单要素模式
  - 可选type?: string
    默认绘制类型
返回 Editor
重写了 EngineObject3D.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;

`静态` `只读`EditorState

EditorState: any = EditorState

编辑器状态枚举（用于 setStateStyle / getStateStyle 的 state 参数）

DRAWING - 绘制中（用户正在落点的预览状态），值 'drawing'
CREATED - 已创建（绘制完成的要素），值 'created'
EDITING - 编辑中（点击已创建要素后的顶点拖拽状态），值 'editing'

示例

editor.setStateStyle(
    mapvthree.Editor.EditorState.EDITING,
    mapvthree.Editor.DrawerType.CIRCLE,
    {fillColor: '#ff0000'}
);

`静态` `只读`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;

方法

bringToFront

bringToFront(featureId: string): void
把 feature 提到所有 feature 之上（重新分配 baseOrder 并触发 rebuild）注意：当前 rebuild 内部尚未使用 baseOrder（spec §五完整双层语义留待后续）
参数
- featureId: string
返回 void

circleToPolygon

circleToPolygon(feature: any, options?: { vertices?: number }): any
将 circle 要素（Point+radius）转换为 Polygon 要素

非 circle 要素原样返回。
参数
- feature: any
  GeoJSON Feature 对象
- 可选options: { vertices?: number }
  转换选项
  - 可选vertices?: number
    Polygon 顶点数量，越大越圆滑
返回 any
转换后的 Feature
示例
```
editor.addEventListener('created', e => {
    const polygon = editor.circleToPolygon(e.feature);
    console.log(polygon.geometry.type); // 'Polygon'
});
```

debugStyle

debugStyle(
    type: any,
    slot: any,
    ctx: any,
): { layers: any; source: any; value: any }
调试输出每层来源
参数
- type: any
- slot: any
- ctx: any
返回 { layers: any; source: any; value: any }

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, options: any): any
导出编辑器中的所有数据

将编辑器中的要素数据导出为GeoJSON格式的数据，支持按类型筛选导出。
参数
- 可选type: string
  指定要导出的要素类型，不传则导出所有类型
- options: any
返回 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);
```

getTheme

getTheme(): any
获取当前主题

返回 any

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);
```

setFeatureStyle

setFeatureStyle(id: string | string[], style: any): void
单 feature 样式覆盖
参数
- id: string | string[]
- style: any
返回 void

setStateStyle

setStateStyle(state: string, type: string, style: any): void
状态样式覆盖
参数
- state: string
  'drawing'|'created'|'editing'（推荐用 EditorState 枚举）
- type: string
- style: any
返回 void

setStyle

setStyle(
    style: {
        fillColor?: string;
        opacity?: number;
        strokeColor?: string;
        strokeWidth?: number;
    },
    type?: string,
): void
设置要素样式（老 API）
参数
- style: {
      fillColor?: string;
      opacity?: number;
      strokeColor?: string;
      strokeWidth?: number;
  }
  样式配置对象
  - 可选fillColor?: string
    填充颜色
  - 可选opacity?: number
    透明度
  - 可选strokeColor?: string
    边框颜色
  - 可选strokeWidth?: number
    边框宽度
- 可选type: string
  要素类型，不传则设置为所有类型的默认样式
返回 void
已被弃用
推荐使用 editor.setTheme() / editor.setTypeStyle()

为指定类型的要素设置样式配置，该样式将用于后续的绘制操作。
示例
```
// 设置所有要素的默认样式
editor.setStyle({
    fillColor: '#ff0000',
    strokeColor: '#00ff00',
    strokeWidth: 2,
    opacity: 0.8
});
```
示例
```
// 设置多边形专用样式
editor.setStyle({
    fillColor: '#0000ff',
    fillOpacity: 0.5
}, mapvthree.Editor.DrawerType.POLYGON);
```

setTheme

setTheme(
    partialTheme: {
        fillColor?: string;
        handleEdge?: string;
        midpointFill?: string;
        midpointSize?: number;
        opacity?: number;
        pointSize?: number;
        strokeColor?: string;
        strokeWidth?: number;
        vertexFill?: string;
        vertexSize?: number;
    },
): void
设置主题（10 个 token 的浅合并）
参数
- partialTheme: {
      fillColor?: string;
      handleEdge?: string;
      midpointFill?: string;
      midpointSize?: number;
      opacity?: number;
      pointSize?: number;
      strokeColor?: string;
      strokeWidth?: number;
      vertexFill?: string;
      vertexSize?: number;
  }
返回 void
示例
```
editor.setTheme({fillColor: '#ff0000', strokeColor: '#000000'});
```

setTypeStyle

setTypeStyle(type: string, style: any): void
按形状类型覆盖样式
参数
- type: string
  'polygon'|'rectangle'|'line'|'point'|'circle'
- style: any
  {fillColor?, strokeColor?, strokeWidth?, pointSize?}
返回 void

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

可选controlPoints?: { midpoint?: { color?: string; size?: number }; vertex?: { color?: string; size?: number };}

可选midpoint?: { color?: string; size?: number }

可选color?: string

可选size?: number

可选vertex?: { color?: string; size?: number }

可选color?: string

可选size?: number

可选enableMidpointHandles?: boolean

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

可选depthTest?: boolean

可选renderOrder?: number

可选transparent?: boolean

可选showLabel?: boolean

可选singleMode?: boolean

可选type?: string

返回 Editor

属性

静态 只读DrawerType

示例

静态 只读EditorState

示例

静态 只读MeasureType

示例

renderOptions

示例

showLabel

默认值

示例

singleMode

默认值

Description

示例

type

默认值

示例

方法

bringToFront

参数

返回 void

circleToPolygon

参数

可选vertices?: number

返回 any

示例

debugStyle

参数

返回 { layers: any; source: any; value: any }

delete

参数

返回 number

示例

示例

deleteById

参数

返回 number

示例

disableEdit

返回 void

示例

enableEdit

参数

返回 void

示例

示例

示例

示例

exportData

参数

`可选`continuousDrawing?: boolean

`可选`controlPoints?: {
midpoint?: { color?: string; size?: number };
vertex?: { color?: string; size?: number };
}

`可选`midpoint?: { color?: string; size?: number }

`可选`color?: string

`可选`size?: number

`可选`vertex?: { color?: string; size?: number }

`可选`color?: string

`可选`size?: number

`可选`enableMidpointHandles?: boolean

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

`可选`depthTest?: boolean

`可选`renderOrder?: number

`可选`transparent?: boolean

`可选`showLabel?: boolean

`可选`singleMode?: boolean

`可选`type?: string

`静态` `只读`DrawerType

`静态` `只读`EditorState

`静态` `只读`MeasureType

`可选`vertices?: number

`可选`clear?: boolean

`可选`fitBounds?: boolean

`可选`fillColor?: string

`可选`opacity?: number

`可选`strokeColor?: string

`可选`strokeWidth?: number

`可选`continuous?: boolean

`可选`fillColor?: string

`可选`opacity?: number

`可选`strokeColor?: string

`可选`strokeWidth?: number