Mapbox GL JS 根据指定的点在地图上标记一个指定半径（KM）的圆形区域

最新推荐文章于 2024-07-22 20:33:56 发布

Chengwu Liao

最新推荐文章于 2024-07-22 20:33:56 发布

阅读量4.4k

点赞数 4

文章标签： mapbox gl 标记区域

本文链接：https://blog.csdn.net/qq_32565543/article/details/83539172

版权

本文介绍了如何在Mapbox GL JS中根据用户指定的点，创建并更新一个具有特定半径（公里）的圆形区域。通过构造函数输入中心点经纬度、半径和点数，可以轻松实现这一功能。

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

需求描述：

小明在使用mapbox-gl进行开发时，需要实现用户指定地图上的一个点，然后根据这个点，突出显示以其为中心的一定半径的圆形区域。半径可以为小明指定的千米数。

具体实现点击产生点的功能就不描述了，这里主要描述产生圆形区域的方法。

1. 构造函数：输入中心点经纬度，和半径大小（KM），以及点数。

var createGeoJSONCircle = function(center, radiusInKm, points) {
   
    if(!points) points = 64;

    var coords = {
   
        latitude: center[1],
        longitude: center[0]
    };

    var km = radiusInKm;

    var ret = [];
    var distanceX = km/(111.320