关闭

[置顶] OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解

标签: 矢量地图矢量图层矢量要素动态标绘实时位置
9003人阅读 评论(1) 收藏 举报
分类:

      在 GIS 中,地图一般分为两大类:栅格地图和矢量地图,栅格地图其实就是数码照片,只不过有的是卫星拍的。它们有一个共同特征,就是它们都是由很多个像素组成,像素大小是一致的,行高和列宽是一致的,从这个角度看,一幅遥感影像就像栅格。

      矢量地图,是由很多要素组成的,每个要素都有自己的地理坐标,基于数学规则,无论矢量地图怎么放大,地图都不会失真。它是 OpenLayers 中非常重要的一种图层类型,利用矢量地图可以实现非常多的功能,如 动态标绘、调用 WFS 服务、编辑要素、可点击的要素、动态加载要素 等等。

矢量图层的构成

      矢量图层是在客户端渲染的,在 web 环境中,对应的就是浏览器。构成一个矢量图层的包含一个数据(source)和一个样式(style),数据构成矢量图层的要素,样式规定要素显示的方式和外观。一个初始化成功的矢量图层包含一个到多个要素(feature),每个要素由地理属性(geometry)和多个其他的属性,可能包含名称等。结构如下图:

这里写图片描述

在初始化矢量图层时,可以有很多选项配置矢量图层的行为和外观,常用的有:

  • brightness、contrast,图层亮度和对比度,都是一个数值;
  • renderOrder,一个指定规则的函数 (function(ol.Feature, ol.Feature));
  • hue,色调,是一个数值;
  • minResolution,可见的最小分辨率;
  • maxResolution,可见的最大分辨率;
  • opacity,图层的透明度,0~1之间的数值,1表示不透明;
  • saturation,饱和度;
  • source,图层数据来源;
  • style,图层样式,一个ol.style.Style或者一个ol.style.Style数组,或者一个返回 ol.style.Style 的函数;
  • visible,图层可见性,默认为 true

初始化一个矢量图层

借助一个例子说明如何初始化一个矢量图层:

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: 'data/china_province_boundries.geojson',
    projection: 'EPSG:3857',
    format: new ol.format.GeoJSON({
        extractStyles: false
    })
  }),
  style: style
});

      例中的 source url 设置了数据的来源,projection 设置了地理坐标系,format 设置 数据的解析器,因为 url 规定的数据来源是 geojson 格式,所以解析器也是 geojson 解析器 new ol.format.GeoJSON

取得要素

      那么,在一个矢量图层中怎么取得它的某个 feature 呢,一般的想法是 vector.getFeature(),其实不是的,vector 的数据包含在 source 中,要取得 vector 的 feature 数据,要在 source 中,例如 vector.getSource().getFeatures(),该函数会返回一个 feature array,直接使用 [ ],取用即可,或者根据要素的 ID 取得(getFeatureById())。

      同样的,只要数据相关的操作,都要得到 vector 的 source 实例,然后进行操作,例如 添加要素(addFeature)、删除要素(removeFeature),对每个要素进行相同的操作(forEachFeature)。

取得要素的 geometry

      利用 getGeometry() 可以获得要素的地理属性,这个函数当然返回要素包含的 geometry,geometry 包含很多类型,主要有 point、multi point、linear ring、line string、multi line string、polygon、multi polygon、circle。

      取得 geometry 后,就可以获得要素的坐标了,可以根据坐标做一些地理判断,比如判断 一个坐标是否位于要素内(containsCoordinate(coordinate) 或者 containsXY(x, y)),取得要素的中心坐标等。

总结

      使用矢量图层,可以实现很多功能,比如动态加载矢量数据、调用 WFS 服务、动态标绘、编辑要素,分别是在图层级别和要素级别进行的操作。

      例如可以实现,在矢量图层上绘制不同的图形,并添加属性,然后更新至数据库,即动态标绘系统;或者动态加载要素级数据,比如跟踪汽车的轨迹。

5
0
查看评论

OpenLayers 3 之 使用矢量图层(Vector)

摘要         矢量图层:矢量图层是用来渲染矢量数据的图层类型,在OpenLayers里,它是可以定制的,可以控制它的透明度,颜色,以及加载在上面的要素形状等。      &...
  • qingyafan
  • qingyafan
  • 2015-03-27 14:43
  • 9752

OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解,openlayersvector

在 GIS 中,地图一般分为两大类:栅格地图和矢量地图,栅格地图其实就是数码照片,只不过有的是卫星拍的。它们有一个共同特征,就是它们都是由很多个像素组成,像素大小是一致的,行高和列宽是一致的,从这个角度看,一幅遥感影像就像栅格。      &#...
  • jyj545
  • jyj545
  • 2015-11-16 09:30
  • 1108

OpenLayers 3 之 地图图层(Layers) 详解

如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政...
  • qingyafan
  • qingyafan
  • 2015-04-30 18:41
  • 21780

【OpenLayer3】Feature设置不同颜色技巧

如何在同一个图层中添加 不同颜色的要素? var highlightLayer = new ol.layer.Vector({ source: new ol.source.Vector() }); var highllightSource = highlightLayer....
  • gdp12315
  • gdp12315
  • 2016-07-12 22:25
  • 3084

OpenLayers3入门篇-创建点和线

创建点 1.创建Featrue,设置geometry属性   var saoguan =  new ol.Feature({ geometry:new ol.geom.Point(ol.proj.fromLonLat([113.5...
  • Adventure_xph
  • Adventure_xph
  • 2016-07-23 17:01
  • 9058

OpenLayers 3 之 map样式(ol.style)详解

OpenLayers 3 之 地图样式(ol.style)详解       地图样式是由 style 类控制的,其包含了地图样式的方方面面,例如,填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等,样式一般针对矢量要素...
  • jyj545
  • jyj545
  • 2015-11-16 09:29
  • 2425

动态标绘演示系统1.0(for OpenLayers3)

动态标绘演示系统1.4,基于动态标绘API 1.4。实现功能包括:1、标绘符号绘制(PlotDrawTool);2、标绘符号编辑(PlotEditTool);3、标绘符号样式编辑(参见演示系统源码);4、标绘符号文本标注(1.4新增PlotGraphic,支持文本标注);5、标绘符号保存与打开(通过...
  • GISpace
  • GISpace
  • 2014-10-07 20:00
  • 18557

OpenLayers 3 之 Overlay(覆盖物)详解

Overlay 从名字看,是覆盖图、覆盖物的意思,主要的用途就是在地图之上再覆盖一层,用以显示额外的可见元素,可见元素一般是 HTML 元素,利用 overlay,可以将可见元素放置到地图的任意位置,形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志,标签,利用 overlay 都可以做...
  • qingyafan
  • qingyafan
  • 2015-11-20 16:25
  • 7595

OpenLayers 3 之 地图图层数据来源(ol.source)详解

source 是 Layer 的重要组成部分,表示图层的来源,也就是服务地址。除了在构造函数中制定外,可以使用 layer.setSource(source) 稍后指定。一、包含的类型 ol.source.BingMaps ,必应地图的切片数据,继承自ol.source.TileImage; ol....
  • qingyafan
  • qingyafan
  • 2015-05-24 10:27
  • 10219

openlayers3 聚合分析专题图 cluster

在地图上查询结果通常以标记点的形式展现,但是如果标记点较多,不仅会大大增加客户端的渲染时间,让客户端变得很卡,而且会让人产生密集恐惧症,为了解决这一问题,我们需要一种手段能在用户有限的可视区域范围内,利用最小的区域展示出最全面的信息,而又不产生重叠覆盖。具体算法探讨:点击打开链接 openla...
  • gisdoer
  • gisdoer
  • 2017-07-26 23:09
  • 1278
    个人资料
    • 访问:307254次
    • 积分:3716
    • 等级:
    • 排名:第10361名
    • 原创:60篇
    • 转载:0篇
    • 译文:0篇
    • 评论:180条
    博客专栏
    文章分类
    最新评论