首页
学习
活动
专区
工具
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,以适应你自己的项目。

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

相关·内容

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

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

12200
  • 初识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等框架进行功能构建,但由于Mapbox1.13版本开始修改了其开源协议,变成了闭源商业地图框架,因此为了避免被不再开源的Mapbox限制其发展,kepler.gl...3.0版本开始正式将底层地图框架更换成相兼容的开源高性能地图框架Maplibre(这也是费老师我在日常GIS平台研发工作中使用的主力框架,强烈推荐)。

    42810

    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.2K30

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

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

    1.8K50

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

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

    1.9K30

    (数据科学学习手札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.3K32

    使用 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 的值。 完成后,我们需要编辑和设置将调用我们创建的这个函数的按钮。

    66910

    使用 plotly 绘制 Choropleth 地图

    本文将通过绘制中国省级 Choropleth 地图来解释如何使用 plotly 绘制 Choropleth 地图,主要有两种方法:底层 API plotly.graph_objects.Choroplethmapbox...go.Choroplethmapbox 的参数: geojson:dict 类型,这个就是刚才说的用于绘制地图轮廓的数据,一般相应的 geojson 文件中用 json.load 加载进来。...需要注意的是当你使用以下风格之一时,你就需要指定 mapbox_token(关于如何获取 token 详细可参见这里): ["basic", "streets", "outdoors", "light...有时间我会继续写一写如何在 dash 中融入这些地图,并实时更新。...其实本文所讲的是地图是一种 tile map,和这种地图对应的是一种轮廓地图,没有 mapbox 这种底图,只绘制 geojson 文件中定义的轮廓,如下面这幅图: ?

    14.2K41

    没有3D建模的基础,只用thingjs就能搞定可视化开发

    现在开始使用在线编辑工具编辑我们的地图数据啦: GeoJSON(http://geojson.io/)、或者是使用全国地理信息资源目录服务系统(http://www.webmap.cn/)以及其他在线工具...编辑地图数据:将GeoJSON数据下载 ,使用QGIS编辑数据(没有数据偏移可以省略这一步,本次省略使用QGIS,感兴趣的人可以网上搜索如何使用QGIS编辑数据,超简单);   3....绘制地图的话,记得最后返回mapbox查看绘制的建筑是否有偏差,无明显偏差则选择Save成GeoJSON格式。至此,绘制地图步骤结束。 2....编辑地图数据   将GeoJSON数据下载 ,使用QGIS编辑数据,打开QGIS,将下载的GeoJSON数据导入到QGIS中,引用在线地图,根据在线地图微调建筑的位置(不明白如何导入地图的人,可以网上搜索如何使用...调整地图样式   选择了地图数据之后,点击该图层,进入该图层修改该图层的样式,(我的习惯就是先把图层名字改为building)选择颜色类型和高度字段,设置颜色等样式: 5.

    4.1K51

    推荐一款低代码炫酷的地理空间数据可视化工具

    直接访问以下官网网站地址: https://kepler.gl/demo 上传数据文件(支持的格式为 CSV, Json, GeoJSON)后即可在线进行地理空间数据可视化配置及输出(下面会详细介绍各项功能的配置操作...3 加载地理数据文件 kepler.gl 支持 4 种数据格式,分别是:CSV, GeoJSON, DataFrame, GeoDataFrame....其中部分地理数据可视化类型只支持 GeoJSON 格式的数据。...【参数介绍】 add_data() 的参数: data:传入地图中的数据集,可以是 CSV, GeoJSON, DataFrame name:数据集传入图层中显示的名称 【代码】 import pandas...5 获取地图配置信息 通过 .config 可获取当前地图中的所有配置信息,并以 json 格式返回结果。

    2.1K21

    Mapbox GL JS学习探索系列(1) - Map

    瓦片地图:为了达到更快的地图加载效率,地图资源大多以瓦片的形式加载,即在不同的缩放等级下,来去服务器获取所需的瓦片资源,关于瓦片原理更详细的介绍。...fire:mapbox文档中没有写明这个方法,但是这个方法也非常好用,作用是主动触发订阅的方法,在mapbox-gl.js做扩展的时候,这个方法作用非常大,因为mapbox的方法订阅是标准的发布订阅模式...data 表示的是地图资源放生改变时触发的方法,这个方法在图层渲染,资源更改时使用频率非常高,因为load只是首次触发的方法,在后续对地图(图层)资源进行修改的过程中,需要使用data方法来就行判定,在这个方法中返回的是一个...小结 本文没有0到1的去讲解一个地图怎样渲染,因为官方文档都有明确的示例,这里更多的是通过自己在工作和实践中遇到的问题,来映射出一些地图的基础概念与一些方法总结,完全没有概念的同学可能需要先去mapbox...下一篇会写mapbox 图层(layer)这块

    2.8K10

    使用kepler.gl可视化地理空间数据

    在这里,我们将学习如何使用名为kepler.gl的python库。我们很快就会看到,它是处理地理空间数据的强大工具。我们会在一个数据集上应用kepler.gl,让你了解如何实现它。...自定义地图和执行数据分析总共需要了解四件事: 图层 过滤器 交互 底图 图层 让我们了解图层部分开始。图层部分包含修改图层的选项。现在,你可能想知道什么是图层?...kepler.gl地图中的一层是可视化的一层,可以根据用例创建、修改和删除。下面我演示了如何修改图层。...稍后你将看到使用kepler.gl. 现在你知道如何修改图层了,让我们了解一下过滤器。 过滤器 正如你可能已经猜到的,过滤器用于过滤数据,这正是该功能存在的原因。...数据描述 我们将使用一个包含2010年人口普查图的数据集,从这里获取的纽约市人口数据:https://github.com/uber-web/kepler.gl-data。

    3.9K22
    领券