Javascript 单击一行并打开弹出窗口OpenLayers 3
我正在将一个GPX文件加载到我的OL3代码中。现在,我想用一些额外的信息来说明GPX使之成为可点击的。现在我找不到一种方法来点击为路线画的线。我可以使用什么样的侦听器 我不想点击整个地图,只想点击线条 我尝试将click/singleclick附加到vector,但没有效果 有什么办法吗 我的代码:Javascript 单击一行并打开弹出窗口OpenLayers 3,javascript,openlayers-3,Javascript,Openlayers 3,我正在将一个GPX文件加载到我的OL3代码中。现在,我想用一些额外的信息来说明GPX使之成为可点击的。现在我找不到一种方法来点击为路线画的线。我可以使用什么样的侦听器 我不想点击整个地图,只想点击线条 我尝试将click/singleclick附加到vector,但没有效果 有什么办法吗 我的代码: var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); var style = { 'LineStrin
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var style = {
'LineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000',
width: 3
})
}),
'MultiLineString': new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#000',
width: 3
})
})
};
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'kust.gpx',
format: new ol.format.GPX()
}),
style: function(feature) {
return style[feature.getGeometry().getType()];
}
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
尝试在地图上添加单击,并在处理程序中检查单击的特征。例如:
map.on('click', displayFeatureInfo);
function displayFeatureInfo( evt ){
//get pixel position of click event
var pixel = evt.pixel;
var features = [];
//loop through all features under this pixel coordinate
//and save them in array
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
features.push(feature)
});
//the top most feature
var target = features[0];
//...rest of code
target.get('customProp')
}
var myFeature = new ol.Feature({
geometry: ...,
labelPoint: ..,
name:...,
customProp1: ...,
anothercustomProp: ...
})
编辑
通过向传递的对象插入额外的属性,您可以在功能中添加一些额外的功能。例如:
map.on('click', displayFeatureInfo);
function displayFeatureInfo( evt ){
//get pixel position of click event
var pixel = evt.pixel;
var features = [];
//loop through all features under this pixel coordinate
//and save them in array
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
features.push(feature)
});
//the top most feature
var target = features[0];
//...rest of code
target.get('customProp')
}
var myFeature = new ol.Feature({
geometry: ...,
labelPoint: ..,
name:...,
customProp1: ...,
anothercustomProp: ...
})
Clickevent似乎有效。现在来看第2步:我能不能以某种方式将自定义数据添加到向量中,我可以在该函数中获取这些数据?没关系。通过矢量样式方法中的jQuery添加数据修复:@CaptainCarl添加了如何在功能内部传递额外信息,比jQuery方法更快、更简单……这是。除了我没有手动制作这个特性,因为它是我加载的GPX文件。有什么建议吗?@CaptainCarl我已经不在我的办公桌上了,所以我无法测试它,但是你试过循环这些功能并添加它们吗?类似于mySource.forEachFeaturefunction_feature{addProperties here…};