openlayers文字标注 (九)

电玩女神 2023-02-14 11:00 36阅读 0赞

文字样式

let itemStyle = new Style({ 
      text: new Text(({ 
        // 位置
        textAlign: 'center',
        // 基准线
        textBaseline: 'middle',
        // 文字样式
        font: 'bold 12px 微软雅黑',
        // 文本内容
        text: '我是文字',
        // 文字颜色
        fill: new Fill({  color: '#587de5' }),
        // 文字背景
        // stroke: new Stroke({ color: '#ffcc33', width: 10 })
      }))
    })

在地图中显示

let featureItem = new Feature({ 
      geometry: new Point(121.3213,31.3453),
    })
    featureItem.setStyle(itemStyle)
    let vectorLayer = new VectorLayer({ 
      source: new VectorSource({ 
        features: featureItem
      })
    })
    map.addLayer(vectorLayer)

查看效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200602201220790.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3Nzk3NDEw,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 mapv地图文字标注

效果 ![609c0741e6eb48ee904b85b8953ba58f.png][] 代码 //文字标注 function text() {

男娘i/ 2024年03月30日 08:46/ 0 赞/ 142 阅读

相关 openlayers文字标注 (九)

文字样式 let itemStyle = new Style({ text: new Text(({ // 位置 te

电玩女神/ 2023年02月14日 11:00/ 0 赞/ 37 阅读

相关论文中如何快速更新参考文献的标注（WPS文字）

一、问题最近我正在修改论文，指导老师说参考文献要30多篇，但是我原来只有10多篇，所以我要增加参考文献。二、解决方法在更新正文中参考文献的标注时，一个十分笨

ゝ一世哀愁。/ 2023年02月09日 05:26/ 0 赞/ 109 阅读

相关 OpenCV4机器学习（五）：标注文字和矩形框

前言：本专栏主要结合OpenCV4，来实现一些基本的图像处理操作、经典的机器学习算法（比如K-Means、KNN、SVM、决策树、贝叶斯分类器等），以及常用的深度学习算法。

港控/mmm°/ 2022年09月10日 04:18/ 0 赞/ 266 阅读

相关 OpenLayers项目分析——（九）控件

OpenLayers中的控件，是通过加载到地图上而起作用的，也算地图表现的一部分。同时，控件需要对地图发生作用，所以每个控件也持有对地图（map对象）的引用。　　前面说过，

布满荆棘的人生/ 2022年08月08日 11:52/ 0 赞/ 429 阅读

相关 OpenLayers学习笔记5——使用jQuery UI实现查询并标注（UI篇）

最近事情很多，老板给的压力也很大，经常出差，另外项目和个人研究还都要跟上，本月要交论文，还要写专利，只能抽时间来学习其他的东西了。关于OpenLayers的在博客中不会写太多具

缺乏、安全感/ 2022年08月05日 05:20/ 0 赞/ 220 阅读

相关 OpenLayers学习笔记8——使用servlet从mysql获取数据并标注

1、服务器端Servlet代码： package edu.whu.vge.servlet; import java.io.IOExcept

你的名字/ 2022年08月01日 06:07/ 0 赞/ 222 阅读

相关第九节 html特殊文字符号

特殊文字符号 <html> <head> <title>特殊文字符号</title> </head>

逃离我推掉我的手/ 2022年07月12日 04:24/ 0 赞/ 275 阅读

相关第九节 html特殊文字符号

特殊文字符号 <html> <head> <title>特殊文字符号</title> </head>

小鱼儿/ 2022年07月12日 04:24/ 0 赞/ 302 阅读

相关 echart图表上的标注文字被隐藏了怎么办？

柱状图和折线图的话：调整grid里面的值。例如， grid: \{ left: '8%',

小鱼儿/ 2022年04月14日 05:54/ 0 赞/ 1581 阅读