向OpenLayers 3中的功能添加事件处理程序
Adding event handler to feature in OpenLayers 3?
我正在使用以下代码向OpenLayers 3(OL3)中的矢量层添加功能:
marker = new ol.Feature({
geometry: new ol.geom.Point([longitude, latitude]),
name: "Location Marker"
});
markerStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1.0],
anchorXUnits: "fraction",
anchorYUnits: "fraction",
src: "Content/Images/OpenLayers/marker_trans.png"
}),
zIndex: 100000
});
marker.setStyle(markerStyle);
marker.on("click", function(e) {
// do something
}, marker);
map.getSource().addFeature(marker);
标记按预期显示,但单击事件从不触发。我做错了什么?
我应该注意到,在地图级别已经有一个与"点击"相关的处理程序,即
map.on("click", function(e) {
// do something
}, marker);
第一:功能不会引发点击!有关触发的事件功能的信息,请查看http://openlayers.org/en/master/apidoc/ol.Feature.html.
为了检查某个功能是否被点击,ol的.forEachFeatureAtPixel(pixel, callback)
函数。地图(http://openlayers.org/en/master/apidoc/ol.Map.html#forEachFeatureAtPixel)对像素处的每个特征执行回调。回调传递了两个参数:特性和特性所在的层。
如果您不使用openlayers事件处理程序,而是使用视口上的处理程序,那么很高兴知道.getEventPixel(event)
函数。如果使用openlayers事件处理程序,则该事件具有属性.pixel
。(http://openlayers.org/en/master/apidoc/ol.Map.html#getEventPixel)方法.getEventCoordinate(event)
和.getCoordinateFromPixels(pixels)
可能也是有用的。
所以你会把它这样添加到你的地图上。在("点击",…:
map.on("click", function(e) {
map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
//do something
})
});
与jQuery相同:
$(map.getViewport()).on("click", function(e) {
map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
//do something
});
});
与纯JS相同:
map.getViewport().addEventListener("click", function(e) {
map.forEachFeatureAtPixel(map.getEventPixel(e), function (feature, layer) {
//do something
});
});
您可能还想查看示例,此函数有两种用途,第一种用于openlayers事件,第二种用于jQuery事件:http://openlayers.org/en/master/examples/icon.js
备注
也有可能通过ol.interaction.选择(http://openlayers.org/en/master/apidoc/ol.interaction.Select.html?unstable=true),但对于这种情况来说,这有点过分了。由于开放层内部将所选功能移动到另一个所谓的非托管层,因此它有一些非直观的警告。
无论如何,这是通过向属于交互的集合添加侦听器来实现的。可以使用.getFeatures()
检索集合。
interaction.getFeatures().on("add", function (e) {
// do something. e.element is the feature which was added
});
如果您只想点击地图,这将适用于您。
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
})
],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
map.on("click", function(evt) {
var coord = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
var lon = coord[0];
var lat = coord[1];
alert(lon);
alert(lat);
});
如果你只需要在地图上添加一个可点击的标记,你可以使用覆盖。在HTML标题中定义标记的样式:
<style>
#marker {
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 10px;
background-color: #0FF;
opacity: 0.5;
}
</style>
然后在文件的脚本部分,在地图创建后:
// add marker
var pos = ol.proj.fromLonLat([0.01123, 0.00612]);
var marker = new ol.Overlay({
position: pos,
positioning: 'center-center',
element: $('<div id="marker" title="Marker"></div>')
.popover({
'placement': 'top',
'html': true,
'content': '<strong>anything...</strong>'
})
.on('click', function (e) { $(".location-popover").not(this).popover('hide'); }),
stopEvent: false
});
map.addOverlay(marker);
- 在 javascript 中添加事件处理程序的位置
- 添加事件处理程序以获取按钮单击LeadPage,我可以在其中对正文进行编码
- Tinymce 4 如何添加事件处理程序
- Facebook社交插件:如何在Facebook评论框中为“查看更多”评论添加事件处理程序
- 动态添加事件处理程序
- 在对象创建时添加事件处理程序不起作用
- 向OpenLayers 3中的功能添加事件处理程序
- 如何添加事件处理程序来路由Ember.js中显示的事件
- 使用jQuery添加事件处理程序;不起作用
- 不能向使用. getjson()创建的内容添加事件处理程序
- jQuery添加事件处理程序来评估'ed元素
- 使用jquery为每个事件添加事件处理程序
- 在Javascript中动态添加事件处理程序
- 如何在Javascript中添加事件处理程序
- Javascript -动态地向表单字段添加事件处理程序
- 当我无法控制html时,如何向元素添加事件处理程序
- 尝试使用jQuery向动态内容添加事件处理程序
- 向动态添加的元素添加事件处理程序
- 向数组添加事件处理程序
- 使用mootools添加事件处理程序'. addevent()在某个地方神秘地失败了