openlayers教程openlayer点击气泡显示气泡信息/显示经纬度

openlayer点击气泡显示气泡信息

<template>
  <div>
    <button @click="centerMap">搜索</button>
    <div id="mapCon" ref="mapCon" style="width: 100%; height: 95%; position: absolute;"></div>
  </div>
</template>
<script>
import 'ol/ol.css'; // 引入 OpenLayers 的样式文件
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import ScaleLine from 'ol/control/ScaleLine';
import OSM from 'ol/source/OSM.js';
import Overlay from 'ol/Overlay'; // 导入Overlay模块
export default {
  name: 'MapComponent',
  mounted() {
    this.initializeMap();
    // 定义城市坐标
    const chongqingCoord = [106.5049, 29.5630];
    const wuhanCoord = [114.31, 30.5231];
    // 为每个城市创建Overlay
    this.createCityPopup(chongqingCoord, '重庆市');
    this.createCityPopup(wuhanCoord, '武汉市');
  },
  methods: {
    initializeMap() {
      this.map = new Map({
        target: this.$refs.mapCon,
        layers: [
          new TileLayer({
            title: 'OSM',
            source: new OSM(),
          })
        ],
        view: new View({
          center: [0, 0],
          zoom: 2,
          projection: "EPSG:4326" // 设置视图的投影为EPSG:4326
        }),
      });
      this.map.addControl(new ScaleLine());
      // 添加地图点击事件监听
      this.map.on('click', this.onMapClick);
    },
    onMapClick(event) {
      const lonLat = event.coordinate; // 获取点击位置的经纬度坐标
      console.log('Clicked coordinates:', lonLat);
    },
    centerMap() {
      const newLocation = [114.546872282, 30.588835819]; // 新的位置坐标
      const zoomLevel = 7; // 目标缩放级别
      this.map.getView().animate(
        {
          center: newLocation,
          zoom: zoomLevel,
        }, // 目标视图状态
      );
    },
    createCityPopup(coord, cityName) {
      let overlay = new Overlay({
        element: document.createElement('div'),
        positioning: 'bottom-center',
        stopEvent: false,
      });
      const popupContent = `
   <div class="city-popup" style="background:white; padding:10px; border-radius:5px;">
  <strong>${cityName}:</strong>
  <div class="coordinates hidden">${coord[0].toFixed(4)}, ${coord[1].toFixed(4)}</div>
  </div>
`;
      overlay.getElement().innerHTML = popupContent;
      overlay.setPosition(coord);
      // 为弹窗添加点击事件，用于显示经纬度
      overlay.getElement().addEventListener('click', () => {
        //this.map.getView().animate({ center: coord, zoom: 10 });
        const coordinatesElement = overlay.getElement().querySelector('.coordinates');
        coordinatesElement.classList.toggle('hidden');
      });
      this.map.addOverlay(overlay);
    },
  },
  beforeDestroy() {
    if (this.map) {
      this.map.setTarget(null);
    }
  }
};
</script>
<style>
.city-popup {
  cursor: pointer;
  /* 改变光标为手形 */
}

/* ... 其他样式 ... */

.city-popup .coordinates.hidden {
  display: none;
  /* 默认隐藏经纬度 */
}

.city-popup.clicked .coordinates {
  display: block;
  /* 点击后通过切换类名来显示经纬度 */
}
</style>