javascript - Openlayers 4 在地图上触发选择功能
问题描述
我有一个网站,您在哪里有地图和地图中的区域列表。
当您单击该区域时,我在地图上添加了选择事件。
// add select features to the map
map.addInteraction(select);
var selectedFeatures = select.getFeatures();
selectedFeatures.on(['add', 'remove'], function() {
var names = selectedFeatures.getArray();
var areasel = [];
names.forEach(function(feature) {
areasel.push(feature.getProperties().Name);
var theCode = feature.getProperties().Code;
$('#bt'+ theCode).click();
});
}); // end on select
当然,当它选择功能改变颜色时。
单击列表时如何触发相同的事件?
$('<p>', {
text: '...'
}).appendTo('#li' + s.code);
$('<button />', {
id: 'bt' + s.code,
class: "custbtn live",
text: "Live",
url: s.url
}).click(function(e) {
// Which function do I need to parse?
// At this point I can have the Name of the feature that i want to select
// s.name but how can I use it to trigger the event on the map?
}).appendTo('#li' + s.code);
这是 WFS 矢量图层。
// UK map source
var vectorSource = new ol.source.Vector({
format: new ol.format.WFS(),
url: function(extent) {
return 'http://www.trafficorders.uk/cgi-bin/mapserv?map=/var/www/vhosts/trafficorders.uk/httpdocs/maps/wfsareas.map&service=WFS&' +
'version=1.1.0&request=GetFeature&typename=la_areas&' +
'outputFormat=text/xml; subtype=gml/3.1.1&srsname=EPSG:27700';
},
strategy: ol.loadingstrategy.all
});
// UK map layer
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: styleFunction
});
解决方案
您是否只是尝试将功能推送到selectedFeatures
阵列中?
var selectedFeatures = select.getFeatures();
$('<p>', {
text: '...'
}).appendTo('#li' + s.code);
$('<button />', {
id: 'bt' + s.code,
class: "custbtn live",
text: "Live",
url: s.url
}).click(function(e) {
selectedFeatures.push(s); //if 's' is actually the feature you got from openLayer?
}).appendTo('#li' + s.code);
推荐阅读
- java - 如何在代码启动时诊断 Guice 注入错误
- laravel - 如何在 API Gateway 上启用 gzip 压缩?
- c++ - 更改命名空间中的变量
- python - 带有cartopy的hvplot热图?包含更多地理细节的热图?
- javascript - 如何在本机反应中减小图像文件大小?
- python - 如何在 Python 的另一个类中使用一个类中的变量?
- javascript - jquery formdata 在 express req.files 中返回 null
- javascript - 使用 fetch javascript 将 Blob 文件发送到节点 js - 不工作
- python - 当月份和年份在不同的列中时,获取月份中的天数
- javascript - 是否可以仅通过 CSS 将子元素移动到父元素上?