vue 高德地图叠加手绘图

要在Vue中叠加高德地图手绘图，可以使用高德地图提供的JavaScript API和Vue的生命周期函数进行实现。

首先，需要在Vue的mounted生命周期函数中创建地图实例，并将其挂载到DOM元素上。然后，使用高德地图提供的JavaScript API中的Overlay类创建手绘图层，并将其添加到地图中。

下面是一个示例代码：

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  mounted() {
    const map = new AMap.Map('map-container', {
      zoom: 13,
      center: [116.39, 39.9]
    });

    const overlay = new AMap.Overlay({
      draw() {
        const ctx = this.getContext();
        ctx.strokeStyle = '#f00';
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(100, 100);
        ctx.stroke();
      },
      zooms: [3, 18]
    });

    map.add(overlay);
  }
}
</script>

在这个示例中，我们创建了一个地图实例，并使用高德地图提供的Overlay类创建了一个手绘图层。在Overlay类的draw方法中，我们使用Canvas API绘制了一条直线。最后，将手绘图层添加到地图中。

需要注意的是，在Overlay类的构造函数中，我们指定了手绘图层的缩放级别范围。在这个示例中，手绘图层只会在地图缩放级别在3到18之间显示，缩放级别超出此范围时，手绘图层将被隐藏。

希望这个示例可以帮助你实现在Vue中叠加高德地图手绘图。