如何获得OpenLayers中矢量要素/图层的单击坐标？

15

当用户单击OpenLayers地图上的矢量要素时，我需要获取单击的坐标。SelectControl仅提供被单击的功能，而不提供单击的坐标。无论如何要获得矢量点击的坐标？我需要在用户单击时显示AnchoredBubble。

openlayers-2

— 威仕
source

16

实际上，单击事件示例可为您提供所需的内容。

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

        });

如果需要，可以将坐标转换为像素以显示弹出窗口。

编辑-仅在选择特征时获取坐标：

   var options = {
    onSelect: getCoordinates,
};

var selectEt = new OpenLayers.Control.SelectFeature(mylayer, options);
map.addControl(selectEt);

function getCoordinates(e) {
 // this should work
 var lonlat = map.getLonLatFromViewPortPx(e.xy);
 alert("You clicked near " + lonlat.lat + " N, " +
                                          + lonlat.lon + " E");
}

— 西摩
source

嗨，simo，我只需要在单击我感兴趣的矢量层或要素时才单击click事件。我认为上面的示例捕获并调用了整个地图上的click事件处理程序，而不仅仅是矢量层。Vish谢谢您

— Vish

@Vish：在这种情况下，请参见Tim Schaub的回答和我的编辑内容。

— simo

嗨，simo，getCoordinates方法中的“ e”来自哪里？

— Vish

e是事件。我将其添加到函数getCoordinates（e）的声明中。我确定您可以通过该功能，但不确定该事件。做个测试。

— simo

@simo，它表示onSelect应该被称为具有功能而不是事件：dev.openlayers.org/docs/files/OpenLayers/Control/…–

— 克里斯（Chris）

6

该API不提供一种方式来获得从点击位置SelectFeature控制-但它应该。这将是一个微不足道的添加（已xy包含在featureselected事件中）。如果您对此进行购票，这将是实现它的第一步。

同时，您可以在SelectFeature控件使用的功能处理程序上访问mouse事件。因此，您可能有一个看起来像这样的侦听器：

layer.events.on({featureselected: function(event) {
    // should be event.xy, but it's not available currently
    var pixel = control.handlers.feature.evt.xy;
    var location = map.getLonLatFromPixel(pixel);
    alert("You clicked near " + location);
});

显然，这假定您具有对SelectFeature控件和地图的引用。

— 蒂姆·绍布（Tim Schaub）
source

3

我可以使用以下方法获得click事件的延迟：

内部clickFeature处理程序

var clickedlonlat = 
    Ext.getCmp("coreRef").parent.map.getLonLatFromPixel(
        new OpenLayers.Pixel(
            selectFeatureReference.handlers.feature.evt.layerX,
            selectFeatureReference.handlers.feature.evt.layerY
        ));

您创建selectFeatureReference的引用在哪里SelectFeature。

— 克里斯
source

这行得通，但是我不得不从代码中删除Ext.getCmp（“ coreRef”）。parent

— 马修·洛克

3

map.on('click', function(evt){
    console.log(ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'));
});

这是我在v3.8.2中弄清楚的方式，以便获得如下所示的坐标：
[-1.1645507812500016, 53.2257684357902]
单击英国附近时。

— 坎丹尼尔
source

这是最简单，最简单的方法。可以确认它也适用于v5.3。

— Raidok '18

0

您可以使用feature.getBounds().getCenterLonLat()。适用于点/线/多边形类型特征。而且您不必知道它是什么，因为它适用于所有人。

— 瓦迪姆
source

瓦迪姆，您好，我需要点击的坐标，因为我想将气泡固定在此处而不是在中心。谢谢你，

— Vish

0

如果有人像我一样偶然发现这个老问题，那么在当前最新版本的OpenLayers（3.20.0）中，您可以使用Select事件e.mapBrowserEvent.coordinate在哪里获得点击位置 e。

— 亚当·佛朗哥（Adam Franco）
source