zoukankan      html  css  js  c++  java
  • openlayers 2 高亮显示元素以及通过属性查询高亮某一元素

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

    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]传递给上面的高亮函数即可

  • 相关阅读:
    ubuntu 12.04安装redis2.6.16
    linux常用命令(自我积累)-two
    计算机历年考研复试上机基础题(一)
    PhantomJS爬虫 -----全国高校查询-------计算机科学与技术前50大学
    python3爬虫 -----爬取大学信息并通过matplotlib与numpy绘制结果-----from最好大学网
    51Nod 1265 四点共面
    算法训练 出现次数最多的整数
    51nod 1101 换零钱 (完全背包)
    Poj3624 Charm Bracelet (01背包)
    Poj1258 Agri-Net (最小生成树 Prim算法 模板题)
  • 原文地址:https://www.cnblogs.com/marost/p/6553586.html
Copyright © 2011-2022 走看看