vue項目使用openlayers來添加地圖標注，標注樣式設置的簡要模板

先把代碼貼出來，注釋以后有時間再寫(需要留意一下這里圖標的引入方式，函數內相同路徑無法找到圖片)

import sk from "../../assets/img/home/sk-active.png";
import hd from "../../assets/img/home/river-active.png";

  // 雨量站  狀態：顏色標識 點
  switch (status) {
    case 0: status = '#a8eba8'
      break;
    case 1: status = '#69befe'
      break;
    case 2: status = '#ea29fb'
      break;
    case 3: status = '#ea29fb'
      break;
  }
  function style(names) {
    return new Style({
      image: names === 'yl' ? new Circle({
        radius: 5,
        fill: new Fill({
          color: '#05ab57',
        }),
        stroke: new Stroke({
          color: status,
          width: 16
        }),
      }) : new Icon({
        anchor: [0.5, 30],
        anchorOrigin: 'bottom-right',
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        scale: 0.45,
        src: names === 'sk' ? sk : hd,
      }),
      text: new Text({
        textAlign: "center", // 位置
        textBaseline: "center", // 基准線
        offsetX: 0,
        offsetY: 30,
        text: name,
        fill: new Fill({
          color: "#333",// 文本填充樣式（即文字顏色)
        }),
        stroke: new Stroke({
          color: "#Fff",
        }),
        zIndex: 9
      })
    })
  }
  var ylStyle = style('yl')
  var skStyle = style('sk')
  var hdStyle = style('hd')

  // var ylStyle = new Style({
  //   image: new Circle({
  //     radius: 5,
  //     fill: new Fill({
  //       color: '#05ab57',
  //     }),
  //     stroke: new Stroke({
  //       color: status,
  //       width: 16
  //     }),
  //   }),
  //   text: new Text({
  //     textAlign: "center", // 位置
  //     textBaseline: "top", // 基准線
  //     offsetX: 0,
  //     offsetY: 20,
  //     text: name,
  //     fill: new Fill({
  //       color: "#000",// 文本填充樣式（即文字顏色)
  //     }),
  //     stroke: new Stroke({
  //       color: "#Fff",
  //       width: 1,
  //     }),
  //     zIndex: 9
  //   })
  // })

  // // 水庫    點
  // var skStyle = new Style({
  //   image: new Icon({
  //     anchor: [0.5, 30],
  //     anchorOrigin: 'bottom-right',
  //     anchorXUnits: 'fraction',
  //     anchorYUnits: 'pixels',
  //     // offsetOrigin: 'bottom-center',
  //     scale: 0.45,
  //     src: sk,

  //   }),
  //   text: new Text({
  //     textAlign: "center", // 位置
  //     textBaseline: "center", // 基准線
  //     offsetX: 0,
  //     offsetY: 30,
  //     // font: "normal 12px 微軟雅黑", // 文字樣式
  //     text: name,
  //     fill: new Fill({
  //       color: "#333",// 文本填充樣式（即文字顏色)
  //     }),
  //     stroke: new Stroke({
  //       color: "#Fff",
  //     }),
  //     zIndex: 9
  //   })
  // })

  // // 河道    點
  // var hdStyle = new Style({
  //   image: new Icon({
  //     anchor: [0.5, 26],
  //     anchorXUnits: 'fraction',
  //     anchorYUnits: 'pixels',
  //     scale: 0.48,
  //     src: hd,
  //   }),
  //   text: new Text({
  //     textAlign: "center", // 位置
  //     textBaseline: "center", // 基准線
  //     offsetX: 0,
  //     offsetY: 30,
  //     // font: "normal 12px 微軟雅黑", // 文字樣式
  //     text: name,
  //     fill: new Fill({
  //       color: "#333",// 文本填充樣式（即文字顏色)
  //     }),
  //     stroke: new Stroke({
  //       color: "#Fff",
  //     }),
  //     zIndex: 9
  //   })
  // })
  return {
    ylStyle,
    skStyle,
    hdStyle
  }