vue2 openlayers 点击标记

要在Vue2中使用OpenLayers点击标记，可以按照以下步骤操作：

1. 安装OpenLayers：使用npm或yarn安装OpenLayers。

2. 导入OpenLayers：在Vue组件中导入OpenLayers。

import ol from 'openlayers';

3. 创建地图容器：在Vue组件中创建一个地图容器用于显示地图。

<template>
  <div id="map"></div>
</template>

<script>
export default {
  name: 'Map',
  mounted() {
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2
      })
    });
  }
}
</script>

4. 添加标记：在Vue组件中添加标记并设置点击事件。

<template>
  <div id="map"></div>
</template>

<script>
export default {
  name: 'Map',
  mounted() {
    var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM()
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2
      })
    });

    var marker = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.fromLonLat([0, 0]))
    });

    var vectorSource = new ol.source.Vector({
      features: [marker]
    });

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource
    });

    map.addLayer(vectorLayer);

    map.on('click', function(e) {
      map.forEachFeatureAtPixel(e.pixel, function(feature) {
        alert('Marker clicked!');
      });
    });
  }
}
</script>

在上面的代码中，添加了一个标记并将其添加到地图上。然后，将地图的click事件绑定到一个函数，该函数检查单击位置是否在标记上，并触发一个警报。