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设计器,可以很容易的得到想要的布局. 但是这样自动布局带来的后果是很难知道窗口中某一部件在主窗口中的相对位置. 在处理子窗口鼠标事件时变的很麻烦.主 ...

OpenLayers6（4）：Vue中使用ol-ext插件中的Legend图例控件

1 版本

2 配置ol-ext

3 使用Legend控件

3.1 说明

3.2 基本使用

3.3 添加/删除图层时相应的增减图例

4 效果

OpenLayers6（4）：Vue中使用ol-ext插件中的Legend图例控件相关推荐

最新文章

热门文章