OpenLayers中实现圆形要素半径的动态缩放与调整

import { Style, Fill, Stroke, Circle as CircleStyle } from 'ol/style';
import Map from 'ol/Map'; // 确保能访问到地图实例

// 假设您已经有了一个OpenLayers的地图实例
// const map = new Map({ /* ... */ });

/**
 * 根据地图缩放级别计算像素半径的辅助函数。
 * 您可以根据实际需求调整这里的逻辑。
 * @param {number} currentZoom 当前地图的缩放级别。
 * @returns {number} 计算出的像素半径。
 */
function calculatePixelRadiusBasedOnZoom(currentZoom) {
    // 示例逻辑：
    // - 缩放级别小于10时，半径为5像素
    // - 缩放级别在10到14之间时，半径为10像素
    // - 缩放级别大于等于14时，半径为15像素
    if (currentZoom < 10) {
        return 5;
    } else if (currentZoom >= 10 && currentZoom < 14) {
        return 10;
    } else {
        return 15;
    }
    // 更平滑的过渡可以采用线性插值或更复杂的函数
    // return Math.max(5, currentZoom * 1.5 - 10); // 随缩放级别线性增长
}

/**
 * 动态调整圆形要素半径的样式函数。
 * @param {ol.Feature} feature 当前要素。
 * @param {number} resolution 当前地图分辨率。
 * @returns {ol.style.Style} 要素的样式。
 */
const dynamicRadiusStyleFunction = function(feature, resolution) {
    // 确保能访问到地图实例，这里假设map是一个全局变量或通过闭包传入
    // 如果map是局部变量，需要通过其他方式（如作为参数）传递进来
    if (!map) {
        console.error("Map instance is not available for style function.");
        return null;
    }
    const currentZoom = map.getView().getZoom();
    const pixelRadius = calculatePixelRadiusBasedOnZoom(currentZoom);

    return new Style({
        image: new CircleStyle({
            radius: pixelRadius, // 像素单位的半径
            fill: new Fill({ color: 'rgba(255, 0, 0, 0.5)' }),
            stroke: new Stroke({ color: 'red', width: 2 })
        })
    });
};

// 如何应用这个样式函数：
// 1. 应用到矢量图层：
// vectorLayer.setStyle(dynamicRadiusStyleFunction);

// 2. 应用到单个要素：
// const circleFeature = new Feature(new Circle([0, 0], 1000)); // 几何半径可以是任意值
// circleFeature.setStyle(dynamicRadiusStyleFunction);

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

/**
 * 根据要素属性中的'myRadius'值设置半径的样式函数。
 * @param {ol.Feature} feature 当前要素。
 * @param {number} resolution 当前地图分辨率。
 * @returns {ol.style.Style} 要素的样式。
 */
const attributeBasedStyleFunction = function(feature, resolution) {
    // 从要素属性中获取像素半径，如果未设置则提供一个默认值
    const pixelRadius = feature.get('myRadius') || 10; // 默认半径为10像素

    return new Style({
        image: new CircleStyle({
            radius: pixelRadius, // 像素单位的半径
            fill: new Fill({ color: 'rgba(0, 0, 255, 0.5)' }),
            stroke: new Stroke({ color: 'blue', width: 2 })
        })
    });
};

// 如何应用这个样式函数：
// 1. 应用到矢量图层：
// vectorLayer.setStyle(attributeBasedStyleFunction);

// 2. 应用到单个要素：
// const circleFeature = new Feature(new Circle([0, 0], 1000));
// circleFeature.setStyle(attributeBasedStyleFunction);

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

// 假设您的地图实例和矢量图层已初始化
const map = new Map({ /* ... */ });
const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: attributeBasedStyleFunction // 应用前面定义的样式函数
});
map.addLayer(vectorLayer);

// 示例：创建一些圆形要素并添加到图层
const myCircleFeatures = [];