OpenLayers典型部分概述
目录
一 OpenLayers核心职责
OpenLayers最新大版本是openlayers4，它是一个基于h5的GIS前端库，地图渲染方式为Canvas和WebGL，常用Canvas展示二维地图，支持WebGL渲染显示出将来的OpenLayers有支持三维方向的可能。OpenLayers作为一个地图前端库主要负责GIS数据的展示与交互。
OpenLayers仅仅是开源GIS框架中的前端部分，并不等于是GIS系统，所以很多非GIS专业的前端使用OpenLayers常常会出现很多误区，如社区中每隔几天就有人问的问题：
- 请问怎样用ol加载几百万点啊？我现在加载了感觉很卡。
- 请问ol能实现路径分析吗？ol能实现缓冲区分析吗？
提问的人忽略了ol的核心职责是展示与交互，实际项目中也不可能有将几千万几百万数据推到前端展示和交互的，一般这种都是后端渲染图刷到前端展示，或者使用矢量切片抽希数据到前端展示，正如普通的web开发中的表单需要分页查询和分页展示是一个道理。至于分析一般是服务端或者空间数据库负责分析，分析结果提交前端展示。业务常常是复杂的，但是每个工具的职责是清晰的，请将复杂的业务交由正确的工具去完成！
二 OpenLayers的定位
GIS前端渲染库除了OpenLayers还有LeafLet和ESRI公司的ArcGIS API，同样能支持地图的前端库还有百度api，高德api，谷歌api等，还有Echarts，D3.js等，初学者常常不能理解他们之间的关系。常常听人说，路径分析我就用高德API不就可以了吗？展示数据我用下Echarts不可以吗？仍然是一句话，选择什么样的工具，完全是依据实际业务需求而定的。当前和地图相关的库大概分类如下：
-
在线地图lbs服务：这类库的代表是百度api，高德api，谷歌api，主要特点是：公网环境，开发者需要申请key，key的地图请求服务有次数限制。地图数据和服务都是百度高德提供的，开发者常常是将业务有限的点（几个点，几十个点，几百个点等）定到地图上定个位置。开发中使用它们主要是如招聘网站上公司位置的一个定位，互联网应用中的lbs服务，如各种快递，外卖等app中附近的餐馆影院等。在企业和政府应用中，业务非常复杂，在线地图服务提供的数据不是我们要的，提供的服务不能满足我们的应用，所以实际上基本不会在企业开发中使用。LBS！=GIS。
-
数据可视化库：Echarts，D3.js主要作用是web端实现数据可视化的，提供丰富的图表等展示和交互，由于地图的使用越来越普及，所以不可避免的他们也会支持数据在地图上的展示。但主要定位仍然是数据可视化，在开发中，常常指定某个div，用来展示和交互下数据，属于页面的一小部分业务。而一般的综合指挥调度系统的地图是一个应用，加载非常多的图层，可以随时通过地图向地图单元发送指挥命令。page！=application。
-
GIS地图库:ol,LeafLet,arcgis api等都属于企业级地图应用开发库，彼此之间大同小异。稍微的差异是arcgis api需要arcserver提供服务，离开了server基本没任何优势。leaflet主要优势还是在开发的第三方控件比较多，但是兼容性比较差。且以“体积小，对移动端友好”为著称，在ol2的年代的确如此，但个人认为API的结构不如ol好，且ol3之后版本支持自定义打包，也支持移动端应用，ol4版本实现es6的import语法，实现按需加载，足以胜任开发大型GIS应用的要求。
综述：OpenLayers是GIS地图库，定位于开发GIS应用，而非地图页面，用于复杂的展示和交互用户数据。
三 OpenLayers的主要结构
3.1 HelloWorld
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<style>
.map {
height: 600px;
width: 100%;
}
</style>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js" type="text/javascript"></script>
<title>OpenLayers example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
controls:ol.control.defaults(),
interactions:ol.interaction.defaults(),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([118, 32]),
zoom: 4
})
});
</script>
</body>
</html>
helloworld.png
看上面最简单的例子可得到如下结论：ol地图需要绑定一个div，并且map对象由controls,interactions,layers,view四个一级对象组成。
- controls：地图中的控件，控件支持自定义，目前自带的控件如下：
- ol.control.Attribution，用于绑定当前地图中引用了合作单位图标文字信息。
- ol.control.FullScreen，该控件实现全屏展示。
- ol.control.MousePosition，该控件实时显示鼠标当前指向的地理位置。
- ol.control.OverviewMap，该控件用于鹰眼图。
- ol.control.Rotate，该控件实现地图旋转角度。
- ol.control.ScaleLine，该控件用于显示地图的比例尺。
- ol.control.Zoom，该控件用于放大缩小地图。
- ol.control.ZoomSlider，该控件使用类鱼骨条的形式实现地图放大缩小。
- ol.control.ZoomToExtent，该控件用于将地图缩放到指定区域。
- interactions：ol的交互器，主要负责地图交互，如用户绘制点线面，修改点线面，编辑图形时开启的捕捉，都属于交互类容，详细清单参考 [ol.interaction](http://openlayers.org/en/latest/apidoc/ol.interaction.html。同样的，交互器也是很方便让开发者自定义一个输入自己的交互器，参考自定义交互器
四 OpenLayer中矢量数据格式
OpenLayer支持GeoJSON,WKT,KML,GML,TopoJSON等典型GIS格式，入门而言，就以GeoJSON,WKT示例说明：
4.1 GeoJSON数据格式
- 点
{ "type": "Point", "coordinates": [100.0, 0.0] }
- 线
{ "type": "LineString",
"coordinates": [ [100.0, 0.0], [101.0, 1.0] ]
}
- 面
{ "type": "Polygon",
"coordinates": [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
]
}
- 带属性信息的图形
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands" ,
"id":"23456"
}
}
4.2 WKT格式
- 点
'Point(118 32)'
- 线
'LineString(118 32,119 33)'
- 面
'Polygon((118 32,119 33,118 33,118 32))'
4.3 地图对象的组成
无论任何地图API，地图中的点线面都代表着一个 “要素”，地图开发中，这些要素约定俗称就叫做 “Feature”，举例说明：地图上绘制10个杆塔点，实际就是绘制10个Feature，绘制10条线路，实际上也是10个Feature。
Feature是地图中地物最基本的单元，空间数据库中的一条条记录，其实就是存储了 图形+属性 的一条记录。
image.png
但是Feature的可视化是由 “图形+属性+样式”三要素决定的。
图形决定绘制要素的形状，属性代表绘制地理要素承载哪些业务信息，样式一般和属性结合使用，比如属性字段中有 人口 字段，当人口在不同区间时，这个地理要素填充不同的颜色等专题场景。
4.4 常用坐标系
‘EPSG:4326’:WGS84经纬度球面坐标系，GPS坐标就是这种，如 118 32是南京。
‘EPSG:3857’:WGS84的墨卡托投影坐标系。
//相互之间可以转换
ol.proj.fromLonLat([118,32])=[13135699.913606284, 3763310.6271446524];
ol.proj.toLonLat([13135699.913606284, 3763310.6271446524])=[118,32];
平常webgis中几乎都是用墨卡托投影的，如百度，高德，谷歌的地图都是墨卡托投影的地图。
5 Layer
OpenLayer支持矢量和栅格等数据格式的图层。
矢量：
ol.layer.Vector （矢量）
ol.layer.VectorTile（矢量切片）
栅格：
ol.layer.Tile
ol.layer.Image
5.1 如何加载一个栅格图层
5.2 如何加载xyz格式图层
https://www.jianshu.com/p/a4c1fe2a1e40
5.2 如何加载一个矢量图层
矢量图层的组成
数据源 source
样式 style
5.3 如何设置地图样式
style stylefunction
六 地图事件
http://blog.csdn.net/freeland1/article/details/50127427
七 结合Canvas的特效展示
抛砖引玉，ol渲染是canvas和webgl的，我们可以利用canvas的知识做很多扩展性的展示。
http://openlayers.org/en/latest/examples/layer-swipe.html?q=Canvas
http://openlayers.org/en/latest/examples/layer-spy.html?q=spy
是否到此为止？
http://blog.csdn.net/freeland1/article/details/50937020
只会ol不能算是会了GIS开发，但是会ol的前端可以利用Canvas,WebGL的知识，做出更酷炫的效果，放置到和业务系统中的地图一起展示却值得尝试。
作者：遥想公瑾当年
链接：https://www.jianshu.com/p/e693711a7008
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
转载自：https://blog.csdn.net/hsany330/article/details/88389711
