图形编辑器

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

基础示例

<template>
  <tlbs-map
    ref="map"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="handleClick"
  >
    <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 map = 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());
    };

    return {
      center,
      zoom,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      map,
      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，开启后可以点选图形进行修改和删除操作

参考官网文档 https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor

事件

事件支持列表参考官网文档 https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor

组件实例属性

名称	类型	说明
polygon	TMap.MultiPolygon	多边形实例。
circle	TMap.MultiCircle	圆形实例。
editor	TMap.tools.GeometryEditor	编辑器实例。