Question

当用户点击该行时，需要显示弹出窗口。代码如下，但不起作用：

        var ClickLon;
        var ClickLat;

        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
            defaultHandlerOptions: {
                'single': true,
                'double': false,
                'pixelTolerance': 0,
                'stopSingle': false,
                'stopDouble': false
            },

            initialize: function(options) {
                this.handlerOptions = OpenLayers.Util.extend(
                    {}, this.defaultHandlerOptions
                );
                OpenLayers.Control.prototype.initialize.apply(
                    this, arguments
                );
                this.handler = new OpenLayers.Handler.Click(
                    this, {
                        'click': this.trigger
                    }, this.handlerOptions
                );
            },

            trigger: function(e) {
                var lonlat = map.getLonLatFromPixel(e.xy);
                ClickLon = lonlat.lon;
                ClickLat = lonlat.lat;
            }

        });


        function onPopupClose(evt) {
            selectControl.unselect(selectedFeature);
        }
        function onFeatureSelect(feature) {
            selectedFeature = feature;
            id = feature.id;
            alert(ClickLon);
            var lonLat = new OpenLayers.LonLat(ClickLon, ClickLat).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

            popup = new OpenLayers.Popup.FramedCloud("chicken",
                                    lonLat,
                                    null,
                                    "<div style='font-size:.8em'>" +CableLineText_arr[id]  +"</div>",
                                    null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(feature) {
            map.removePopup(feature.popup);
            feature.popup.destroy();
            feature.popup = null;
        }
...
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path)); 

var click = new OpenLayers.Control.Click();
    map.addControl(click);
    click.activate();

    selectControl = new OpenLayers.Control.SelectFeature(lineLayer,
             {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});

    drawControls = {
                polygon: new OpenLayers.Control.DrawFeature(lineLayer,
                            OpenLayers.Handler.Polygon),
                select: selectControl
            };

            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }

地图投影是EPSG：4326。

画线为：

var points = new Array(
        new OpenLayers.Geometry.Point(47, 32.24),
        new OpenLayers.Geometry.Point(45, 33),
        new OpenLayers.Geometry.Point(49, 35)
    );

    var line = new OpenLayers.Geometry.LineString(points);
    line.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

    var style = { 
        strokeColor: '#0000ff', 
        strokeOpacity: 0.5,
        strokeWidth: 5
    };

    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
    alert(lineFeature.id);
    lineLayer.addFeatures([lineFeature]);

尝试合并这两个示例：http://openlayers.org/dev/examples/select-feature-openpopup.html和http://openlayers.org/dev/examples/click.html

Answer 1

我没有看到您激活控件的位置.SelectFeature。

用户单击该行时显示弹出窗口

1 个答案: