vue2中openlayers 在廊坊市添加聚合点，鼠标经过聚合点 显示名称

在Vue2中使用OpenLayers添加聚合点并显示名称，可以按照以下步骤进行：

1. 安装OpenLayers和ol-ext库。

npm install ol ol-ext --save

2. 在Vue组件中引入OpenLayers和ol-ext库。

import ol from 'ol'
import 'ol/ol.css'
import olExt from 'ol-ext'
import 'ol-ext/dist/ol-ext.css'

3. 在Vue组件中创建地图容器和地图对象。

<template>
  <div class="map-container">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new ol.Map({
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([116.7, 39.5]),
          zoom: 10
        })
      })
    }
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}
</style>

4. 创建聚合图层和聚合点。

initMap() {
  const clusterSource = new ol.source.Cluster({
    distance: 40,
    source: new ol.source.Vector({
      features: [
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([116.7, 39.5])),
          name: '廊坊市'
        }),
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([116.8, 39.5])),
          name: '广阳区'
        }),
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([116.9, 39.5])),
          name: '香河县'
        }),
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([117.0, 39.5])),
          name: '大城县'
        }),
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([117.1, 39.5])),
          name: '文安县'
        })
      ]
    })
  })

  const clusterLayer = new olExt.layer.Cluster({
    source: clusterSource,
    distance: 40,
    animationDuration: 500,
    style: feature => {
      const count = feature.get('features').length
      const style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 15,
          stroke: new ol.style.Stroke({
            color: 'white',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'red'
          })
        }),
        text: new ol.style.Text({
          text: count.toString(),
          fill: new ol.style.Fill({
            color: 'white'
          }),
          stroke: new ol.style.Stroke({
            color: 'black',
            width: 2
          })
        })
      })
      return count === 1 ? this.createFeatureStyle(feature.get('features')[0]) : style
    }
  })

  this.map.addLayer(clusterLayer)
},
createFeatureStyle(feature) {
  return new ol.style.Style({
    image: new ol.style.Circle({
      radius: 15,
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'blue'
      })
    }),
    text: new ol.style.Text({
      text: feature.get('name'),
      fill: new ol.style.Fill({
        color: 'white'
      }),
      stroke: new ol.style.Stroke({
        color: 'black',
        width: 2
      })
    })
  })
}

5. 添加鼠标移动事件，显示聚合点名称。

initMap() {
  const clusterSource = new ol.source.Cluster({
    distance: 40,
    source: new ol.source.Vector({
      features: [
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([116.7, 39.5])),
          name: '廊坊市'
        }),
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([116.8, 39.5])),
          name: '广阳区'
        }),
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([116.9, 39.5])),
          name: '香河县'
        }),
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([117.0, 39.5])),
          name: '大城县'
        }),
        new ol.Feature({
          geometry: new ol.geom.Point(ol.proj.fromLonLat([117.1, 39.5])),
          name: '文安县'
        })
      ]
    })
  })

  const clusterLayer = new olExt.layer.Cluster({
    source: clusterSource,
    distance: 40,
    animationDuration: 500,
    style: feature => {
      const count = feature.get('features').length
      const style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 15,
          stroke: new ol.style.Stroke({
            color: 'white',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'red'
          })
        }),
        text: new ol.style.Text({
          text: count.toString(),
          fill: new ol.style.Fill({
            color: 'white'
          }),
          stroke: new ol.style.Stroke({
            color: 'black',
            width: 2
          })
        })
      })
      return count === 1 ? this.createFeatureStyle(feature.get('features')[0]) : style
    }
  })

  this.map.addLayer(clusterLayer)

  const overlay = new ol.Overlay({
    element: document.getElementById('popup'),
    autoPan: true,
    autoPanAnimation: {
      duration: 250
    }
  })
  this.map.addOverlay(overlay)

  this.map.on('pointermove', evt => {
    const pixel = this.map.getEventPixel(evt.originalEvent)
    const feature = this.map.forEachFeatureAtPixel(pixel, feature => feature)
    if (feature) {
      const coordinates = feature.getGeometry().getCoordinates()
      overlay.setPosition(coordinates)
      document.getElementById('popup-content').innerText = feature.get('name')
      overlay.getElement().style.display = 'block'
    } else {
      overlay.getElement().style.display = 'none'
    }
  })
},
createFeatureStyle(feature) {
  return new ol.style.Style({
    image: new ol.style.Circle({
      radius: 15,
      stroke: new ol.style.Stroke({
        color: 'white',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'blue'
      })
    }),
    text: new ol.style.Text({
      text: feature.get('name'),
      fill: new ol.style.Fill({
        color: 'white'
      }),
      stroke: new ol.style.Stroke({
        color: 'black',
        width: 2
      })
    })
  })
}

6. 在模板中添加弹出框元素。

<template>
  <div class="map-container">
    <div id="map" class="map"></div>
    <div id="popup" class="ol-popup">
      <div id="popup-content"></div>
    </div>
  </div>
</template>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}

.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
  min-width: 100px;
  display: none;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48%;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48%;
  margin-left: -11px;
}
</style>

这样就可以在Vue2中使用OpenLayers添加聚合点并显示名称了。