中文学习：http://www.openlayers.cn/portal.php

原文地址：https://www.jianshu.com/p/e693711a7008

一 OpenLayers核心职责

  OpenLayers最新大版本是openlayers4，它是一个基于h5的GIS前端库，地图渲染方式为Canvas和WebGL，常用Canvas展示二维地图，支持WebGL渲染显示出将来的OpenLayers有支持三维方向的可能。OpenLayers作为一个地图前端库主要负责GIS数据的展示与交互。
  OpenLayers仅仅是开源GIS框架中的前端部分，并不等于是GIS系统，所以很多非GIS专业的前端使用OpenLayers常常会出现很多误区，如社区中每隔几天就有人问的问题：

  1. 请问怎样用ol加载几百万点啊？我现在加载了感觉很卡。
  2. 请问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四个一级对象组成。

  1. controls：地图中的控件，控件支持自定义，目前自带的控件如下：
  1. 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
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

OpenLayers典型部分概述的更多相关文章

  1. 04_过滤器Filter_02_Filter解决中文乱码问题

    [过滤器解决中文乱码问题实例] [工程截图] [web.xml] <?xml version="1.0" encoding="UTF-8"?> &l ...

  2. 大型互联网架构概述 关于架构的架构目标 典型实现 DNS CDN LB WEB APP SOA MQ CACHE STORAGE

    大型互联网架构概述 目录 架构目标 典型实现 DNS CDN LB WEB APP SOA MQ CACHE STORAGE 本文旨在简单介绍大型互联网的架构和核心组件实现原理. 理论上讲,从安装配置 ...

  3. Recurrent Neural Network系列1--RNN（循环神经网络）概述

    作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 本文翻译自 RECURRENT NEURAL NETWORKS T ...

  4. 基于 SailingEase WinForm Framework 开发优秀的客户端应用程序（1：概述）

    本系统文章将详细阐述客户端应用程序的设计理念,实现方法. 本系列文章以  SailingEase WinForm Framework 为基础进行设计并实现,但其中的设计理念及方法,亦适用于任何类型的客 ...

  5. ASP.NET MVC 5 01 - ASP.NET概述

    本篇目录: ASP.NET 概述 .NET Framework 与 ASP.NET ASP.NET MVC简介 ASP.NET的特色和优势 典型案例 ▁▃▅ ASP.NET概述 ▅▃▁ 目前开发B/S ...

  6. CI-持续集成（1）-软件工业“流水线”概述

    CI-持续集成(1)-软件工业“流水线”概述 1   概述 持续集成(Continuous integration)是一种软件开发实践,即团队开发成员经常集成它们的工作,通过每个成员每天至少集成一次, ...

  7. 转：用C++实现的一种插件体系结构-----概述

    用C++实现的一种插件体系结构-----概述 本文讨论一种简单却有效的插件体系结构,它使用C++,动态链接库,基于面向对象编程的思想.首先来看一下使用插件机制能给我们带来哪些方面的好处,从而在适当时候 ...

  8. ExtJs知识点概述

    1.前言 ExtJS的前身是YUI(Yahoo User Interface).经过不断的发展与改进,ExtJS现在已经成功发布到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基 ...

  9. 领域模型驱动设计（Domain Driven Design）入门概述

    软件开发要干什么: 反映真实世界要自动化的业务流程 解决现实问题 领域Domain Domain特指软件关注的领域 在不能充分了解业务领域的情况下是不可能做出一个好的软件 领域建模 领域模型驱动设计 ...

随机推荐

  1. 线程池 多线程运行结束后 如何关闭？ ExecutorService的正确关闭方法

    前言 最近在使用ExecutorService的时候,对于与ExecutorService相关的概念有些迷糊, 加上本身ExecutorService内部的有些方法名在取名上也容易让使用者误解,导致 ...

  2. POJ 1742 Coins 【多重背包DP】

    题意:有n种面额的硬币.面额.个数分别为A_i.C_i,求最多能搭配出几种不超过m的金额? 思路:dp[j]就是总数为j的价值是否已经有了这种方法,如果现在没有,那么我们就一个个硬币去尝试直到有,这种 ...

  3. IE浏览器url中带中文报错的问题；以及各种兼容以及浏览器问题总结

    1.解决IE浏览器url带中文报错 /* encodeURI()解决IE浏览器请求url中带中文报错的问题 */ URL = encodeURI("<%=basePath%>ve ...

  4. 练习|Django-单表

    结构目录 页面展示: 1创建Django,创建app01 在modules.py添加 class Book(models.Model): id=models.AutoField(primary_key ...

  5. HDU 2612 find a way 【双BFS】

    <题目链接> 题目大意:两个人分别从地图中的Y 和 M出发,要共同在 @ 处会面(@不止有一处),问这两个人所走距离和的最小值是多少. 解题分析: 就是对这两个点分别进行一次BFS,求出它 ...

  6. SAC#1 - 组合数

    P3414 SAC#1 - 组合数 组合数的性质,求(1<<(n-1))%mod即可.其实要快速幂. #include<bits/stdc++.h> #define MOD 6 ...

  7. 001.Keepalived简介

    一 Keepalived 定义 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案,可以解决静态路由出现的单点故障问题.一个LVS服务会有2台服务器运行Keepalived,一台 ...

  8. @ConfigurationProperties和@Value 注入

    我这里使用的Spring Boot 2.0.1 版本 配置文件是 yml 格式文件 @ConfigurationProperties 在yml配置文件中: 在实体类中: 重点是实体类上的两个注解: @ ...

  9. Python数值计算之插值曲线拟合-01

        3 插值与曲线拟合 Interpolation and Curve Fitting 给定n+1个数据点(xi,yi), i = 0,1,2,…,n,评估y(x). 3.1 介绍(introdu ...

  10. 潭州课堂25班：Ph201805201 并发（非阻塞，epoll） 第十课 (课堂笔记)

    # -*- coding: utf-8 -*- # 斌彬电脑 # @Time : 2018/7/12 0012 20:29 import socket server = socket.socket() ...