OpenLayers 3根据属性选择并高亮feature

OpenLayers 3 版本:OpenLayers v4.3.2

想通过属性查询feature,但是在ol3中并没有发现类似ol2中的getFeatureByAttribute()....

自己写函数实现,实现方法如下:

var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features:ol.Feature,
            url: ‘./resources/data/test.geojson‘,
            format: new ol.format.GeoJSON()
        }),
        style:polygonStyle
    });
    map.addLayer(layer);
function selectByAttribute(){
    var features = layer.getSource().getFeatures();
    //console.log(features);
    var value = ‘115街坊‘;
    var property = ‘name‘;    var selectedByAttriFeature;//实际应用中设置成全局变量
    for (var i = 0, ii = features.length; i < ii; i++) {
        if (features[i].get(property) === value) {
            selectedByAttriFeature = features[i];
            break;
        }
    }
    selectedByAttriFeature.setStyle(featureSelectStyle);//高亮查询到的feature
    //console.log(selectedByAttriFeature.getGeometry().A);//后台输出发现,geometry属性中有一个属性A其实是中心点坐标,但是没有提供获取中心点的方法,.getGeometry().A也可获得中心点
    //console.log(getCenterOfExtent(selectedByAttriFeature.getGeometry().getExtent()));//结果同上

    var my_view = new ol.View({
        center: getCenterOfExtent(selectedByAttriFeature.getGeometry().getExtent()),
        zoom: 14
    });
    map.setView(my_view);
}

获得feature的中心点坐标:

function getCenterOfExtent(Extent){
    var X = Extent[0] + (Extent[2]-Extent[0])/2;
    var Y = Extent[1] + (Extent[3]-Extent[1])/2;
    return [X, Y];
}

清除已经选择的高亮feature:

function clearSelectByAttribute(){
    if(selectedByAttriFeature != null){
        selectedByAttriFeature.setStyle(null);
        selectedByAttriFeature = null;
    }
}
时间: 2024-08-25 19:55:00

OpenLayers 3根据属性选择并高亮feature的相关文章

#8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐

善用你的html的属性选择符

在学习Css3.0选择符的时候,参考了<CSS3.0参考手册>.有个地方没有说明,于是被坑了半个小时呀! 在这里和大家分享一下,在选择符分类那里,有一类是属性选择符是通过字串来匹配的! 形式有以下几种: 属性名选择符E[att] -- 匹配文档中具有att属性的E元素属性值选择符E[att=val] -- 匹配文档中具有att属性且其值为val的E元素E[att~=val] -- 匹配文档中具有att属性且其中一个值(多个值使用空格分隔)为val(val不能包含空格)的E元素E[att|=va

JQuery 多属性选择节点

JQuery 1.6.0+以后用prop()代替attr(); 多属性选择节点 $("input[type=checkbox][name='first2'][value='first4']"). 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html

jquery-checkbox的属性选择判断

------------------------------------------------------checkbox的属性选择判断: <script type="text/javascript"> $(function(){ alert("start"); alert($(".parentchack").attr("checked")); if($(".parentchack").att

arcgis engine 获取高亮Feature、element

转自原文 arcgis engine 获取高亮Feature.element IGraphicsContainer pGraphicsC =  mainAxMapControl.Map as IGraphicsContainer;  IGraphicsContainerSelect pGraphicsCSelect = pGraphicsC as IGraphicsContainerSelect; IEnumElement pEnumEle = pGraphicsCSelect.Selected

属性选择符和字体样式

属性选择符: body内的代码如下: <a href="##" class="columnNews">我的背景想变成红色</a> <a href="##" class="columnVideo">我的背景想变成红色</a> <a href="##" class="columnAboutUs">我的背景想变成红色</a>

决策树归纳(ID3属性选择度量)Java实现

一般的决策树归纳框架见之前的博文:http://blog.csdn.net/zhyoulun/article/details/41978381 ID3属性选择度量原理 ID3使用信息增益作为属性选择度量.该度量基于香农在研究消息的值或"信息内容"的信息论方面的先驱工作.该结点N代表或存放分区D的元组.选择具有最高信息增益的属性作为结点N的分裂属性.该属性使结果分区中对元祖分类所需要的信息量最小,并反映这些分区中的最小随机性或"不纯性".这种方法使得对一个对象分类所需

CSS属性选择符

属性选择符: E[att] 选择具有att属性的E元素. <style type="text/css"> a[class]{ background-color: red;} </style> <body> <a href="" class="a">链接a</a> <a href="" id="b">链接b</a> </

数据仓库专题(8)-维度属性选择之维护历史是否应该保留

一.背景 数据仓库建模过程中,针对事务型事实表设计,经常会遇到维度属性选择的问题,比如客户维度,在操作型系统中,为了跟踪客户状态的变化,往往会附加客户记录的四个属性: 1.add time:添加时间: 2.add user:添加用户: 3.mod time:修改时间: 4.mod user:修改用户: 问题在于,当我们进行维度建模的时候,如果以客户作为维度,是否应该考虑以上四个属性? 二.观点 1.应该保留 (1)我觉得 添加时间 可以作为维度属性,以后可能进行相关的统计: 2.不应该保留 (1