热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

自定义边框_Openlayers技巧之绘制选中要素正方形边框以及自定义不规则多边形样式船讯...

这篇文章是一个技术伙伴写的,经过他授权,放到小专栏里面。想必各位开发者在使用cesium过程中,点击选中一个模型时候会出现一个正方形边框&
fff4904a1027ca46a7501d8d76012b7a.gif
这篇文章是一个技术伙伴写的,经过他授权,放到小专栏里面。

想必各位开发者在使用cesium过程中,点击选中一个模型时候会出现一个正方形边框,效果不错。但是能不能在二维地图中也实现这个效果呢?
答案是肯定的。先上效果图,该效果图是模仿船讯网效果做的,基本一致,效果图如下:

23b2098f74cb45c9326c24d5bec288f6.gif

近来在使用openlayers API时发现有一个类叫做ol.style.RegularShape,规则多边形样式,通过查阅样例以及API属性发现,该类可以实现规则多边形样式的绘制与显示,如五角星、正五边形、六边形等等,通过阅读源码发现该类继承ol.style.Image,是通过canvas绘制的规则多边形,既然是使用canvas绘制,那就好办了,我们知道canvas可以通过传入的路径绘制各种形状要素,我们可以自定义一个类继承ol.style.RegularShape,重写绘制方法,根据不规则多边形路径绘制,这样就达到了我们的目的。

ol.style.RegularShape.call(this, { radius: radius, points: 0, opacity: 1, rotateWithView: rotateWithView, rotation: options.rotation !== undefined ? options.rotation : 0, stroke: options.stroke !== undefined ? options.stroke : null, fill: options.fill !== undefined ? options.fill : null, scale: 1, size: options.size !== undefined ? options.size : null, snapToPixel: snapToPixel, atlasManager: options.atlasManager
});
ol.inherits(ol.style.IrregularShape, ol.style.RegularShape);

首先,在canvas中定义一个正方形边框的路径信息如下:[5, 44], [0, 35], [0, 5], [2.5, 0], [7.5, 0], [10, 5], [10, 35], [5, 44],设置边框宽度为1,颜色为红色,当然你也可以自定义正方形的大小、颜色等属性。
其次,ol要素样式设置成样式组,这样既可以实现图片、文字、ol自带多边形样式的显示,也可以实现自定义正方形边框的显示。

var style=[new ol.style.Style({ image: new ol.style.IrregularShape({ fill: oImgStyle.getFill(), size: ship[status].size, offset: ship[status].offset, paths: ship[status].path, snapToPixel: oImgStyle.getSnapToPixel(), stroke: oImgStyle.getStroke(), rotation: oImgStyle.getRotation(), rotateWithView: oImgStyle.getRotateWithView() }) }), new ol.style.Style({ image: new ol.style.IrregularShape({ size: textStyle.getOrginSize(),//获取原始设置大小 offset: textStyle.getOffset(), paths: textStyle.getPaths(), snapToPixel: textStyle.getSnapToPixel(), stroke: textStyle.getStroke(), rotation: textStyle.getRotation(), text: "",//设置为空,隐藏标注 rotateWithView: textStyle.getRotateWithView() }) }), new ol.style.Style({ image: new ol.style.IrregularShape({//自定义正方形边框 fill: new ol.style.Fill({ color: color }), stroke: new ol.style.Stroke({ color: 'black', width: 1 }), size: [12, 50], offset: [22, 5], paths: [[[5, 44], [0, 35], [0, 5], [2.5, 0], [7.5, 0], [10, 5], [10, 35], [5, 44]]] }) })];
Feature.setStyle(style);

最后,使用开源GIS做开发一点好处就是,当你遇到问题无法解决时候,多看看代码,没有效果,自己造,没有想要的功能,自己写,总会实现自己想要的。

更多精彩文章见下面小专栏:

GIS之家/Openlayers专题 - 小专栏​xiaozhuanlan.com
ee760a157047c8b3be1fd4eb6c50b50a.png

对本专栏感兴趣的话,可以关注一波

GIS之家作品店铺:GIS之家作品店铺
GIS之家源码咨询:GIS之家webgis入门开发系列demo源代码咨询



推荐阅读
  • 深入解析Android自定义View面试题
    本文探讨了Android Launcher开发中自定义View的重要性,并通过一道经典的面试题,帮助开发者更好地理解自定义View的实现细节。文章不仅涵盖了基础知识,还提供了实际操作建议。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 本文详细介绍了Java中org.eclipse.ui.forms.widgets.ExpandableComposite类的addExpansionListener()方法,并提供了多个实际代码示例,帮助开发者更好地理解和使用该方法。这些示例来源于多个知名开源项目,具有很高的参考价值。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • 本文介绍如何在 Android 中通过代码模拟用户的点击和滑动操作,包括参数说明、事件生成及处理逻辑。详细解析了视图(View)对象、坐标偏移量以及不同类型的滑动方式。 ... [详细]
  • 本文详细介绍了Java中org.neo4j.helpers.collection.Iterators.single()方法的功能、使用场景及代码示例,帮助开发者更好地理解和应用该方法。 ... [详细]
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • 本文介绍如何通过注册表编辑器自定义和优化Windows文件右键菜单,包括删除不需要的菜单项、添加绿色版或非安装版软件以及将特定应用程序(如Sublime Text)添加到右键菜单中。 ... [详细]
  • 在使用 DataGridView 时,如果在当前单元格中输入内容但光标未移开,点击保存按钮后,输入的内容可能无法保存。只有当光标离开单元格后,才能成功保存数据。本文将探讨如何通过调用 DataGridView 的内置方法解决此问题。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
  • 本文介绍了如何在C#中启动一个应用程序,并通过枚举窗口来获取其主窗口句柄。当使用Process类启动程序时,我们通常只能获得进程的句柄,而主窗口句柄可能为0。因此,我们需要使用API函数和回调机制来准确获取主窗口句柄。 ... [详细]
author-avatar
2分之11989_330
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有