OpenLayers 快速入门（三）Source 对象补充

看过的知识不等于学会。唯有用心总结、系统记录，并通过温故知新反复实践，才能真正掌握一二
作为一名摸爬滚打三年的前端开发，开源社区给了我饭碗，我也将所学的知识体系回馈给大家，助你少走弯路！
OpenLayers、Leaflet 快速入门 ，每周保持更新 2 个案例
Cesium 快速入门，每周保持更新 4 个案例

OpenLayers 快速入门（一）Map对象
OpenLayers 快速入门（二）Layer 对象
OpenLayers 快速入门（三）Source 对象补充
OpenLayers 快速入门（四）View 对象
OpenLayers 快速入门（五）Controls 对象
OpenLayers 快速入门（六）Interaction 对象
OpenLayers 快速入门（七）矢量数据
OpenLayers 快速入门（八）事件系统
OpenLayers 快速入门（九）Extent 介绍
OpenLayers 快速入门（十）常用 API 补充

Source 源

Source 是 OpenLayers 的数据引擎，负责获取和转换原始地理数据，与 Layer 协同工作实现地图可视化。
设计哲学：Source 处理数据获取，Layer 负责渲染呈现。

我们已经在 Layer 部分介绍了大部分 Source，这里补充了聚类（Cluster）的用法

Source 类型

Source 介绍

Source 类型很多，常用的下图中的几种我们在 Layer 中已经介绍完

补充介绍聚类（Cluster）

聚类数据源在项目中比较常用，这里补充介绍一下。ol/source/Cluster类中定义了聚类的相关属性和方法。

属性

:::details 展开代码

<template>
  <div ref="mapContainer" id="map"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Map from "ol/Map";
import View from "ol/View";
import { Cluster, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import { Point } from "ol/geom";
import Feature from "ol/Feature";
import XYZ from "ol/source/XYZ";
import { Style, Circle, Text, Fill, Icon } from "ol/style";
import "ol/ol.css";

const mapContainer = ref(null);

// 1. 创建原始点数据源（模拟1000个随机点）
const rawSource = new VectorSource();
for (let i = 0; i < 1000; i++) {
  const point = new Point([
    116.3 + Math.random() * 1.0, // 经度范围：116.3~117.3
    39.8 + Math.random() * 0.8, // 纬度范围：39.8~40.6
  ]);
  rawSource.addFeature(new Feature(point));
}

// 2. 创建聚类数据源（核心）
const clusterSource = new Cluster({
  source: rawSource,
  distance: 40, // 像素距离，值越大聚类越少
});

// 3. 动态样式函数（根据聚类点数设置不同样式）
const clusterStyle = (feature) => {
  const size = feature.get("features").length;
  let color, radius, image;

  if (size === 1) {
    // color = "rgba(0, 150, 255, 0.8)";
    // radius = 6;
    // 实际情况这里更多的是logo
    return new Style({
      image: new Icon({
        anchor: [0.5, 1],
        src: "/src/assets/local.png", // 使用本地图片
        scale: 0.5, // 缩放图标大小
      }),
    });
  } else if (size < 20) {
    color = "rgba(50, 200, 100, 0.8)";
    radius = 10;
    image = new Circle({
      radius,
      fill: new Fill({ color }),
    });
  } else {
    color = "rgba(255, 70, 70, 0.8)";
    radius = 15 + Math.min(size / 10, 10);
    image = new Circle({
      radius,
      fill: new Fill({ color }),
    });
  }

  return new Style({
    image,
    text: new Text({
      text: size.toString(),
      fill: new Fill({ color: "#fff" }),
      font: "bold 12px sans-serif",
    }),
  });
};

onMounted(() => {
  new Map({
    target: mapContainer.value,
    layers: [
      new TileLayer({
        // 设置高德地图为数据源底图
        source: new XYZ({
          // 设置路网图层
          url: "https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
        }),
      }),
      new VectorLayer({
        source: clusterSource,
        style: clusterStyle, // 应用动态样式
      }),
    ],
    view: new View({
      center: [116.5, 40.0],
      zoom: 8,
      projection: "EPSG:4326",
    }),
  });
});
</script>
<style scoped>
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>

:::

效果图参考