自定义样式点聚合

地图点聚合组件

基础示例

<template>
  <tlbs-map
    ref="map"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="8"
  >
    <tlbs-marker-cluster
      :geometries="geometries"
      :options="{
        zIndex: 1,
      }"
      :enable-default-style="false"
      @clusterchange="clusterChange"
    />

    <!-- 聚合点 -->
    <tlbs-dom-overlay
      v-for="(item, index) of aggregationPoints"
      :key="index"
      :position="item.center"
      :offset="offset"
    >
      <div
        class="polymerization formatClolr"
        :style="{
          width: item.width,
          height: item.height,
          'line-height': item['line-height']
        }"
        @click="domoOverlayClick(item)"
      >
        {{ item.content }}
      </div>
    </tlbs-dom-overlay>

    <!-- 分散点 -->
    <tlbs-dom-overlay
      v-for="(item, index) of scatteredPoints"
      :key="index"
      :position="item.center"
    >
      <div
        class="point_logo point_logo_0"
        :value="item.poiid"
        :style="item.transform"
        @click="openDetail(item)"
      >
        <div class="point_logo_polka_dot" />
      </div>
    </tlbs-dom-overlay>
  </tlbs-map>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue-demi';
interface AggregationPointsObj {
  center: TMap.LatLng, // 中心点位置
  width: string, // 默认宽度
  height: string, // 默认高度
  'line-height': string,
  content: string, // 聚合元素个数
  sort: number[], // 所有图形聚合后的元素个数排序后结果
  data: TMap.ClusterInfo, //  聚合簇属性
}
interface ScatteredPointsObj {
  center: TMap.LatLng,
  x: number, // 像素x坐标
  y: number, // 像素y坐标
  data: TMap.ClusterInfo // 聚合簇属性
}
export default defineComponent({
  name: 'MarkerClusterOverlayDemo',
  setup() {
    const geometries = [
      { position: { lat: 39.99799, lng: 116.397027 } },
      { position: { lat: 39.89799, lng: 116.397027 } },
      { position: { lat: 39.79799, lng: 116.397027 } },
      { position: { lat: 39.89799, lng: 116.297027 } },
      { position: { lat: 39.89799, lng: 116.497027 } },
    ];
    const map: any = ref(null);
    const center = ref({ lat: 39.91799, lng: 116.397027 });
    // 监听聚合簇变化
    const aggregationPoints = ref<AggregationPointsObj[]>([]);
    const scatteredPoints = ref<ScatteredPointsObj[]>([]);
    const offset = ref({ x: 0, y: -30 });
    const clusterChange = (scatteredPoint: ScatteredPointsObj[], aggregationPoint: AggregationPointsObj[]) => {
      aggregationPoints.value = aggregationPoint;
      scatteredPoints.value = scatteredPoint;
    };
    const domoOverlayClick = (item: AggregationPointsObj) => {
      map.value.map.fitBounds(item.data.bounds);
    };
    const openDetail = (item: ScatteredPointsObj) => {
      console.log(item);
      console.log('查看详情');
    };

    return {
      center,
      clusterChange,
      map,
      geometries,
      offset,
      aggregationPoints,
      scatteredPoints,
      domoOverlayClick,
      openDetail,
    };
  },
});
</script>

<style>
.polymerization {
  border-radius: 50%;
  color: #fff;
  font-weight: 500;
  text-align: center;
  opacity: 0.95;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
}

.formatClolr {
  background: linear-gradient(138.59deg, rgba(255, 118, 118, 0.9) 11.12%, rgba(255, 61, 61, 0.9) 75.89%);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 0px 8px rgba(0, 0, 0, 0.08);
}
.point_logo {
  width: 42px;
  height: 49px;
  position: absolute;
  text-align: center;
  line-height: 42px;
}
.point_logo_polka_dot {
  width: 16px;
  height: 16px;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  background: #f36d78;
  border-radius: 50%;
}
</style>

props

名称	类型	说明
id	String	图层 id
geometries	TMap.PointGeometry[]	标注点数据数组
gridSize	Number	聚合距离，距离小于该值的点会聚合至一起，默认为60px
maxZoom	Number	聚合策略的最大缩放级别，若地图缩放级别大于该值，则不进行聚合, 默认为20
minimumClusterSize	Number	最小聚合点数, 默认为2
averageCenter	Booblean	每个聚和簇的中心是否应该是聚类中所有标记的平均值,默认为false
enableDefaultStyle	Booblean	使用默认样式,默认为true
zoomOnClick	Booblean	点击聚合数字放大展开,默认为true
options	TMap.MarkerClusterOptions	除了上述属性的其他配置参数，点击下面官网文档链接查看

文档官网 https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocCluster

事件

名称	参数	说明
clusterchange	(scatteredPoint:T,aggregationPoint:T)	scatteredPoint（分散点的坐标集合），aggregationPoint（聚合点的坐标集合）。 样式值建议值：宽度（width）、高度（height）、行高（line-height）。数据：聚合元素个数（content），聚合元素按照个数大小排序后的顺序（sort）、 自定义的数据（data）

其他事件支持列表参考官网文档 https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocCluster

组件实例属性

名称	类型	说明
markerCluster	TMap.MarkerCluster	点聚合实例。