首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用mapbox gl从现有图层获取geojson边界数组?

使用 Mapbox GL 从现有图层获取 GeoJSON 边界数组的方法如下:

  1. 首先,你需要在你的项目中引入 Mapbox GL 库。你可以通过在 HTML 文件中添加以下代码来引入 Mapbox GL 库的 JavaScript 文件:
代码语言:txt
复制
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' rel='stylesheet' />
  1. 然后,你需要创建一个 Mapbox GL 地图实例。你可以在 JavaScript 文件中使用以下代码来创建地图实例:
代码语言:txt
复制
mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: zoomLevel
});

在上面的代码中,你需要将 YOUR_MAPBOX_ACCESS_TOKEN 替换为你自己的 Mapbox 访问令牌。你还可以根据需要调整地图的样式、中心点和缩放级别。

  1. 接下来,你需要添加一个图层到地图上。你可以使用以下代码将一个图层添加到地图上:
代码语言:txt
复制
map.on('load', function() {
  map.addLayer({
    id: 'your-layer-id',
    type: 'fill',
    source: {
      type: 'geojson',
      data: 'your-geojson-url'
    },
    paint: {
      'fill-color': '#088',
      'fill-opacity': 0.8
    }
  });
});

在上面的代码中,你需要将 'your-layer-id' 替换为你自己的图层 ID。你还需要将 'your-geojson-url' 替换为包含你的 GeoJSON 数据的 URL。你可以根据需要调整图层的类型、样式和属性。

  1. 最后,你可以使用以下代码从现有图层获取 GeoJSON 边界数组:
代码语言:txt
复制
var features = map.queryRenderedFeatures({ layers: ['your-layer-id'] });
var boundaries = features.map(function(feature) {
  return feature.geometry.coordinates;
});
console.log(boundaries);

在上面的代码中,'your-layer-id' 应该是你之前添加的图层的 ID。map.queryRenderedFeatures 方法用于查询渲染在地图上的图层中的要素。然后,我们使用 map.features.map 方法将每个要素的边界坐标提取出来,并存储在 boundaries 数组中。最后,你可以使用 console.log 打印边界数组。

这样,你就可以使用 Mapbox GL 从现有图层获取 GeoJSON 边界数组了。

请注意,以上代码示例中的 Mapbox GL 版本为 2.6.1。你可以根据需要调整版本号。另外,你需要替换示例代码中的一些参数,如地图样式、访问令牌、图层 ID 和 GeoJSON URL,以适应你自己的项目。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Mapbox添加行政区矢量图层,Mapbox添加分级设色图层,Mapbox添加文本标记图层,Mapbox给行政区矢量数据添加名称,Mapbox自定义鼠标悬浮框,Mapbox添加天地图底图

数据驱动:Mapbox 支持使用各种数据源,包括开放街道地图(OpenStreetMap)数据,以及其他商业和私有数据。...添加行政区矢量图层 这个很简单,主要是需要行政区边界的geojson,这个一般是用shpfile文件转化为geojson,可以通过这个在线网站实现:mapshaper 代码实现...,先完成geojson数据源添加,然后添加一个矢量边界图层就可以了。...添加文本标记图层 底图嘛,只有矢量边界不够直观,底图信息又会被颜色图层盖住,所以需要在最上方添加文本注记图层,当然也可以添加一些别的文本内容,标记等都可以。..."mapbox-gl"; import "mapbox-gl/dist/mapbox-gl.css"; // import MapboxLanguage from "@mapbox/mapbox-gl-language

11900
  • 设计高性能树形菜单,支持数十万条数据加载。

    如何解决大数据量的树形数据展示、选择? 下图是在***Geobuilding***软件中绘制的几个polygon要素。发现了什么?这看起来像极了树形菜单! 我们知道Geojson数据有点/线/面。...而高德地图、maplibre-gl、mapbox-gl、openlayers等都可以自定义样式渲染geojson数据,比如线颜色、面填充色、文字标记等。...如果有子集按固定长度缩近生成polygon,并在每个polygon中设置属性,用于点击获取属性值。 设置地图样式 我选择基于maplibre-gl实现。去掉卫星图等其他图层,使用空白样式渲染。...仅仅使用webgl框架渲染geojson数据,保障性能。...].properties; //根据属性中的id、pid去更新高亮样式,动态生成新的polygon数组,使用setdata更新数据 }) 视频演示

    14400

    初识mapbox GL

    2.如何快速认识 打开maobox GL官网,如下图所示: ? 快速认识mapbox GL,我们只需要快速看一下Overview和Example两个部分即可。...2.1 Overview 通过Overview,我们可以获取到几个信息:1、简介;2、版本;3、引用,包括npm和cdn;4、基本的使用demo。...2.2 Example Example 是官方提供的有关maoboxl GL功能比较全面的一个展示,对于一个初次接触的人来说,通过Example,一方面我们能够快速的获取mapbox GL的表现,另一方面...url": "mapbox://mapbox.terrain-rgb" }); 5.layer layer在mapbox GL中是非常重要的,我觉得mapbox GL的设计NB之处也在于此。...下面链接里是mapbox GL官方的streets-v11的图层配置参数,比较长,但是我希望你能够认真读完,他对于你理解layer非常重要!!!

    2.3K30

    (数据科学学习手札156)地图可视化神器kepler.gl 3.0版本发布

    高性能矢量文件格式支持   在过去,kepler.gl允许上传读取的文件格式仅限于csv、json和geojson,这显然限制了其分析大规模复杂GIS数据的能力。...而在新版本中,kepler.gl新增了对Apache Arrow中特有的GeoArrow格式的支持,在官方的测试示例中,读取及解析百万行级别的多边形矢量表数据,arrow格式速度比geojson快了超过...10倍:   目前该项特性仅支持多边形图层,未来kepler.gl将为更多类型的矢量图层支持GeoArrow格式,敬请期待~ 2.3 底层地图框架更换为Maplibre   很多朋友都知道,kepler.gl...底层是基于React、Mapbox以及deck.gl等框架进行功能构建,但由于Mapbox从1.13版本开始修改了其开源协议,变成了闭源商业地图框架,因此为了避免被不再开源的Mapbox限制其发展,kepler.gl...从3.0版本开始正式将底层地图框架更换成相兼容的开源高性能地图框架Maplibre(这也是费老师我在日常GIS平台研发工作中使用的主力框架,强烈推荐)。

    49010

    WebWorker 在文本标注中的应用

    从几何角度看就是以形状内的各个点为圆心作圆,这些圆不能与边界(海岸线)相交,以难抵极为圆心的圆半径最大。要注意难抵极和 centroid几何中心不是一个概念。 ?...基于网格的 PIA 算法 算法步骤如下: 以多边形的包围盒作为初始网格,使用 ray casting 计算网格中心到多边形边界的有向距离(下图的 dist 负数表示在形外)。...', isCluster: false } }); } WebWorker 中使用 fetch API 获取 GeoJSON,随后创建数据瓦片索引,这部分之前文章介绍过就不再赘述了.../mapbox/mapbox-gl-js/blob/master/rollup/bundle_prelude.js var shared, worker, mapboxgl; // define gets...Rollup 构建方案 https://github.com/mapbox/mapbox-gl-js/blob/master/rollup.config.js

    4.7K60

    大头针显隐跟随楼层功能探索

    尝试思路 在 mapbox 提供的原有类和方法基础上实现; 尽可能不影响客户端已使用的 mapbox 原有大头针 api 相关代码。 思路一 思路来源:面向协议编程!...如果能够新增一个协议,使 mapbox 原大头针相关类遵守此协议,然后实现楼层属性,在使用时对楼层属性赋值,在 SDK 内部进行逻辑判定,就实现功能就好了! 想到这,不禁感慨,不愧是我!.../maps/examples/line-geojson/"> Add a line annotation from GeoJSON examples to learn how to add an...图层方法添加不可点击图片的方法 思路四 使用现有轮子:MapboxAnnotationExtension The Mapbox Annotation Extension is a lightweight...://docs.mapbox.com/mapbox-gl-js/style-spec/#paint-symbol-icon-opacity). */ @property (nonatomic, assign

    1.8K60

    大头针显隐跟随楼层功能探索

    尝试思路 在 mapbox 提供的原有类和方法基础上实现; 尽可能不影响客户端已使用的 mapbox 原有大头针 api 相关代码。 思路一 思路来源:面向协议编程!...如果能够新增一个协议,使 mapbox 原大头针相关类遵守此协议,然后实现楼层属性,在使用时对楼层属性赋值,在 SDK 内部进行逻辑判定,就实现功能就好了! 想到这,不禁感慨,不愧是我!?.../maps/examples/line-geojson/"> Add a line annotation from GeoJSON examples to learn how to add an...图层方法添加不可点击图片的方法 思路四 使用现有轮子:MapboxAnnotationExtension The Mapbox Annotation Extension is a lightweight...://docs.mapbox.com/mapbox-gl-js/style-spec/#paint-symbol-icon-opacity). */ @property (nonatomic, assign

    1.7K20

    ⭐Mapbox GL JS学习探索系列(2) - Source

    本文链接:https://blog.csdn.net/j_bleach/article/details/102533553 简介 在mapbox中对于地图,图层的呈现都依托于相应的数据源去渲染。...mapbox 中的数据源一般分为vector, raster, raster-dem, geojson, image, video这六种类型,本文依次对这6中资源类型进行简单介绍。...在feature这一层级可以加入bbox属性来表示这一个特征值的边界,通常为左上右下的两个x,y坐标。...在geojson这里介绍一个cluster属性,这是一个聚合属性,在开启这个属性之后,图层会检测数据渲染之后是否该聚合(变相的碰撞检测),可以通过设置clusterRadius来控制图层数据间的显示隐藏的距离...以上就是mapbox的数据源的简单介绍,其中geojson是使用频率最高的,也是在对地图进行二次构造中,最为灵活易用的数据类型。

    2.3K30

    空间数据可视化神器,Pydeck!

    使用的数据及代码都已上传,可在文末获取~ ① 弧形图 打工人下班后的通勤情况,起点位于旧金山市中心(绿色),终点为目的地(红色)。 数据由美国人口普查局收集。...与Mapbox上的卫星图像叠加以突出地形如何影响农业。 通用样式,一幅世界地图。 通过geopandas的数据,绘制世界地图。 其中geopandas安装起来有点费劲,建议使用whl安装包。...与Mapbox上的卫星图像叠加以突出地形如何影响农业。 英国从1979年起发生的人身伤害交通事故。 点云图,激光扫描,由无数个点组成。 加拿大温哥华的房价情况。 这个不知道是啥玩意......使用AWS开放数据和Mapbox卫星图像制作一个地形图。 旧金山市内各种公共交通站点的名称,在站点的位置上标出。 一辆共享单车在旧金山的骑行情况,从开始到逐渐消失。...这里小F用到了Mapbox地图,是需要自行去注册,获取token。

    1.9K50

    WebGIS开发框架及其特点

    支持多种地图源(如TileLayer、WMS、GeoJSON等)。插件丰富,可扩展性强。适合移动端和桌面端应用。适用场景:轻量级WebGIS应用。需要快速上手的项目。...3.Mapbox GL JS特点:基于矢量切片技术,渲染速度快。支持自定义地图样式(通过Mapbox Studio)。提供3D地图、动画等高级功能。商业化支持,免费版有一定限制。...商业化产品,需付费使用。适用场景:企业级WebGIS应用。需要与ArcGIS平台集成的项目。...7.MapLibre GL JS特点:基于Mapbox GL JS的开源分支,完全免费。支持矢量切片和自定义地图样式。社区驱动,功能持续更新。适用场景:需要开源矢量地图的项目。...替代Mapbox GL JS的免费方案。8.Deck.gl特点:由Uber开发,专注于大规模地理数据可视化。支持2D和3D图层(如点、线、面、热力图等)。基于WebGL,性能优异。

    12310

    WebGIS项目的性能优化

    数据格式优化:使用轻量级数据格式(如GeoJSON、TopoJSON)替代重量级格式(如Shapefile)。数据缓存:使用缓存技术(如Redis、Memcached)存储常用查询结果。...2.前端优化地图渲染优化:使用WebGL渲染(如Mapbox GL JS)替代Canvas渲染,提升渲染性能。减少地图图层数量,合并相似图层。...使用CDN:将静态资源(如地图瓦片、图标)托管到CDN,加速资源加载。3.后端优化空间查询优化:使用空间索引加速查询。优化SQL查询,避免全表扫描。...异步处理:使用异步任务队列(如Celery、RabbitMQ)处理耗时操作(如数据分析)。API优化:使用分页和过滤减少API返回的数据量。使用GraphQL替代RESTful API,按需获取数据。...使用HTTP/2:启用HTTP/2协议,支持多路复用,提升加载速度。预加载资源:使用预加载关键资源。

    12210

    走进地图(5)-矢量瓦片

    交互式地图:矢量瓦片可以支持各种交互功能,如点击要素获取属性信息、绘制标记、实时更新数据等。这使得用户可以在地图上与数据进行更深入的交互和探索。...地理数据分析:矢量瓦片提供了在客户端获取数据源,可以在客户端直接进行数据分析。 实时可视化:矢量瓦片可以用于实时可视化地理数据。...常见的矢量瓦片格式: Mapbox Vector Tiles (MVT):Mapbox Vector Tiles 是一种开放标准的矢量瓦片格式,由Mapbox推出并广泛应用于Web地图开发。...矢量瓦片中的地理要素 (图层): 点(Point):点要素表示地球上的离散位置,如城市、建筑物、地标等。每个点要素通常由经度和纬度坐标确定,并可以附带其他属性信息。...面要素由一系列连接的点构成的边界线形成,可以填充颜色和应用纹理等效果。 多点(MultiPoint):多点要素表示多个离散位置,可以是独立的点或点集合。多点要素常用于表示一组相关的地理位置。

    2K30

    (数据科学学习手札64)在jupyter notebook中利用kepler.gl进行空间数据可视化

    keplergl即可,如果安装过程中遇到与geopandas、fiona相关的错误,只需要重装gdal模块即可,在完成安装之后,通过下面的小例子来认识kepler.gl的使用方式: from keplergl...第一个按钮下包含了跟图层元素相关的众多功能,要使用这些功能需要导入数据,利用add_data()方法传入,它有两个参数,data用于传入包含要传入图层的所有数据信息(具体的格式下一章节中会做具体介绍),...name传入字符串类型的变量,用于给当前图层命名,默认为'unnamed',下面我们以一个简单的飞线图的示例来初步认识利用kepler.gl进行可视化的基本流程:   使用到的数据是随机生成的,除经纬度和地名外其它字段真实之外其他字段无意义...可以看到通过这种方式我们直接一步就还原了之前完成的可视化结果,通过本小节中这个简单的小例子,你应该对jupyter notebook中如何调用kepler.gl有了一个初步的认识,接下来我们在不同的例子中总结传入不同格式数据进行可视化的方法...2.2 绘制GeoJson类型文件   geojson文件是kepler.gl中使用起来最方便的一种数据格式,因为它格式清楚,kepler.gl可以直接推理出需要执行的可视化方案,下面这个例子使用到kepler.gl

    1.7K60

    (数据科学学习手札64)在jupyter notebook中利用kepler.gl进行空间数据可视化

    keplergl即可,如果安装过程中遇到与geopandas、fiona相关的错误,只需要重装gdal模块即可,在完成安装之后,通过下面的小例子来认识kepler.gl的使用方式: from keplergl...的操作窗口,如下图所示:   点击左上角的小箭头便可以展开一个功能丰富的窗体:   第一个按钮下包含了跟图层元素相关的众多功能,要使用这些功能需要导入数据,利用add_data()方法传入,它有两个参数...kepler.gl进行可视化的基本流程:   使用到的数据是随机生成的,除经纬度和地名外其它字段真实之外其他字段无意义,保存在datatable.csv中,具体如下:   在之前已经初始化的map1的基础上...map1.config) map2   可以看到通过这种方式我们直接一步就还原了之前完成的可视化结果,通过本小节中这个简单的小例子,你应该对jupyter notebook中如何调用kepler.gl...2.2 绘制GeoJson类型文件   geojson文件是kepler.gl中使用起来最方便的一种数据格式,因为它格式清楚,kepler.gl可以直接推理出需要执行的可视化方案,下面这个例子使用到kepler.gl

    1K00

    自定义mapbox插件 - 地图快照下载(JS)

    本文重点放在开发一款mapbox插件,而非下载功能本身,所以具体下载流程在接下来的插件开发中插入。 插件开发流程 因为官方没有提供开发插件的文档(没找到),因此从0到1这样一步一步来。...由此可知,一个可供map使用的插件类至少需要2个方法,onAdd ,onRemove。为了更详细的了解这两个方法的作用,直接去mapbox-gl-js里面搜索addControl。...mapbox-gl部分代码: addControl(control: IControl, position?...最终去翻阅官方的插件代码,发现官方的插件中,对于引入的dom,添加了一个mapboxgl-ctrl的样式,去mapbox-gl中搜索这个样式后,发现一个关键属性。 ?...项目地址:https://github.com/jiwenjiang/mapbox-gl-map2img

    8.9K40

    maptalks 开发手册-入门篇

    为何使用maptalks 做过地图的小伙伴们都知道,每个地图框架产商都与自家的地图资源进行绑定,如非常受欢迎的mapBox、高德、百度、腾讯等,你必须注册他们产品,获取key,然后调用的api,才能进行地图的相关操作...,它其实共有4个属性:position、vertical、reverseMenu、items,详细可以去看:Maptalks/docs/api/0.x/control.Toolbar.html,也可以从源码角度去看...好,下载可以找一个数据来测试一下:地图选择器 (aliyun.com) 上面下载一个geojson的数据,名称随便,这里就说一下怎么用它的方法: ​ 首先要清除怎么添加几何面,使用layer.addGeometry...(geometry),addGeometry支持单个,也支持数组,那么就是说,我们可以传入的参数可以是:Polygon、MultiPolygon、Geometry、MultiGeometry,或者他们数组...(geoJson) 获取到的是一个MultiPolygon数组对象 效果如下: 好像这个JSON的数据不是很准确,这个不重要,重要的是我们已经将面画出来了,还需要一些交互。

    3.5K32

    使用 Mapbox 在 Vue 中开发一个地理信息定位应用

    如果你使用 Yarn,请运行以下命令: cd geocoder && yarn add mapbox-gl @mapbox/mapbox-gl-geocoder axios or cd geocoder...使用 Mapbox 进行交互式地图显示 我们需要做的第一件事是访问 Mapbox GL 和 Geocoder 库。...center 属性是一个数组类型,保存经度和纬度。 Mapbox GL JS 根据页面上的这些参数初始化我们的地图,并返回一个 Map 对象给我们。...它返回一个对象,我们使用 setLngLat 方法来获取我们的坐标。我们使用 addTo 方法将自定义标记附加到现有地图。最后,我们用新坐标更新实例中的 center 属性。...我们从响应中获取它,然后将其设置为 this.location 的值。 完成后,我们需要编辑和设置将调用我们创建的这个函数的按钮。

    71810
    领券