标签：status center color text openlayers var new 模板 标注

先把代码贴出来，注释以后有时间再写(需要留意一下这里图标的引入方式，函数内相同路径无法找到图片)

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
  }

标签：status,center,color,text,openlayers,var,new,模板,标注
来源： https://www.cnblogs.com/wwj007/p/11857818.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。