OpenLayers中实现圆形要素半径随地图缩放动态调整的教程

import { Style, Fill, Stroke } from 'ol/style';
import CircleStyle from 'ol/style/Circle'; // 注意这里导入的是ol/style/Circle

// 假设您已经有一个map实例
const map = new ol.Map({
  // ... map配置
});

/**
 * 根据地图缩放级别计算圆形像素半径的辅助函数。
 * 您可以根据需求调整这个函数的逻辑，例如使用线性、对数或分段函数。
 * @param {number} zoom 当前地图的缩放级别。
 * @returns {number} 计算出的像素半径。
 */
function calculateRadiusBasedOnZoom(zoom) {
  // 示例：简单线性缩放，您可以根据实际需求调整
  // 例如，在zoom=10时半径为5px，zoom=15时半径为15px
  // 这是一个非常基础的示例，实际应用中可能需要更复杂的逻辑
  if (zoom < 8) return 3;
  if (zoom < 12) return 5;
  if (zoom < 15) return 8;
  if (zoom < 18) return 12;
  return 15; // 默认最大半径
}

// 定义样式函数
const dynamicCircleStyleFunction = function(feature, resolution) {
  // 获取当前地图的缩放级别
  const currentZoom = map.getView().getZoom();

  // 根据缩放级别计算新的像素半径
  const newRadius = calculateRadiusBasedOnZoom(currentZoom);

  // 创建并返回新的圆形样式
  return new Style({
    image: new CircleStyle({ // 使用ol.style.Circle来定义像素半径的圆形
      radius: newRadius,
      fill: new Fill({ color: 'rgba(255, 220, 0, 0.5)' }), // 填充颜色
      stroke: new Stroke({ color: 'rgba(230, 199, 0, 0.7)', width: 2 }) // 描边颜色和宽度
    })
  });
};

// 创建一个矢量图层，并应用样式函数
const vectorSource = new ol.source.Vector();
const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: dynamicCircleStyleFunction // 将样式函数应用于图层
});

map.addLayer(vectorLayer);

// 示例：添加一些圆形要素到图层
// 注意：这里我们只需要一个点几何体，因为圆形的视觉样式由style.Circle定义
const coordinates = [
  ol.proj.fromLonLat([104.06, 30.67]), // 成都
  ol.proj.fromLonLat([116.40, 39.90]), // 北京
  ol.proj.fromLonLat([121.47, 31.23])  // 上海
];

coordinates.forEach(coord => {
  const pointFeature = new ol.Feature(new ol.geom.Point(coord));
  vectorSource.addFeature(pointFeature);
});

// ... (之前的import和map实例保持不变)

// 定义样式函数，结合要素属性和缩放级别
const customScalingCircleStyleFunction = function(feature, resolution) {
  const currentZoom = map.getView().getZoom();
  // 从要素属性中获取自定义的基础像素半径
  const basePixelRadius = feature.get('basePixelRadius') || 10; // 默认10px

  // 根据缩放级别和基础半径计算最终像素半径
  // 示例：基础半径 * (1 + (zoom - 10) * 0.1)
  // 这里的计算逻辑可以根据您的需求进行调整
  let scaledRadius = basePixelRadius * (1 + (currentZoom - 10) * 0.1);
  if (scaledRadius < 5) scaledRadius = 5; // 最小半径
  if (scaledRadius > 30) scaledRadius = 30; // 最大半径

  return new Style({
    image: new CircleStyle({
      radius: scaledRadius,
      fill: new Fill({ color: 'rgba(0, 150, 255, 0.5)' }),
      stroke: new Stroke({ color: 'rgba(0, 100, 200, 0.7)', width: 2 })
    })
  });
};

// 创建一个矢量图层，并应用新的样式函数
const customVectorSource = new ol.source.Vector();
const customVectorLayer = new ol.layer.Vector({
  source: customVectorSource,
  style: customScalingCircleStyleFunction // 应用新的样式函数
});

map.addLayer(customVectorLayer);

// 示例：添加带有不同基础半径属性的圆形要素
const customCoordinates = [
  { lon: 108.95, lat: 34.27, baseRadius: 8 }, // 西安
  { lon: 113.66, lat: 34.76, baseRadius: 12 }, // 郑州
  { lon: 106.55, lat: 29.56, baseRadius: 15 }  // 重庆
];

customCoordinates.forEach(data => {
  const pointFeature = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([data.lon, data.lat])));
  // 设置要素的自定义属性
  pointFeature.set('basePixelRadius', data.baseRadius);
  customVectorSource.addFeature(pointFeature);
});

// 如果需要动态更新某个要素的基础半径，可以直接修改其属性
// 例如，在某个事件中：
// someFeature.set('basePixelRadius', newBaseRadius);
// 这会自动触发样式函数的重新评估，更新圆形大小。