OpenLayers6扩展插件ol-ext使用：使用状态组件（Status）显示地图状态和地图实时基本信息

已于 2024-05-15 09:29:53 修改
阅读量450 收藏 1
点赞数 20
分类专栏： OpenLayers6一本通 OpenLayers6扩展进阶 文章标签： vue.js 前端 javascript OpenLayers ol-ext扩展组件 地图状态组件 Status
于 2024-03-21 10:04:46 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/136899188
版权
OpenLayers6一本通 同时被 2 个专栏收录
132 篇文章 10 订阅 ¥159.90 ¥99.00
订阅专栏
OpenLayers6扩展进阶
13 篇文章 3 订阅 ¥59.90 ¥99.90
订阅专栏

返回目录：OpenLayers扩展插件系列汇总目录

前言

本章使用OpenLayers6地图的扩展插件ol-ext来添加一个状态组件（Status）来显示地图状态和地图实时基本信息。

注意：本专栏属于Vue整合OpenLayers地图的进阶教程，并不适合入门读者，入门读者和学生需要先学习《Vue+OpenLayers6入门教程》专栏后才能上手本专栏。

ol

依赖库

"ol": "^6.15.1"
"ol-ext": "4.0.14",
了解本专栏 订阅专栏 解锁全文
汤姆猫不是猫
关注
  • 20
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
OpenLayers6扩展插件进阶之ol-ext使用：使用Notification控件来显示提示框，以鼠标点击位置经纬度弹出提示框为例
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-14 77
本章介绍OpenLayers扩展插件ol-ext的Notification控件来显示提示框，以鼠标点击位置经纬度弹出提示框为例。
Openlayers扩展插件ol-ext ，2022年4月版本v3.2.23
04-11
而ol-ext是针对OpenLayers的一个扩展插件，它增加了许多额外的功能和视觉效果，使得地图开发更为便捷和美观。 在2022年4月发布的ol-ext版本v3.2.23中，我们关注以下几个关键知识点： 1. **图形和符号**：ol-ext...
openlayer 使用ol-ext插件实现凸显区域
最新发布
mylove10086
04-28 1202
openlayer 使用ol-ext插件实现凸显区域
ol-ext transform 对象，旋转、拉伸、放大(等比例缩放)，事件监听
冰雪为融的博客
03-23 2849
官网 示例地址：ol-ext 代码地址：ol-ext: openlayers开源插件库 文档api：查看OpenLayers - Welcome 简单功能示例 自己项目中用到的是 等比例缩放，旋转，拉伸等功能 代码如下 import ExtTransform from 'ol-ext/interaction/Transform' import {always} from 'ol/events/condition' const ..
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例
linzi19900517的博客
02-01 3404
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例。
OpenLayers扩展插件系列之ol-ext，ol-ext库介绍和使用，OpenLayers地图中如何集成ol-ext插件，html网页和vue中如何集成ol-ext插件到地图中
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-19 720
现在可以根据 ol-ext 文档提供的功能，通过 JavaScript 代码来使用各种 ol-ext 提供的扩展功能，比如额外的图层、控件、交互等。ol-ext 是一个用于在 OpenLayers 地图上增加额外功能和控件的扩展库，ol-ext提供了许多额外的功能和控件，如动画效果、3D 功能、图层样式等，可以帮助开发者实现更丰富的地图交互体验。在 Vue 2 项目中的任何页面或组件中，引入并使用上面创建的地图组件，以展示 OpenLayers 地图和 ol-ext 功能。
OpenLayers6扩展插件进阶之ol-ext使用：ol-ext实现鼠标尾迹闪光动画
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-22 214
本章使用OpenLayers的扩展库ol-ext实现鼠标尾迹闪光动画，像小精灵一样。
OpenLayers6（2）：Vue中使用ol-ext插件中的LayerSwitcher图层控制控件
碰碰的博客
04-22 4774
1.版本 OpenLayers：6.4.3 ol-ext：3.2.22（条件："ol": ">= 5.3.0"） 2.配置ol-ext // 1、安装ol-ext npm i ol-ext // 2、在main.js中引入样式 import 'ol-ext/dist/ol-ext.min.css'; 3.使用LayerSwitcher控件 3.1 先看LayerSwitcher构造函数的参数 LayerSwitcher控件的构造函数参数 selection enabl
openlayers的ol-ext插件包的源码
12-22
openlayers的ol-ext插件包的源码，课程基于openlayers开发局域网地图，可以实现地图显示、地点标注、绘制图形、添加图片与文字、地图保存与恢复、地点搜索查询、路径规划、二三维地图切换等功能，为局域网地图的开发...
ol-ext插件，具体实现过程见使用openlayers的扩展插件实现矢量图层的3D渲染
12-28
ol-ext是专门为OpenLayers设计的一系列扩展组件，它包含了很多实用的功能，如交互式图例、图形绘制工具、3D视图等。这个插件的引入使得开发者能够构建更加复杂和交互性强的地图应用。 **3D矢量图层渲染** 在...
ol-ext：Openlayers的很酷的扩展（ol）-动画集群，CSS弹出窗口，真棒字体渲染器，统计图图表（piebar），层切换器，维基百科层，动画，画布过滤器
02-14
ol-ext （ol）的很酷的扩展。 是一组用于Openlayers的扩展，控件，交互，弹出窗口。 或。 关键字：故事图，时间轴控件，CSS弹出窗口，真棒字体，统计图图表（饼图/栏... npm install openlayers-ext 该库将在node_m
OL3-AnimatedCluster:OL3-AnimatedCluster现在是ol-ext项目的一部分
05-08
OL3-AnimatedCluster[已弃用] OL3-AnimatedCluster现在已成为项目的一部分，并且现在可在NPM上使用。 用于 （ol3 / ol4）的群集层，可在缩放更改时对群集进行动画处理，并具有选择交互作用，该交互作用将群集展开，...
WebGIS实战：Web GIS开发环境配置(Vue2.*+IView+Openlayers+Ol-ext+Proj4+JQuery+Axios)
Oruizn的博客
12-13 2529
上一节已经搭建好了基于Vue.js的前端开发环境，但是对于里面的配置我们还没完善，所以，这一节主要对开发环境进行具体配置，以满足Web GIS开发。
使用openlayers扩展插件ol-ext设置地图指定区域高亮
奔跑的痕迹的博客
01-04 4898
最近要实现一个从底图向上发光的功能，着实纠结了好久，起初像是使用polygon 颜色透明度来实现，但毕竟底图不亮，增加图层效果不理想呀 一、ui设计是这样 二、使用polygon着色效果是这样 import {styleSwitch} from '@/components/common/set_style'; mapInit(){ this.map...
OpenLayers6（9）：Vue中使用ol-ext插件中的PrintDialog打印控件
碰碰的博客
05-18 1141
0 版本 OpenLayers：6.14.1 ol-ext：3.2.24（条件："ol": ">= 5.3.0"） 1 相关配置 // 1、安装ol-ext npm i ol-ext // 2、在main.js中引入样式 import 'ol-ext/dist/ol-ext.min.css'; // 3、安装jspdf用于导出pdf npm install jspdf --save // 4、安装FileSaver.js用于导出数据 npm i file-saver 2
ol-ext扩展插件实现矢量图层的3D渲染时如何修改默认样式
qiaozi的博客
10-15 2554
ol-ext扩展插件实现矢量图层的3D渲染时如何修改默认样式ol-ext实现3D渲染问题汇总及解答 ol-ext实现3D渲染 之前在项目在需要在openlayers中实现物体的3D立体化展示，故找到了ol-ext插件，具体实现过程见使用openlayers的扩展插件实现矢量图层的3D渲染，写这篇博客的原因也是记录自己工作中遇到的问题，以及帮助更多需要帮助的人，上一篇博客中有小伙伴问到一些问题，所以特写这篇博客进行一个解答。 问题汇总及解答 设置3D渲染之后没有效果 解答：(1) ol-ext是基于ope
openlayers3+功能拓展
凡事有果必有因
09-01 1568
最近看到openlayers3的一个功能拓展，每个功能都是在源码的基础上开发的，我们可以对照着学习源码，也可以参考着做自己的功能拓展，很实用。 地址：http://viglino.github.io/ol3-ext/
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
浩星
11-26 5078
前言： openlayers中渲染图片是有多种方法的，Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。 相关资料: 1、ol-ext官方地址：入口 2、ol-ext 对应的资料地址：入口 3、ol-ext 源码gitee地址：入口 4、openlayers 最新官网：入口 5、openlayers 官网api：入口 6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口 ...
OpenLayers ol-ext:Transform 对象，旋转、拉伸、放大
Gary Leong
05-20 2431
OpenLayers引用ol-ext:Transform能够对Feature图形进行放大、缩小、移动、旋转、拉伸等操作，非常好用。 代码： transformFeature() { var _this = this if (this.transform !== null || this.transform !== '') { this.map.removeInteraction(this.transform) } this.editM.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汤姆猫不是猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值