Ellipse

使用

<amap>
  <amap-ellipse :center="[x, y]" :radius="[rx, ry]" />
</amap>

Source Code

Props

属性名	类型	备注
center	number[2]	支持.sync
radius	number[2]	单位是米，支持.sync
zIndex	number
bubble	boolean
cursor	string
strokeColor	string
strokeOpacity	number
strokeWeight	number
strokeStyle	boolean
strokeDasyarray	number[]
fillColor	string
fillOpacity	string
draggable	boolean
visible	boolean
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

amap-vue 独有 Props

属性名	类型	备注
editable	boolean	为true时会开启EllipseEditor，并会触发center和radius属性的.sync
editorOpts	object	可选，用于定制EllipseEditor参数，仅支持单次绑定

Methods

方法名	参数	返回	备注
show
hide
getBounds		number[2][2]
contains	number[2]	boolean

Events

事件名	备注
click
dblclick
rightclick
mousemove
mouseover
mouseout
mousedown
mouseup
dragstart
dragging
dragend
moving
moveend
movealong
touchstart
touchmove
touchend

Example

<template>
  <demo-view>
    <template v-slot:control>
      <a-form-item label="center">
        <a-input read-only :value="center.join(',')" style="width: 180px;" />
      </a-form-item>
      <a-form-item label="rx">
        <a-slider
          v-model="radius[0]"
          :min="500"
          :max="3000"
          :step="100"
          style="width: 120px;"
        />
      </a-form-item>
      <a-form-item label="ry">
        <a-slider
          v-model="radius[1]"
          :min="500"
          :max="3000"
          :step="100"
          style="width: 120px;"
        />
      </a-form-item>
      <a-form-item label="editable">
        <a-checkbox v-model="editable" />
      </a-form-item>
      <a-form-item label="draggable">
        <a-checkbox v-model="draggable" />
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-ellipse
        :center.sync="center"
        :radius.sync="radius"
        :fill-color="fill"
        :fill-opacity="0.5"
        :stroke-color="stroke"
        :cursor="draggable ? 'pointer' : 'default'"
        :editable="editable"
        :draggable="draggable"
      />
    </template>
  </demo-view>
</template>

<script>
export default {
  data() {
    return {
      center: [116.473571, 39.993083],
      radius: [2000, 1000],
      fill: '#409EFF',
      stroke: '#000A58',
      editable: false,
      draggable: true,
    };
  },
};
</script>