vue2 openlayers 点击标记

在Vue2中使用OpenLayers实现点击标记的方法如下：

1. 首先在Vue组件中引入OpenLayers相关的库文件：

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {fromLonLat} from 'ol/proj';
import {Icon, Style} from 'ol/style';

2. 在Vue组件中定义地图容器和地图实例：

<template>
  <div id="map" style="height: 500px;"></div>
</template>

<script>
export default {
  name: 'Map',
  data() {
    return {
      map: null
    }
  },
  mounted() {
    // 初始化地图
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图容器
      this.map = new Map({
        target: 'map',
        layers: [
          new VectorLayer({
            source: new VectorSource({
              features: [
                new Feature({
                  geometry: new Point(fromLonLat([120.1551, 30.2741])),
                  name: '杭州市'
                })
              ]
            }),
            style: new Style({
              image: new Icon({
                anchor: [0.5, 1],
                src: 'https://openlayers.org/en/latest/examples/data/icon.png'
              })
            })
          })
        ],
        view: new View({
          center: fromLonLat([120.1551, 30.2741]),
          zoom: 12
        })
      });

      // 监听地图点击事件
      this.map.on('click', this.handleMapClick);
    },

    handleMapClick(event) {
      // 获取点击的坐标
      const coordinate = event.coordinate;

      // 获取被点击的要素
      this.map.forEachFeatureAtPixel(event.pixel, (feature) => {
        // 判断是否是Point类型的要素
        if (feature.getGeometry().getType() === 'Point') {
          // 获取要素的名称
          const name = feature.get('name');

          // 在控制台输出要素名称和坐标
          console.log(name, coordinate);
        }
      });
    }
  }
}
</script>

3. 在`initMap`方法中创建地图容器和地图实例，然后监听地图的点击事件，在`handleMapClick`方法中获取被点击的要素和坐标，判断是否是Point类型的要素，然后输出要素名称和坐标。