OpenLayers3 学习-1
2016-07-19 22:51
543 查看
OpenLayers3 学习-1-简介
OpenLayers3(OL3)对OL2进行了重新设计和实现,支持多种格式的商业和免费的地图数据源。未来的版本将包括显示3D地图或利用WebGL进行大规模矢量数据的展示的功能。OL3基于Google的 Closure Tools,大量应用了Closure Library中的内容。
OL3利用了Canvas, DOM和WebGL来实现数据渲染。因此,IE9以下的浏览器是不支持的。OL3的设计目标是能够在桌面/平板和移动设备上都能应用。
OL3应用了和Closure library类似的对象层次结构。顶层是
ol命名空间(即
var ol={}). 其下又分为几类:
更深一层的命名空间: 如
ol.layers,以小写字母开头;
包含静态属性和方法的简单对象,如
ol.animation,同样以小写字母开头;
类型(types)以大写字母开头。他们主要是一些类,即拥有构造函数,如
ol.Map,
ol.layer.Vector。也有一些是简单类型,如数组类型的
ol.Extent.
类命名空间,如
ol.layer,拥有同名的基本类类型,如
ol.layer.Layer,主要是用于给其他类继承的抽象类。
OL3的源码的组织方式和命名空间类似,如
ol/layer/vectorlayer.js.
参考:
http://openlayers.org/en/latest/doc/tutorials/introduction.html
OpenLayers3 学习-1-基本概念
Map - 地图
OL3的核心组件是地图(ol.map).他被渲染到
target容器(即一个在页面上包含地图的
div)。所有的地图属性可以在创建地图时设置,或是使用 setter 方法,如
setTarget()。
<div id="map" style="width: 100%, height: 400px"></div> <script> var map = new ol.Map({target: 'map'}); </script>
View - 视图
ol.Map不负责地图的中心点、缩放和投影属性设置,它们是
ol.View的实例的属性。
map.setView(new ol.View({ center: [0, 0], zoom: 2 }));
ol.View同时拥有
projection属性。投影决定了坐标系统的中心(center)和地图分辨率的计算单位。OL3默认的投影是球形墨卡托(Spherical Mercator,EPSG:3857),单位为 米。
zoom属性是一个设定地图分辨率的便捷的方法。可用的缩放级别由
maxZoom(默认28)、
zoomFactor(默认2)和
maxResolution(默认值根据投影的有效范围适应256X256像素的瓦片来计算)。0级时分辨率是每像素maxResolution个单元,缩放时根据
zoomFactor计算,直到
maxZoom。
Source - 源
OL3利用ol.source.Source子类来加载远程数据。商业地图服务源如OpenStreetMap、Bing,以及OGC规范源如WMS、WMTS,以及矢量数据如GeoJSON、KML都是可以使用的。
var osmSource = new ol.source.OSM();
Layer - 图层
layer 是source数据的可视化表达。OL3 有3种基本图层类型:ol.layer.Tile、
ol.layer.Image和
ol.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>
参考:
http://openlayers.org/en/latest/doc/tutorials/concepts.html
相关文章推荐
- Mac OpenResty安装
- HDFS--hadoop集群
- Tomcat禁止显示目录和文件列表
- Tomcat禁止显示目录和文件列表
- 利用photoshop切图
- Hadoop自学系列集(二) ---- CentOS下安装JDK
- 如何在Apache 上配置 WebDAV 服务器
- hadoop jps 进程显示不全
- CentOS-6.5下安装navicat for mysql
- linux shell 读取文件脚本
- Nginx概念及基础安装--详细讲解
- xshell连接虚拟机中的kali
- .NET基础架构方法—DataTableToList通用方法
- Hadoop环境搭建(二)
- 文件同步监控工具
- centos7下使用yum安装mysql
- 配置openCV出错
- docker10件事
- linux日志
- Linux系统虚拟机安装