`

OpenLayers 选中元素弹框

OpenLayersPopupSelectFeature 
阅读更多
写道
http://www.openlayers.org/dev/examples/select-feature-openpopup.html
 <!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>Open Popup 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="../OpenLayers.js"></script>
    <script type="text/javascript">
        var map, drawControls, selectControl, selectedFeature;
        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        function onFeatureSelect(feature) {
            selectedFeature = feature;
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>",
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }    
        function init(){
            map = new OpenLayers.Map('map');
            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); 

            var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");

            map.addLayers([wmsLayer, polygonLayer]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            
            selectControl = new OpenLayers.Control.SelectFeature(polygonLayer,
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
            drawControls = {
                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
                            OpenLayers.Handler.Polygon),
                select: selectControl
            };
            
            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();
                }
            }
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Open Popup on Layer.Vector</h1> 
    <div id="tags">
        vector, feature, selecting, selection, popup
    </div>    
    <p id="shortdesc">
      Using a Control.SelectFeature, open a popup on click.
    </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="polygon" id="polygonToggle"
                   onclick="toggleControl(this);" />
            <label for="polygonToggle">draw polygon</label>
        </li>
        <li>
            <input type="radio" name="type" value="select" id="selectToggle"
                   onclick="toggleControl(this);" />
            <label for="selectToggle">select polygon on click</label>
        </li>
    </ul>       
    <p>It is possible to use the onSelect/onUnselect hooks on the SelectFeature
       to do fun things -- like open a popup.
    </p>   
  </body>
</html>

 

分享到：
| 搜索框默认值处理
评论
发表评论

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

相关推荐

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