Question

使用Openlayers 2 drawline功能例子我尝试在每次单击以创建新线段时触发“click”事件。代码在没有drawfeature线的情况下运行良好，但是一旦添加它，单击事件就不会检测。似乎点击事件没有传播！参见下面的代码非常基本

            <!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>Draw Feature Example</title>

                    <link rel="stylesheet" href="files/style.css" type="text/css">
                    <link rel="stylesheet" href="files/style(1).css" type="text/css">
                    <style type="text/css">
                        #controlToggle li {
                            list-style: none;
                        }
                        p {
                            width: 512px;
                        }

                        /* avoid pink tiles */
                        .olImageLoadError {
                            background-color: transparent !important;
                        }
                    </style>
                    <script src="files/OpenLayers.js"></script>
                    <script type="text/javascript">
                        var map, drawControls;
                        //*****************************************************************************//
                        // An OpenLayer's control class for capturing click events...
                        //*****************************************************************************//
                        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                            defaultHandlerOptions: {
                                'single': true,
                                'double': true,
                                'pixelTolerance': 0,
                                'stopSingle': false,
                                'stopDouble': false
                            },
                            handleRightClicks: true,
                            initialize: function (options) {
                                this.handlerOptions = OpenLayers.Util.extend(
                                    {}, this.defaultHandlerOptions
                                );
                                OpenLayers.Control.prototype.initialize.apply(
                                    this, arguments
                                );
                                this.handler = new OpenLayers.Handler.Click(
                                    this, this.eventMethods, this.handlerOptions
                                );
                            },
                                CLASS_NAME: "OpenLayers.Control.Click"
                        });
                        //*****************************************************************************//
                        //*****************************************************************************//

                        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 lineLayer = new OpenLayers.Layer.Vector("Line Layer");

                            map.addLayers([wmsLayer, lineLayer]);
                            map.addControl(new OpenLayers.Control.MousePosition());

                            var line = new OpenLayers.Control.DrawFeature(lineLayer,
                                OpenLayers.Handler.Path,                    
                                {
                                    single: true,
                                    double: true,
                                    stopDouble: false,
                                    stopSingle: false
                                });


                            var lineClick = new OpenLayers.Control.Click({eventMethods:{
                                'click' : function (e) {
                                        console.log('CLICK !');
                                    },
                                'dblclick' : function (e) {
                                    console.log('DBCLICK !');
                                    }   
                                }
                            }); 

                            map.addControl(lineClick);
                            map.addControl(line);

                            line.activate();
                            lineClick.activate();
                            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
                        }

                    </script>
                </head>
                <body onload="init()">
                    <h1 id="title">OpenLayers 2 Draw Feature Example</h1>
                    <div id="map" class="smallmap"></div>
                    <div id="docs">
                        <p>With the line drawing control active, click on the map to add the points that make up your line.
                        Double-click to finish drawing.</p>
                    </div>
                </body>
            </html>

Answer 1

我认为你不能有两个监听同一事件的活动控件。

如果您想在绘图期间在每次点击时执行某些操作，可以使用名为“point”的OpenLayers.Handler.Path回调。

这样的事情可以解决问题

var line = new OpenLayers.Control.DrawFeature(lineLayer,
    OpenLayers.Handler.Path,                    
    {
        single: true,
        double: true,
        stopDouble: false,
        stopSingle: false,
        callbacks: {
            point: function() {
                console.log('click');
            }
        }
    });

回调对象与控件的默认回调合并，并传递给处理程序。

<Openlayers 2>使用drawfeature行时，click事件不会触发

1 个答案: