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];这样获取了要素,将他保存到文件中。
分享到:
相关推荐
开发时,有时候图层很多,需要有同时打开关闭多个图层的功能,但是正式版的layerSwitcher不支持group layer功能. 从网上搜到layerSwitcher的扩展,是在源代码里添加对grouplayer的操作和事件支持. 对layerSwitcher....
本文将深入探讨OpenLayers API中的一个重要组件——`layer.open`,帮助开发者更全面地理解和利用这一功能。 `layer.open` 是OpenLayers中用于打开图层(layer)的关键接口。图层是地图的核心组成部分,它可以包含...
openlayers6学习笔记,节省你的学习成本
—— 1.1 OlMap 基础类 —— 1.2 openlayers 实例化地图 —— 1.3 openlayers地图OSM形式 —— 1.4 openlayers地图XYZ形式 —— 1.5 国家地理信息公共服务平台 天地图 —— 1.6 天地图.四川 —— 1.7 天地图.西藏 ...
OpenLayers 的缩放级别是指在不同比例尺或解析度下显示每个 layer 对象的引用, 即 ZoomLevels。OpenLayers 允许每个 layer 自定义自己的缩放级别,使之看起来合适。可以通过在构造函数中设置 options 属性来配置 ...
OpenLayers提供多种瓦片管理类,如OpenLayers.Layer.TileCache和OpenLayers.Layer.XYZ。 "事件"(Events)在OpenLayers中用于监听用户交互和地图状态变化。例如,可以监听地图的移动(moveend)事件来执行某些操作...
openlayers3.0学习笔记,节省你的学习成本
- 在线示例:通过查看公开的GitHub项目(如“openlayers_echart”),学习实际的代码实现。 以上内容涵盖了OpenLayers和ECharts集成的基本概念、关键点以及实际应用场景。在实践中,开发者需要根据具体需求灵活...
在OpenLayers这个强大的开源JavaScript库中,自定义工具条是一个常用功能,允许开发者根据项目需求构建个性化的地图交互界面。本文将深入探讨如何在OpenLayers中实现自定义工具条,并结合16年的实践经验,尽管一些...
在"ol-canvaslayer-main"这个文件中,可能包含了一个OpenLayers的扩展模块,用于在地图上创建一个基于Canvas的图层。CanvasLayer允许开发者利用Canvas的高性能特性来绘制大量点、线、面等几何对象,这对于实时更新...
3. **图层管理**:OpenLayers 3支持多种图层类型,如瓦片图层(`ol.layer.Tile`)、图像图层(`ol.layer.Image`)和矢量图层(`ol.layer.Vector`)。每种图层都有其特定的用途,例如瓦片图层常用于加载服务端生成的...
通过本篇文章的学习,我们了解了如何在OpenLayers中控制鼠标滚轮事件,包括启用和禁用滚轮缩放功能的方法。这对于提高Web地图应用的用户体验至关重要。希望读者能够根据自己的项目需求灵活运用这些技术点。
矢量图层(Vector Layer)可以显示动态数据,如点、线和面,支持实时编辑和交互。 此外,OpenLayers支持地理坐标系统(Geographic Coordinate System, GCS)和投影(Projection),使得地图能够正确地显示不同地理...
- **添加图层**:通过Layer类创建图层实例,并将其添加到地图对象中。 - **设置控件**:根据需求添加控制元素,如Zoom、Pan等。 - **事件监听**:监听用户交互,如点击、移动等,实现响应式功能。 3. **...
**OpenLayers 遮罩示例** OpenLayers 是一个强大的开源JavaScript库,用于在Web上构建交互式的地图应用。这个示例将展示如何在...通过深入学习和实践,你可以利用OpenLayers创建出满足各种业务需求的地图应用。
1. 矢量图层:OpenLayer中的Vector Layer允许开发者动态创建、编辑和删除地图上的几何对象,如点、线、面等,非常适合表示军事目标和动态变化的信息。 2. 数据源:动态标绘的数据通常来自服务器或本地存储,Open...
通过深入学习和熟练掌握OpenLayers API,开发者可以构建出功能强大、交互丰富的Web GIS应用,满足各种地理信息系统的需求。OpenLayers API中文版的文档可以帮助中国开发者更好地理解和应用这个工具,提高开发效率。
《OpenLayers扩展H5绘制10W+数据详解》 在现代Web开发中,地理信息系统(GIS)的应用越来越广泛,而OpenLayers作为一个强大的开源JavaScript库,为开发者提供了丰富的地图渲染和交互功能。当我们面临处理大量数据,...
在OpenLayers中,我们通常会创建一个地图实例(`ol.Map`),然后设置图层(`ol.layer`)和视图(`ol.View`)。图层可以是各种类型的,包括WMS、WMTS、GeoJSON等,但我们这里需要的是百度地图的图层。 2. **获取...
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...