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.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>
OpenLayers3基础教程——OL3基本概念相关推荐
- (转)OpenLayers3基础教程——OL3基本概念
http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程--OL3基本概念 从本节开始,我会陆陆续续的更新 ...
- OpenLayers3基础教程——OL3之Popup
概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...
- OpenLayers3基础教程——OL3 介绍control
概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 control比较: 相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control: Ol2的c ...
- (转)OpenLayers3基础教程——OL3之Popup
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...
- (转) OpenLayers3基础教程——OL3 介绍control
http://blog.csdn.net/gisshixisheng/article/details/46761535 概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 co ...
- (转)OpenLayers3基础教程——OL3 介绍interaction
http://blog.csdn.net/gisshixisheng/article/details/46808647 概述: 本节主要讲述OL3的交互操作interaction,重点介绍draw,s ...
- Java基础教程(4)--面向对象概念
如果你之前从来没有使用过面向对象编程语言,那么在学习Java之前需要先理解几个有关面向对象编程的基本概念.这篇教程将会向你介绍对象.类.集成.接口和包的概念,以及这些概念是如何与现实世界相关联,并 ...
- (转) OpenLayers3基础教程——加载资源
概述: 本节讲述如何在Ol3中加载wms图层并显示到地图中. Ol3下载: 你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载, ...
- GStreamer基础教程02——GStreamer概念
上一个教程演示了如何自动生成一个pipeline.这次我们打算用一个个element来手动搭建一个pipeline.我们这个教程会演示: 1. 什么是GStreamer的element以及如何建立一个 ...
最新文章
- vue 带全选和多选的表格怎么写_EXCEL五分钟,批量制作带照片的工地出入证
- 「offer来了」从基础配置到高级配置,16大知识点带你巩固webpack知识体系
- 智课雅思短语---二、exert positive/ negative effects on…
- 学习ASP.NET Core Razor 编程系列四——Asp.Net Core Razor列表模板页面
- 丹麦为NSA开绿灯 通过通信中心监控欧洲政客
- iOS 通讯录编程【总结】
- 从零基础入门Tensorflow2.0 ----六、30 kaggle 10 monkeys 基础模型搭建与训练
- PHP直播源码js判断浏览器版本
- 1.运动学分析-正运动学
- 红外线解码 VS1838B接头 12864液晶 51单片机 合众之星万能遥控器
- win10扬声器红叉_win10 小喇叭红叉 未安装任何音频输出设备
- Day 21 第三关练习题-权限
- php商城系统源码的好处有哪些?
- python自动翻译excel某一列_python批量将excel内容进行翻译写入功能
- 【网络安全学习笔记】
- 国密SM4算法(简介与C源码)
- 一个屌丝程序员的青春(三九六)
- 使用IDEA创建maven项目在pom.xml中添加依赖后,出现“Dependency ‘org.mybatis:mybatis:x.x.x‘ not found“解决过程
- kettle -- 简介
- 皇家墨尔本医院Windows XP电脑中毒,这病怎么治?
热门文章
- cnpm使用报错-最佳方案
- 腾讯云安装mysql_详解腾讯云CentOS7.0使用yum安装mysql及使用遇到的问题
- Oracle Net Services 配置失败。退出代码是1 参数responsefile = Oracle Net Configuration Assistant 在给定位置找不到响应文件。
- html 图片拼接,css sprite图像拼接技术
- python是微软开发的吗_Python是如何在微软发展壮大的
- 一文解读时间序列基本概念
- [iOS] MUI-WebView模式集成到iOS应用
- Google iOS 材料设计: 入门
- Ogre – 材质脚本(三) (转)
- linux系统怎么制作win10,win10 + linux 制作双系统教程(我本身是win10系统)