前端gis地图知识分享
介绍一下最近在学习的webgis知识，算是一个总结吧，虽然不全，可能涉及度不广，不过也能学到东西
常见的数据结构
栅格数据和矢量数据是webgis比较常见的两种数据表示形式，区别在于矢量数据可以精确描述地理对象的形状和位置；而栅格数据适用于表示连续的地理现象，图片形式显示。
栅格数据(图像数据)
栅格数据也被称为图像(图片)数据，图片、图像、影像格式的数据被称作是栅格数据。
栅格数据以网格的形式表示地理区域，将地理区域划分为一系列的像元(像素)。每个像素都代表了一个特定的地理位置，并存储了该位置上的属性值。在地图开发中，栅格数据通常作为底图的形式存在。
常见数据格式：tiff影像、png格式
优点：能够精准而真实的展示地物的样貌，最真实地还原地球表面的形态，通常使用一些影像图去做地图
缺点是：可编辑性、可交互性差
地图渲染形式：可以用dom元素img来渲染，也可以用canvas去渲染,canvas渲染性能更高
矢量数据(图形数据)
矢量数据一般由一些简单的轮廓构成，比如一个行政区可以用边界表示，这就是矢量数据。矢量数据使用几何图形来表示地理对象，由点、线、面构成，每个点线面都有精确的空间位置和形状，形成有规律的数据集合体。
矢量数据一般来源于测绘或者栅格数据提取之类的，比如我要调查杭州市所有的道路信息。我就可以实地去勘测然后描绘，或者我也可以从影像图中把道路都描绘出来。两方式皆可。矢量数据其实就是图形数据。
优点：可编辑、交互性好，方便展示和交互
缺点：表达的信息比较少，信息有限，不能知晓真实的地理信息
常见数据格式：GeoJSON、KML、WKT
GeoJSON(可以记录属性信息，最常用)、WKT(无法记录属性信息，体积最小)
地图渲染形式：可以用dom元素svg来渲染，也可以用canvas去渲染,canvas渲染性能更高
//标准的geojson文件 图形信息是依靠图形类别和坐标数据（大多数时候是经纬度）来存储的。
// Point（点）、MultiPoint（多点）、LineString（线）、MultiLineString（多线）、Polygon（面）、MultiPolygon（多面）
{
"type": "Feature",
"properties": { "name": "杭州市" },
"geometry": {
"type": "Point",
"coordinates": [120.3422342,29.23423]
}
}
//wkt格式
POLYGON ((120.0836441072426 30.279768819387925, 120.07859992548151
30.215278518888496, 120.19966028772456 30.200457202491933,
120.19966028772456 30.266699882015928, 120.13711243389929
30.292836016463923, 120.0836441072426 30.279768819387925))
三维数据
二维地理数据只包含水平方向的位置信息，适用于平面地图、空间分析等场景；而三维地理数据除了水平方向的位置信息，还包含了垂直方向的高度信息，适用于更立体的地理场景展示和分析。三维地理数据能够提供更真实的场景展示，但其数据量和处理难度也相应增加。
地图渲染机制
GIS和Web的产物就是WebGIS，底层不可缺少的就是图形学。
Dom渲染方式
数据类型分为栅格数据(图像数据)和矢量数据(图形数据)，图像数据大多是tiff影像或者一些png/jpg格式的图片，矢量数据大多是GeoJson、WKT。
在浏览器中是怎么渲染加载地图数据的的。
第一种底层渲染就是传统的dom加载方式，也就是用原生的html标签去加载。
首先Web加载一张图片一般是用dom元素img来进行加载。
栅格数据也就是图片类型，也就符合了这一加载方式，所以使用img元素可以来加载栅格数据。
矢量数据的则是采用svg形式来进行加载，svg对于不同屏幕大小的图形展示是没有模糊失真概念的，可以不用考虑分辨率的问题。
总得来说，可以用img标签加载栅格数据，svg加载矢量数据。
比如leaflet框架就是采用了这种方式，img的是加载的底图，path也就是svg是加载的矢量图形。
Canvas渲染方式
另一种渲染加载方式是采用canvas来进行加载。canvas不算传统的dom元素，更像是一种绘图画布，可以加载栅格和矢量两种。比如mapbox是采用canvas来进行加载的。
总结：
地图在浏览器上渲染的方式有上面两种，两种都对应不同的应用场景，也会牵扯到技术选型的问题。
canvas 与 img 等标签元素相比有着更加复杂丰富的图形图像渲染能力，并且也有着更高的效率，但是这也意味着需要更加复杂的代码开发和更高更深层次的理解。
img 等普通的 dom 标签元素有着更加简单的操作和更加轻量的渲染方式。
比如我们很多个img元素（wmts返回了很多img图片）,如果用img标签直接去渲染，需要建立循环加载img图片，而且滥用dom元素是会降低加载性能的，如果是用canvas，就需要把所有瓦片放到canvas内部，用drawImage去渲染即可，所以在加载数据量较多的情况下一般选用canvas加载方式
无论哪一种渲染方式，目的都是一样的，主要过程也是差不多的，只不过选用的技术手段不同，通用步骤如下
- 确定挂载容器
- 以浏览器屏幕的实际像素尺寸与地理坐标范围做映射
- 根据挂载容器的实际尺寸换算需要展示的地图范围
- 根据栅格图片的四个角的坐标范围来确定栅格图层的渲染位置
- 根据矢量数据的边界坐标范围来确定矢量数据的渲染位置
这里有意思的点是“以浏览器屏幕的实际像素尺寸与地理坐标范围做映射，也就是真实的地理坐标怎么在手机/电脑不同屏幕大小里的地图正确展示出来”
地图框架选型
常用的框架或者比较流行的框架主要是leaflet、openlayers、mapbox、cesuim
openlayers
- 优势
● 开源、全面、专业
● 偏向于webGL底层，提供的功能强大 - 劣势
● 没有审图号，使用人数少，学习难度高，文档不易上手
● 没有专门的技术支持人员
适用方向：交互复杂、专业的地图项目
LeafLet
- 优势
●开源、轻量、使用人数多，对地图小白友好，体积小
●更偏于信息展示方向，适应性好，对于一些移动触屏事件也有自己单独的处理
●丰富的视图组件 - 劣势
●没有审图号，不适合复杂交互
●只支持OGC标准的WMS\WMTS服务，暂未看到其他服务
●没有三维相关的
适用方向：移动端项目，信息展示项目
mapbox
- 优势
●使用WebGL技术独立渲染前端库
●开源、易用、样例多、专题图首选
●整体性的地图生态，还会涉及一些数据和后端的内容 - 劣势
●默认OSM底图，定制化底图需要提供数据
cesuim
主要跟三维有关，也可以展示二维地图服务
跨平台、跨浏览器的展示三维地球和地图的JavaScript库
功能较丰富
二维开源框架统一加载步骤
1.确定dom元素挂载点
2.确定所用坐标系（如有需要可利用proj进行坐标转换）
3.确定地图中心点，缩放等级zoom
4.明确需求，进行需求开发
地图服务
地图服务要符合OGC(Open Geospatial Consortium开放地理空间信息联盟)的标准，指的是对于地图服务的数据格式、接口规范、元数据描述等进行统一规范和管理的标准。主要目的是为了让不同厂商开发的地图应用程序可以互相兼容、交互，提高地图数据的可用性和互操作性。
WMS（Web Map Service 网络地图服务）
OGC官方WMS描述
WMS是栅格数据的一种，image类型的，请求返回地图图像数据，主要是get和post请求，wms 就是将地图提前处理成图片格式然后发布出来以供浏览器调用。所以 wms 的核心就是一句话：提供一张图片格式的地图。
WMS支持的操作
GetCapabilities
GetCapabilities操作的目的是获取服务的元数据，主要包括WMS服务器提供的操作、请求参数等信息。返回的XML
请求示例
https://ows.terrestris.de/osm/service?
REQUEST=GetCapabilities&
SERVICE=WMS&
VERSION=1.3.0&
LAYERS=OSM-WMS&STYLES=&
CRS=EPSG:4326&
BBOX=51.49451,-0.11377,51.53267,-0.06971&
WIDTH=400&
HEIGHT=300&
FORMAT=image/png&
TRANSPARENT=TRUE
参数说明
getMap
返回的是图像形式，也是WMS服务最主要的功能
请求示例
https://ows.terrestris.de/osm/service?REQUEST=GetMap&SERVICE=WMS&VERSION=1.3.0&LAYERS=OSM-WMS&STYLES=&CRS=EPSG:4326&BBOX=51.49451,-0.11377,51.53267,-0.06971&WIDTH=500&HEIGHT=400&FORMAT=image/png&TRANSPARENT=TRUE&TIME=2001-12-12T18:00:00.0Z
参数说明
GetFeatureInfo
GetFeatureInfo是可选操作，主要是用于查询地图上给定位置的空间和属性信息。类似与获取当前图层给定位置的属性。
示例
https://ows.terrestris.de/osm/service?VERSION=1.3.0&REQUEST=GetFeatureInfo&&SERVICE=WMS&LAYERS=test:multipolygons&STYLES&CRS=EPSG:4326&BBOX=38.8920794,-77.0495419,38.9096339,-77.0199063&WIDTH=768&HEIGHT=454&FORMAT=image/png&QUERY_LAYERS=test:multipolygons&INFO_FORMAT=application/json&I=384&J=227
WMTS（Web Map Tile Service 网络地图切片服务）
WMTS官方描述
WMTS也是加载栅格数据，但是与WMS不同的是WMTS不会像WMS一样返回整张图片，而是采用切片的形式去加载数据，下图可以很好的说明
WMTS也有几种操作类型
GetCapabilities(获取服务的元信息)
GetTile，常用的是GetTile，也就是请求切片。
请求示例
https://cite.deegree.org/deegree-webservices-3.5.0/services/wmts100?SERVICE=WMTS&
REQUEST=GetTile&
VERSION=1.0.0&
LAYER=cite&
STYLE=default&
FORMAT=image/png&
TILEMATRIXSET=InspireCrs84Quad&
TILEMATRIX=11&
TILEROW=431&
TILECOL=2107
WFS（Web Feature Service 网络要素服务）
WFS官方描述
OGC官方解释是 WFS提供了一个标准接口，用于请求由地理要素及其特性组成的矢量地理空间数据。向界面提供原始的地理要素数据，通常返回geojson数据。WFS接口可以用来查询搜索和更新空间数据。
还有另外一种方式，不能说是服务，应该是一种策略，对于WFS优化的策略，矢量切片，WFS返回的矢量数据是整个矢量数据，若数据量多，会造成浏览器性能的卡顿，矢量切片是对适量数据进行切片，按照层级和范围去划分数据。框架内部一般也都封装了这种方式，可以利用切片的形式去获取适量数据，比如openlayers的ol/source/Vector。
框架常用坐标系
openlayers默认是 EPSG:3857
leaflet默认是 EPSG:3857
谷歌地图默认是WGS－84坐标系
天地图默认是EPSG:900913
高德地图默认是GCJ02坐标系
百度地图默认是BD09坐标系
一般地图厂商会提供两种坐标系的底图，例如如下所述天地图，
天地图提供的经纬度坐标系的地图以_c 关键字出现在 url 中，而投影坐标系以_w 坐标系出现，_w表示的就是 web 墨卡托投影坐标系。下面两幅图分别是 wgs84 坐标系的天地图和 web 墨卡托投影的天地图：
地理坐标系
投影坐标系
很明显可以看到地理坐标系被拉伸，web墨卡托投影的轮廓是正方形，竖直方向被拉伸的很明显。
前端地图展示方面更倾向于墨卡托投影，比如cors账号管理平台的地图是用openlayers加载EPSG:3857坐标系去展示的，官方默认的也是这个坐标系，这里就要用proj的坐标转换去把后台返回的wgs84坐标转换成3857去展示。
官方文档
OGC
OGC
OSM(Openstreemap)
openstreetmap
4816
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
