uniapp的map组件怎么实现虚线-猿码集

uniapp的map组件怎么实现虚线

介绍

在uniapp中，map组件是一个常用的组件之一，它可以在地图上显示位置信息，提供了许多操作地图的方法。但是在一些特定的场景下，我们需要在地图上实现虚线，比如表示行程路线、标识范围等。因此，在本篇文章中，我们将介绍如何在uniapp的map组件中实现虚线。

实现方式

实现地图上的虚线，需要借助于uniapp提供的Canvas绘图能力，将虚线绘制在地图上。以下是实现虚线的步骤：

步骤1：创建地图组件

首先，需要创建一个地图组件来显示地图，可以使用uniapp自带的map组件，也可以使用第三方地图组件。

在template中添加map组件：


<template>
  <view>
    <map id="map" :longitude="longitude" :latitude="latitude" :scale="scale"></map>
  </view>
</template>

在script中初始化地图：


<script>
  export default {
    data() {
      return {
        longitude: 116.404556,
        latitude: 39.915385,
        scale: 14
      }
    },
    onReady() {
      this.mapCtx = uni.createMapContext('map');
    }
  }
</script>

步骤2：绘制虚线

绘制虚线需要借助于Canvas，可以在地图组件的onReady生命周期函数中，创建一个Canvas对象，设置虚线的样式，然后在Canvas上绘制虚线。

在onReady生命周期函数中创建Canvas对象：


onReady() {
  this.mapCtx = uni.createMapContext('map');
  uni.createSelectorQuery().select('#map').fields({
    size: true
  },(res) => {
    this.canvasWidth = res.width;
    this.canvasHeight = res.height;
    this.drawDashedLine();
  }).exec();
}

在drawDashedLine()函数中设置虚线样式，然后在Canvas对象上绘制虚线：


drawDashedLine() {
  const ctx = uni.createCanvasContext('dashed-line', this);
  ctx.setLineWidth(4);
  ctx.setStrokeStyle('#ff0000');
  ctx.setLineDash([10, 10], 5);
  ctx.moveTo(0, this.canvasHeight / 2);
  ctx.lineTo(this.canvasWidth, this.canvasHeight / 2);
  ctx.stroke();
  ctx.draw();
}

步骤3：将Canvas添加到地图组件上

绘制完虚线后，需要将Canvas对象添加到地图组件上，这样才能随着地图一起移动、缩放。

在map组件中添加一个canvas组件：


  <map id="map" :longitude="longitude" :latitude="latitude" :scale="scale">
    <canvas id="dashed-line" style="position:absolute;top:0;left:0;" />
  </map>

最后，在drawDashedLine()函数中获取Canvas对象，然后将Canvas添加到地图组件上：


drawDashedLine() {
  const ctx = uni.createCanvasContext('dashed-line', this);
  ctx.setLineWidth(4);
  ctx.setStrokeStyle('#ff0000');
  ctx.setLineDash([10, 10], 5);
  ctx.moveTo(0, this.canvasHeight / 2);
  ctx.lineTo(this.canvasWidth, this.canvasHeight / 2);
  ctx.stroke();
  ctx.draw(false, () => {
    this.mapCtx.addOverlay({
      id: 'dashed-line',
      type: 'custom',
      zIndex: 100,
      clickable: false,
      texture: 'dashed-line',
      position: {
        left: 0,
        top: 0,
        width: this.canvasWidth,
        height: this.canvasHeight
      }
    });
  });
}

完整代码

下面是绘制虚线的完整代码：


<template>
  <view>
    <map id="map" :longitude="longitude" :latitude="latitude" :scale="scale">
      <canvas id="dashed-line" style="position:absolute;top:0;left:0;" />
    </map>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        longitude: 116.404556,
        latitude: 39.915385,
        scale: 14,
        canvasWidth: 0,
        canvasHeight: 0
      }
    },
    onReady() {
      this.mapCtx = uni.createMapContext('map');
      uni.createSelectorQuery().select('#map').fields({
        size: true
      },(res) => {
        this.canvasWidth = res.width;
        this.canvasHeight = res.height;
        this.drawDashedLine();
      }).exec();
    },
    methods: {
      drawDashedLine() {
        const ctx = uni.createCanvasContext('dashed-line', this);
        ctx.setLineWidth(4);
        ctx.setStrokeStyle('#ff0000');
        ctx.setLineDash([10, 10], 5);
        ctx.moveTo(0, this.canvasHeight / 2);
        ctx.lineTo(this.canvasWidth, this.canvasHeight / 2);
        ctx.stroke();
        ctx.draw(false, () => {
          this.mapCtx.addOverlay({
            id: 'dashed-line',
            type: 'custom',
            zIndex: 100,
            clickable: false,
            texture: 'dashed-line',
            position: {
              left: 0,
              top: 0,
              width: this.canvasWidth,
              height: this.canvasHeight
            }
          });
        });
      }
    }
  }
</script>

这段代码中，需要注意的是：

Canvas对象的id必须与添加overlay时的texture属性相同。

addOverlay()方法的调用需要在Canvas对象的draw()方法的回调中。

Canvas对象必须设置为点击不可穿透，否则可能会影响点击地图的事件。

总结

通过上述步骤，我们可以在uniapp的map组件中实现地图上的虚线。在实际开发中，还可以根据需求绘制不同样式的虚线，如不同颜色、不同线型等。

uniapp的map组件怎么实现虚线