`
wxb880114
  • 浏览: 683283 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Openlayers学习笔记——Vector Layer类

阅读更多
   Openlayers 矢量图层是在地图上展示数据,允许实时与数据交互,用户可以上传数据通过空间数据文件,如KML、GeoJSON文件,用户不仅可以在地图上展示自己的数据,还可以指定数据的外观。
  
    一、Vector Layer的特点
   在栅格图片里,你所能看到就是你所能得到的信息,在你的地图上添加卫星图片能够看到很多的建筑物,但是建筑物的很多属性信息你是看不到的,如楼层结构、年代、使用年限等,但是矢量图层能够提供更多的信息。
   在矢量图层中,能够显示建筑物的几何形状和附加信息,如房主、面积、方位等等。在栅格图层上添加矢量图层很简单,还可以在指定位置创建要素。我们可以通过鼠标的点击、停旋在要素上查看要素的属性信息,空间信息等。
 
   1.矢量图层应用在客户端
   与矢量图层的交互过程仅仅在客户端上,当你浏览地图时,矢量图层没有向服务器发送请求去获得改图的更多信息,一旦你获得初始化的数据,数据会在浏览器中建立缓存,你不用重复提交相同请求。
   多数情况下,矢量数据是加载到客户端的,用户与矢量图层的交互也是实时进行的。然而,这就导致矢量图层的处理速度依赖于客户端的浏览器和电脑配置,这对用户的使用也是有一点的限制。虽然除了 Internet Explorer浏览器之外的其他浏览器都能很好的处理用户请求,但限制还是存在的。 
    由于浏览器的限制,矢量图层上的大量要素的操作速度会缓慢下来。没有一个准确的要素数量,但是要素数量达到数百个时在大队数电脑上操作速度都会慢下来。这个问题也有很多解决办法,如删去不需要的要素。
 
    2.广泛用途
    在矢量图层上,能够展现各种几何对象,像点、线、面、矩形、标记等,能够通过绘制线、面来测量距离和面积。还可以在地图上绘制图形,然后按相应格式导出数据,这些数据能够被其他项目中采用。
    
    二 Vector Layer的工作原理
    1.图层的渲染
    前面论述中,我们知道矢量图层不用栅格图片,其他图层都是采用HTML的img标签显示图片,在img标签中也仅仅只显示栅格数据,因此在矢量图层中我们不能像其他图层一样采用img标签,相反,我们需要一个矢量图像渲染器,前面讲过,矢量图层不仅仅是张图片,还包含很多附加信息,比如数据的坐标系等。
    在OpenLayers中提供三种方法来渲染矢量图层:SVG、Canvas、VML;
    %SVG
    矢量图层默认渲染方式就是SVG,SVG是Scalable Vector Graphics的首字母缩写,除了Internet Explorer之外的浏览器都支持SVG。
    %Canvas
    采用canvas HTML标签,利用canvas渲染器会有点慢,因为事实上矢量通过canvas标签转换成栅格,只适用于在某种情况下。
    %VML
   Internet Explorer不遵从网络标准,还不支持SVG和canvas,幸运的是,OpenLayers采用一种类似于SVG的,Microsoft制定的渲染器VML,但SVG比VML要快,所以只有在Internet Explorer浏览器上才选用VML。
    三、实例
    1.从创建一个WMS图层开始,
    var wms_layer = new OpenLayers.Layer.WMS(
     'OpenLayers WMS','http://vmap0.tiles.osgeo.org/wms/vmap0',{layers:'basic'},{}
);

     2 创建矢量图层,采用默认的投影,
     var vector_layer=new OpenLayers.Layer.Vector('Basic Vector Layer');
    
     3.在地图上添加图层
     map.addLayers([wms_layer,vector_layer]);//此时矢量图层没有加载任何数据,我们需要controls加载数据
     
      4.添加EditingToolbar类对象,该对象可以在矢量图层上添加点绘制多边形,
     map.addControl(new OpenLayers.Controls.Control.EditingToolbar(vector_layer));//这时可以在地图上添加点线面。
  
      5.保存绘制信息导出空间数据文件
      在地图上绘制的点线面在地图刷新以后就会消失,我们怎么才能抓取这些信息并保存下来呢,我们需要连接 features数组,
      map.layers[1].features[x];这样获取了要素,将他保存到文件中。
    
分享到:
评论

相关推荐

    openlayers图层控制加入group layer功能

    开发时,有时候图层很多,需要有同时打开关闭多个图层的功能,但是正式版的layerSwitcher不支持group layer功能. 从网上搜到layerSwitcher的扩展,是在源代码里添加对grouplayer的操作和事件支持. 对layerSwitcher....

    OpenLayers-API接口文档.rar_layer.open 详解_openLayer_openlayers_openla

    本文将深入探讨OpenLayers API中的一个重要组件——`layer.open`,帮助开发者更全面地理解和利用这一功能。 `layer.open` 是OpenLayers中用于打开图层(layer)的关键接口。图层是地图的核心组成部分,它可以包含...

    openlayers6学习笔记

    openlayers6学习笔记,节省你的学习成本

    地图个人开发笔记和Demo

    —— 1.1 OlMap 基础类 —— 1.2 openlayers 实例化地图 —— 1.3 openlayers地图OSM形式 —— 1.4 openlayers地图XYZ形式 —— 1.5 国家地理信息公共服务平台 天地图 —— 1.6 天地图.四川 —— 1.7 天地图.西藏 ...

    openLayers的缩放级别

    OpenLayers 的缩放级别是指在不同比例尺或解析度下显示每个 layer 对象的引用, 即 ZoomLevels。OpenLayers 允许每个 layer 自定义自己的缩放级别,使之看起来合适。可以通过在构造函数中设置 options 属性来配置 ...

    openlayers离线文档

    OpenLayers提供多种瓦片管理类,如OpenLayers.Layer.TileCache和OpenLayers.Layer.XYZ。 "事件"(Events)在OpenLayers中用于监听用户交互和地图状态变化。例如,可以监听地图的移动(moveend)事件来执行某些操作...

    openlayers3.0学习笔记

    openlayers3.0学习笔记,节省你的学习成本

    openlayers_echarts开发实例

    - 在线示例:通过查看公开的GitHub项目(如“openlayers_echart”),学习实际的代码实现。 以上内容涵盖了OpenLayers和ECharts集成的基本概念、关键点以及实际应用场景。在实践中,开发者需要根据具体需求灵活...

    openlayers中自定义工具条

    在OpenLayers这个强大的开源JavaScript库中,自定义工具条是一个常用功能,允许开发者根据项目需求构建个性化的地图交互界面。本文将深入探讨如何在OpenLayers中实现自定义工具条,并结合16年的实践经验,尽管一些...

    基于openlayers和canvas绘制海量数据的实现

    在"ol-canvaslayer-main"这个文件中,可能包含了一个OpenLayers的扩展模块,用于在地图上创建一个基于Canvas的图层。CanvasLayer允许开发者利用Canvas的高性能特性来绘制大量点、线、面等几何对象,这对于实时更新...

    openlayers3官方教程离线版

    3. **图层管理**:OpenLayers 3支持多种图层类型,如瓦片图层(`ol.layer.Tile`)、图像图层(`ol.layer.Image`)和矢量图层(`ol.layer.Vector`)。每种图层都有其特定的用途,例如瓦片图层常用于加载服务端生成的...

    openlayers的鼠标滚轮事件

    通过本篇文章的学习,我们了解了如何在OpenLayers中控制鼠标滚轮事件,包括启用和禁用滚轮缩放功能的方法。这对于提高Web地图应用的用户体验至关重要。希望读者能够根据自己的项目需求灵活运用这些技术点。

    openlayers中文文档

    矢量图层(Vector Layer)可以显示动态数据,如点、线和面,支持实时编辑和交互。 此外,OpenLayers支持地理坐标系统(Geographic Coordinate System, GCS)和投影(Projection),使得地图能够正确地显示不同地理...

    openlayers中文.rar

    - **添加图层**:通过Layer类创建图层实例,并将其添加到地图对象中。 - **设置控件**:根据需求添加控制元素,如Zoom、Pan等。 - **事件监听**:监听用户交互,如点击、移动等,实现响应式功能。 3. **...

    openlayers遮罩示例

    **OpenLayers 遮罩示例** OpenLayers 是一个强大的开源JavaScript库,用于在Web上构建交互式的地图应用。这个示例将展示如何在...通过深入学习和实践,你可以利用OpenLayers创建出满足各种业务需求的地图应用。

    基于openlayer的军事动态标绘.7z

    1. 矢量图层:OpenLayer中的Vector Layer允许开发者动态创建、编辑和删除地图上的几何对象,如点、线、面等,非常适合表示军事目标和动态变化的信息。 2. 数据源:动态标绘的数据通常来自服务器或本地存储,Open...

    OpenLayers API

    通过深入学习和熟练掌握OpenLayers API,开发者可以构建出功能强大、交互丰富的Web GIS应用,满足各种地理信息系统的需求。OpenLayers API中文版的文档可以帮助中国开发者更好地理解和应用这个工具,提高开发效率。

    Openlayers扩展H5绘制10W+数据

    《OpenLayers扩展H5绘制10W+数据详解》 在现代Web开发中,地理信息系统(GIS)的应用越来越广泛,而OpenLayers作为一个强大的开源JavaScript库,为开发者提供了丰富的地图渲染和交互功能。当我们面临处理大量数据,...

    openlayers 调用百度地图

    在OpenLayers中,我们通常会创建一个地图实例(`ol.Map`),然后设置图层(`ol.layer`)和视图(`ol.View`)。图层可以是各种类型的,包括WMS、WMTS、GeoJSON等,但我们这里需要的是百度地图的图层。 2. **获取...

    openlayers3画线功能例子

    var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'rgba(255, 0, 0, 1)', width: 3 }) }) }); map.addLayer...

Global site tag (gtag.js) - Google Analytics