MouseTool

使用

<amap>
  <amap-mouse-tool :mode="mode" @draw="onDraw" />
</amap>

Source Code

Props

属性名	类型	备注
mode	'none' 'marker' 'polyline' 'polygon' 'rectangle' 'circle' 'rule' 'measureArea' 'rectZoomIn' 'rectZoomOut'	当绘制完成时会自动切换回none 建议使用.sync绑定
options	any	当切换到绘制模式时会作为配置选项使用 类型根据mode而异
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

amap-vue 独有 Props

属性名	类型	备注
clearWhenClose	boolean	绘制结束时是否保留绘制元素 建议当用于绘图时设置为true，用于测距时设置为false

Events

事件名	备注
draw	参数(type: string, result: any) 后者根据mode而异

draw事件参数

mode	参数
marker	number[2]
polyline	number[][2]
polygon	number[][2]
rectangle	number[2][2]
circle	{ center: number[2], radius: number }
rule	{ path: number[][2], length: number }
measureArea	{ path: number[][2], area: number }

Example

<template>
  <demo-view ref="demoView" class="mouse-tool-example">
    <template v-slot:control>
      <a-form-item label="类型">
        <a-radio-group v-model="mode">
          <a-radio-button v-for="md in modes" :key="md" :value="md">{{
            md
          }}</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="绘制完成时清除绘制结果">
        <a-checkbox v-model="clearWhenClose" />
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-mouse-tool
        :mode.sync="mode"
        :clear-when-close="clearWhenClose"
        @draw="onDraw"
      />
    </template>
  </demo-view>
</template>

<script>
export default {
  data() {
    return {
      modes: [
        'none',
        'marker',
        'polyline',
        'polygon',
        'rectangle',
        'circle',
        'rule',
        'measureArea',
        'rectZoomIn',
        'rectZoomOut',
      ],
      mode: 'none',
      clearWhenClose: true,
    };
  },
  methods: {
    clear() {
      this.$refs.demoView.map.clearMap();
    },
    onDraw(type, obj) {
      const json = JSON.stringify({ type, obj }, null, '  ');
      this.$message.info(`触发了 draw 事件: ${json}`);
    },
  },
};
</script>