OpenLayers动态调整圆形半径：基于缩放级别和特征属性的样式函数应用

import { Style, Fill, Stroke, Circle } from 'ol/style';

// 假设 'map' 是您的 OpenLayers 地图实例
let map; // 确保在实际应用中 'map' 变量已正确初始化

/**
 * 根据地图缩放级别计算圆形半径的辅助函数
 * 可以根据实际需求调整缩放与半径的映射关系
 * @param {number} zoom 当前地图缩放级别
 * @returns {number} 计算出的像素半径
 */
function calculateRadiusBasedOnZoom(zoom) {
  // 示例：在较低缩放级别时半径较大，缩放级别升高时半径减小，或保持不变
  // 这里的逻辑可以根据您的具体需求进行调整
  if (zoom < 5) {
    return 15;
  } else if (zoom >= 5 && zoom < 10) {
    return 10;
  } else {
    return 5;
  }
  // 也可以是更复杂的线性或指数关系，例如：
  // return Math.max(5, 20 - zoom * 1.5); // 随着缩放级别增加，半径减小
}

/**
 * OpenLayers 样式函数，用于根据缩放级别动态调整圆形半径
 * @param {ol.Feature} feature 要渲染的要素
 * @param {number} resolution 当前地图分辨率
 * @returns {Array<ol.style.Style>} 要素的样式数组
 */
const dynamicCircleStyleFunction = function(feature, resolution) {
  // 获取当前地图的缩放级别
  // 注意：在样式函数内部直接访问 map 对象可能需要确保 map 变量在作用域内
  const currentZoom = map.getView().getZoom(); 
  const newRadius = calculateRadiusBasedOnZoom(currentZoom);

  // 创建圆形样式
  const circleStyle = new Style({
    image: new Circle({
      radius: newRadius,
      fill: new Fill({ color: 'rgba(255, 0, 0, 0.5)' }), // 填充颜色
      stroke: new Stroke({ color: 'red', width: 2 }) // 边框颜色和宽度
    })
  });

  return [circleStyle];
};

import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { fromLonLat } from 'ol/proj';

// 创建矢量源
const vectorSource = new VectorSource({
  features: [
    new Feature({
      geometry: new Point(fromLonLat([-74.0060, 40.7128])) // 纽约
    }),
    new Feature({
      geometry: new Point(fromLonLat([2.3522, 48.8566])) // 巴黎
    })
    // 更多点要素...
  ]
});

// 创建矢量图层，并应用样式函数
const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: dynamicCircleStyleFunction // 将样式函数赋值给图层
});

// 将图层添加到地图
// map.addLayer(vectorLayer);

import { Style, Fill, Stroke, Circle } from 'ol/style';

/**
 * OpenLayers 样式函数，用于从要素属性中读取半径值
 * @param {ol.Feature} feature 要渲染的要素
 * @param {number} resolution 当前地图分辨率 (在此方法中可能不直接使用，但仍需参数)
 * @returns {Array<ol.style.Style>} 要素的样式数组
 */
const attributeBasedCircleStyleFunction = function(feature, resolution) {
  // 从要素的属性中获取自定义半径值，如果不存在则使用默认值
  const customRadius = feature.get('myRadius') || 8; 

  // 创建圆形样式
  const circleStyle = new Style({
    image: new Circle({
      radius: customRadius,
      fill: new Fill({ color: 'rgba(0, 128, 255, 0.6)' }), // 填充颜色
      stroke: new Stroke({ color: 'blue', width: 2 }) // 边框颜色和宽度
    })
  });

  return [circleStyle];
};

import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { fromLonLat } from 'ol/proj';

// 创建矢量源和要素
const attributeVectorSource = new VectorSource({
  features: [
    new Feature({
      geometry: new Point(fromLonLat([-0.1278, 51.5074])), // 伦敦
      myRadius: 12 // 初始半径
    }),
    new Feature({
      geometry: new Point(fromLonLat([139.6917, 35.6895])), // 东京
      myRadius: 20 // 初始半径
    })
  ]
});

// 创建矢量图层并应用样式函数
const attributeVectorLayer = new VectorLayer({
  source: attributeVectorSource,
  style: attributeBasedCircleStyleFunction
});

// map.addLayer(attributeVectorLayer);

// 假设 'myCircleFeatures' 是您的圆形要素数组
// 可以在地图的 'moveend' 事件中执行此逻辑，以在缩放结束后更新
map.on('moveend', function() {
  const currentZoom = map.getView().getZoom();

  attributeVectorSource.getFeatures().forEach(function(feature) {
    // 根据当前缩放级别和一些随机因子更新半径
    // 这里可以结合方法一的 calculateRadiusBasedOnZoom 逻辑
    const randomNumber = Math.random();
    let newRadius;

    if (currentZoom < 5) {
      newRadius = 10 + randomNumber * 5; // 基础半径 + 随机偏移
    } else if (currentZoom >= 5 && currentZoom < 10) {
      newRadius = 8 + randomNumber * 3;
    } else {
      newRadius = 5 + randomNumber * 2;
    }

    feature.set("myRadius", newRadius); // 更新要素属性，触发重绘
  });
});