图形编辑器

图形编辑器组件，当前支持圆形和多边形绘制和编辑

基础示例

vue

<template>
  <tlbs-map
    ref="mapRef"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="handleClick"
    @map_inited="onMapInited"
  >
    <div style="position: absolute;top: 0;left: 0;z-index: 2000;">
      <button
        @click.stop="mode='draw'"
      >
        设置绘制模式
      </button>
      <button
        @click.stop="mode='edit'"
      >
        设置编辑模式
      </button>
      <button
        @click.stop="activeId = 'polygon'"
      >
        设置画多边形
      </button>
      <button
        @click.stop="activeId = 'circle'"
      >
        设置画圆形
      </button>
      <button
        @click.stop="getOverlayList"
      >
        获取图层列表
      </button>
      <button
        @click.stop="onSelectGeometry"
      >
        选中图形
      </button>
      <button
        @click.stop="onGetSelectedList"
      >
        获取选中集合图形
      </button>
      <button
        @click.stop="onClear"
      >
        清空选中
      </button>
    </div>
    <!--vue2使用:active-overlay-id.sync="activeId" -->
    <tlbs-geometry-editor
      ref="editorRef"
      v-model:active-overlay-id="activeId"
      :action-mode="mode"
      polygon-id="polygon"
      :default-polygon-geometries="geometries"
      :polygon-styles="styles"
      selectable
      @select="onSelect"
      @draw_complete="onDrowComplet"
      @adjust_complete="onAdjustComplete"
      @draw_error="onDrawError"
    />
  </tlbs-map>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue-demi';
const paths = [
  { lat: 40.041117253378246, lng: 116.2722415837743 },
  { lat: 40.03942536171407, lng: 116.2726277820093 },
  { lat: 40.03970460886076, lng: 116.27483769345417 },
  { lat: 40.041404706498625, lng: 116.27443003983899 },
];

export default defineComponent({
  name: 'GeometryEditorDemo',
  setup() {
    const mapRef = ref(null);
    const center = ref({ lat: 40.040452, lng: 116.273486 });
    const zoom = ref(17);
    const editorRef = ref<any>(null);
    const mode = ref('edit');
    const activeId = ref('polygon');
    const onToggleMode = () => {
      mode.value = mode.value === 'draw' ? 'edit' : 'draw';
    };

    const onSelect = (e: TMap.PolygonGeometry | TMap.CircleGeometry) => {
      console.log('select', e);
    };
    const onDrowComplet = (geomeytry: TMap.PolygonGeometry | TMap.CircleGeometry) => {
      console.log(geomeytry);
    };
    const onAdjustComplete = (geomeytry: TMap.PolygonGeometry | TMap.CircleGeometry) => {
      console.log(geomeytry);
    };
    const onDrawError = (e: TMap.MapEvent) => {
      console.log(e);
    };

    const getOverlayList = () => {
      console.log(editorRef.value.editor.getOverlayList());
    };

    const onMapInited = () => {
      // 地图加载完成后，可以获取地图实例，调用地图实例方法
      console.log(mapRef.value.map);
    };

    return {
      center,
      zoom,
      onMapInited,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      mapRef,
      editorRef,
      geometries: [
        {
          id: 'firstPolygon',
          styleId: 'polygon', // 样式id
          paths, // 多边形的位置信息
          properties: {
            // 多边形的属性数据
            title: 'polygon',
          },
        },
      ],
      styles: {
        polygon: {
          color: '#3777FF', // 面填充色
          showBorder: false, // 是否显示拔起面的边线
          borderColor: '#00FFFF', // 边线颜色
        },
      },
      mode,
      activeId,
      onToggleMode,
      onSelect,
      onDrowComplet,
      onAdjustComplete,
      onDrawError,
      getOverlayList,
      handleClick(e: TMap.MapEvent) {
        console.log(e);
      },
      onClear() {
        editorRef.value.editor.select([]);
      },
      onSelectGeometry() {
        editorRef.value.editor.select(['firstPolygon']);
      },
      onGetSelectedList() {
        console.log(editorRef.value.editor.getSelectedList());
      },
    };
  },
});
</script>
<style scoped>
button {
  padding: 4px;
  background-color: #fff;
  margin-right: 5px;
  border: 1px solid #ddd;
}
</style>

props

名称	类型	说明
circleId	`String`	圆形图层 id，参考官网文档
defaultCircleGeometries	`TMap.CircleGeometry[]`	初始圆形标记数据数组，非受控属性，参考官网文档
circleStyles	`{ [key: string]: TMap.MultiCircleStyleHash }`	圆形标记的相关样式，参考官网文档
circleDrawingStyleId	`String`	圆形绘制样式Id，参考官网文档
circleSelectedStyleId	`String`	圆形选中样式Id，参考官网文档
polygonId	`String`	多边形图层 id，参考官网文档
defaultPolygonGeometries	`TMap.PolygonGeometry[]`	初始多边形标记数据数组，非受控属性，参考官网文档
polygonStyles	`{ [key: string]: TMap.MultiPolygonStyleHash }`	多边形标记的相关样式，参考官网文档
polygonDrawingStyleId	`String`	多边形绘制样式Id，参考官网文档
polygonSelectedStyleId	`String`	多边形选中样式Id，参考官网文档
activeOverlayId	`String`	处于编辑状态的图层id，编辑状态下的图层可以新增图形、选中图形进行修改和删除，参考官网文档
actionMode	`String`	编辑器的操作状态，取值'edit'或者'draw'，参考官网文档
snappable	`Boolean`	是否开启吸附功能，默认为false，参考官网文档
selectable	`Boolean`	是否开启点选功能，默认为true，开启后可以点选图形进行修改和删除操作，参考官网文档
options	`TMap.tools.GeometryEditorOptions`	除了上述属性的其他配置参数，参考官网文档

事件

名称	参数	说明
active_changed		切换编辑图层，调用setActiveOverlay接口、选中其他图层元素或删除一个处于编辑状态的图层都会引发此事件
select		点选图形
drawing	EditingEvent	绘制中，返回绘制中信息
draw_complete	Geometry	绘制完成，返回几何图形
draw_error	DrawErrorMessage	绘制失败，返回失败信息
adjusting	EditingEvent	修改中，返回修改中的信息
adjust_complete	Geometry	修改完成，返回修改后的几何图形
adjust_error	AdjustErrorMessage	编辑失败，返回失败信息
delete_complete	Geometry[]	删除完成，返回被删除的几何图形
split_complete	PolygonGeometry[]	拆分完成，返回拆分后的多边形数组
union_complete	PolygonGeometry	合并完成，返回合并后的多边形
split_fail	Object	拆分失败，返回对象中的message属性说明了失败原因
union_fail	Object	合并失败，返回对象中的message属性说明了失败原因

组件实例属性

名称	类型	说明
polygon	`TMap.MultiPolygon`	多边形实例，实例方法参考官网文档。
circle	`TMap.MultiCircle`	圆形实例，实例方法参考官网文档。
editor	`TMap.tools.GeometryEditor`	编辑器实例，实例方法参考TMap.tools.GeometryEditor方法。

TMap.tools.GeometryEditor方法

方法	返回值	说明
setMap(map: Map)	this	设置地图对象，若为null则移除编辑器
setActiveOverlay(id: String)	this	设置指定图层处于编辑状态
setActionMode(mode: EDITOR_ACTION)	this	设置编辑器的操作状态
setKeyboardDeleteEnable(enable: Boolean)	this	设置编辑器Delete按键（删除）事件是否开启
setKeyboardCtrlEnable(enable: Boolean)	this	设置编辑器Ctrl按键（多选）事件是否开启
setKeyboardEscEnable(enable: Boolean)	this	设置编辑器Esc按键（中断操作）事件是否开启
setUndoDrawEnable(enable: Boolean)	this	设置编辑器绘制撤销功能是否开启
getMap()	Map	获取绑定的地图对象
getActiveOverlay()	EditableOverlay	获取处于编辑状态的图层
getActionMode()	EDITOR_ACTION	获取编辑器的操作状态
getSelectedList()	Geometry[]	获取已选中的几何图形数组，Geometry可能是PointGeometry/PolylineGeometry/PolygonGeometry/CircleGeometry等
getKeyboardDeleteEnable()	Boolean	获取编辑器Delete按键（删除）事件开关状态
getKeyboardCtrlEnable()	Boolean	获取编辑器Ctrl按键（多选）事件开关状态
getKeyboardEscEnable()	Boolean	获取编辑器Esc按键（中断操作）事件开关状态
getUndoDrawEnable()	Boolean	获取编辑器绘制撤销功能开关状态
addOverlay(overlay: EditableOverlay)	this	添加用于编辑的几何图层
removeOverlay(id: String)	this	删除用于编辑的几何图层
getOverlayList()	EditableOverlay[]	获取图层列表
setSnappable(snappable: Boolean)	this	开启或关闭吸附功能，吸附功能开启时绘制或编辑图形会自动吸附到临近的点或线段上
setSelectable(selectable: Boolean)	this	开启或关闭点选功能，点选功能开启时用户可点击图形进行单选和多选，选中图形后会自动将其所属图层设置为编辑状态
select(idList: String[])	this	选中属于激活状态的图层内的几何图形，若传入空数组则清空
stop()	this	停止绘制或编辑过程
split()	this	拆分已选中多边形，用户可绘制拆分线进行拆分，若无选中图形则无效
union()	this	合并已选中多边形，若无选中图形则无效
delete()	this	删除已选中图形
destroy()	this	销毁编辑器
on(eventName:String, listener:Function)	this	添加listener到eventName事件的监听器数组中
off(eventName:String, listener:Function)	this	从eventName事件的监听器数组中移除指定的listener器

图形编辑器 ​

基础示例 ​

props ​

事件 ​

组件实例属性 ​

TMap.tools.GeometryEditor方法 ​

图形编辑器

基础示例

props

事件

组件实例属性

TMap.tools.GeometryEditor方法