openlayers 6【一】 简介openlayers背景,优势,如何使用及实际使用场景

openlayers 同时被 3 个专栏收录
22 篇文章 25 订阅
84 篇文章 7 订阅
21 篇文章 1 订阅

openlayers官网地址:https://openlayers.org/

1. 自己学习openlayers 的背景

最近公司项目需要使用到GIS地图为依托做一些交互(如点 聚合分散热力图地图下钻图层叠加点位图地图轨迹地图图层切换)等功能,于是我临危受命不得不去学习openlayers。

2. 现在聊聊 openlayers 是什么?发展历程?优势?怎么使用?

2.1 openlayers 是干什么的?

要想在浏览器中显示交互式的地图很难,因为浏览器默认的只是显示静态的图片,如PNG、JPEG等格式,要交互式很难,因为每一个点击和缩放,地图都要做出正确的反应。

OpenLayers是一个JavaScript 类库包,主要是用于开发Web GIS客户端。这就是说,要先在网页中引用OpenLayers的JavaScript文件以及相应的css样式表和资源,根据其提供的功能接口,直接调用。所以关键是了解其提供的接口,这是使用一个类库的关键!如果想要优化相应的功能或者定制化,就要深入地了解其实现细节了,这需要有熟练的JavaScript功底。

OpenLayers支持Google Maps、Yahoo Map、微软Virtual Earth等资源,可以通过WMS服务调用其它服务器上的空间数据,通过WFS服务调用空间服务。在操作方面,OpenLayers 除了可以在浏览器中实现地图浏览的基本效果,如放大、缩小、平移等操作,进行选取面、选取线、要素选择、图层叠加等操作。

2.2 openlayers 发展历史?

OpenLayers在2.13版本中引入了Web Processing Services(WPS)标准,可以对空间数据进行地理分析,例如缓冲区分析。

openlayers中文官方站于2012年8月成立,是由一群openlayers爱好者共同维护的,内容包括openlayers中文API和中文帮助文档,OpenLayers源码分析 、 OpenLayers扩展开发 、OpenLayers相关工具 、OpenLayers 3D、 Openlayers Mobile

2.3 openlayers 相对比其他的前端框架有哪些优势?

相对于另一个框架 OpenScales,OpenScales 是 OpenLayers 的 ActionScript 翻译,需要 FlashPlayer 支持才行,虽然基本现在浏览器都有这个插件,就好象他已经不是插件了,但是我比较反对插件,要使用一个功能,还要装插件,不如原生的好。总之我觉得 OpenLayers 比较好用!

2.4 openlayers 怎么使用?

 vue npm 安装包

npm install ol

如果您想试用OpenLayers而不下载任何内容(不建议用于生产环境),请在html页面的开头添加以下内容

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">

后面会详细讲解怎么使用....尽请期待

3. 最后总结

如果你想在浏览器中进行Web GIS的开发,那么OpenLayers可以大大减少你的工作量,让你快速开发出应用。OpenLayers 6及后面版本,正在朝着3D等一些前沿领域前进,并支持更多的设备终端。

总之,要搞Web GIS,客户端用OpenLayers开发绝对没错!

4. 写在最后

基于现在前端流行的框架vue,后面的基础介绍会以文档说明穿插着vue去写,尽量避免使用原生前端三件套去写。常见的功能点会直接使用vue去写。所有对vue有了解的会更加上手。

知识的海洋永远没有尽头,最后因为一腔热血而一头埋了进去。

  • 5
    点赞
  • 3
    评论
  • 11
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
OpenLayers作为业内使用最为广泛的地图引擎之一,已被各大GIS厂商和广大WebGIS二次开发者采用。借助OpenLayers强大的扩展功能,可以实现与各个不同的WebGIS平台产品相结合,开发出各具特色的WebGIS应用系统。 本书主要内容涵盖:WebGIS开发基础、OpenLayers开发基础、OpenLayers快速入门、OpenLayers之多源数据加载、OpenLayers之图形绘制、OpenLayers之OGC、OpenLayers之高级功能,最后给出了OpenLayers之项目实战——水利信息在线分析服务系统。 第1章 概述 1 1.1 什么是GIS 1 1.2 什么是WebGIS 2 1.3 常见的开源WebGIS平台 3 第2章 WebGIS开发基础 9 2.1 Web开发基础理论 9 2.1.1 B/S体系架构 9 2.1.2 客户端技术 11 2.1.3 服务端技术 15 2.1.4 数据库技术 19 2.2 Web编程基础 20 2.2.1 界面设计 22 2.2.2 事件机制 23 2.2.3 前后台交互 25 2.3 WebGIS框架结构 29 2.4 WebGIS开发相关GIS背景知识 30 2.4.1 基础几何图形 30 2.4.2 GIS地图学基础 32 2.4.3 GIS数据与应用 36 2.4.4 网络地图数据服务 38 2.4.5 WebGIS坐标转换 40 第3章 OpenLayers开发基础 43 3.1 OpenLayers简介 43 3.1.1 OpenLayers 3框架结构 44 3.1.2 OpenLayers 3工作原理 46 3.2 OpenLayers 3 API概述 54 3.3 OpenLayers开发环境配置 57 3.4 OpenLayers调试方法 59 3.5 网站开发与发布 62 第4章 OpenLayers快速入门 63 4.1 创建Web项目 63 4.2 搭建系统框架 66 4.3 实现地图显示功能 68 4.4 加载常用控件 73 4.4.1 导航控件 74 4.4.2 对地图进行基本操作 76 4.4.3 图层控件 80 4.4.4 鼠标位置控件 85 4.4.5 地图比例尺 88 4.4.6 地图鹰眼 90 4.4.7 全屏显示 93 4.4.8 图层探查 94 4.4.9 动画效果 97 4.4.10 测量功能 102 4.5 练习 110 第5章 OpenLayers之多源数据加载 111 5.1 数据加载原理 111 5.1.1 地图加载原理 112 5.1.2 OpenLayers 3数据加载原理与方法 112 5.2 基础地图数据 113 5.3 开放数据 119 5.4 公共地图数据 126 5.5 多源数据叠加显示 135 5.6 瓦片网格信息显示 141 5.7 地图打印 143 5.8 练习 144 第6OpenLayers之图形绘制篇 145 6.1 图形交互绘制原理 145 6.2 绘制几何图形 146 6.3 图形样式编辑 150 6.4 图形交互编辑 160 6.5 图形信息保存 162 6.6 练习 171 第7章 OpenLayers之OGC篇 173 7.1 OGC简介 173 7.2 OGC数据加载原理 175 7.3 OGC数据显示 176 7.3.1 加载WMTS数据 176 7.3.2 加载WMS数据 179 7.3.3 加载WFS数据 182 7.3.4 加载WCS数据 185 7.4 练习 188 第8章 OpenLayers之高级功能篇 189 8.1 标注功能 189 8.1.1 标注基本原理 189 8.1.2 图文标注 190 8.1.3 Popup标注 197 8.1.4 聚合标注 202 8.2 动态投影 205 8.3 视图联动 208 8.4 定位导航 212 8.5 热点图 221 8.6 热区功能 224 8.7 统计图 236 8.8 标绘功能 241 8.8.1 贝塞尔曲线原理 242 8.8.2 基于OpenLayers 3的军事标绘图形扩展原理 242 8.9 练习 251 第9章 OpenLayers之项目实战—水利信息在线分析服务系统 253 9.1 建设背景 253 9.2 系统需求 254 9.3 系统设计 254 9.3.1 系统体系架构 254 9.3.2 系统功能设计 255 9.3.3 数据组织设计 257 9.3.4 数据库设计 258 9.4 系统实
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页

打赏

@必意玲

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值