Ionic：未处理 OpenLayers 中的鼠标事件

Question

我正在尝试使用以下代码处理 OpenStreetMaps 上的鼠标双击事件：

var map = new OpenLayers.Map("basicMap");

var mapnik = new OpenLayers.Layer.OSM();

var fromProjection = new OpenLayers.Projection("EPSG:4326");

// Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913");

// to Spherical Mercator Projection
var position = new OpenLayers.LonLat(13.41,52.52).transform(fromProjection, toProjection);

var zoom = 15;

map.addLayer(mapnik);
map.setCenter(position, zoom );

var markers = new OpenLayers.Layer.Markers( "Markers" );

map.addLayer(markers);

OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
{
    defaultHandlerOptions:
    {
        'single': true,
        'double': true,
        '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.getLonLatFromViewPortPx(e.xy);

        alert("clicked");

        alert("Lat, Lon : " + lonlat.lat + ", " + lonlat.lng);

        markers.addMarker(new OpenLayers.Marker(lonlat));
    },

    touchstart: function(e)
    {
        console.log();
    },

    touchend: function(e)
    {
        console.log();
    },

    handleSingle: function(e)
    {
        console.log();
    }
});

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

但是，在做了一些测试之后。尽管在正确显示地图时我在控制台上没有发现任何错误，但从未显示消息 "clicked"。

那么上面的代码有什么问题吗？如何解决这个问题？

注意：我使用的是 Ionic 框架。

任何帮助将不胜感激。

谢谢。

Answer 1

OpenLayers.Map 不触发点击事件。

你应该定义一个 "Click" 控件（在 OpenLayers 2 中缺失），像这样（来自 http://dev.openlayers.org/examples/click.html ）

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);
        alert("You clicked near " + lonlat.lat + " N, " +
                                  + lonlat.lon + " E");
    }
});

通过将您的逻辑放入其中或触发点击事件来实现触发器功能。然后在你的代码中使用控件

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

您可以在此处找到点击处理程序选项 http://dev.openlayers.org/apidocs/files/OpenLayers/Handler/Click-js.html

比如需要处理双击，就应该把double属性改成true。

Ionic：未处理 OpenLayers 中的鼠标事件

Ionic: mouse event within OpenLayers wasn't handled

javascript

openlayers

angularjs

cordova

ionic-framework