博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
OpenLayers3基础教程——OL3基本概念
阅读量:4485 次
发布时间:2019-06-08

本文共 1372 字,大约阅读时间需要 4 分钟。

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

概述:

OpenLayers 3对OpenLayers网络地图库进行了根本的又一次设计。

版本号2尽管被广泛使用,但从JavaScript开发的早期发展阶段開始。已日益现实出它的落后。

OL3已运用现代的设计模式从底层重写。

OpenLayers 3同一时候设计了一些基本的新功能,如显示三维地图,或使用WebGL高速显示大型矢量数据集,这些功能将在以后的版本号中增加。

基本概念:

OL3结构图

1、Map

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

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.Image  ol.layer.Vector

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

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

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

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

总结:

上述片段能够合并成一个自包括视图和图层的地图配置:

转载于:https://www.cnblogs.com/brucemengbm/p/7203883.html

你可能感兴趣的文章
ViurtualBox配置虚拟机Linux的网络环境
查看>>
VLC 媒体播放器
查看>>
\n ^ \t的使用
查看>>
css盒模型
查看>>
探索式测试:测试自动化
查看>>
make install fping
查看>>
面试笔试题
查看>>
MySql可视化工具MySQL Workbench使用教程
查看>>
个人站立会议第二阶段07
查看>>
云时代架构阅读笔记五——Web应用安全
查看>>
IOS 单击手势和cell点击冲突
查看>>
学习_HTML5_day3
查看>>
计算机网络与应用第二次笔记
查看>>
Django之ORM查询
查看>>
学习python第七天
查看>>
Flask基础(07)-->正则自定义转换器
查看>>
C++著名程序库的比较和学习经验(STL.Boost.GUI.XML.网络等等)
查看>>
Spring Boot构建RESTful API与单元测试
查看>>
【JavaScript你需要知道的基础知识~】
查看>>
谷歌搜索语法
查看>>