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

Openlayers学习笔记——Vector Layer Style

阅读更多
   我们了解到Vector layer能够完成很多工作,这节将更深入的探讨在矢量图层上怎样定制要素的外观,定制矢量要素的外观工作与control的外观定制非常相似,但是在矢量要素外观的定制上采用Style和StyleMap对象来代替CSS,由于矢量图层不使用栅格图像,我们可以用这种方式定制矢量图层。指定SVG(或者VML或Canvas)元素的样式。
    我们很容易通过修改默认样式文件来改变要素的样式,但是在矢量图层的要素,需要引用Rule类和Filter类,通过他们指定要素的样式。我们能做的不仅仅是改变颜色。我们可以改变大小,透明线风格,和各种各样的其他特性。
    采用样式有三种方式:
    %使用Style和StyleMap对象;
    %直接在图层上引用symbolizer;
    %直接对要素才有symbolizer(但是只能在从数据源中读取数据是出现);
    StyleMap本质上是一种Style对象映射到要素的各种不同状态或者意图,比如说,要素对象通常设置为默认意图,当你select某一要素时,它获得select意图,当然它的样式也对应着select意图的样式。
     Style对象包含样式符号库或者说是很多风格属性和值。我们利用符号库去定义样式,可以将符号库应用于Style对象、图层对象、甚至单个要素。

    2. symbolizer符号库
    symbolizer是个由健值对组成的匿名对象,这些健值对都是来描述样式属性的,与CSS很相似。例如 { fillColor: '#336699', strokeWidth: 4 }就是个符号库,它说明要素的颜色是#336699,笔画宽度是4个像素。
    当创建Style对象来指定某些要素的样式属性时我们使用symbolizer,我们直接在矢量图层上使用符号库,也可以在数据源文件中读取样式信息。
分享到:
评论

相关推荐

    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学习笔记,节省你的学习成本

    openlayers离线文档

    这份离线文档包含了OpenLayers的核心API详解,以及部分中文说明,对于学习和使用OpenLayers进行地图开发来说,是非常宝贵的资源。 首先,OpenLayers的基础概念是至关重要的。其中,"图层"(Layer)是地图的核心元素...

    openLayers的缩放级别

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

    openlayers中文.rar

    这个"openlayers中文.rar"压缩包提供了一份中文手册,对于想要学习和掌握OpenLayers的开发者来说,是一份非常实用的学习资源。 1. **OpenLayers基本概念**: - **地图层(Layers)**:OpenLayers中的地图由多个...

    地图个人开发笔记和Demo

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

    openlayers_echarts开发实例

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

    openlayers3.0学习笔记

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

    openlayers中自定义工具条

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

    openlayers很多特效demo

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上...通过研究这些OpenLayers特效demo,开发者不仅可以掌握基础的地图操作,还能学习到高级的交互和视觉效果的实现,为创建复杂且吸引人的地图应用提供强大支持。

    openlayers河流动态轨迹.zip

    OpenLayers 是一个开源JavaScript库,专门用于在网页上创建交互式的地图应用。它支持多种地图数据源,包括WMS、WMTS、TMS等服务,以及GeoJSON、KML、GML等地理数据格式。"openlayers河流动态轨迹.zip"这个文件很可能...

    openlayers中文文档

    OpenLayers还支持自定义样式,通过使用Style和Style Function,你可以改变图层、标记甚至单个几何对象的外观。同时,OpenLayers与GeoJSON格式兼容,使得导入和导出地理数据变得简单。 总的来说,"openlayers中文...

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

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

    openlayers的鼠标滚轮事件

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

    openlayers3官方教程离线版

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

    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...

    openlayers右键菜单

    你可以通过查看和学习这个示例,进一步理解和应用OpenLayers的右键菜单功能。 总结来说,OpenLayers右键菜单是通过自定义事件监听、HTML/CSS布局和JavaScript事件处理来实现的。这个“不错的demo”为我们提供了一个...

    vue openlayers 流动线效果

    资源下载不可直接运行,下载前可查看博客:https://blog.csdn.net/KK_bluebule/article/details/125694548 资源可供参考,因为只是一个vue页面和json测试数据

    Openlayers扩展H5绘制10W+数据

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

Global site tag (gtag.js) - Google Analytics