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

本文介绍了Mapbox GL JS中的六种数据源类型:vector、raster、raster DEM、geojson、image和video。重点讨论了vector与raster的区别,以及geojson在地图开发中的灵活性和常用性。geojson的cluster属性被提及,它有助于图层数据的聚合处理。
摘要由CSDN通过智能技术生成

简介

在mapbox中对于地图,图层的呈现都依托于相应的数据源去渲染。mapbox 中的数据源一般分为vector, raster, raster-dem, geojson, image, video这六种类型,本文依次对这6中资源类型进行简单介绍。

vector 与 raster

矢量瓦片与栅格瓦片。关于地图的瓦片加载,在上一篇文章中有介绍,这里简单说一下矢量与栅格的区别。在gis 中 矢量瓦片与栅格瓦片的关系,类似于计算机图形中的矢量图和点阵图的关系,vector是通过点线面这三种基础模型,然后在地图的横纵坐标上进行绘制呈现,而raster则是通过像素点来对地图进行绘制。

  • vector优点:因为不同于raster通过像素点绘制,因此不会出现放大后地图变模糊的情况。
  • vector缺点:在数据存储过程中,运算相对较多。不能存储高程数据(DEM)来对地理特征做表示。
  • raster优点:每个单元格的地理信息都是很明确的,因此去做建模和数据分析都比较方便。
  • raster缺点:单元格数据大小决定分辨率,因此容易出现模糊,不能较好的表示地图显示的线性特征。

pdf 即是地图的瓦片数据。
在这里插入图片描述

raster DEM

栅格瓦片 - 数字高程模型。
因为raster这种数据源对于地图位置能有较好的表示,在此基础上,可以增加对于地表特征

要更新 `mapboxgl` 中图层的 `source-layer` 和 `source` 属性,你可以使用以下步骤: 1. 使用 `map.getSource()` 方法获取图层的当前数据源对象。 2. 更新数据源对象的 `url` 或其他属性,以更新数据源。 3. 使用 `map.getStyle().layers` 方法获取地图中的所有图层。 4. 找到你想要更新的特定图层,并更新其 `source-layer` 和 `source` 属性。 5. 使用 `map.setStyle()` 方法重新应用更新后的样式。 以下是一个示例代码,演示了如何更新 `mapboxgl` 中图层的 `source-layer` 和 `source` 属性: ```javascript // 获取当前图层的数据源对象 const source = map.getSource('your-source-id'); // 更新数据源对象的属性 source.setUrl('new-source-url'); // 或者 source.setData('new-data'); // 获取地图中的所有图层 const layers = map.getStyle().layers; // 找到要更新的特定图层 const layerToUpdate = layers.find(layer => layer.id === 'your-layer-id'); // 更新图层的 source-layer 和 source 属性 layerToUpdate['source-layer'] = 'new-source-layer'; layerToUpdate.source = 'your-source-id'; // 重新应用更新后的样式 map.setStyle(map.getStyle()); ``` 请注意,在上述代码中,你需要替换 `'your-source-id'`、`'new-source-url'`、`'new-data'`、`'your-layer-id'` 和 `'new-source-layer'` 为你自己的数据源 ID、新的数据源 URL、新的数据、图层 ID 和新的数据源图层名称。 希望这个示例对你有所帮助!如果你还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值