关于Openlayer3的菜鸟认识

什么是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的数据的。

最后附上官方手册部分翻译（博主自己翻译的，可能有错，只供参考）

如果文章存在错误，请指正。

时间： 2024-08-30 16:12:56

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

PHP 用QueryList抓取网页内容

之前抓取网页数据都是用Java Jsoup,前几天听说用PHP抓更方便,今天就研究了一下,主要是用QueryList来实现. QueryList是一个基于phpQuery的通用列表采集类,是一个简单. 灵活.强大的采集工具,采集任何复杂的页面 基本上就一句话就能搞定了. 直接拿博客园举例子了,http://www.cnblogs.com/ 我们用QueryList来抓取红框里面的内容 查看网页源代码找到红框的位置 1 <div id="post_list"> 2 3 <

菜鸟必知的几个Axure小设计

以下介绍几个常用Axure教程,还是那句话--内容简单,适合菜鸟查阅,老鸟可飘过,顺便帮忙点个赞哈 /偷笑. 一．顶部导航冻结,页面下拉可跟随 例如:下拉网页进行浏览,顶部导航悬停,固定在顶部位置 演示 1.按照自己理解,拖动几个元件,把导航和主体页面设计好: 2.导航处,右键设置"转换为动态面板",并命名top: 3.页面空白处,选择交互方式(窗口滚动时): 4.添加动作移动→选择导航→移动:绝对位置→X坐标为0,Y坐标插入变量或函数(Window.scrollY) 步骤1 步骤2

视频Android studio1.3.1从菜鸟到高手--第一季-IT蓝豹

Android studio1.3.1从菜鸟到高手--第一季 01.安装Android studio前的准备工作02.安装JDK和Android studio03.创建并且启动模拟器运行代码04.Android Studio的项目结构讲解05.Android studio常用配置设置06.Android studio顶部常用视图介绍07.Android studio 底部常用视图功能08.断点调试09.快捷键简介&编写常用功能10.用Android Studio导入Android Studio工

第十二节 VMware View 6.0 菜鸟入门 部署和安装RDS服务器

第十二节 VMware View 6.0 菜鸟入门 部署和安装RDS服务器

菜鸟的Xamarin.Forms前行之路——绪言

作者入门时间不是很久,差不多一年,期间自学的东西比较杂乱,到目前为止,编程方面的知识比较薄弱.之所以做这个系列,也只是因为做了两个月的Xamarin.Forms方面的东西,由于资料和自身实力的原因,过程走的比较艰难,但所幸的是也解决了部分的问题,积累了一些经验.期望通过这个系列,和大家分享经验,查漏纠错. 作为一个菜鸟,在解决问题的时候,往往比较直接,就是仅仅为了解决问题,期间可能根本没有考虑性能等方面的问题.所以在这个系列中,问题肯定是作者亲身实践能够解决的,但是在性能资源等方面作者没有做过考

T4模板：T4模板之菜鸟篇

一.废话 T4(Text Template Transformation Toolkit)是微软官方在VisualStudio 2008中开始使用的代码生成引擎.在 Visual Studio 中,"T4 文本模板"是由一些文本块和控制逻辑组成的混合模板,它可以生成文本文件. 在 Visual C# 或 Visual Basic 中,控制逻辑编写为程序代码的片段.生成的文件可以是任何类型的文本,例如网页.资源文件或任何语言的程序源代码.现在的VS中只要与代码生成相关的场景基本上都能找T

电脑菜鸟对杀毒软件的常见4大误区

对于电脑菜鸟,一般对于杀毒软件或多或少都存在以下四个误区: 1)只要不上网就不会中病毒了 好多人认为只要不连接到网络,电脑就不会中病毒,确实有很多病毒是通过网络传播,但移动存储也是传播病毒的一大根源,如U盘.移动硬盘.盗版光盘等. 2)只要有杀毒软件就不怕病毒了 杀毒软件也不可能预知未来有什么病毒,杀毒软件只能杀已知病毒或一些常见病毒特征行为,所以,有了杀毒软件也不要高枕无忧,而且杀毒软件要及时更新. 3)把文件设置为只读就不怕病毒了 把文件设置为只读确实就不能修改或删除文件了,这对防止误修改或

《跟菜鸟学Cisco UC部署实战》-视频课程-学习投资

有朋友,有学生,问到学习投资些什么,注意:投资可重复利用!就看你怎么用!!! 所以,我写下此博文,目的为了更方便学员学习! 一．在线培训(直播): 1. 学费: 8168元. (目前没开班,如果需要培训大纲,培训计划,请联系QQ:学无止境 3313395633 ) 2. 1条电话初装费 初装费:150元(大约)+31元/月,测试后可以,如果不用,请停机保号,停机保号:5元/月. 3. 1条宽带 默认大家都能上网,不用单独投资! 4. 语音网关 680元(老师为购买此组合,本课程中使用此组合! 一

小菜鸟mysql优化解决方案

根据小菜鸟的个人习惯,自己的编写的一套MYSQL优化方案,感觉还是有点儿菜,望大家谅解,不足之处,请大神们互动! #mysql优化解决方案 #公共参数默认值: max_connections = 151 #同事处理多大连接数,推荐设置最大连接数是上限连接数的80%左右 sort_buffer_size = 2M #查询排序时缓冲区大小,只对order by和group by起作用,可增大此值为16M open_files_limit = 1024 #打开文件数限制,如果show global s