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

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
}

vue项目使用openlayers来添加地图标注,标注样式设置的简要模板的更多相关文章

  1. 将vue项目部署在Linux的Nginx下,并设置为局域网内访问

    1. 下载 wget http://nginx.org/download/nginx-1.12.2.tar.gz 2. 解压缩 tar -zxvf linux-nginx-1.12.2.tar.gz ...

  2. vue项目中使用腾讯地图

    最近在使用腾讯地图api(以下以位置数据可视化API为例),在初建项目之后,按照官网的说法,直接引入 再将官网的初始化例子放一个方法 在mounted中调用即可看到腾讯地图,但是我引入之后,一直报TM ...

  3. vue项目、路由

    目录 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 js原型补充 vue项目生命周期 页面组件 配置自定义全局样式 路由逻辑跳转 路由重定向 组件的生命周期钩子 路由传参 ...

  4. Vue学习——使用vue-cli搭建一个简单的本地vue项目

    前提 安装好node.js.npm.vue-cli.为什么要先安装这些,建议查看https://www.cnblogs.com/jixue/p/10673875.html,这个对于vue-cli理解很 ...

  5. vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  6. vue 百度地图多标注展示和点击标注进行的提示

    index.html中加入script <script type="text/javascript" src="http://api.map.baidu.com/a ...

  7. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  8. 为 VUE 项目添加 PWA 解决发布后刷新报错问题

    为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏 ...

  9. 如何为你的 Vue 项目添加配置 Stylelint

    如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...

随机推荐

  1. ubuntu下如何安装linaro工具链?

    1. 获取工具链 从此处获取,如: wget https://releases.linaro.org/components/toolchain/binaries/7.3-2018.05/aarch64 ...

  2. 多目标优化算法(一)NSGA-Ⅱ(NSGA2)(转载)

    多目标优化算法(一)NSGA-Ⅱ(NSGA2) 本文链接:https://blog.csdn.net/qq_40434430/article/details/82876572多目标优化算法(一)NSG ...

  3. 07 MySQL之视图

    01-视图的含义 视图是从一个或者多个表中导出的,视图的行为与表非常相似,但视图是一个虚拟表.视图还可以从已经存在的视图的基础上定义. 02-创建视图 # 基本语法格式: CREATE [OR REP ...

  4. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类

    笔记 6.Mysql逆向工程效率神器之使用IDE自动生成Java实体类     简介:实战使用IDE根据Mysql自动生成java pojo实体类                  1.IDEA连接数 ...

  5. Linux 查看Tomcat版本信息

    Linux 查看Tomcat版本信息 如果我们想运行在 Linux 下的 Tomcat 版本信息,只需要在 Tomcat 的 bin/ 目录下,运行 version.sh 脚本即可. 1.使用如下命令 ...

  6. Kettle 排序记录的使用(Sort rows)

    排序行的步骤根据您指定的字段和它们是否应该按升序或降序排序当行数超过指定的排序大小(默认为100万行)时候,kettle必须使用临时文件排序行.步骤名称:名称在整个转换中应该是唯一的排序目录:默认当前 ...

  7. Python实现的计算马氏距离算法示例

    Python实现的计算马氏距离算法示例 本文实例讲述了Python实现的计算马氏距离算法.分享给大家供大家参考,具体如下: 我给写成函数调用了 python实现马氏距离源代码:     # encod ...

  8. JAVA 基础编程练习题6 【程序 6 求最大公约数及最小公倍数】

    6 [程序 6 求最大公约数及最小公倍数] 题目:输入两个正整数 m 和 n,求其最大公约数和最小公倍数. 程序分析:利用辗除法. package cskaoyan; public class csk ...

  9. 第九组 通信3班 063 自反ACL

    一.拓扑图 R4为外网,R2和R3为内网. 二.地址表 Device Interface IP address R1 F 0/0 10.1.63.1 F 0/1 14.1.63.1 R2 F 0/0 ...

  10. Android MVC MVP MVVM (一)

    示例效果 一共三个控件,EditText,Button,TextView 成功显示账号信息,查询失败显示错误信息. <?xml version="1.0" encoding= ...