vue2 hxmap地图 实现聚合功能，缩放后变成点，汉字不用显示，放大后正常显示

Vue 2 中使用 HXMap 地图实现点聚合功能可以通过以下几个步骤完成：

1. **安装依赖**:
确保已安装 OpenLayers 和 Vue 的相关插件，如 `@openlayers/vue`。

2. **配置地图组件**:
在 Vue 组件中初始化 HXMap，设置初始视图和聚合选项[^1]：

   <template>
     <HXMap :config="mapConfig" @load="onLoad" />
   </template>

   <script>
   import { HXMap } from '@openlayers/vue';

   export default {
     components: {
       HXMap,
     },
     data() {
       return {
         mapConfig: {
           view: {
             center: [116.404, 39.915], // 北京坐标
             zoom: 8,
           },
           interactions: [
             new ol.interaction.DoubleClickZoom(),
           ],
           layers: [
             ... // 加载地图层
           ],
           controls: [...], // 添加必要的控制，如鼠标滚轮缩放
         },
       };
     },
     methods: {
       onLoad(map) {
         // 聚合功能设置
         const source = map.getLayers().get(0).getSource();
         source.set('strategy', ol.source.StrategyCluster({
           distance: 10, // 设置聚类距离
           pointRadius: 5, // 点的半径，当单击时显示详细信息
           clusterClass: 'ol-cluster',
         }));
       },
     },
   };
   </script>

3. **样式调整**:
对于中文字符不显示的情况，可能需要自定义 CSS 或者在地图上添加图标代替文字。例如：

   .ol-cluster text {
     display: none;
   }

4. **交互事件处理**:
通过监听地图的 `click` 事件，可以扩展实现单击聚集点显示详情:

   methods: {
     onClusterClick(event) {
       const feature = event.feature;
       if (feature.cluster) {
         feature.cluster.openFeature(feature);
       }
     },
   },
   mounted() {
     this.map.on('click', this.onClusterClick);
   },
   beforeDestroy() {
     this.map.un('click', this.onClusterClick);
   },