简体   繁体   English

Openlayers 4触发地图上的选择功能

[英]Openlayers 4 trigger select feature on map

I have a website where do you have a map and a list of the regions in the map. 我有一个网站,您在哪里有地图以及地图中的区域列表。

I added the select event on the map when you click on the region. 当您单击区域时,我在地图上添加了选择事件。

// 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

Of course when it selected the feature change color. 当然,选择功能时会更改颜色。

How can I trigger the same event when I click on the list? 单击列表时如何触发同一事件?

  $('<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);

and this is the WFS vector layer. 这是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
});

have you simply tried to push the feature in your selectedFeatures array? 您是否只是尝试过将功能推入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);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM