专栏首页前端加油站⭐Mapbox GL JS学习探索系列(2) - Source

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/j_bleach/article/details/102533553

简介

在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这种数据源对于地图位置能有较好的表示,在此基础上,可以增加对于地表特征的描述,应用场景为地形地貌的分析描述。 关于 DEM的详细介绍

geojson

geojson 是gis中常用到表示地理信息的数据格式,对于点线面等基本图形,都有其标准的表示方法。 比如在地图中对于一个点的数据表示方法

{
   type: 'geojson',
   data: {
       "type": "FeatureCollection",
       "features": [{
           "type": "Feature",
           "bbox": [-180.0, -90.0, 180.0, 90.0],
           "properties": {},
           "geometry": {
               "type": "Point",
               "coordinates": [
                   -76.53063297271729,
                   39.18174077994108
               ]
           }
       }]
   }
}

在geometry中的type,具体表述了数据的类型,可以是点,线,以及面。具体有:“Point”, “MultiPoint”, “LineString”, “MultiLineString”, “Polygon”, “MultiPolygon”。

在feature这一层级可以加入bbox属性来表示这一个特征值的边界,通常为左上右下的两个x,y坐标。

通常在实际开发应用的,还会使用turf.js 这个空间坐标的类库,来提高开发效率,这个库提供了空间地理坐标常用的一些方法,非常好用。

在geojson这里介绍一个cluster属性,这是一个聚合属性,在开启这个属性之后,图层会检测数据渲染之后是否该聚合(变相的碰撞检测),可以通过设置clusterRadius来控制图层数据间的显示隐藏的距离。在实际开发中对于图层的处理方面,有很大帮助,在之后介绍layer的文章中会用一个实际是范例来讲解。

image,video

能够直接在地图中引入图片和视频,本人在实际工作中接触的较少,就不展开说明了。

以上就是mapbox的数据源的简单介绍,其中geojson是使用频率最高的,也是在对地图进行二次构造中,最为灵活易用的数据类型。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 改造 Combo Select支持服务器端模糊搜索

    项目中使用了 combo select,为缺省的select增加模糊搜索的功能,一直运行得很好。

    程序猿讲故事
  • Python一键爬取你所关心的书籍信息

    个人简书专栏:放翁lcf https://www.jianshu.com/u/ea4b6b1d2c22

    数据森麟
  • JSON金额解析BUG的解决过程

    这是在我们开发的一个支付系统中暴露的一个BUG,问题本身比较简单,有意思的是解决问题的过程。将过程分享出来,希望能够对大家有所帮助。

    程序猿讲故事
  • 聊聊NacosDiscoveryHealthIndicatorAutoConfiguration

    本文主要研究一下NacosDiscoveryHealthIndicatorAutoConfiguration

    codecraft
  • 测试开发进阶(二十一)

    访问:http://127.0.0.1:8000/index/?a=1&b=2&a=3

    zx钟
  • SpringMVC底层数据传输校验重传方案

    团队的项目正常运行了很久,但近期偶尔会出现BUG。目前观察到的有两种场景:一是大批量提交业务请求,二是生成批量导出文件。出错后,再执行一次就又正常了。

    程序猿讲故事
  • SpringMVC底层数据传输校验的方案

    团队的项目正常运行了很久,但近期偶尔会出现BUG。目前观察到的有两种场景:一是大批量提交业务请求,二是生成批量导出文件。出错后,再执行一次就又正常了。

    程序猿讲故事
  • Python 爬取 4027 条脉脉职言,解读互联网人的苦与难!

    脉脉是一个实名职场社交平台。之前爬了脉脉职言版块,大概爬了4027条评论,本文对爬取过程给出详细说明,对于评论内容仅做可视化分析。

    数据森麟
  • 会唱歌的程序员为何如此受欢迎?

    上周六晚,爱奇艺的独家综艺《乐队的夏天》总决赛终于落下了帷幕,虽然决赛过程有些“曲折”,但是我最喜欢的刺猬乐队,仍然凭借自己的硬实力,最终排在第二名!

    数据森麟
  • 获取ztree树的选中子菜单信息并且提交给后端

    前面写过,ztree实现一棵树的文章,https://www.jianshu.com/p/c2b919e91e91 现在要用ajax+json模拟交互效果

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券