关于Openlayer3的菜鸟认识
什么是OpenLayers?
我眼里的Openlayer:
说到openlayer不得不说其中的map,map是OpenLayers的核心组件,如果把开发openlayer3过程比做画画的话,那么map就是一个神奇的桌子,它是来承载各式各样的纸(layer),画画的背景想用地图做背景怎么办?这个时候ol.layer.Tile出来了,想加载网格中加载块状地图,非它莫属,想加载客户数据怎么办?ol.layer.Vector帮助你,好了背景图有了,自己画的也加上了,突然发现对背景跟自己画的有点不满意,想自己添加,修改怎么办,给map加上特效,ol.interaction.xxxx,想要画点你就加ol,interaction.Draw,想修改你就加上ol.interaction.Modify,当然在加特效之前你可以对地图做一些渲染,ol.FeatureOverlayer,因为默认的样式画出来的东西不一定会看的清。当然事实上远没有这没简单,每个类都有自己的方法。就说map吧,至少我用到最多的是它的on()跟once()方法,前者监听一种特定类型的事件,后者监听一次特定类型的事件,其中on()跟un()是配对使用的。其他的就不多说了,可以参考一下官方手册。
首先从Map的官方参考手册看起
ol.Map
The map is the core component of OpenLayers. For a map to render, a view, one or more layers, and a target container are needed.
从上面Map的定义看,我们可以知道map是OpenLayers的核心组件。对map进行渲染,我们至少需要一个view(视图),一个layers(层)和一个目标的容器。
根据定义我们创建一个
最简单的map。
<html> <head> <meta charset="utf-8"> <title>GIS开发样例-V1.0</title> <meta content="Copyright (c) Leetao" name="copyright"> <link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css"> <script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script> </head> <body> <div id="map" class="map"></div> <script> var map = new ol.Map({ view: new ol.View({ center: [0, 0], //视图的初始中心 zoom: 1 //用于缩放视图的初始分辨率 }), layers: [ new ol.layer.Tile({ //Tile预渲染层 source: new ol.source.MapQuest({layer: 'osm'}) }) ], target: 'map' }); </script> </body> </html>
结果如图:
<html> <head> <meta charset="utf-8"> <title>GIS开发样例-V1.0</title> <meta content="Copyright (c) Leetao" name="copyright"> <link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css"> <script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script> </head> <body> <div id="map" class="map"></div> <form class="form-inline"> <label>Geometry type </label> <select id="type"> <option value="None">None</option> <option value="Point">Point</option> <option value="LineString">LineString</option> <option value="Polygon">Polygon</option> </select> </form> <script> var source = new ol.source.Vector(); var vector = new ol.layer.Vector({ source: source }); var map = new ol.Map({ view: new ol.View({ center: [0, 0], zoom: 2 }), layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'osm'}) }) // vector //(2) ], target: 'map' }); //featureOverlay var featureOverlay = new ol.FeatureOverlay({ style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }), } ); featureOverlay.setMap(map); var typeSelect = document.getElementById('type'); var draw; function addInteraction() { var value = typeSelect.value; if (value !== 'None') { draw = new ol.interaction.Draw({ features: featureOverlay.getFeatures(), // (1) source: source, type: /** @type {ol.geom.GeometryType} */ (value) }); map.addInteraction(draw); } } typeSelect.onchange = function(e) { map.removeInteraction(draw); addInteraction(); }; addInteraction(); </script> </body> </html>
结果如下:
<html> <head> <meta charset="utf-8"> <title>GIS开发样例-V2.0</title> <meta content="Copyright (c) Leetao" name="copyright"> <link rel="stylesheet" href="/jslib/openlayer-3.3.0/css/ol.css" type="text/css"> <script src="/jslib/openlayer-3.3.0/build/ol-debug.js" type="text/javascript"></script> </head> <body> <div id="map" class="map"></div> <form class="form-inline"> <label>Geometry type </label> <select id="type"> <option value="None">None</option> <option value="Point">Point</option> <option value="LineString">LineString</option> <option value="Polygon">Polygon</option> </select> </form> <script> var source = new ol.source.Vector(); var vector = new ol.layer.Vector({ source: source }); var map = new ol.Map({ view: new ol.View({ center: [0, 0], zoom: 2 }), layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'osm'}) }) ], target: 'map' }); //featureOverlay var featureOverlay = new ol.FeatureOverlay({ style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }), } ); featureOverlay.setMap(map); var modify = new ol.interaction.Modify({ features: featureOverlay.getFeatures(), deleteCondition: function(event) { return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event); } }); map.addInteraction(modify); var typeSelect = document.getElementById('type'); var draw; // global so we can remove it later function addInteraction() { var value = typeSelect.value; if (value !== 'None') { draw = new ol.interaction.Draw({ features: featureOverlay.getFeatures(), source: source, type: /** @type {ol.geom.GeometryType} */ (value) }); map.addInteraction(draw); } } typeSelect.onchange = function(e) { map.removeInteraction(draw); addInteraction(); }; addInteraction(); </script> </body> </html>
var raster = new ol.layer.Tile({ source: new ol.source.MapQuest({ layer: 'sat' }) }); var vector = new ol.layer.Vector({ source: new ol.source.GeoJSON({ projection: 'EPSG:3857', url: 'data/geojson/countries.geojson' }) }); var select = new ol.interaction.Select(); var modify = new ol.interaction.Modify({ features: select.getFeatures() }); var map = new ol.Map({ interactions: ol.interaction.defaults().extend([select, modify]), layers: [raster, vector], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) });
关于Openlayer3的菜鸟认识的更多相关文章
- PHP 用QueryList抓取网页内容
http://www.cnblogs.com/wb145230/p/4716403.html 之前抓取网页数据都是用Java Jsoup,前几天听说用PHP抓更方便,今天就简单研究了一下,主要是用Qu ...
- 菜鸟学Struts2——Results
在对Struts2的Action学习之后,对Struts2的Result进行学习.主要对Struts2文档Guides中的Results分支进行学习,如下图: 1.Result Types(Resul ...
- [C#][算法] 用菜鸟的思维学习算法 -- 马桶排序、冒泡排序和快速排序
用菜鸟的思维学习算法 -- 马桶排序.冒泡排序和快速排序 [博主]反骨仔 [来源]http://www.cnblogs.com/liqingwen/p/4994261.html 目录 马桶排序(令人 ...
- 菜鸟快飞之JavaScript对象、原型、继承(三)
正文之前需要声明的一点是,菜鸟系列博文全是基于ES5的,不考虑ES6甚至更高版本. 继承 由于我个人不是学计算机的,所以对于很多东西只是知其然,不知其所以然.就像这个继承,刚开始学JavaScript ...
- IT菜鸟的生存指南(二)新手村任务
此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- 恭(不)喜(幸 ...
- IT菜鸟的生存指南(一)那些人才适合从事IT行业
此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- Just do ...
- 刚接触Linux,菜鸟必备的小知识点(一)
身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...
- 菜鸟学Android编程——简单计算器《一》
菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...
- GitHub菜鸟日志1——20160531
好吧,事实上很早就知道有github这个东西了,然而就有一种莫名的力量一直阻止着我向这“未知的领域”涉足(which is called lazy). 然后,前略...总之,默默的就开始了github ...
随机推荐
- 一次完整的HTTP请求所经历的7个步骤
HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1. 建立TCP连接在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连 ...
- Android开发环境的搭建
在学习android时,环境的搭建是学习android的第一步,为了记住第一步特写了这篇文章. 第一步,安装jdk,因为eclipse的运行需要jdk才可以,所以jdk的安装时第一步.安装过程和普通的 ...
- Confuser.crproj
<?xml version="1.0" encoding="utf-8"?> <project baseDir="bin\Relea ...
- JS 面向对象随笔
1.一个对象的静态属性只能通过类名来访问 不能通过实例来访问 如下面定义个HelloWord的类 function HelloWord(){ console.log("这里是HelloWor ...
- 浅谈Android中layout_weight
引言 在开发android过程中,我们经常需要对界面进行按比例进行布局,我们一般都会使用layout_属性来进行设置.今天这篇文章我们就来简单介绍下layout_weight的使用和布局原理.随着做项 ...
- SQL Server遍历表的几种方法
在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易懂,但是它不符合面向集合操作的原则,而且性能也比面向集合低.当然,从面向集合操作的 ...
- mysql问题
mysql x64,由于没有msi版,因此,在使用上可能会出现一些问题. 一. 配置环境变量: 只需把mysql/bin文件夹地址完整地添加到Path中,用“;”与前面的参数隔开.需注意,mysql ...
- SQL 批量删除表
/*-------------------------------- 功能说明: 批量DropTable 使用说明: 使用时一定要小心,因为删选表的where条件是like所有必须保证where 后的 ...
- LOL 控制技能的解释
压制:硬控的一种,是指A在释放压制型技能的时候B无法进行任何动作,可以被 水银腰带 和 坩埚盖 解除(原来可以完全解掉,现在貌似只是能动,伤害还在继续,比如蚱蜢的R中,用水银解掉之后可以立即跑开,但是 ...
- ReactiveCocoa源码拆分解析(四)
(整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) 上一章节简要的说明了如何实现的热信号.但是像那么写, ...