OpenLayers-2.13.1 用选择器框选多个矢量图层中的多个要素

来源：互联网发布：hr管理软件知乎编辑：程序博客网时间：2024/05/22 05:00
map中共有3个图层，一个是wms的地图，另外两个是矢量图层。map中共有2个控制器，一个是图层切换控制器，这个控制器可以没有。另外一个控制器是矢量图层的要素选择控制器。
注意：1、矢量图层在初始化的时候要定义内部要素的样式。
2、要素选择控制器的配置。
3、要素选择事件要注册。
<!DOCTYPE html><html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <title>SelectFeature Control on multiple vector layers</title>     <link rel="stylesheet" href="../theme/default/style.css" type="text/css">    <link rel="stylesheet" href="style.css" type="text/css">    <style type="text/css">        #controlToggle li {            list-style: none;        }    </style>    <script src="../lib/OpenLayers.js"></script>    <script type="text/javascript">//声明map和选择控制器        var map, selectControl;//设置默认矢量要素的线宽2        OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';        function init(){//初始化map            map = new OpenLayers.Map('map');//声明一个wms图层            var wmsLayer = new OpenLayers.Layer.WMS(                "OpenLayers WMS",                 "http://vmap0.tiles.osgeo.org/wms/vmap0",                {layers: 'basic'}            );             // allow testing of specific renderers via "?renderer=Canvas", etc            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;//声明一个矢量图层和定义图层里面要素的样式(默认显示图片,选中后显示另一个图片）            var vectors1 = new OpenLayers.Layer.Vector("Vector Layer 1", {                renderers: renderer,                styleMap: new OpenLayers.StyleMap({                    "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({                        externalGraphic: "../img/marker-green.png",                        graphicOpacity: 1,                        rotation: -45,                        pointRadius: 10                    }, OpenLayers.Feature.Vector.style["default"])),                    "select": new OpenLayers.Style({                        externalGraphic: "../img/marker-blue.png"                    })                })            });//声明另一个矢量图层和定义图层里面要素的样式             var vectors2 = new OpenLayers.Layer.Vector("Vector Layer 2", {                renderers: renderer,                styleMap: new OpenLayers.StyleMap({                    "default": new OpenLayers.Style(OpenLayers.Util.applyDefaults({                        fillColor: "red",                        strokeColor: "gray",                        graphicName: "square",                        rotation: 45,                        pointRadius: 15                    }, OpenLayers.Feature.Vector.style["default"])),                    "select": new OpenLayers.Style(OpenLayers.Util.applyDefaults({                        graphicName: "square",                        rotation: 45,                        pointRadius: 15                    }, OpenLayers.Feature.Vector.style["select"]))                })            });//地图添加2个矢量图层            map.addLayers([wmsLayer, vectors1, vectors2]);//地图添加图层控制器            map.addControl(new OpenLayers.Control.LayerSwitcher());            //初始化选择控制器            selectControl = new OpenLayers.Control.SelectFeature(                [vectors1, vectors2],//注意此行，这是选择控制器的目标图层，这里有2个                {                    clickout: true, //点击空白取消选择toggle: false,box: true,//允许框选                    multiple: false, hover: false,                    toggleKey: "ctrlKey", // ctrl key removes from selection                    multipleKey: "shiftKey" // shift key adds to selection                }            );            //地图添加选择控制器            map.addControl(selectControl);//激活选择控制器            selectControl.activate();//设置地图中心点            map.setCenter(new OpenLayers.LonLat(0, 0), 3);//两个矢量图层里面添加要素            vectors1.addFeatures(createFeatures());            vectors2.addFeatures(createFeatures());            //注册矢量图层的要素选中事件和取消选中事件            vectors1.events.on({                "featureselected": function(e) {                    showStatus("selected feature "+e.feature.id+" on Vector Layer 1");                },                "featureunselected": function(e) {                    showStatus("unselected feature "+e.feature.id+" on Vector Layer 1");                }            });            vectors2.events.on({                "featureselected": function(e) {                    showStatus("selected feature "+e.feature.id+" on Vector Layer 2");                },                "featureunselected": function(e) {                    showStatus("unselected feature "+e.feature.id+" on Vector Layer 2");                }            });        }        //返回10个点要素        function createFeatures() {            var extent = map.getExtent();            var features = [];            for(var i=0; i<10; ++i) {                features.push(new OpenLayers.Feature.Vector(                    new OpenLayers.Geometry.Point(extent.left + (extent.right - extent.left) * Math.random(),                    extent.bottom + (extent.top - extent.bottom) * Math.random()                )));            }            return features;        }                function showStatus(text) {            document.getElementById("status").innerHTML = text;                    }    </script>  </head>  <body onload="init()">    <h1 id="title">OpenLayers Select Feature on Multiple Layers Example</h1>    <div id="tags">        vector, feature, selecting, selection, advanced, light    </div>         <p id="shortdesc">      Select a feature on click with the Control.SelectFeature on multiple       vector layers.    </p>      <div id="map" class="smallmap"></div>    <div id="status"></div>  </body></html>
阅读全文
0 0