博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
openlayers 2 高亮显示元素以及通过属性查询高亮某一元素
阅读量:6439 次
发布时间:2019-06-23

本文共 2372 字,大约阅读时间需要 7 分钟。

本文参考官网例子,略作修改,直接上代码:

1、实现hover和click高亮显示

var map, controls;        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';        var vectors;        var highlightCtrl;        function init(){            map = new OpenLayers.Map('map');            vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: true});            map.addLayers([vectors]);            var feature = new OpenLayers.Feature.Vector(                OpenLayers.Geometry.fromWKT(                    "POLYGON((28.828125 0.3515625, 132.1875 -13.0078125, -1.40625 -59.4140625, 28.828125 0.3515625))"                )            );            vectors.addFeatures([feature]);            var feature2 = new OpenLayers.Feature.Vector(                OpenLayers.Geometry.fromWKT(                    "POLYGON((-120.828125 -50.3515625, -80.1875 -80.0078125, -40.40625 -20.4140625, -120.828125 -50.3515625))"                )            );            vectors.addFeatures([feature2]);            var report = function(e) {                OpenLayers.Console.log(e.type, e.feature.id);            };                        highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {                hover: true,                highlightOnly: true,                renderIntent: "temporary",                eventListeners: {                    beforefeaturehighlighted: report,                    featurehighlighted: report,                    featureunhighlighted: report                }            });            var selectCtrl = new OpenLayers.Control.SelectFeature(vectors,                {clickout: true}            );            map.addControl(highlightCtrl);            map.addControl(selectCtrl);            highlightCtrl.activate();            selectCtrl.activate();            map.setCenter(new OpenLayers.LonLat(0, 0), 1);        }

2、实现属性查询高亮某一元素,此处简单的通过button的click事件测试,代码如下:

备注:使用hightlight和unhighlight是一样的效果

//高亮显示      function mySelect() {            console.log(vectors.features);            var feature = vectors.features[0];            highlightCtrl.select(feature);        }      //取消高亮显示        function myUnselect() {            var feature = vectors.features[0];            highlightCtrl.unselect(feature);        }

3、通过属性查询获得features

var features = vectorlayer.getFeaturesByAttribute("name", "名称");

将得到的features[0]传递给上面的高亮函数即可

转载于:https://www.cnblogs.com/marost/p/6553586.html

你可能感兴趣的文章
浅谈当下网页设计趋势
查看>>
TCP 滑动窗口和 拥塞窗口
查看>>
VS2008调试程序时出现"XXX mutex not created."
查看>>
解决Java连接MySQL存储过程返回参数值为乱码问题
查看>>
c++ 字符检测 TCharacter
查看>>
MalformedObjectNameException: Invalid character '' in value part of property
查看>>
Hadoop格式化HDFS报错java.net.UnknownHostException: localhost.localdomain: localhost.localdomain
查看>>
android 40 Io编程
查看>>
STL之Vector(不定长数组)
查看>>
Ext江湖
查看>>
一起谈.NET技术,实战ASP.NET大规模网站架构:Web加速器
查看>>
RHEL 6.6下Python 2.6.6升级到Python 3.6.6
查看>>
linux 内核启动过程以及挂载android 根文件系统的过程 ( 转)
查看>>
shell每日更新(7)
查看>>
单词的个数
查看>>
从程序员到项目经理(27):怎样给领导汇报工作
查看>>
eclipse工程 'cocostudio/CocoStudio.h' file not found
查看>>
045医疗项目-模块四:采购单模块—采购单提交(Dao,Service,Action三层)
查看>>
dockerfile创建php容器(安装memcached、redis、gd、xdebug扩展)
查看>>
转:面对JXTA,我迷茫了
查看>>