文章目录

  • Mapbox 是如何工作的
    • Access Token
      • Token的使用范围
      • URL 限制
      • 创建和管理 access token
    • 创建新数据
      • geojson数据格式
      • 创建数据集
      • 数据集转换为 tileset
    • 上传数据
      • 数据集(Datasets)和瓦片集(tilesets)
      • 上传数据的方法
    • 地图数据
      • Mapbox 常见的4个tileset
      • Mapbox 地图投影
    • 地图设计
      • 与地图渲染相关的几个概念
      • 数据驱动的样式
      • 创建地图样式的方法
    • 静态地图
      • Retina
      • 高分辨率图片
      • 制作静态地图
      • 覆盖物
    • Web应用(Mapbox GL JS)
      • 客户端渲染
      • 相机
      • 图层
    • 空间分析

Mapbox 是如何工作的

Access Token

需要获取 access token(访问令牌)以使用 Mapbox 的各种工具、API、SDK。

Token的使用范围

每个 access token 都可以限制Mapbox API的使用范围。在选择 token 范围的时候应考虑想要使用 token 达成的目的。为了保护您的账号和数据,请不要给 token 过多的许可范围。

URL 限制

token 可以增加 URL 限制,该 token 将只回应来自您列出的 URL 的请求。没有限制的 token 将回应来自任何 URL 的请求。

创建和管理 access token

创建和管理 Mapbox access token 有两个途径:

  1. 在您的 Mapbox 账号 token 页使用用户界面操作(链接)
  2. 通过 Tokens API 以编程的方式创建、读取、更新 token。

创建新数据

一个数据集(dataset)是一个可编辑的 GeoJSON 。与 tileset不同,数据集可以逐个编辑(编辑每个feature)。数据集不能被直接在 Mapbox Studio 样式里使用但是可以被输出成一个 tileset 或通过 Mapbox GL JS 渲染。任何被输出成 tileset 的数据集都可以作为一个图层加载到 Mapbox Studio 样式编辑器中。

geojson数据格式


GeoJSON 是 Mapbox 网络服务及 API常用的地理据的格式。

创建数据集

两种方式:

  1. 在 Mapbox Studio 中,使用数据集编辑器通过可视界面创建一个新的dataset,再通过Mapbox Studio的数据集(dataset)编辑器来绘制feature以添加它们,
  2. 也可以上传一个 GeoJSON 或 CSV 文件作为数据集,然后用数据集编辑界面编辑、添加、删除每个feature数据。

数据集转换为 tileset

您不能把数据集(dataset)直接添加到 Mapbox Studio 样式编辑器的样式里。但是您可以将数据集(dataset)输出为 tileset,然后再添加到 Mapbox Studio 样式编辑器或 Mapbox GL JS 中。

上传数据

Mapbox 允许用户上传自定义数据并转换成 tileset 或 dataset 格式。根据上传的数据类型和所需的实例,用户的数据将被保存为原生的 GeoJSON 或者处理成栅格矢量的 tileset。

数据集(Datasets)和瓦片集(tilesets)

数据集是可编辑的,瓦片集是样式可变的。

  • Datasets 可以访问地理要素(点、线、多边形)和其属性,并且能在 Mapbox Studio dataset editor进行编辑。如果你正在处理需要经常更新且不太复杂的数据,请考虑使用 dataset。需要注意的是,一旦创建了数据集,就需要将其发布成瓦片集,并在 Mapbox Studio 的样式编辑器中给瓦片集添加样式。通过数据集,用户可以继续修改数据,将每次的更新数据发布到相关联的瓦片集,这样就能看到该瓦片集在任何样式模式同步改变了。
  • Tilesets 是矢量数据的轻量级集合,针对渲染效果进行了优化且不可编辑,但可以在 Mapbox Studio 样式编辑器中设置样式。如果你的数据量很大且不需要经常更新,可以考虑将数据作为 tileset 上传。

上传数据的方法

  • Mapbox Studio(常用)
  1. 如果数据以瓦片集形式上传请使用 Mapbox Studio 中的 Tilesets page。
  2. 若用户将自己的数据以数据集的形式上传请使用 Mapbox Studio 中的 Dataset page。
  3. 你还可以创建一个空白数据集,并使用 Mapbox Studio 数据集编辑器在浏览器中直接绘制数据。
  • Mapbox Uploads API(待学习)
  • Mapbox Datasets API(待学习)

地图数据

Tilesets 是一系列在 22 个缩放级别下以统一矩形图块划分的栅格或矢量数据。Tilesets 可由栅格或者矢量瓦片组成。

  • 栅格瓦片包含一系列不同尺度下的影像,它们构成一副完整的地图。Mapbox Satellite style 即由一个栅格瓦片源制作而成。
  • 其他的地图样式均使用矢量瓦片制作。矢量瓦片包含几何图形与元数据(如路名、地名、门牌号)的结合体,没有任何样式属性。矢量瓦片仅在用户(如网页浏览器或移动 app)发出请求时进行渲染。

Mapbox 常见的4个tileset

  • Mapbox Streets 包括基于 OpenStreetMap 的街道、建筑物、区域、水域以及土地数据。
  • Mapbox Terrain 包括含有等高线、山影和地表数据的全球高程数据集。
  • Mapbox Traffic 提供持续的每 5 分钟更新一次的拥堵信息,这些信息加载在源于 OpenStreetMap 的道路几何图形上。
  • Mapbox Satellite 包括由 Mapbox 处理、拼接的多个来源 a range of sources 的全球卫星影像。

Mapbox 地图投影

Mapbox 支持最受欢迎的 Web Mercator 投影,而不支持其他投影。Web Mercator 接近于等角投影,广泛使用于绝大部分网页地图。通常这个投影会被编码成 EPSG:900913 或者 EPSG:3857。

地图设计

与地图渲染相关的几个概念

  • Sources。数据源告诉渲染器你想要包含哪种数据以及在哪里找到它。
  • Layers。一个图层是代表数据源中数据的样式。它包含地图上图层显示方式的信息,包括颜色,透明度,字体等。

如果你要在地图中使用图标,图像或字体,那你的样式将需要包含一个 sprite 或glyphs 属性。

  • Sprite。样式中的所有图标或图像都需要存储在 sprite。
  • Glyphs。字形用于显示样式中的子图。样式中字形的属性提供一个 URL 模板,用以PBF 格式加载符号-距离-字段的字形集.

数据驱动的样式

样式表中任何布局属性,绘制属性或过滤器的值都可以指定为表达式. 使用 表达式, 可以同时为具有多个要素属性的数据设置样式,应用条件逻辑,并使用算术和字符串操作数据以获得数据与样式之间更复杂的关系.

// 取决于数据中marker-number 属性的值
"layout": {"icon-image": ["match", ["string", ["get", "marker-number"]],"one","pin-red","two","pin-blue","three","pin-green","pin-white"],"icon-size": 1
}

创建地图样式的方法

  1. Mapbox Studio
    Mapbox Studio 样式编辑器是一个可视化界面,用于根据 Mapbox 样式规范创建和编辑样式。
  2. Cartogram 链接
    用拖放工具 Cartogram 可在几秒钟内创建自定义地图。上传图片,选择你想要使用的颜色,并创建适合你品牌的地图样式. 新地图样式可以在网站或移动应用程序中使用,也可以在 Mapbox Studio 样式编辑器中打开它以继续自定义样式或添加自定义数据。
  3. Mapbox 地图 API
    Mapbox 样式 API 允许您阅读和更改地图样式,字体和图标。API 是 Mapbox Studio 的基础。

静态地图

静态地图是独立的 PNG 格式图片,可以在网页或移动设备上不依赖于地图库或者 API 进行展示。它们就像嵌入了一张没有交互和控件的地图。你可以利用 Mapbox Static Image API ,配合中心点坐标、缩放级别、旋转角度、倾斜角度等参数,请求得到一张静态地图。静态地图也可以包含线、标注或面等覆盖物。

<img alt='static Mapbox map of the San Francisco bay area' src='https://api.mapbox.com/styles/v1/mapbox/streets-v8/static/-122.337798,37.810550,9.67,0.00,0.00/1000x600@2x?access_token=YOUR_ACCESS_TOKEN' >

Retina

当你获取一张标记有 @2x的 Retina 地图时,你将得到一张宽高为 API 指定宽高 2 倍的图片。 例如宽度参数设置为 700px 并且带有参数 @2x 将会收到一个实际参数为 1400px 的图片。

高分辨率图片

Mapbox Studio 允许每个账户使用打印面板输出 100 张高分辨率图片。使用 Mapbox Static Image API, 图片导出尺寸可高达 1,280 px x 1,280 px 。你能够通过开启 Retina 以提高图片质量,但是你无法通过使用 Static Image API 导出比这更高的分辨率图片了,而且我们也不支持导出矢量图片格式。

制作静态地图

  • 支持的图片格式:PNG,JPG,high-resolution
  • 不支持的图片格式:SVG,EPS,PDF

覆盖物

覆盖物是一种能够在请求时添加到地图顶层的数据。覆盖物数据使用逗号分隔,可以混合使用 GeoJSON,自定义 markers,路径,或面。

Web应用(Mapbox GL JS)

客户端渲染

Mapbox GL JS 的核心就是客户端渲染。在 web 应用中使用 Mapbox GL JS,地图将通过使用 JavaScript 和 WebGL 将 vector tilesstyle rules 结合动态渲染。在浏览器中而不是在服务器上渲染地图可以更方便的改变地图的样式、动态显示的数据、和用户交互的响应。

相机

相机是地图的视野。Mapbox GL JS 包含一些用于调整地图视角的,像俯仰角和方位角这样的参数。

  • 中心:经度纬度顺序组成的坐标
  • 缩放:在缩放范围内的任何数字,包括小数。例如,1.5 或者 6.2 也是有效的缩放级别。
  • 方位角:一个介于 0-360 度范围内用来确定地图的方位或旋转的值。
  • 俯仰角:一个介于 0-60 度范围内用来确定地图的斜度或者俯仰角的值。

图层

传统的 JavaScript 地图库通常会有两个不同的类,即 “layers”: baselayers,或提供地图基础的影像切片和 overlays(覆盖物、标签或图表等)。
Mapbox GL JS 在 baselayers 和 overlay layers 之间并没有区分。这意味着地图的详情像标签和图标还有像街道和建筑这样的元素是可以通过JavaScript 来修改的。每个图层提供在浏览器中渲染器应该如何绘制某些数据的规则,然后渲染器使用这些图层在屏幕上绘制地图。

空间分析

Turf 是一个允许你在浏览器中执行空间操作的高级地理空间 JavaScript 开源库。链接

Mapbox 笔记1(Mapbox 是如何工作的)相关推荐

  1. Git笔记(28) 签署工作

    Git笔记(28) 签署工作 1. 签署工作 2. GPG 介绍 3. 签署标签 4. 验证标签 5. 签署提交 6. 使用环境 1. 签署工作 Git 虽然是密码级安全的,但它不是万无一失的 如果从 ...

  2. Git笔记(21) 分布式工作流程

    Git笔记(21) 分布式工作流程 1. 分布式特性 2. 集中式工作流 3. 集成管理者工作流 4. 司令官与副官工作流 1. 分布式特性 同传统的集中式版本控制系统(CVCS)不同 Git 的分布 ...

  3. mapbox控件-@mapbox/mapbox-gl-draw使用(vue3)

    1 安装 yarn add @mapbox/mapbox-gl-draw 2 引用 import MapboxDraw from "@mapbox/mapbox-gl-draw" ...

  4. VBA学习笔记5:将同一工作簿的数据按照类别拆分为多个工作簿

    VBA学习笔记5:将同一工作簿的数据按照类别拆分为多个工作簿 1.对每行数据按照类别所在列进行循环,判断某类别的工作簿是否存在: 2.如果不存在,则新建工作簿并将该行数据复制粘贴: 3.如果存在则打开 ...

  5. 读书笔记 摘自:《Google工作整理术》

    读书笔记 摘自:<Google工作整理术>(作者: [美]道格拉斯·梅里尔 [美]詹姆斯·马丁) 前言 通过研究我发现,人们教授数学以及其他学科的方式与我们大脑的实际运行机制相去甚远. 事 ...

  6. VBA学习笔记3:合并同一工作簿下的多个表格

    VBA学习笔记3:合并同一工作簿下的多个表格 1.建立一个新的汇总表: 2.将其他sheet数据复制到汇总表中. 效果如下: 需要将3个sheet的表的数据汇总起来 汇总后的数据: 代码如下: Sub ...

  7. 如何观看局域网内视频-利用个人电脑搭建简易NAS(笔记一)电脑端工作

    老鸟飞过.......... 为啥会在这写这么个文章呢,因为纯属笔记,做记录用的. 起因:因为最近很火的一步韩剧<鱿鱼游戏>,下载来以后在电脑上但是又不想用电脑看躺沙发上刷剧多美滋滋,于是 ...

  8. (FlexSim 学习笔记)合成器打包的工作机制分析和实现

    在之前文章<"(FlexSim 学习笔记)案例1:不合格产品二次优先加工,两次不合格作废>中简单描述了下 flexsim 合成器的合成打包工作原理,并在该文"3.3.合 ...

  9. 笔记-项目配置管理-配置管理主要工作

    配置管理主要工作 (1) 制定配置管理计划.确定方针,分配资源,明确责任,计划培训,确定干系人,制定配置识别准则,制定基线计划,制定配置库备份计划,制定变更控制流程,制定审批计划. (2) 配置项识别 ...

最新文章

  1. 马斯克的星际飞船SN10又炸了,但技术却向前迈出一大步!
  2. python 如何查看模块所有方法-Python 查看模块的帮助文档,方法和帮助信息
  3. java 自省_自知 自省 自立 自信 自尊 自治 自强 自制
  4. 徐州工程学院计算机报名,2019年3月江苏徐州工程学院计算机等级考试报名时间...
  5. 使用Telnet 在DS300上配置阵列
  6. struts2文件上传,获取文件名和文件类型
  7. 东南大学2005年程序设计第二届初赛解题报告
  8. python爬取百度迁徙数据_python爬虫-动态爬取百度迁徙
  9. JavaScript的封装方法
  10. Java根据出生年月日计算年龄
  11. FFmpeg[14] - ffbuild/common.mak:173: *** missing separator. Stop.
  12. 114个ChatGPT全网最热话题
  13. oracle之物理数据库结构概述(数据文件、重做日志文件,控制文件等各种数据库文件)
  14. gui实现2048小游戏
  15. 类模板与函数模板区别
  16. html怎么多行超出省略号,css+js 如何实现多行文字超出显示省略号(需要同时兼容ie chrome等浏览器)...
  17. 【Nordic蓝牙模块justwork模式配置】
  18. IntelliJ IDEA 如何实现代码展示自动换行
  19. python爬取二级页面_爬虫代码改进(二)|多页抓取与二级页面
  20. Web中的EasyExcel导出Excel(不创建对象且自定义合并单元格策略)

热门文章

  1. 远程访问服务器tensorboard
  2. 自考本科和成人高考有什么区别?
  3. 2023 个人引导页开源单页html源码
  4. 柯西-施瓦茨不等式学习笔记
  5. devstack安装
  6. .djvu 是什么文件阿?怎么把这个文件打开呢? 会的师傅帮帮忙吧!
  7. 曲率流的计算机应用,基于曲率法线流的树点云骨架提取方法.PDF
  8. Motan-远程调用的rpc框架的负载均衡策略
  9. 强化学习笔记:马尔可夫过程 马尔可夫奖励过程
  10. C语言中编写一个程序,提示用户输入两个日期,然后显示哪一个日期更早