`

Opanlayers用LineString画多边形

OpenLayersLineString 
阅读更多 
<!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 = new OpenLayers.Map('map');
            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 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.addLayers([wmsLayer, vectors]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
			
			epsg4326 = new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
			projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
			var points = [
				new OpenLayers.Geometry.Point(-0.1279688, 51.5077286).transform(epsg4326, projectTo),
				new OpenLayers.Geometry.Point(-0.119623, 51.503308).transform(epsg4326, projectTo),
				new OpenLayers.Geometry.Point(-0.1244324, 51.5006728).transform(epsg4326, projectTo),
				new OpenLayers.Geometry.Point(-0.1279688, 51.5077286).transform(epsg4326, projectTo)
			];

			var feature = new OpenLayers.Feature.Vector(
				new OpenLayers.Geometry.LineString(points)
			);
			vectors.addFeatures([feature]);
			
            
            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
                    }
                )
            };
            
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);

        }

        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.
    </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.</p>
  </body>
</html>

 

分享到：
| OpenLayers地图联动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics