MapBox实现框选查询，多边形范围查询

WebGIS小智

已于 2023-06-18 20:26:27 修改

阅读量1k

点赞数

分类专栏： GIS原理系列 MapBox高阶教学文章标签： javascript 开发语言 ecmascript

于 2023-06-12 14:02:00 首次发布

本文链接：https://blog.youkuaiyun.com/lz5211314121/article/details/131166731

版权

GIS原理系列同时被 2 个专栏收录

40 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

MapBox高阶教学

17 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在MapBox中实现自定义图形绘制，包括多边形和矩形，并详细阐述了如何进行范围查询，包括利用地图的onmousemove事件绘制图形、使用MapBox的查询API以及解决查询不准确的问题。同时，推荐使用turf.js的pointsWithinPolygon函数确保精确查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是老规矩先来看效果：

mapbox官方没有为我们提供框选查询的案例，所以这个功能需要我们自己写。在openlayers框架中是有一个矩形范围查询的例子，但是在maobox没有。

那么我们就来说一下如何来做这个效果吧，首先这个效果可以分为两个部分，第一个部分是绘制图形，第二部分是利用绘制的图形去查询指定的图层数据。

绘制图形在mapbox中也没有固定的案例，因此也需要我们自己写。

绘制一个图形的思路其实是通过一个关键的函数setData()这个函数的作用是为图层源source设置数据。在mapbox中我们通常可以这样操作。先建立一个空的source和layer，然后后续再为这个图层指定数据。就像下面这样的写法：

map.addSource("selected-source", {
        type: "geojson",
        data: {
          type: "FeatureCollection",
          features: [],
        },
      });
      map.addLayer({
        id:

了解本专栏

超级会员免费看