FlexibleLayer

使用

<amap>
  <amap-flexible-layer :tile-size="256" :tile-url="tileUrl" />
</amap>

Source Code

Props

属性名	类型	备注
createTile	Function	*1
cacheSize	number
visible	boolean
zIndex	number
opacity	number
zooms	number[2]
extraOptions	object	其它未在上面列出的属性，仅支持单次绑定

1. 函数签名(x: number, y: number, z: number, success: Function, fail: Function) => void，其中success接收img或canvas

Events

事件名	备注

Example

<template>
  <demo-view>
    <template v-slot:control>
      <a-form-item label="opacity">
        <a-slider
          v-model="opacity"
          :min="0"
          :max="1"
          :step="0.1"
          style="width: 180px;"
        />
      </a-form-item>
    </template>
    <template v-slot:map-content>
      <amap-flexible-layer
        :create-tile="createTile"
        :cache-size="30"
        :opacity="opacity"
      />
    </template>
  </demo-view>
</template>

<script>
import PIC_URL from '../../public/assets/watermark.png';

export default {
  data() {
    return {
      opacity: 0.8,
    };
  },
  methods: {
    createTile(x, y, z, success, fail) {
      const c = document.createElement('canvas');
      c.width = c.height = 256;

      var cxt = c.getContext('2d');
      cxt.font = '15px Verdana';
      cxt.fillStyle = '#ff0000';
      cxt.strokeStyle = '#FF0000';
      cxt.strokeRect(0, 0, 256, 256);
      cxt.fillText('(' + [x, y, z].join(',') + ')', 10, 30);

      // 通知API切片创建完成
      success(c);
    },
  },
};
</script>