Polyline

使用

<amap>
  <amap-polyline :path="[[x1, y1], [x2, y2], ... ,[xn, yn]]" />
</amap>

Source Code

Props

属性名	类型	备注
path	number[2][] | number[2][][]	支持.sync
zIndex	number
bubble	boolean
cursor	string
strokeColor	string
strokeOpacity	number
strokeWeight	number
isOutline	boolean
outlineColor	string
draggable	boolean
strokeStyle	boolean
strokeDasyarray	number[]
lineJoin	string
lineCap	string
geodesic	boolean
showDir	boolean
dirColor	string
dirImg	Image | Canvas
visible	boolean
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

amap-vue 独有 Props

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

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="小区">
        <a-select v-model="aoiIndex" placeholder="请选择">
          <a-select-option
            v-for="(aoi, i) in topHomeAois"
            :key="aoi.aoiid"
            :value="i"
            >{{ aoi.name }}
          </a-select-option>
        </a-select>
      </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-polyline
        :path.sync="path"
        :stroke-color="stroke"
        :stroke-weight="8"
        :cursor="draggable ? 'pointer' : 'default'"
        :editable="editable"
        :draggable="draggable"
      />
    </template>
  </demo-view>
</template>

<script>
const topHomeAois = Object.freeze(
  require('../../public/assets/data/top-home-aois.json')
);

export default {
  data() {
    return {
      topHomeAois,
      aoiIndex: 0,
      path: null,
      editable: false,
      draggable: true,
      stroke: '#409EFF',
    };
  },
  watch: {
    aoiIndex: {
      handler(index) {
        const aoi = topHomeAois[index];
        this.path = aoi.wkt
          .split(',')
          .map(pair => pair.split(' ').map(parseFloat));
      },
      immediate: true,
    },
  },
};
</script>