JSAPI Three API Reference
    正在准备搜索索引...

    类 Measure

    测量工具类

    专门用于距离、面积、点坐标测量的工具类，继承自Editor类。默认启用标签显示，并提供丰富的测量功能定制选项。

    // 距离测量示例
    const distanceMeasure = engine.add(new mapvthree.Measure({
        type: mapvthree.Measure.MeasureType.DISTANCE
    }));
    distanceMeasure.setStyle({
        strokeColor: '#ffff00',
        strokeWidth: 3
    });
    distanceMeasure.start();

    // 面积测量示例
    const areaMeasure = engine.add(new mapvthree.Measure({
        type: mapvthree.Measure.MeasureType.AREA
    }));
    areaMeasure.start();

    // 点坐标测量示例
    const pointMeasure = engine.add(new mapvthree.Measure({
        type: mapvthree.Measure.MeasureType.POINT
    }));
    pointMeasure.start();

    // 自定义标签样式
    measure.setLabelRenderer((value) => {
        const div = document.createElement('div');
        div.innerText = value.attributes.text;
        div.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        div.style.color = '#fff';
        div.style.padding = '5px 10px';
        div.style.borderRadius = '4px';
        return div;
    });

    层级 (查看层级一览)

    索引

    构造函数

    constructor

    属性

    DrawerType measureType MeasureType renderOptions showLabel singleMode type

    方法

    clear clearByType delete deleteById disableEdit enableEdit exportData getMeasurements getMeasurementsByType getStyle hide importData setAreaFormatter setDistanceFormatter setLabelRenderer setPointFormatter setStyle setType show start stop updateFeatureStyle

    访问器

    isDrawing isEditing

    构造函数

    • 构造函数

      创建测量工具实例，自动配置为测量模式（showLabel=true）和单要素模式。

      参数

      • 可选options: {
            continuousDrawing?: boolean;
            enableMidpointHandles?: boolean;
            renderOptions?: {
                depthTest?: boolean;
                renderOrder?: number;
                transparent?: boolean;
            };
            type?: string;
        } = {}

        配置选项

        • 可选continuousDrawing?: boolean

          是否启用连续测量模式

        • 可选enableMidpointHandles?: boolean

          是否启用中点标记

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

          渲染选项配置

          • 可选depthTest?: boolean

            是否启用深度测试

          • 可选renderOrder?: number

            渲染顺序

          • 可选transparent?: boolean

            是否启用透明度

        • 可选type?: string

          测量类型，支持距离、面积、点坐标测量

      返回 Measure

      // 创建距离测量工具
      const measure = new mapvthree.Measure({
          type: mapvthree.Measure.MeasureType.DISTANCE,
          enableMidpointHandles: true,
          renderOptions: {
              depthTest: false,
              transparent: true
          }
      });

    属性

    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: string

    当前测量类型

    MeasureType.DISTANCE

    测量工具的当前类型，决定进行何种类型的测量操作

    measure.measureType = mapvthree.Measure.MeasureType.AREA;
    MeasureType: any = MeasureType

    测量类型常量

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

    • DISTANCE - 距离测量（基于线段）
    • AREA - 面积测量（基于多边形）
    • POINT - 点坐标测量
    // 使用测量类型常量
    editor.showLabel = true;
    editor.type = mapvthree.Editor.DrawerType.LINE; // 对应距离测量
    renderOptions: any

    渲染选项配置

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

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

    false

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

    是否为单要素模式

    false

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

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

    当前编辑器类型

    DrawerType.POLYGON

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

    方法

    • 清除所有测量结果

      删除所有已创建的测量要素和标签，重置测量状态。通常在需要重新开始测量或清理测量结果时使用。

      返回 void

      // 清除所有测量结果
      measure.clear();

    • 清除指定类型的测量结果

      根据测量类型删除对应的测量结果和标签，保留其他类型的测量数据。

      参数

      • type: string

        要清除的测量类型

      返回 void

      // 只清除距离测量结果
      measure.clearByType(mapvthree.Measure.MeasureType.DISTANCE);

      // 只清除面积测量结果
      measure.clearByType(mapvthree.Measure.MeasureType.AREA);

    • 删除指定类型的所有要素

      根据要素类型删除对应的要素，同时会清理相关的测量标签数据。

      参数

      • 可选type: string

        指定要删除的要素类型，不传则删除所有要素

      返回 number

      删除的要素数量

      // 删除所有要素
      const count = editor.delete();

      // 删除多边形要素
      const polygonCount = editor.delete(mapvthree.Editor.DrawerType.POLYGON);

    • 根据 ID 删除要素（支持单个 ID 或 ID 数组）

      参数

      • featureIdOrIds: string | string[]

        要素 ID 或 ID 数组

      返回 number

      成功删除的要素数量

      // 删除单个要素
      editor.deleteById('feature-1');

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

    • 关闭编辑模式

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

      返回 void

      // 退出编辑模式
      editor.disableEdit();

    • 启用测量结果编辑功能

      允许用户编辑已创建的测量结果，支持通过要素ID或过滤函数指定要编辑的测量要素。与Editor不同的是，测量模式下编辑时不会创建新的测量标签。

      参数

      • 可选featureIdOrFilter: string | Function

        要素ID或过滤函数，用于指定要编辑的测量要素。 如果不指定，则编辑所有测量要素

      返回 void

      // 编辑所有测量结果
      measure.enableEdit();

      // 编辑指定ID的测量结果
      measure.enableEdit('measurement-123');

      // 编辑距离测量结果
      measure.enableEdit((feature) => {
          return feature.properties.measureType === 'distance';
      });

    • 导出编辑器中的所有数据

      将编辑器中的要素数据导出为GeoJSON格式的数据，支持按类型筛选导出。

      参数

      • 可选type: string

        指定要导出的要素类型，不传则导出所有类型

      返回 any

      GeoJSON格式的数据对象

      // 导出所有数据
      const allData = editor.exportData();

      // 导出多边形数据
      const polygonData = editor.exportData(mapvthree.Editor.DrawerType.POLYGON);

    • 获取所有测量结果

      返回当前所有测量结果的数据数组，包含测量值、类型、几何信息等详细信息。

      返回 any[]

      测量结果数组，每个结果包含 id、type、value、geometry 等属性

      const results = measure.getMeasurements();
      console.log(`共有 ${results.length} 个测量结果`);
      results.forEach(result => {
          console.log(`类型: ${result.type}, 值: ${result.value}`);
      });

    • 获取指定类型的测量结果

      根据测量类型筛选并返回对应的测量结果数据。

      参数

      • type: string

        测量类型，支持 DISTANCE、AREA、POINT

      返回 any[]

      指定类型的测量结果数组

      // 只获取距离测量结果
      const distanceResults = measure.getMeasurementsByType(mapvthree.Measure.MeasureType.DISTANCE);

      // 只获取面积测量结果
      const areaResults = measure.getMeasurementsByType(mapvthree.Measure.MeasureType.AREA);

    • 获取指定类型的默认样式

      获取某种要素类型的默认样式配置，用于了解当前的样式设置或作为新样式的基础。

      参数

      • 可选type: string

        要素类型

      返回 any

      样式配置对象

      // 获取多边形默认样式
      const polygonStyle = editor.getStyle(mapvthree.Editor.DrawerType.POLYGON);

    • 隐藏指定类型的要素

      控制要素的可见性，可以选择隐藏所有要素或特定类型的要素。

      参数

      • 可选type: string

        指定要隐藏的要素类型，不传则隐藏所有类型

      返回 number

      隐藏的要素数量

      // 隐藏所有要素
      const count = editor.hide();

      // 只隐藏线段要素
      const lineCount = editor.hide(mapvthree.Editor.DrawerType.LINE);

    • 导入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);

    • 设置面积测量值格式化函数

      自定义面积测量值的显示格式，可以添加单位、设置小数位数等。

      参数

      • formatter: Function

        格式化函数

        • area

          原始面积值（单位：平方米）

      返回 string

      格式化后的面积字符串

      // 简单格式化
      measure.setAreaFormatter((area) => `${area.toFixed(1)} 平方米`);

      // 智能单位转换
      measure.setAreaFormatter((area) => {
          if (area < 10000) {
              return `${area.toFixed(1)} 平方米`;
          } else if (area < 1000000) {
              return `${(area / 10000).toFixed(2)} 公顷`;
          } else {
              return `${(area / 1000000).toFixed(2)} 平方公里`;
          }
      });

    • 设置距离测量值格式化函数

      自定义距离测量值的显示格式，可以添加单位、设置小数位数等。

      参数

      • formatter: Function

        格式化函数

        • distance

          原始距离值（单位：米）

      返回 string

      格式化后的距离字符串

      // 简单格式化
      measure.setDistanceFormatter((distance) => `${distance.toFixed(1)} 米`);

      // 智能单位转换
      measure.setDistanceFormatter((distance) => {
          if (distance < 1000) {
              return `${distance.toFixed(1)} 米`;
          } else {
              return `${(distance / 1000).toFixed(2)} 公里`;
          }
      });

    • 自定义测量标签渲染函数

      设置自定义的标签渲染函数，用于创建个性化的测量结果显示标签。函数接收标签数据并返回DOM元素。

      参数

      • renderFunction: Function

        标签渲染函数

        • value

          标签数据对象

        • value.attributes

          标签属性

        • value.attributes.text

          标签文本内容

        • value.attributes.isMain

          是否为主标签

        • return

          返回渲染后的DOM元素

      返回 void

      // 自定义标签样式
      measure.setLabelRenderer((value) => {
          const div = document.createElement('div');
          div.innerText = value.attributes.text;
          div.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
          div.style.color = '#fff';
          div.style.padding = '5px 10px';
          div.style.borderRadius = '4px';
          div.style.fontSize = '12px';
          return div;
      });

      // 根据标签类型设置不同样式
      measure.setLabelRenderer((value) => {
          const div = document.createElement('div');
          div.innerText = value.attributes.text;
          div.style.color = value.attributes.isMain ? 'red' : 'blue';
          div.style.fontWeight = value.attributes.isMain ? 'bold' : 'normal';
          return div;
      });

    • 设置点坐标格式化函数

      自定义点坐标的显示格式，可以设置经纬度的小数位数、添加单位等。

      参数

      • formatter: Function

        格式化函数

        • point

          坐标点数组 [longitude, latitude]

        • point.0

          经度

        • point.1

          纬度

      返回 string

      格式化后的坐标字符串

      // 简单格式化
      measure.setPointFormatter((point) => {
          return `经度: ${point[0].toFixed(4)}, 纬度: ${point[1].toFixed(4)}`;
      });

      // 更简洁的格式
      measure.setPointFormatter((point) => {
          return `${point[0].toFixed(6)}, ${point[1].toFixed(6)}`;
      });

      // 带方向的格式
      measure.setPointFormatter((point) => {
          return `E: ${point[0].toFixed(4)}°, N: ${point[1].toFixed(4)}°`;
      });

    • 设置要素样式

      为指定类型的要素设置样式配置，该样式将用于后续的绘制操作。

      参数

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

    • 设置测量类型

      动态更改测量工具的类型，会将测量类型转换为对应的绘制器类型并更新内部状态。

      参数

      • measureType: string

        测量类型，支持 DISTANCE、AREA、POINT

      返回 void

      // 切换为面积测量
      measure.setType(mapvthree.Measure.MeasureType.AREA);

      // 切换为点坐标测量
      measure.setType(mapvthree.Measure.MeasureType.POINT);

    • 显示指定类型的要素

      控制要素的可见性，可以选择显示所有要素或特定类型的要素。

      参数

      • 可选type: string

        指定要显示的要素类型，不传则显示所有类型

      返回 number

      显示的要素数量

      // 显示所有要素
      const count = editor.show();

      // 只显示多边形要素
      const polygonCount = editor.show(mapvthree.Editor.DrawerType.POLYGON);

    • 开始绘制或测量操作

      根据 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();

    • 停止当前的绘制或测量操作

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

      返回 void

      // 停止正在进行的绘制或测量
      editor.stop();

    • 更新指定要素的样式

      为已存在的要素更新样式，支持单个要素或批量更新。

      参数

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

    访问器

    • get isDrawing(): boolean

      获取当前是否处于绘制模式

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

      返回 boolean

      是否正在绘制

      if (editor.isDrawing) {
          console.log('正在绘制要素...');
      }
    • get isEditing(): boolean

      获取当前是否处于编辑模式

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

      返回 boolean

      是否正在编辑

      if (editor.isEditing) {
          console.log('正在编辑要素...');
      }

    显示设置

    成员可见性

    目录

    构造函数
    属性
    方法
    访问器