OpenLayers6(4):Vue中使用ol-ext插件中的Legend图例控件
1 版本
OpenLayers:6.4.3
- ol-ext:3.2.22(条件:"ol": ">= 5.3.0")
2 配置ol-ext
// 1、安装ol-ext
npm i ol-ext// 2、在main.js中引入样式
import 'ol-ext/dist/ol-ext.min.css';
3 使用Legend控件
3.1 说明
- ol.control.Legend:Create a legend for styles.
- ol.legend.Legend:Legend class to draw features in a legend element.
- ol.legend.Item:A class for legend items.
以下内容摘自官方案例:
The ol/control/Legend computes a legend based on ol/style/Style and draw it on the map.
- You can add or remove rows in the legend.
- The control use a style or a feature with a style or a style functions to handle styles based on feature properties.
- A select event is fired when click on the rows in the legend control.
- You can use the ol.legend.Legend.getLegendImage() function to retrieve an image of a single style or feature.
3.2 基本使用
import OlExtLegend from 'ol-ext/legend/Legend'
import OlExtLegendControl from 'ol-ext/control/Legend'const initLegend = () => {this_.mLegend = new OlExtLegend({title: '图例',margin: 5});this_.mLegend.addItem({title: "气象站", // 图例的名称typeGeom: 'Point', // 图例的要素类型style: qxzSelectStyle() // 返回Style类的样式对象});this_.mLegend.addItem({title: "500kV变电站",typeGeom: 'Point',style: bdzStyle() });const legendCtrl = new OlExtLegendControl({legend: this_.mLegend,collapsed: false});this_.mMap.addControl(legendCtrl);}
3.3 添加/删除图层时相应的增减图例
当执行map.addLayer/map.removeLayer函数后,同时进行相应的图例增减
// 当前方法没有考虑到所有可能的图层类型,仅供参考
const changeLegendItem = (title, layer) => {if (layer) {if (layer instanceof TileLayer) {const source = layer.getSource();if (source instanceof TileWMSSource) {const img = source.getLegendUrl(); // 获取WMS图层的图例this_.mLegend.addItem({title: title,typeGeom: 'Point',style: getIconStyle(img)});}} else if (layer instanceof VectorLayer) {this_.mLegend.addItem({title: title,typeGeom: 'Point',style: layer.getStyle()});}} else {// 用于移除ol-ext的图例let ele = null;this_.mLegend._items.forEach(e => {if (title === e.values_.title) ele = e;});ele && this_.mLegend._items.remove(ele);}}
4 效果
OpenLayers6(4):Vue中使用ol-ext插件中的Legend图例控件相关推荐
- Ext Scheduler Web资源甘特图控件
原文来自 http://www.fanganwang.com/Product-detail-item-1430.html欢迎转载. 关键字: 资源甘特图又叫负荷图,其纵轴不再列出活动,而是列出整个部门 ...
- WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆)
原文:WPF 中使用附加属性,将任意 UI 元素或控件裁剪成圆形(椭圆) 版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.欢迎转载.使用.重新发布,但务必保 ...
- c++builder中dbgrid控件排序_如何实现APP中各种布局效果?学会这几个控件就够了...
学习Flutter有一段时间了,也做了一些APP,但是总感觉对控件的使用一知半解,没有系统的概念,所以特意花了几天时间,把所有的控件都研究了一遍,总结出了常用的控件和使用方法, 俗话说:工欲善其事,必 ...
- matlab中axes显示,求助:在matlab的axes控件中显示图像
利用plot命令重复刷新显示动画效果...本想在axes控件中显示,可是只有第一次plot命令在控件中显示,接下来的都是另开一个画图窗口显示图片..怎样让图片都在axes控件中显示呢?求高手指点. 附 ...
- 在 Visual Basic 6 中让用户在运行时移动和调整控件大小
标题 在 Visual Basic 6 中让用户在运行时移动和调整控件大小 描述 此示例说明如何让用户在 Visual Basic 6 中在运行时移动控件和调整控件大小. 关键词 拖动.移动.调整 ...
- php中的ol标签,html5中ol标签的用法详解
这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下 定义和用法 标签定义有序列表. HTML 4.01 与 HTML 5 之间的差异 在 HTML ...
- php中的ol标签,html中的ol标签如何去掉标号呢?ol标签的使用方法总结
本篇文章介绍了html的ol标签是怎么去掉序号标号的,这里还有代码的详细解释,还有介绍了关于html ol有序列表标签如何更改序号,下文介绍了三种序号,大家也可以自己去想填写怎样的序号.现在来看这篇文 ...
- java数据透视表插件_纯前端表格控件SpreadJS:新增数据透视表插件等,完美呈现强大的Excel数据分析能力...
SpreadJS是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,凭借其 "高性能.跨平台.与 Excel 高度兼容"的产品特性,备受以华为. ...
- qt获取窗口的右上角位置_如何获得 Qt窗口部件在主窗口中的位置--确定鼠标是否在某一控件上与在控件上的位置...
用Qt Creator 设计程序时,最方便的就是ui设计器,可以很容易的得到想要的布局. 但是这样自动布局带来的后果是很难知道窗口中某一部件在主窗口中的相对位置. 在处理子窗口鼠标事件时变的很麻烦.主 ...
最新文章
- Windbg学习 (0x0012) 命令-批处理命令程序
- 使用SAP WebIDE给SAP UI5应用添加data source
- curl 访问不到html_嵌入式工程师入门前后端系列1:访问一个网页
- opencomm在c语言中的作用,使用OpenMPI从Fortran调用C语言
- alias怎么每次登陆都保存_设置alias别名并使之重启或者注销用户之后依旧生效...
- Jzoj3882 近邻
- 网络调试助手(NetAssist)java socket通讯代码
- 同义词抽取:从知识库中自动发现同义词的方法
- OpManager12——一个完整的网络管理解决方案
- Unity3D 退出游戏应用的代码
- Unity游戏神经网络版坦克大战
- 徙步藏东南不是江南胜似江南
- WireShark 不能正常解析 Radius 包,提示 Malformed Packet .
- 4、数据库服务的启动与登录
- 一、AUTOSAR概述
- 移动端SEO的一些疑问
- 全球与中国塑料面漆喷涂器市场深度研究分析报告
- python在国内外研究现状_国内外研究现状,水平和发展趋势-开题报告
- FFmpeg开发(五)——Qt视频播放器之封装FFmpeg类(参考了暴风影音、迅雷影音)
- 商城系统是如何定制开发的