开源地图MapBox自定义（二）：基本概念

上篇介绍了基本的mapbox安装和配置问题，本篇开始介绍mapbox的工作逻辑。
因地图和数据相关的东西，国内一向敏感，因此特事先声明：

本博客系列仅借用开源地图mapbox，试图从代码和设计角度说明一款开源地图是如何实现的，仅作为研究和学习之用。不会提供具体的数据格式的解析相关内容，更不会提供任何数据。示例数据使用的是mapbox提供的数据。如有相信或使用本博客或相关的代码而导致的任何问题或后果，本人不负任何责任。

csdn也有markdown编辑了，以后的博客尽量采用markdown编辑器来写，当作对自我的要求吧，markdown也是比较火的标记语言，很方便用来展示一些所需的格式，也很方便的导出html，pdf等格式，各大浏览器也基本支持。
活到老而学到老，最近看mapbox源代码，再想想之前的公司所做的跨平台地图，mapbox真的高的不是一点半点。学无止境啊。

基本概念

很多人都用过高德或者百度的地图sdk（当然主要原因还是404的问题，不然应该都是用google了吧）。事实上，对于GIS相关行业的同学，使用的更多的是arcgis之类的sdk，和百度/高德的sdk相比，方向和侧重性是完全不同的。

百度和高德更侧重于显示用户在地图上的附加的标记（因为用户并不会关心数据怎么来，数据格式是什么，用户更关心怎么在地图上的合适位置显示出自己业务相关的东西。例如滴滴打车和摩拜ofo，更关心的是怎么在地图上显示出用户附近的车子，车子很多的时候显示多少个图标既不显得拥挤又能看出来我有很多车，用户点了图标应该弹出来什么窗口）。
而GIS应用则完全不同，首先关心的是数据和坐标系的问题，每个客户都有自己的数据，数据依赖的坐标系不同，很多客户为了数据保密，还都是各种加密。其次各种业务更可能是显示的千奇百怪。与数据相关的坐标系，更是各种火星坐标系（不知道火星坐标系的梗的同学，建议去搜索一下），至于业务，则跟普通互联网地图要求同样高。。。（开发GIS相关的同学，不容易啊。。）。

好了，言归正传，对于一款普通地图sdk，首先有几个基本概念和地图元素是必须要弄明白的，否则可能会和通用理解有偏差，从而走入各种误区。

mapview

mapview对外是一个控件，可以认为是一个自定义的view。该view能显示地图，并且提供了一些能够控制和改变内部显示的元素的API(API也可能不由mapview直接给出，而是通过某个中间类或中间模块间接给出)。
当把sdk提供给第三方使用时，第三方使用的第一步便是显示该mapview。

layer

layer是显示在mapview上的“一层”元素，是一个逻辑概念。mapview上可以放置多个layer,layer内的显示内容通常是通过相应的API由用户给出，用户可以很方便的控制一个layer的显示/显示或其他相关操作。

视口

视口可以简单理解为屏幕范围内mapview控件所显示的位置，但真正表示的不仅仅是控件所在的屏幕上的物理像素位置和大小，同时也表示所显示的逻辑地理范围。

比例尺和分辨率

比例尺和分辨率的概念一向比较容易迷惑人，甚至很多人都搞不清楚这两个名词到底是什么关系。
比例尺是一个比例单位，表示图上一条线段的长度与地面相应线段的实际长度之比。比例尺事实上是有3种表示方法的，但作为mapview的开发者，更关注的是线段表示长度，例如，当前地图上50公里的距离应该画几厘米长，随着地图的放大或缩小，该长度可能会变长/变短，画到几厘米的时候，应该切换显示的公里单位（从50公里换成25公里之类）。
分辨率是当前显示的一个像素能代表的地面长度。例如一个像素表示的距离是100米，则1km在地图上显示的长度是10个像素。
两者之间的表示意思其实是很相似的，都是表示一个比例关系，但是其中的差别体现在设备DPI的区别。例如两个同样物理尺寸的设备上显示相同分辨率的地图，均为1像素表示100米，A设备的DPI是B设备的两倍，也就是屏幕是1厘米之内的物理像素是另外一个两倍，则A设备一屏幕内显示的地理长度和宽度均会是B设备的两倍，也就是4倍的地理面积。
正因为如此，所以二者换算时，需要带入DPI进行换算。具体的换算逻辑为：
1厘米对应的英寸inpcm=1/2.54，（1英寸为2.54厘米）
1厘米表示的像素长度ppcm=1厘米对应的英寸inpcm*DPI
1厘米表示的地理长度gpcm=1厘米表示的像素长度ppcm*分辨率res

数据的在线/离线/缓存

在线数据一般比较容易理解，就是从服务器获取来的数据。
缓存数据则是在使用在线浏览时，下载并暂时缓存在本地的数据，当无网络可用时，可直接使用该缓存数据显示，此过程用户一般是无感知的。
离线数据则是用户主动下载到本地的，以供无网络时显示或减少网络流量请求。

Marker

marker是一个很容易迷惑人的概念，也是附加到地图上的附属物中最复杂的一个。和一般附加到地图上的点线面不同，marker一般会自带图片显示，甚至还有偏移的锚点，marker的点击和选中事件在部分mapview的设计中，甚至有自己的独立定义。

在很多mapview的设计中，marker都不像一般的点线面，永远随着地图拖动而同步移动，而是在移动过程中，marker并不是实时移动，而等待地图移动完毕，marker才一次移动到位(之所以需要这样设计，是因为除3维纹理贴图外，大部分图片的显示都是通过正交投影贴到地图上显示的，这里有一个坐标换算的过程，频繁的坐标换算会极大影响效率，后续的博客会单独讲marker或其他带图片的特殊元素实现)。

开源地图MapBox自定义（二）：基本概念相关推荐

使用MapBox自定义地图
一.什么是MapBox,相对国内地图厂商的优势 MapBox是一家美国的地图厂商,2010 年成立于美国华盛顿,2017 年获得软银 1.64 亿美元 C 轮融资,完全开源的开发工具,帮助您在现有产品 ...
【MAPBOX基础功能】07、mapbox添加跟随地图的自定义面板到地图上
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
前端实现街道地图_来自法国的注重保护个人隐私的开源地图
不得不说很佩服老外,为了保护自己的隐私,地图服务代码也开源,程序员的工匠精神让人敬佩! 这款开源地图名叫 Qwant Maps ,是一款来自法国的,不追踪用户的网络搜索引擎 Qwant 最近推出的一款 ...
继承QWidget使用QPainter自定义二维图形控件【Qt学习】
继承QWidget使用QPainter自定义二维图形控件[Qt学习] 通过阅读该文章,将了解本文所说的二维图形控件的基本概念.为何要自定义二维图形控件.如何自定义二维图形控件. 该文章将首先进行一些书 ...
学习Coding-iOS开源项目日志（二）
继续前篇:<学习Coding-iOS开源项目日志(一)>,接着本第二篇<学习Coding-iOS开源项目日志(二)>讲解Coding-iOS开源项目. 前言:作为初级程序员,想 ...
如何在网中使用百度地图API自定义个性化地图
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
只用一个marker 替换高德_Android基于高德地图完全自定义Marker的实现方法
前言相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多 ...
Openlayer4 - 最好最强大的开源地图引擎
Openlayer4 - 最好最强大的开源地图引擎 # githubhttps://github.com/openlayers/openlayers # 官网http://openlayers.org ...
百度地图android自定义文字,Android SDK | 百度地图API SDK
什么是百度地图Android SDK? 百度地图 Android SDK是一套基于Android 2.1及以上版本设备的应用程序接口, 您可以通过该接口实现丰富的LBS功能: 地图:提供地图(2D.3 ...