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

概述:

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

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

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

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

基本概念:

OL3结构图

1、Map

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

<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.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);

总结:

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

<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>

OpenLayers3基础教程——OL3基本概念的更多相关文章

  1. (转)OpenLayers3基础教程——OL3基本概念

    http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程——OL3基本概念 从本节开始,我会陆陆续续的更新 ...

  2. OpenLayers3基础教程——OL3 介绍control

    概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比較: 相比較Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...

  3. OpenLayers3基础教程——OL3之Popup

    概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...

  4. (转)OpenLayers3基础教程——OL3之Popup

    http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...

  5. (转) OpenLayers3基础教程——OL3 介绍control

    http://blog.csdn.net/gisshixisheng/article/details/46761535 概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 co ...

  6. (转)OpenLayers3基础教程——OL3 介绍interaction

    http://blog.csdn.net/gisshixisheng/article/details/46808647 概述: 本节主要讲述OL3的交互操作interaction,重点介绍draw,s ...

  7. RabbitMq基础教程之基本概念

    RabbitMq基础教程之基本概念 RabbitMQ是一个消息队列,和Kafka以及阿里的ActiveMQ从属性来讲,干的都是一回事.消息队列的主要目的实现消息的生产者和消费者之间的解耦,支持多应用之 ...

  8. GStreamer基础教程02 - 基本概念

    摘要 在 Gstreamer基础教程01 - Hello World中,我们介绍了如何快速的通过一个字符串创建一个简单的pipeline.为了能够更好的控制pipline中的element,我们需要单 ...

  9. Java基础教程(4)--面向对象概念

      如果你之前从来没有使用过面向对象编程语言,那么在学习Java之前需要先理解几个有关面向对象编程的基本概念.这篇教程将会向你介绍对象.类.集成.接口和包的概念,以及这些概念是如何与现实世界相关联,并 ...

随机推荐

  1. spring boot 在idea中实现热部署

    1)在pom中直接引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  2. android滚动图片

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  3. 纯html+css中实现静态选座位效果技巧(input+label使用小技巧)

    很多时候,我们想通过html+css的方式实现排列在后方的代码在选中状态下,能控制排列在前的代码的样式.那么要怎么实现呢?在这里我就要用1个小技巧来完成. 众所周知的,我们css中的选择器通常只能向下 ...

  4. 10. InnoDB表空间加密

    10. InnoDB表空间加密 InnoDB支持存储在单独表空间中的表的数据加密 .此功能为物理表空间数据文件提供静态加密. 详细信息见官方文档

  5. java线程总结--synchronized关键字,原理以及相关的锁

    在多线程编程中,synchronized关键字非常常见,当我们需要进行“同步”操作时,我们很多时候需要该该关键字对代码块或者方法进行锁定.被synchronized锁定的代码块,只能同时有一条线程访问 ...

  6. 杭电 4907 Task schedule ·

    Description 有一台机器,并且给你这台机器的工作表,工作表上有n个任务,机器在ti时间执行第i个任务,1秒即可完成1个任务. 有m个询问,每个询问有一个数字q,表示如果在q时间有一个工作表之 ...

  7. JSP默认选中下拉框的某一项

    注意<c:if>标签要写在<option>标签里面 <select id="salesInventory_${s.index}" style=&quo ...

  8. 2016年工作中遇到的问题41-50:Dubbo注册中心奇葩问题,wifi热点坑了

    41.获得JSON中的变量.//显示json串中的某个变量,name是变量名function json(json,name){ var jsonObj = eval(json); return jso ...

  9. LINUX常见小问题汇总

    1. crontab的备份与恢复 备份crontab文件: crontab -l > $HOME/mycron 恢复丢失的crontab文件: 如果不小心误删了crontab文件,假设你在自己的 ...

  10. spring用到的设计模式

    https://www.cnblogs.com/yuefan/p/3763898.html https://www.cnblogs.com/hwaggLee/p/4510687.html https: ...