uni-app中map组件是否有函数判断点位和圆形或者多边形的位置关系?

发布于 1周前 作者 vueper 来自 Uni-App

uni-app中map组件是否有函数判断点位和圆形或者多边形的位置关系?

类似高德地图中 AMap.GeometryUtil.isPointInRing 函数判断点和多边形的关系。 或者uniapp中怎么调用高德的工具类函数。

高德demo如下:https://lbs.amap.com/api/javascript-api/example/relationship-judgment/point-surface-relation

https:https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20200210/98b4f165413db3e14cf51a260cb3a93c.jpg


2 回复

兄弟,这个问题可解决了哈,我也遇到了这样的功能


在uni-app中,map组件本身并没有直接提供函数来判断点位与圆形或多边形的位置关系。不过,你可以通过一些几何计算来实现这个功能。以下是如何使用JavaScript来实现这些位置关系判断的代码案例。

判断点位是否在圆形内

假设你有一个圆心坐标 (cx, cy) 和一个半径 r,要判断一个点 (px, py) 是否在这个圆内,可以使用以下代码:

function isPointInCircle(cx, cy, r, px, py) {
    const dx = px - cx;
    const dy = py - cy;
    const distance = Math.sqrt(dx * dx + dy * dy);
    return distance <= r;
}

// 示例用法
const cx = 10, cy = 20, r = 15;
const px = 12, py = 18;
console.log(isPointInCircle(cx, cy, r, px, py)); // 输出: true

判断点位是否在多边形内

判断一个点是否在多边形内可以使用射线法(Ray Casting Algorithm)。以下是一个实现该算法的示例:

function isPointInPolygon(polygon, px, py) {
    let isInside = false;
    for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
        const xi = polygon[i][0], yi = polygon[i][1];
        const xj = polygon[j][0], yj = polygon[j][1];
        
        const intersect = ((yi > py) != (yj > py)) &&
            (px < (xj - xi) * (py - yi) / (yj - yi) + xi);
        if (intersect) isInside = !isInside;
    }
    return isInside;
}

// 示例多边形(顶点列表)
const polygon = [[0, 0], [20, 0], [20, 20], [0, 20]];
const px = 10, py = 10;
console.log(isPointInPolygon(polygon, px, py)); // 输出: true

在uni-app中使用

在uni-app中,你可以将这些函数与map组件结合使用。例如,你可以在地图上的某个事件触发时,获取用户的点击坐标,然后使用上述函数来判断该坐标是否在某个圆形或多边形区域内。

// 假设你在map组件的点击事件中获取了点击坐标
mapClick(event) {
    const { latitude, longitude } = event.detail;
    const px = longitude, py = latitude; // 注意:这里的px, py是地理坐标,需要转换为平面坐标(如使用投影)才能准确判断
    console.log(isPointInCircle(cx, cy, r, px, py));
    console.log(isPointInPolygon(polygon, px, py));
}

注意:在实际应用中,由于地图使用的是地理坐标(经纬度),你可能需要将地理坐标转换为平面坐标(如UTM或墨卡托投影)来进行精确判断。

回到顶部