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]傳遞給上面的高亮函數即可


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM