什么是OpenLayers?

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包,用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后,OpenLayers已经将所用到的Prototype.js组件 整合到了自身当中,并不断在Prototype.js的基础上完善面向对象的开发,Rico用到地方不多,只是在OpenLayers.Popup.AnchoredBubble类中圆角化DIV。

我眼里的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 &nbsp;</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>

结果如下:

  

上面代码可以让你在Tile上绘点,线以及几何图形,当然如果你把(1)注释了,再尝试在上面绘点,你会发现绘制的图形变成透明的了,
如果你先把(2)注释给取消了,在把(1)给注释了,你会发现,这个时候绘图是可以看见的
绘图结束了就是该修改图了
简单的绘图以及修改图
只需要在原有基础上加个ol.interaction.Modify就可以修改了
代码如下:

<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 &nbsp;</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>
当然可以添加特效也可以修改特效,采用map.removeInteraction(),可以在特定事件触发之后禁止修改亦或是禁止绘图
上面都是单层的,如果想加入客户数据,参照样例一,将注释(2)去掉即可。
现在我们尝试从后台加载数据,并对后台传来的数据进行二次修改
修改后台传来的数据
主要采用了ol.interaction.Select()方法
核心代码如下:
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
  })
});
其中ol.interaction.Select是用来处理被选中的Vector的数据的。
最后附上官方手册部分翻译(博主自己翻译的,可能有错,只供参考)
如果文章存在错误,请指正。

关于Openlayer3的菜鸟认识的更多相关文章

  1. PHP 用QueryList抓取网页内容

    http://www.cnblogs.com/wb145230/p/4716403.html 之前抓取网页数据都是用Java Jsoup,前几天听说用PHP抓更方便,今天就简单研究了一下,主要是用Qu ...

  2. 菜鸟学Struts2——Results

    在对Struts2的Action学习之后,对Struts2的Result进行学习.主要对Struts2文档Guides中的Results分支进行学习,如下图: 1.Result Types(Resul ...

  3. [C#][算法] 用菜鸟的思维学习算法 -- 马桶排序、冒泡排序和快速排序

    用菜鸟的思维学习算法 -- 马桶排序.冒泡排序和快速排序 [博主]反骨仔 [来源]http://www.cnblogs.com/liqingwen/p/4994261.html  目录 马桶排序(令人 ...

  4. 菜鸟快飞之JavaScript对象、原型、继承(三)

    正文之前需要声明的一点是,菜鸟系列博文全是基于ES5的,不考虑ES6甚至更高版本. 继承 由于我个人不是学计算机的,所以对于很多东西只是知其然,不知其所以然.就像这个继承,刚开始学JavaScript ...

  5. IT菜鸟的生存指南(二)新手村任务

    此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- 恭(不)喜(幸 ...

  6. IT菜鸟的生存指南(一)那些人才适合从事IT行业

    此文献给那些刚误入IT行业的小菜鸟们,此文无法教你如何"当上CEO,迎娶白富美",那是电视剧情.现实IT行业里危机重重,竞争激励.这里教你的是如何生存.生存.生存- Just do ...

  7. 刚接触Linux,菜鸟必备的小知识点(一)

    身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...

  8. 菜鸟学Android编程——简单计算器《一》

    菜鸟瞎搞,高手莫进 本人菜鸟一枚,最近在学Android编程,网上看了一些视频教程,于是想着平时手机上的计算器应该很简单,自己何不尝试着做一个呢? 于是就冒冒失失的开撸了. 简单计算器嘛,功能当然很少 ...

  9. GitHub菜鸟日志1——20160531

    好吧,事实上很早就知道有github这个东西了,然而就有一种莫名的力量一直阻止着我向这“未知的领域”涉足(which is called lazy). 然后,前略...总之,默默的就开始了github ...

随机推荐

  1. 一次完整的HTTP请求所经历的7个步骤

    HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1. 建立TCP连接在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连 ...

  2. Android开发环境的搭建

    在学习android时,环境的搭建是学习android的第一步,为了记住第一步特写了这篇文章. 第一步,安装jdk,因为eclipse的运行需要jdk才可以,所以jdk的安装时第一步.安装过程和普通的 ...

  3. Confuser.crproj

    <?xml version="1.0" encoding="utf-8"?> <project baseDir="bin\Relea ...

  4. JS 面向对象随笔

    1.一个对象的静态属性只能通过类名来访问 不能通过实例来访问 如下面定义个HelloWord的类 function HelloWord(){ console.log("这里是HelloWor ...

  5. 浅谈Android中layout_weight

    引言 在开发android过程中,我们经常需要对界面进行按比例进行布局,我们一般都会使用layout_属性来进行设置.今天这篇文章我们就来简单介绍下layout_weight的使用和布局原理.随着做项 ...

  6. SQL Server遍历表的几种方法

    在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易懂,但是它不符合面向集合操作的原则,而且性能也比面向集合低.当然,从面向集合操作的 ...

  7. mysql问题

    mysql x64,由于没有msi版,因此,在使用上可能会出现一些问题. 一.  配置环境变量: 只需把mysql/bin文件夹地址完整地添加到Path中,用“;”与前面的参数隔开.需注意,mysql ...

  8. SQL 批量删除表

    /*-------------------------------- 功能说明: 批量DropTable 使用说明: 使用时一定要小心,因为删选表的where条件是like所有必须保证where 后的 ...

  9. LOL 控制技能的解释

    压制:硬控的一种,是指A在释放压制型技能的时候B无法进行任何动作,可以被 水银腰带 和 坩埚盖 解除(原来可以完全解掉,现在貌似只是能动,伤害还在继续,比如蚱蜢的R中,用水银解掉之后可以立即跑开,但是 ...

  10. ReactiveCocoa源码拆分解析(四)

    (整个关于ReactiveCocoa的代码工程可以在https://github.com/qianhongqiang/QHQReactive下载) 上一章节简要的说明了如何实现的热信号.但是像那么写, ...