Question

我有一张地图，其中包含从geoserver加载的wfs图层，这些要素是使用bbox策略加载的，因为其中有60,000多个要素。我有一个简单的单击功能，可以显示每个功能的信息

map.on('click', function(evt) {
//random stuff to do here
  var pixel = evt.pixel;
  displayFeatureInfo(pixel); //function to get features and display the info
});

对于我的搜索栏，我正在使用easyAutocomplete来搜索每个多边形都有中心坐标的json。它找到包裹，将纬度和经度平移到它上面，然后放大就可以了。

onChooseEvent: function(evt) {
    var parcelValue=$("#name").getSelectedItemData().parcel;
    document.getElementById('name').value=parcelValue;
    var selectedItemCoordX = $("#name").getSelectedItemData().long;
    var selectedItemCoordY = $("#name").getSelectedItemData().lat;
    var valcoordx=parseFloat(selectedItemCoordX);
    var valcoordy=parseFloat(selectedItemCoordY);
    var coords=[valcoordx, valcoordy];
    var pixel = map.getPixelFromCoordinate(coords);
    map.getView().setCenter(ol.proj.transform(coords, 'EPSG:4326', 'EPSG:3857'));
    map.getView().setZoom(19);

  }

如何使用捕获的坐标或像素，一旦选择，就在地图上触发单击，以便一旦移动到该位置，就会触发单击事件，并且将显示弹出窗口，而无需用户手动进行操作它吗？

我已经尝试过在地图，视口和画布上使用.trigger（“ click”），也尝试过使用.click（）和triggerEvent（）函数，但是这些函数均不会产生错误。我也尝试过map.dispatchEvent("click");，这会产生此错误Uncaught TypeError: Cannot read property 'slice' of undefined

Answer 1

如果仍然有人在寻找答案，则可以使用Map对象上的dispatch方法手动分派动作。为此的要求（在此特定用例中）将同时提供类型和像素坐标。因此，例如，触发一条消息：

map.on('click', ({ pixel }) => {
  console.debug(`Pixel ${pixel} was clicked`);
});

您可以执行以下操作：

map.dispatch({
  type: 'click',
  pixel: [100, 100],
});

Answer 2

我从来没有为我的问题找到一个很好的答案，但是我确实找到了解决方法。我切换到自动完成ui，并从ol-ext添加了搜索栏。我将此栏上的可见性设置为隐藏。只要在页面上加载了功能，ol-ext搜索栏就可以轻松搜索任何图层。因此，我使用jQuery自动完成功能从数据库中获取功能ID，在其中搜索数据库（该ID必须唯一且必须填充为零），然后以编程方式在ol-ext搜索栏中将其输入为值。 jQuery栏放大到我的坐标，我设置了超时以确保功能加载和超时，然后以编程方式从ol-ext搜索栏中选择结果以确保其已更新。然后根据ID选择正确的包裹。

$(function() {
    $(".auto").autocomplete({
        delay: 500,
        source: "searchData.php",
        minLength: 3,
        maxLength: 20,
        select: function(event,ui){ 
            idS=ui.item.id;
            var label=ui.item.label;
            var value=ui.item.value;
            $(".auto").val(value);
            var coordx=parseFloat(ui.item.long);
            var coordy=parseFloat(ui.item.lat);
            var coords=[coordx, coordy];
            map.getView().setCenter(ol.proj.transform(coords, 'EPSG:4326', 
                'EPSG:3857'));
            map.getView().setZoom(18);
            $('div.ol-search').removeClass('ol-collapsed');
            setTimeout(function(){search.setInput(idS, search)},300);
            setTimeout(function(){$('ul.autocomplete li').trigger("click")},1000);
            $("#sidebar").addClass("collapsed");
        }
    })
});

var search=new ol.control.SearchFeature({
    source: wfsSource,
    property:'id',
    maxItems: 10
});
map.addControl(search);

search.on('select', function(e){    
    select.getFeatures().clear();
    select.getFeatures().push (e.search);
});

就像我说的那样，它虽然不漂亮，但完全可以正常工作，甚至没人知道还有第二个搜索栏。我网站的2.0版将有更好的解决方案，但目前可以使用。

如何在OpenLayers映射版本4.6.4上触发，模拟或调度click事件？

2 个答案: