CanvasLayer

使用

<amap>
  <amap-canvas-layer :bounds="[[swx, swy], [nex, ney]]">
    <canvas ref="canvas" />
  </amap-canvas-layer>
</amap>

Source Code

Props

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

Slots

Slot 名	位置
default	默认 （必传，并且必须是<canvas>元素）

Events

事件名	备注
complete

Example

<template>
  <demo-view
    :map-options="{
      center: [116.335183, 39.941735],
      zoom: 15,
    }"
  >
    <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-canvas-layer
        ref="canvasLayer"
        :bounds="[
          [116.328911, 39.937229],
          [116.342659, 39.946275],
        ]"
        :opacity="opacity"
        @amap-ready="ready"
      >
        <canvas ref="canvas" width="200" height="200" />
      </amap-canvas-layer>
    </template>
  </demo-view>
</template>

<script>
export default {
  data() {
    return {
      opacity: 0.8,
    };
  },
  methods: {
    ready() {
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      context.fillStyle = 'rgb(0, 100, 255)';
      context.strokeStyle = 'white';
      context.globalAlpha = 1;
      context.lineWidth = 2;
      context.font = '30px monospace';
      context.textAlign = 'center';
      context.textBaseline = 'middle';
      this.context = context;
      this.draw();
    },
    draw() {
      const layer = this.$refs.canvasLayer.$target;
      if (!layer) return;
      if (this._destroyed) return;

      if (this.radius === undefined) {
        this.radius = 0;
      }

      const { context } = this;
      context.clearRect(0, 0, 200, 200);
      context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;
      this.radius = (this.radius + 1) % 100;

      context.beginPath();
      context.arc(100, 100, this.radius, 0, 2 * Math.PI);
      context.fill();
      context.stroke();

      context.fillText(this.radius, 100, 70);

      //2D视图时可以省略
      layer.reFresh();

      requestAnimationFrame(this.draw);
    },
  },
};
</script>