在uniapp小程序地图中绘制虚线圆形

摘要

本文将介绍如何在微信小程序地图中绘制虚线圆形。由于微信小程序的 map 组件不支持直接设置虚线圆圈，我们将使用 polyline 属性绘制一个虚线多边形来模拟圆形效果。

正式开始

1. 添加 map 组件

<template>
  <view class="container">
    <!-- 其他内容 -->
    <map :latitude="latitude" :longitude="longitude" :polyline="polyline" style="width: 100%; height: 300px;"></map>
  </view>
</template>

2.生成圆各个顶点的经纬度进行绘制

在文件的 <script> 部分，设置 latitude、longitude 和 polyline 数据

在计算经纬度时，我们需要将经度数据格式化为 14 位小数，以确保数据格式正确。但是，由于 JavaScript 中的浮点数精度问题，可能会导致在进行浮点数计算时出现舍入误差，从而导致生成的经度数据不是精确的 14 位小数。

为了解决这个问题，我们可以使用 JavaScript 中的 BigNumber 库，它可以提供更高精度的浮点数计算。

<script>

import BigNumber from 'bignumber.js'

export default {
  data() {
    return {
      latitude: 22.540822, // 地图中心点纬度
      longitude: 113.934457, // 地图中心点经度
      polyline: [
        {
          points: [],
          color: '#FF0000AA', // 多边形颜色
          width: 2, // 多边形宽度
          dottedLine: true // 是否为虚线
        }
      ]
    };
  },
  mounted() {
    //计算3km的100个顶点的经纬度
    const points = this.generateCirclePoints(this.latitude, this.longitude, 3, 100);
    this.polyline[0].points =  points

  },
  methods: {
    // 生成圆形多边形的顶点坐标
    // 圆心坐标、半径(km)和边数
    generateCirclePoints: function (latitude, longitude, radius, sides) {
      const points = []; // 存储顶点坐标的数组
      const step = (2 * Math.PI) / sides; // 计算每个顶点之间的角度差

      for (let i = 0; i < sides; i++) {
        const angle = step * i; // 计算当前顶点的角度
        const lat = new BigNumber(latitude).plus(new BigNumber(radius).times(new BigNumber(Math.sin(angle))).dividedBy(new BigNumber(111.32))); // 计算当前顶点的纬度
        const lng = new BigNumber(longitude).plus(new BigNumber(radius).times(new BigNumber(Math.cos(angle))).dividedBy(new BigNumber(111.32).times(new BigNumber(Math.cos(new BigNumber(latitude).times(new BigNumber(Math.PI).dividedBy(new BigNumber(180)))))))).toFixed(14); // 计算当前顶点的经度
        points.push({ latitude: lat.toFixed(14), longitude: lng }); // 将当前顶点的坐标存入数组中
      }

      return points; // 返回顶点坐标数组
    }

  }
};
</script>

在这个示例中，我们使用 generateCirclePoints 方法生成了一个圆形多边形的顶点坐标，并使用 polyline 属性绘制了一个虚线多边形。您可以根据需要自定义多边形的位置、颜色、半径等属性。

结果

总结

通过使用 polyline 属性绘制虚线多边形，我们可以在微信小程序地图中实现虚线圆形的效果。虽然这种方法不能直接绘制虚线圆圈，但它提供了一种替代方案，可以满足大部分需求。在实际应用中，您可以根据需要调整多边形的顶点数量、颜色和宽度等属性，以达到理想的显示效果