Vue Leaflet.js 地图动态绘制半圆扇形

IT博客技术分享

已于 2022-04-27 16:18:21 修改

阅读量1.4k

点赞数 1

分类专栏： vue-leaflet 文章标签： vue-leaflet

于 2022-04-12 11:05:07 首次发布

本文链接：https://blog.csdn.net/qq_41646249/article/details/124118624

版权

本文介绍如何使用 Vue Leaflet.js 库在地图上动态绘制半圆扇形。文章提供了原生 Leaflet.js 的写法，并重点讲解了在 Vue 中利用 Leaflet-Semicircle 插件实现这一功能的代码示例。同时，作者邀请读者加入相关技术交流QQ群进行讨论。

摘要由CSDN通过智能技术生成

Vue Leaflet.js 地图动态绘制半圆扇形

先上效果图：（整个圆形的扇形，类似小风扇）的效果

这是我目前用到的效果图：只需要一组对角的扇形

先说说原生的 leaflet.js 的写法：

1.生成扇形点的方法

/**
 *
 * @param center 中心点 数组
 * @param radius 半径
 * @param startAngle 起始角度
 * @param endAngle 终止角度
 * @param pointNum 圆弧上点的个数
 */
function getPoints(center, radius, startAngle, endAngle,pointNum) {
    var sin;
    var cos;
    var x;
    var y;
    var angle;
    var points = new Array();
    points.push(center);
    for (var i = 0; i <= pointNum; i++) {
        angle = startAngle + (e