233：vue+openlayers 绘制渐变填充色的圆形、多边形

在Vue和OpenLayers中绘制渐变填充的圆形或多边形，你可以使用ol/style/Circle来创建圆形，并使用ol/style/Fill的createLinearGradient方法来创建渐变效果。以下是一个简单的例子：

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Circle as CircleGeometry, Polygon } from 'ol/geom';
import { Fill, Stroke, Style, Circle as CircleStyle, Text } from 'ol/style';
 
// 创建地图
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});
 
// 创建矢量图层
const vectorLayer = new VectorLayer({
  source: new VectorSource(),
});
map.addLayer(vectorLayer);
 
// 创建渐变填充的圆形
const radius = 500000; // 半径，单位为米
const gradientFill = Fill.createLinearGradient([0, -radius], [0, radius], [
  [0, 'rgba(255, 0, 0, 0)'],
  [1, 'rgba(0, 0, 255, 1)'],
]);
const circle = new CircleGeometry(map.getView().getCenter(), radius);
const circleFeature = new Feature({
  geometry: circle,
});
circleFeature.setStyle(
  new Style({
    fill: gradientFill,
    stroke: new Stroke({
      color: 'rgba(0, 0, 0, 1)',
      width: 3,
    }),
  })
);
vectorLayer.getSource().addFeature(circleFeature);
 
// 创建渐变填充的多边形
const ring = new Polygon([
  [
    [-radius, -radius],
    [radius, -radius],
    [radius, radius],
    [-radius, radius],
    [-radius, -radius],
  ],
]);
const polygonFeature = new Feature({
  geometry: ring,
});
polygonFeature.setStyle(
  new Style({
    fill: gradientFill,
    stroke: new Stroke({
      color: 'rgba(0, 0, 0, 1)',
      width: 3,
    }),
  })
);
vectorLayer.getSource().addFeature(polygonFeature);

在这个例子中，我们创建了一个渐变填充的圆形和一个渐变填充的正方形（由多边形模拟）。我们使用Fill.createLinearGradient方法定义了一个线性渐变，并且设置了渐变的方向和不同位置的颜色。然后，我们创建了相应的几何形状，并将它们添加到矢量图层中，同时应用了我们定义的渐变样式。