openlayers4.6-marker添加点击事件

  getIconMakers(map) {
    var pos = ol.proj.fromLonLat([118.208889, 35.3725]);
    var pos2 = ol.proj.fromLonLat([112.208889, 34.3725]);
    console.dir(pos);

    var startMarker = new ol.Feature({
      type: 'icon',
      name: 'museum',
      geometry: new ol.geom.Point(pos)
    });
    var vectorSource = new ol.source.Vector({});
    vectorSource.addFeature(startMarker);

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 1],
          src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
        })
      })
    });
    map.addOverlay(vectorLayer);

    var element = document.getElementById('popup1');
    var popup = new ol.Overlay({
      element: element,
      positioning: 'bottom-center',
      stopEvent: false,
      offset: [0, -50]
    });
    map.addOverlay(popup);

    map.on('click', function (evt) {
      var pixel = map.getEventPixel(evt.originalEvent);
      var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        return feature;
      });
      let iconName = feature.get('name');
      if (feature) {
        var coordinates = feature.getGeometry().getCoordinates();
        popup.setPosition(coordinates);
        $(element).popover({
          'placement': 'top',
          'html': true,
          'content': feature.get('name')
        });
        $(element).popover('show');
      } else {
        $(element).popover('destroy');
      }
    });
// 鼠标移动的事件
    map.on('pointermove', function (e) {
        if (evt.dragging) {   //如果是拖动地图造成的鼠标移动，则不作处理
            return;
     }
      var pixel = map.getEventPixel(e.originalEvent);
      var hit = map.hasFeatureAtPixel(pixel);
      map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });
  }

注意，feature中必须设置name属性才能feature.get('name')到值，否则值为undefined会报错。

html

这样，点击marker图标就可以弹出弹框，或者进行其他的交互操作

image.png

参考官网例子: http://openlayers.org/en/v4.6.5/examples/icon.html?q=marker

vue中实现点击marker进行导航跳转，并同时传递参数

  getIconMakers(map) {
    var pos = ol.proj.fromLonLat([118.208889, 35.3725]);
    var pos2 = ol.proj.fromLonLat([112.208889, 34.3725]);
    console.dir(pos);

    var startMarker = new ol.Feature({
      type: 'icon',
      name: 'museum',
      geometry: new ol.geom.Point(pos)
    });
    var startMarker2 = new ol.Feature({
      type: 'icon',
      name: 'car',
      geometry: new ol.geom.Point(pos2)
    });
    var vectorSource = new ol.source.Vector({});
    vectorSource.addFeature(startMarker);
    vectorSource.addFeature(startMarker2);

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 1],
          src: 'https://openlayers.org/en/v4.6.5/examples/data/icon.png'
        })
      })
    });
    map.addOverlay(vectorLayer);

    map.on('click', function (evt) {
      // var pixel = map.getEventPixel(evt.originalEvent);
      var feature = map.forEachFeatureAtPixel(evt.pixel,
        function (feature) {
          return feature;
        });
      if (feature) {
        // var coordinates = feature.getGeometry().getCoordinates();
        let iconName = feature.get('name');
        router.push({
          name: 'onlineDrawing',
          params: {
            type: iconName
          }
        })
      }
    });
    map.on('pointermove', function (e) {
      var pixel = map.getEventPixel(e.originalEvent);
      var hit = map.hasFeatureAtPixel(pixel);
      map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });
  }