openlayers之selectfeature

来源：互联网发布：ocanvas.js 编辑：程序博客网时间：2024/06/07 14:15

概述：

在本文叙述如何在openlayers中实现鼠标经过某一对象时，对象高亮；点击某一对象时，弹出该对象的信息。重点为OpenLayers.Layer.Vector和OpenLayers.Control.SelectFeature，下面开始讲解。

效果：

鼠标经过高亮显示对象名称

鼠标点击显示对象信息

实现：

1、创建地图，添加地图

        var map1, vectors;        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';        $(function(){            var bounds = new OpenLayers.Bounds(                    73.45100463562233, 18.16324718764174,                    134.97679764650596, 53.531943152223576            );            var options = {                controls: [],                maxExtent: bounds,                maxResolution: 0.2403351289487642,                projection: "EPSG:4326",                units: 'degrees'            };            map1 = new OpenLayers.Map('map1', options);            map1.addLayer(getWms("china"));            map1.addControl(new OpenLayers.Control.Zoom());            map1.addControl(new OpenLayers.Control.Navigation());            map1.zoomToExtent(bounds);            addVectors();        });

2、添加矢量图层Vector，并添加测试对象

            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;            vectors = new OpenLayers.Layer.Vector("Vector Layer", {                renderers: renderer            });            map1.addLayer(vectors);            var wkts = [                "POINT(107.5758285931443 29.7822116459692)",                "LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",                "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"            ];            var wktFormat = new OpenLayers.Format.WKT();            for(var i= 0,dl=wkts.length;i<dl;i++){                var geometry = wktFormat.read(wkts[i]);                vectors.addFeatures(geometry);            }

3、添加鼠标高亮

            var selecthover = new OpenLayers.Control.SelectFeature(                    vectors,                    {                        hover: true,                        highlightOnly:true                    }            );            map1.addControl(selecthover);            map1.addControl(select);            selecthover.activate();            selecthover.events.on({                'featurehighlighted': function(feature) {                    var sFch = feature.feature;                    var pt = sFch.geometry.getBounds().getCenterLonLat();                    var scrPt = map1.getPixelFromLonLat(pt);                    var div = $("<div />").appendTo($("#map1")).html(scrPt.x+","+scrPt.y).css("position","absolute")                            .css("z-index","1001").css("background","#000").css("color","#fff").css("padding","5px 8px")                            .css("left",scrPt.x+"px").css("top",scrPt.y+"px").attr("id","div");                },                'featureunhighlighted': function(feature) {                    $("#div").remove();                }            });

4、添加点击对象显示信息

            var select =  new OpenLayers.Control.SelectFeature(                    vectors,                    {                        clickout: true,                        toggle: false,                        multiple: false,                        hover: false,                        toggleKey: "ctrlKey", // ctrl key removes from selection                        multipleKey: "shiftKey", // shift key adds to selection                        box: true                    }            );            select.activate();            var selected;            vectors.events.on({                'featureselected': function(feature) {                    $("#div").remove();                    var selectedFeature = feature.feature;                    selected = selectedFeature;                    var pt = selectedFeature.geometry.getBounds().getCenterLonLat();                    var popup=new OpenLayers.Popup("city",                            pt,                            new OpenLayers.Size(230,20),                            "坐标："+pt.lon+","+pt.lat,                            true,                            onPopupClose                    );                    popup.setBorder("1px solid #999");                    selectedFeature.popup = popup;                    map1.addPopup(popup,true);                },                'featureunselected': function(feature) {                    var selectedFeature = feature.feature;                    map1.removePopup(selectedFeature.popup);                    selectedFeature.popup=null;                }            });            function onPopupClose(){                select.unselect(selected);            }

注：

在实现鼠标经过高亮和点击对象显示属性都用到了OpenLayers.Control.SelectFeature，注意两者参数设置的区别！

完整代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>openlayers map</title>    <link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">    <style>        html, body{            padding:0;            margin:0;            height:100%;            width:100%;            overflow: hidden;            font-size: 12px;        }        #map1{            width: 100%;            height: 100%;            float: left;            border-right: 1px solid #000000;        }    </style>    <script src="http://localhost/olapi/OpenLayers.js"></script>    <script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>    <script src="http://localhost/jquery/jquery-1.8.3.js"></script>    <script>        var map1, vectors;        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';        $(function(){            var bounds = new OpenLayers.Bounds(                    73.45100463562233, 18.16324718764174,                    134.97679764650596, 53.531943152223576            );            var options = {                controls: [],                maxExtent: bounds,                maxResolution: 0.2403351289487642,                projection: "EPSG:4326",                units: 'degrees'            };            map1 = new OpenLayers.Map('map1', options);            map1.addLayer(getWms("china"));            map1.addControl(new OpenLayers.Control.Zoom());            map1.addControl(new OpenLayers.Control.Navigation());            map1.zoomToExtent(bounds);            addVectors();        });        function getWms(layer){            return new OpenLayers.Layer.WMS(                    "Geoserver layers - Tiled",                    "http://localhost:8081/geoserver/lzugis/wms",                    {                        "LAYERS": layer,                        "STYLES": '',                        format: 'image/png'                    },                    {                        buffer: 0,                        displayOutsideMaxExtent: true,                        isBaseLayer: true,                        yx : {'EPSG:4326' : true}                    }            );        }        function addVectors(){            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;            vectors = new OpenLayers.Layer.Vector("Vector Layer", {                renderers: renderer            });            map1.addLayer(vectors);            var wkts = [                "POINT(107.5758285931443 29.7822116459692)",                "LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",                "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"            ];            var wktFormat = new OpenLayers.Format.WKT();            for(var i= 0,dl=wkts.length;i<dl;i++){                var geometry = wktFormat.read(wkts[i]);                vectors.addFeatures(geometry);            }            var select =  new OpenLayers.Control.SelectFeature(                    vectors,                    {                        clickout: true,                        toggle: false,                        multiple: false,                        hover: false,                        toggleKey: "ctrlKey", // ctrl key removes from selection                        multipleKey: "shiftKey", // shift key adds to selection                        box: true                    }            );            var selecthover = new OpenLayers.Control.SelectFeature(                    vectors,                    {                        hover: true,                        highlightOnly:true                    }            );            map1.addControl(selecthover);            map1.addControl(select);            selecthover.activate();            selecthover.events.on({                'featurehighlighted': function(feature) {                    var sFch = feature.feature;                    var pt = sFch.geometry.getBounds().getCenterLonLat();                    var scrPt = map1.getPixelFromLonLat(pt);                    var div = $("<div />").appendTo($("#map1")).html(scrPt.x+","+scrPt.y).css("position","absolute")                            .css("z-index","1001").css("background","#000").css("color","#fff").css("padding","5px 8px")                            .css("left",scrPt.x+"px").css("top",scrPt.y+"px").attr("id","div");                },                'featureunhighlighted': function(feature) {                    $("#div").remove();                }            });            select.activate();            var selected;            vectors.events.on({                'featureselected': function(feature) {                    $("#div").remove();                    var selectedFeature = feature.feature;                    selected = selectedFeature;                    var pt = selectedFeature.geometry.getBounds().getCenterLonLat();                    var popup=new OpenLayers.Popup("city",                            pt,                            new OpenLayers.Size(230,20),                            "坐标："+pt.lon+","+pt.lat,                            true,                            onPopupClose                    );                    popup.setBorder("1px solid #999");                    selectedFeature.popup = popup;                    map1.addPopup(popup,true);                },                'featureunselected': function(feature) {                    var selectedFeature = feature.feature;                    map1.removePopup(selectedFeature.popup);                    selectedFeature.popup=null;                }            });            function onPopupClose(){                select.unselect(selected);            }        }    </script></head><body>    <div id="map1"></div></body></html>

1 0