mapbox-gl知识点整理

最新推荐文章于 2024-07-24 15:04:53 发布

荣默默

最新推荐文章于 2024-07-24 15:04:53 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/rt2016/article/details/105913675

本文详细梳理了Mapbox GL JavaScript库的关键概念，包括地图创建、样式定制、地理坐标系转换、图层与源的操作、交互式地图设计等，旨在帮助开发者更好地理解和应用Mapbox GL进行地图开发。

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

1.mapbox概述：

mapbox致力打造全球最漂亮的个性化 地图，样式的设置都支持矢量瓦片。目前mapbox-gl.js的版本是11.0版本，样式版本由7升到8。默认的投影坐标是3857。加载矢量切片服务时需要加载sprite【图标符号】和glyphs【指定矢量图层的字体】。其中sprite用来指定图标资源的url，一般情况下是.json或者.png后缀结尾；glyphs则是以.pdf后缀结尾。矢量切片有加载速度快，样式好看，可扩展的优点，缺点是底图加载不快。

2.map的概述：

map的组成分成两部分，一部份是数据来源【source】，另外一部分是数据呈现在界面的样子【style】。

（1）source包括vector【矢量瓦片】、raster【栅格瓦片】、geojson【各种矢量数据】、image【图片】和video【视屏】等；

（2）layer包括background【不需要source】、fill、symbol、raster、circle和line等图层；

3.运算符：

（1）对于数值执行运算符：【+    -      *     /】

        如： map.setFilter('symbol', ['==', 'name', 'dangerous']);

（2）操作布尔值和条件运算符的逻辑运算符 ：【case 、 let】

    如：'circle-color': [
  'case',
  ['<', ['get', 'speed'], 10.8], 'rgba(0,0,0,0)', //<10.8
  ['<', ['get', 'speed'], 17.2], 'rgba(153, 255, 153, .9)', //>=10.8 & <17.2
  ['<', ['get', 'speed'], 24.5], 'rgba(102, 204, 255, .9)',
  ['<', ['get'