OpenLayers4文本上图实例

openlayers文字标注 (九) 文字样式 let itemStyle = new Style({ text: new Text(({ // 位置 textAlign: 'center', // 基准线 textBaseline: 'middle', // 文字样式 font: 'bold 12px 微软雅黑', // 文本内容 text: '我是文字', // 文字颜色 fill: new Fill({ color: '#587de5' }), / 阅读详情
    obj.drawstnm = function (st_result) {
        var arr = new Array();
        arr = st_result.split('|');
        //set staion style
        stnmFeatureset = new Array();


        //declare img style
        var labelStyel = function (feature) {
            return new ol.style.Style({
                text: new ol.style.Text({
                    offsetX: 0,
                    offsetY: 16,
                    textAlign: 'center',
                    textbaseline: 'middle',
                    font: 'normal 14px 微软雅黑',
                    text: feature.get('name'),
                    fill: new ol.style.Fill({ color: '#549688' })
                })
            });
        }


        for (var i = 1; i < arr.length; i++) {
            var tmp = new Array();
            tmp = arr[i].split(',');
            var textf = new ol.Feature({
                stid: tmp[1],
                geometry: new ol.geom.Point([tmp[2], tmp[3]]),
                name: tmp[0]//上图文本
            });
            textf.setStyle(labelStyel(textf));
            stnmFeatureset.push(textf);
        }


        var vectorSource = new ol.source.Vector({
            features: stnmFeatureset
        });
        obj.js_rain_stnm = new ol.layer.Vector({
            visible: false,
            zindex: 11,
            source: vectorSource
        });


        return obj.js_rain_stnm;
    }
openlayers6【十八】vue VectorLayer矢量图层实现批量图标点位上图功能详解 文章目录1. 写在前面1. 效果图2. 实现批量标注点位操作代码(核心请看 `addPoints` 方法和 `getIcon`方法)3. 完整代码 1. 写在前面 1. 效果图 ​ 2. 实现批量标注点位操作代码(核心请看 addPoints 方法和 getIcon方法) addPoints 方法 ① 创建一个图层 ② 图层添加到map地图 ③ 循环(点经纬度)数组 ④ 创建feature对象,最后添加到图层。 /** * 批量根据经纬度坐标打点 */ addPoints(coordinates) 阅读详情

相关推荐

Openlayers实现角度测量

Openlayers实现角度测量

Jinuss的博客 2510

OpenLayers设置显示文本

var nonTextStyle = new ol.style.Style({ //把点的样式换成ICON图标 fill: new ol.style.Fill({ //填充颜色 color: 'rgba(37,241,239,0.2)' ...

Gary Leong 6846

WebGIS实战:Vue+Openlayers实现地图控件的加载与控件自定义位置

在上一节《WebGIS实战:Openlayers实现网络地图的加载与切换》中,我们已经用到了一个地图控件了——图层切换控件(由Openlayers-Extension实现),这一节将讲述我们可能还会用到什么控件,而且由于这些控件位置都是固定在地图的某一位置,有时不满足我们的布局需求,这就需要我们知道怎么调整这些控件的位置了。

Oruizn的博客 5359

openlayers 在圆的边上添加文字

前言: 折磨了好几个小时,终于做出了正确的效果,如果你也受苦于使用circle 生成 通过offsetX或者Y 文字始终不能到他准确的位置,那先恭喜你,至少你获得了一种可以实现的方案。 问题描述 我们需要实现如图所示的范围扩散的圆,同时需要准确的显示在圆的边上的文字,至于颜色。。这个想必不用我多提。 主要思路 如果offsetX、offsetY 文字 不可以到达圆的边上也就是我们想要的准确的位置,那我们是否可以通过获取coordinator坐标,去通过这个坐标实现这个文字的正确显示位置,结论是可以,因为

q1025387665a的博客 3072

openlayers 绘制动态迁徙线、曲线

前言:本来懒得写这个博客,实在深感无聊,没啥事情做,出篇博客让大家看看。文章会尽可能简短。掉帧属录屏效果,尚未测试过性能,因为这个可以看自己调节。以下为一条贝塞尔曲线分了180段的效果描述。 颜色属于瞎编乱造,只为示例,不为效果负责。 1、先生成起点与终点的表示点。这个很重要,原因在于:openlayers 会智能的检测图层中的数据源(source)是否有需要更新的features,如果你没有设置features,或者不在视图内,是不会触发渲染、因此,也就不会触发我们需要的prerender事件。 2、监听

q1025387665a的博客 5099

openlayers6【十六】vue overlay类实现gif动态图标效果详解

前提: openlayer 里面支持 gif 图标上图的只有 overlay类 可以实现。 openlayers 不支持 svga 动画图 文章目录1. 效果图2. 【核心】创建overlay类,循环点位根据坐标创建div点位3. css设置gif图标4. 完整代码 1. 效果图 2. 【核心】创建overlay类,循环点位根据坐标创建div点位 // 使用Overlay添加GIF动态图标点位信息 addGif() { let _that = this; let mainBox =.

@必意玲 5822

巧用Openlayers4的Style

概述 非常细化Openlayers4中的StyleFunction,因为它可以让我非常方便的实现各种效果,本文带你一起一探究竟。 StyleFunction StyleFunction是一个样式函数,参数包括:feature和resolution,如下图。 不过,一般来说,resolution我用的很少,我一般会用zoom替换掉resolution这个参数;StyleFunctio...

LZUGIS 5129

openlayers中实现点的拖拽(modify),在layer中增加修改删除point。

最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下。 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置,添加其他数据,保存入库。 2,增加后展示点,点上面有序号。 3,修改时,当选中一条记录的时候需要地图上面的点高亮,这个时候可拖动位置,修改表单数据,修改后保存。 4,删除也...

dingqing4356的博客 2857

OpenLayers-Vector图层Feature选择工具

1、创建Vector图层 1 var vlayer = new OpenLayers.Layer.Vector("Vector Layer"); 2 map.addLayer(vlayer); 2、创建Select Tool 1 // 创建select control 2 var sf = new OpenLayers.Control.SelectFeature(v...

a18826265589的博客 266

解决Vue.js和OpenLayers中setText无法立即更新文本的问题

当在Vue.js中结合OpenLayers使用时,可能会遇到一些问题,其中之一是setText方法无法立即更新文本内容的问题。然而,当我们尝试在Vue.js中使用setText方法来更新文本时,可能会遇到延迟显示的问题。下面是一个简单的示例,演示了如何在Vue.js中使用OpenLayers并解决setText延迟更新文本的问题。通过以上的解决方法,我们可以在Vue.js中使用OpenLayers并确保setText方法能够立即更新文本内容。最后,我们在按钮的点击事件处理程序中更新文本内容。

CodeWhizZ的博客 298

Vue+OpenLayers配置图标和文本参数的JavaScript代码实例

通过上述代码示例,我们可以在Vue项目中使用OpenLayers库配置图标和文本参数,实现自定义样式的地图展示。类创建要素对象,我们在这个要素中设置了一个点几何对象,并将之前创建的图标样式和文本样式添加到要素的样式中。方法中,我们创建了一个OpenLayers地图实例,并设置了初始的视图中心和缩放级别。类创建图层对象,我们在这个图层中设置了一个监听器函数来动态获取要素的样式。接着,我们创建了一个矢量图层,并将要素添加到该图层的源对象中。接着,我们创建了图标样式和文本样式。对于图标样式,我们使用。

laugh666的博客 303

基于openlayers、cesium实现二、三维地图切换

本文介绍如何在普通2d的gis项目里实现地图的二、三维切换。二维地图引擎市面上比较多,比较有代表性的像openlayers、leaflet等。三维地图目前比较流行的开源方案有cesium,它本身是基于webGL实现的地图引擎。 我之前写过一篇总结,是基于vuecli2.0实现的。按步骤一步步实现,问题不大。如果你是用vuecli3搭建的项目,这里有篇文章介绍用vuecli3实现引用cesium。如果要实现二三维地图切换,难点是地图引擎的转换,有个插件已经帮忙实现了这个工作:ol-cesium。 场景需求 好

mr_jhc的博客 1万+

openlayers 添加文字标注

openlayers 实现在地图上添加文字标注。为图片注记添加文本标签

OpenLayers 标绘库 ol-plot:25 种地图符号一次配齐

地图搭好了,想在上面标出进攻方向、防御区域、集结地,却发现 OpenLayers 原生 API 只负责画点、线、面这类基础几何,战术与应急符号得逐个自己写 Canvas 样式。ol-plot 是 OpenLayers 的扩展标绘库,把 25 种内置符号和绘制、编辑、存取的完整能力打包好了。 [![OpenLayers 扩展标绘 ol-plot 符号工具栏与标绘效果](https://raw.gi

gitblog_01029的博客 1019

配电网可靠性评估(一)—最小路法和非序贯蒙特卡洛模拟法的matlab实现

电力系统的可靠性研究是相关领域的热点问题。根据研究对象的不同,又可分为发电系统的可靠性,输电系统的可靠性和配电系统的可靠性。配电网在电力系统中处于最末端的位置,直接和用户相连,一旦出现故障情况,就会在用户侧表现为停电事故。因此对配电网的可靠性评估有着重大意义。......

配电网和matlab的博客 1万+

MaxEnt软件的下载与安装

1、下载网站:http://lucky-boy.ys168.com/ (这是之前在网上搜到的,里面有许多软件安装包,感谢网页主的资源共享,违权必删)

weixin_42191203的博客 2万+

openlayers4.6.5 实现距离量测和面积量测

目录 版本: openlayers4.6.5 效果图: 小插曲: 实现原理: 完整的js代码如下(鼠标样式图标 我没放上来,有需要的我给你发邮箱): 版本: openlayers4.6.5 效果图: 小插曲: 原本使用ol官方提供的 量测例子,就挺不错的。但是由于放在项目中后。量测样式不知道为啥出不来,找了半天原因 也没有找到,单独在一个html中完全没问题。所以推测可能和项...

yangniceyangyang的博客 1637

T-Box功能详解及应用

T - BOX,其全称为 Telematics Box,作为远程 / 车载通信模块,是一款集车身网络与无线通讯功能于一体的智能终端设备。它充当了多媒体车机与 TSP(汽车远程服务提供商)以及互联网之间的无线路由器角色,为用户创造了远程访问的可能。用户借助T - BOX能够对车辆配备的各个 ECU(电子控制单元)进行远程操控,包括远程启动或停止发动机开启或关闭空调天窗后备箱门车门,以及实现闪灯鸣笛等功能。

wgl110110的博客 5642

openlayers 设置边界线外圈遮罩

openlayers 设置边界线外圈遮罩 话不多说直接上图 代码里面有详细注解请看代码片段,如有不清楚的话私信我。 drawArea() { let _this = this; let geoJson = new GeoJSON(); //获取边界数据MultiPolygon数组 let ft=geoJson.readFeatures(area)[0].getGeometry().getGeometries() //获取绘制边界数据的数组,

小猪佩奇 2919

从CPRI到eCPRI:手把手教你用Wireshark分析基站前传协议帧结构

本文手把手教你使用Wireshark工具,深入解析从CPRI到eCPRI的基站前传协议帧结构。通过搭建分析环境、编写解析脚本,并对比两者在时延管理、帧格式及数据封装上的差异,为无线通信领域的研发与测试人员提供了一套实用的逆向分析与故障排查方法。

x8y9z0的博客 605

高斯过程的数学理解

G澳大利亚的过程是有益的,特别是当我们有少量数据时。当我在制造业担任数据科学家时,我们的团队使用这种算法来揭示我们接下来应该进行哪些实验条件。但是,此算法不如其他算法流行。在这篇博客中,我将通过可视化和 Python 实现来解释高斯过程 [1] 的数学背景。

gongdiwudu的专栏 3611

openlayers6【十一】vue 使用overlay实现弹窗框popup效果

在之前的文章 openlayers6【九】地图覆盖物overlay三种常用用法 popup弹窗,marker标注,text文本 提及到了overlay三种常用方式就说到了popup弹窗效果。本篇文章我们具体详解一个popup是怎么实现的。 弹窗效果在地图加载完成后,我们往往需要更多的交互效果,不仅仅局限于地图的缩放和平移,让地图业务更加复杂一点,比如图标打点上图后,我们可以通过点击图标弹窗这个点位的具体信息都是应用场景,下面具体说下怎么利用overlay类实现popup气泡弹窗的吧。 文章目录1. po.

@必意玲 8947

Cadence OrCAD Capture 软件自带元件原理图符号库目录与介绍图文视频教程

硬件工程师在开始原理图设计时,应该首先拥有自己的元件原理图符号库。基于Capture进行原理图设计的一个很大的优点就是,软件自带的元件库比较全。本文简单介绍Capture软件自带元件库。

fydar的博客 5579

postgis+geoserver+openlayers路径规划导航

postgis+geoserver+openlayers路径规划导航欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLow...

qq_39342768的博客 6424

【ROS】ROS2导航Nav2:简介、安装、测试效果、错误处理

在ROS2中自动导航使用Nav2来实现。Nav2 使用几个独立的模块化服务,通过 ROS 2接口(例如动作服务器或服务)与行为树 (BT) 通信。Nav2 输入包括:TF转换、一个地图源、一个行为树 (BT) XML 文件和相关的传感器数据源;Nav2 输出速度命令;Nav2 支持多种机器人,比如:四足机器人、履带机器人、轮式机器人等。

郭老二 5085

Transformer实战(32)——Transformer模型压缩

在本节中,我们学习了如何在硬件资源受限的情况下减轻运行大模型的负担。我们介绍了如何通过蒸馏、剪枝和量化从训练好的模型中提取高效模型。预训练轻量级的通用语言模型(如 DistilBERT) 可以在各种任务上进行微调,并表现出与非蒸馏模型相当的性能。随着数据量的不断增加,我们希望模型能够更快地运行,在这方面,高效 Transformer 起着至关重要的作用。

盼小辉丶的博客 2578
上一篇: OpenLayer4叠加geojson数据增加监听事件获取该geojson数据的相关属性
下一篇: OpenLayers4叠加显示点
David_SIAT
博客等级 码龄18年 131粉丝 33原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值