mapbox渲染圆切交集图层并绘制插值图层1-获得交集面

原创

已于 2023-03-18 09:04:11 修改 · 607 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

于 2023-03-18 09:02:59 首次发布

本文介绍了如何在Mapbox中处理图层交集，特别是如何获取圆圈与流域的交集面，并进行插值显示。通过生成圆圈面的GeoJSON，使用turf.intersect库计算交集，以及处理多面和多feature数据，最终实现地图上的效果展示。同时，文中提供了数据处理的方法，包括静态转化和动态运算。

前言

本文的讨论是主要对mapbox 的图层交集的使用，在我们一些业务中往往我们需要用到一个范围内的河流json数据，或者是一个范围内的行政区划交集等，那本文以绘制一定范围公里内流域的数据进行插值显示为例，为大家带来两个面交集的使用，下面上效果图：
在这里插入图片描述
具体这个圆圈怎么绘制我们这边暂时不讨论，本文讨论的重点是怎么取到两个面的交集，并绘制差值图

生成圆圈面JSON

直接上代码：

export const createCircle = (center, radius, points) => {
   
   
    if (!points) points = 64

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

    const km = radius / 1000.0

    const ret = []
    const distanceX = km / (111.32 * Math.cos((coords.latitude * Math.PI) / 180))
    const distanceY = km / 110.574

    let theta,