OpenLayers3基础教程——OL3基本概念

从本节开始,我会陆陆续续的更新有关OL3的相关文章——OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助。

概述:

OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后。 OL3已运用现代的设计模式从底层重写。OpenLayers 3同时设计了一些主要的新功能,如显示三维地图,或使用WebGL快速显示大型矢量数据集,这些功能将在以后的版本中加入。

基本概念:

OL3结构图

1、Map

OpenLayers 3的核心部件是Map(ol.Map)。它被呈现到对象target容器(例如,包含在地图的网页上的div元素)。所有地图的属性可以在构造时进行配置,或者通过使用setter方法,如setTarget()。

<div id="map" style="width: 100%, height: 400px"></div>
<script>
    var map = new ol.Map({target: 'map'});
</script>

2、View

ol. View负责地图的中心点,放大,投影之类的设置。

一个ol.View实例包含投影projection,该投影决定中心center 的坐标系以及分辨率的单位,如果没有指定(如下面的代码段),默认的投影是球墨卡托(EPSG:3857),以米为地图单位。

放大zoom 选项是一种方便的方式来指定地图的分辨率,可用的缩放级别由maxZoom (默认值为28)、zoomFactor (默认值为2)、maxResolution (默认由投影在256×256像素瓦片的有效成都来计算) 决定。起始于缩放级别0,以每像素maxResolution 的单位为分辨率,后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的,直到缩放级别达到maxZoom

map.setView(new ol.View({
    center: [0, 0],
    zoom: 2
}));

3、Source

OpenLayers 3使用ol.source.Source子类获取远程数据图层,包含免费的和商业的地图瓦片服务,如OpenStreetMap、Bing、OGC资源(WMS或WMTS)、矢量数据(GeoJSON格式、KML格式…)等。

var osmSource = new ol.source.OSM();

4、Layer

一个图层是资源中数据的可视化显示,OpenLayers 3包含三种基本图层类型:ol.layer.Tileol.layer.Imageol.layer.Vector

ol.layer.Tile 用于显示瓦片资源,这些瓦片提供了预渲染,并且由特定分别率的缩放级别组织的瓦片图片网格组成。

ol.layer.Image用于显示支持渲染服务的图片,这些图片可用于任意范围和分辨率。

ol.layer.Vector用于显示在客户端渲染的矢量数据。

var osmLayer = new ol.layer.Tile({source: osmSource});
map.addLayer(osmLayer);

总结:

上述片段可以合并成一个自包含视图和图层的地图配置:

<div id="map" style="width: 100%, height: 400px"></div>
<script>
  new ol.Map({
    layers: [
      new ol.layer.Tile({source: new ol.source.OSM()})
    ],
    view: new ol.View({
      center: [0, 0],
      zoom: 2
    }),
    target: 'map'
  });
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

小程序也能做这么精致的动效?看完我给大神献上了膝盖…… | 开发

21530
来自专栏生信宝典

利用ComplexHeatmap绘制热图(一)

作者:严涛 浙江大学作物遗传育种在读研究生(生物信息学方向)伪码农,R语言爱好者,爱开源。

84020
来自专栏数据小魔方

绩效管理工具(一)——仪表盘风格图表!

今天教大家制作用于绩效管理的仪表盘风格图表! ▽ 看惯了普通的图表,偶尔换换口味,用类似汽车仪表盘(量表)风格的图表来展示数据,也能起到新人瞩目,令人印象深刻的...

40850
来自专栏全沾开发(huā)

项目结构——JavaScript版本的2048实现[0]

项目结构——JavaScript版本的2048实现[0] 最近在看一本书《HTML5 Canvas开发详解》 看到了一定程度,打算找...

40060
来自专栏生信技能树

学IGV必看的初级教程

Integrative Genomics Viewer (IGV)作为一个高性能的可视化工具,可以交互式的察看综合的基因组相关数据,也友好的支持多种数据类型,自...

1.3K120
来自专栏阿炬.NET

FineUIMvc表格数据库分页,使用CYQ.Data组件

43280
来自专栏向治洪

Android硬件加速介绍与实现

概述 在手机客户端尤其是Android应用的开发过程中,我们经常会接触到“硬件加速”这个词。由于操作系统对底层软硬件封装非常完善,上层软件开发者往往对硬件加速的...

39880
来自专栏华章科技

升值加薪Excel神助攻,数据透视表堪称神器!

VLOOKUP、数据透视表、条件格式…你用这几个技巧做,80%的工作需求都能解决。今天特意整理了这些操作技巧,拯救同在“表海”中挣扎的你,让你的工作效率超乎想...

13820
来自专栏GIS讲堂

唐宋文学诗人分布展示

本文的数据是从搜韵获取而来的,地址为http://sou-yun.com/poetlife.html,为方便大家使用,将数据保存到了百度云盘,下载信息为:链接:...

13930
来自专栏向治洪

Android硬件加速介绍与实现

概述 在手机客户端尤其是Android应用的开发过程中,我们经常会接触到“硬件加速”这个词。由于操作系统对底层软硬件封装非常完善,上层软件开发者往往对硬件加速的...

26660

扫码关注云+社区

领取腾讯云代金券