select-feature openlayers2.13.1矢量图层的要素选择 框选 点选

<!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 Layer.Vector</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">
	    
        var map, drawControls;
        //定义要素的矢量图的样式的线宽
        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;
			//?: 运算符是 if...else 语句的快捷方式
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
			
			
			//声明并初始化一个矢量图层
            var vectors = new OpenLayers.Layer.Vector("Vector Layer", {
                renderers: renderer
            });
			
            vectors.events.on({
                'featureselected': function(feature) {
                    document.getElementById('counter').innerHTML = this.selectedFeatures.length;
                },
                'featureunselected': function(feature) {
                    document.getElementById('counter').innerHTML = this.selectedFeatures.length;
                }
            });
			//map添加2个图层
            map.addLayers([wmsLayer, vectors]);
			
            map.addControl(new OpenLayers.Control.LayerSwitcher());
			
            //5个控制器
            drawControls = {
				//点
                point: new OpenLayers.Control.DrawFeature(
                    vectors, OpenLayers.Handler.Point
                ),
				//线
                line: new OpenLayers.Control.DrawFeature(
                    vectors, OpenLayers.Handler.Path
                ),
				//多边形
                polygon: new OpenLayers.Control.DrawFeature(
                    vectors, OpenLayers.Handler.Polygon
                ),
				//选择
                select: new OpenLayers.Control.SelectFeature(
                    vectors,
                    {
                        clickout: false, toggle: false,
                        multiple: false, hover: false,
                        toggleKey: "ctrlKey", // ctrl key removes from selection
                        multipleKey: "shiftKey", // shift key adds to selection
                        box: true
                    }
                ),
				//悬浮选择
                selecthover: new OpenLayers.Control.SelectFeature(
                    vectors,
                    {
                        multiple: false, hover: true,
                        toggleKey: "ctrlKey", // ctrl key removes from selection
                        multipleKey: "shiftKey" // shift key adds to selection
                    }
                )
            };
            //map添加5个控制器
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
			//设置map的中心点
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);

        }
		//5大功能切换
        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
					//激活控制器
                    control.activate();
                } else {
					//关闭控制器
                    control.deactivate();
                }
            }
        }
		//处理两个多选框处理
        function update() {
			//选中点击空白处的配置
            var clickout = document.getElementById("clickout").checked;
            if(clickout != drawControls.select.clickout) {
                drawControls.select.clickout = clickout;
            }
			//选中框选后的配置
            var box = document.getElementById("box").checked;
            if(box != drawControls.select.box) {
                drawControls.select.box = box;
                if(drawControls.select.active) {
					//重新激活选择控制器
                    drawControls.select.deactivate();
                    drawControls.select.activate();
                }
            }
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">OpenLayers Select Feature Example</h1>
    <div id="tags">
        vector, feature, selecting, selection, advanced
    </div>        
    <p id="shortdesc">
      Select a feature on hover or click with the Control.SelectFeature on a vector layer.
	  使用悬浮或者点击操作选择一个要素。在矢量图层上选择要素。(一般每个矢量图层上都可以放置N多个要素。)
    </p>  
    <div id="map" class="smallmap"></div>
    <ul id="controlToggle">
        <li>
            <input type="radio" name="type" value="none" id="noneToggle"
                   onclick="toggleControl(this);" checked="checked" />
            <label for="noneToggle">navigate导航菜单</label>
        </li>
        <li>
            <input type="radio" name="type" value="point" id="pointToggle"
                   onclick="toggleControl(this);" />
            <label for="pointToggle">draw point画点</label>
        </li>
        <li>
            <input type="radio" name="type" value="line" id="lineToggle"
                   onclick="toggleControl(this);" />
            <label for="lineToggle">draw line画线</label>
        </li>
        <li>
            <input type="radio" name="type" value="polygon" id="polygonToggle"
                   onclick="toggleControl(this);" />
            <label for="polygonToggle">draw polygon画多边形</label>
        </li>
        <li>
            <input type="radio" name="type" value="selecthover" id="selecthoverToggle"
                   onclick="toggleControl(this);" />
            <label for="selecthoverToggle">Select features on hover悬浮时选择要素</label>
        </li>
        <li>
            <input type="radio" name="type" value="select" id="selectToggle"
                   onclick="toggleControl(this);" />
            <label for="selectToggle">select feature 选择要素(<span id="counter">0</span> features selected)</label>
            <ul>
                <li>
                    <input id="box" type="checkbox" checked="checked"
                           name="box" onchange="update()" />
                    <label for="box">select features in a box框选要素</label>
                </li>
                <li>
                    <input id="clickout" type="checkbox"
                           name="clickout" onchange="update()" />
                    <label for="clickout">click out to unselect features点击空白取消选择要素</label>
                </li>
            </ul>
        </li>
    </ul>
    <p>Use the shift key to select multiple features.  Use the ctrl key to
    toggle selection on features one at a time.  Note: the "clickout" option has no
    effect when "hover" is selected.用shift键添加要素。用ctrl键减去要素。</p>
  </body>
</html>

转载自:https://blog.csdn.net/u010299411/article/details/73359774

You may also like...