openLayer-画笔优化（激活和移除画笔）

已于 2024-04-30 08:06:44 修改
阅读量113 收藏
点赞数 2
文章标签： 图形渲染 图像处理 vue javascript 前端 html
于 2024-04-28 07:54:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhushanlin/article/details/138265792
版权
本文介绍了如何在 OpenLayers 中进行画笔操作，包括激活画笔、移除画笔以及监听画笔事件。通过具体的步骤和代码实现，详细阐述了在前端地图应用中进行图形绘制和管理的方法。
摘要由CSDN通过智能技术生成

1、激活画笔

map.addInteraction(draw)

2、移除画笔

map.removeInteraction(draw)

3、监听画笔

| draw.on('drawend',evt=>{
    |      |
| --
了解本专栏 订阅专栏 解锁全文 超级会员免费看
@仗剑走天涯
关注
专栏目录
订阅专栏
OpenLayer-比例尺-3857
zhushanlin的博客
04-27 141
【代码】OpenLayer-比例尺-3857。
openLayer-激活画笔与移除画笔
zhushanlin的博客
04-29 117
【代码】openLayer-激活画笔与移除画笔。
Openlayers通过元素获取图层，通过点元素获取线元素
03-12
Openlayers虽然提供了很多方法， 一般是从图层（Layer）获取获取元素（feature），或者从元素（Feature）获取坐标（Coordinate）。获取到的一般都是集合。但是想要反着通过元素（feature）获取图层（Layer）.OL选择线元素有一个BUG，一般选择到的是线上的点元素，而不是线元素，因此需要写一个方法通过这个点元素去获取线元素。
OpenLayers实现图层切换控件
01-18
OpenLayers并没有封装图层切换的控件，所以我们需要自己来实现图层控件。 自定义图层切换控件的原理很简单：显示某个图层时，将其他图层隐藏。 完整代码： layerSwitch.html: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA-Compatible content=ie=edge> <title>图层切
openlayers点击直接获取图层数据
qq_36869635的博客
01-25 3276
// 防抖 _this.mapLayer = _this.olmap.getLayerGroup().getLayers().array_[2]; function debounce(fn, wait) { var timeout; return function() { var context = this; var args = arguments; clearTimeout(timeo
openLayer-画笔（点击按钮激活画笔）
zhushanlin的博客
04-28 148
【代码】openLayer-画笔（点击按钮激活画笔）
Vue+Openlayers+Draw实现画笔切换功能，切换画笔为点、线、面
BADAO_LIUMANG_QIZHI的博客
04-01 2471
场景 Vue+Openlayer使用Draw实现交互式绘制线段： Vue+Openlayer使用Draw实现交互式绘制线段_霸道流氓气质的博客-CSDN博客 Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积: Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积_霸道流氓气质的博客-CSDN博客 如果需要将绘制点、线、面集成在一个页面中并且可以实现切换画笔样式。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot.
Unreal5从入门到精通之Landscape地形系统
最新发布
TxNet
08-17 1142
虚幻引擎 5 (UE5) 能够利用其强大的地形编辑工具套件创建大规模的地形世界。使用地形工具可以创建身临其境的户外地形，这些地形经过优化，可在多种不同设备上保持可播放的帧速率。
openlayers3 获取点图层数据并添加标注和展示标注信息实例
11-29
openlayers3 显示静态地图，从后台查询点数据（后台java代码没有提交，太简单了。。。）展示到地图并添加标注，给标注添加点击事件并展示标注信息，初次接触开源GIS，代码中有错误还请各位看官指正，感谢！
openlayers加载本地离线底图瓦片google数据直接运行即可（亲测）
09-15
利用下载好得离线google地图瓦片数据 结合openlayers接口进行加载显示 纯本地离线好得瓦片数据 运行没问题 当然把瓦片放在服务器上发布出来也是可以的 代码中修改url即可
openlayers选择图层
m0_69112199的博客
07-29 240
const imageLayer = getLayerById(map, '图层id').getSource() as VectorSource。* @param map 地图类。* @param id 图层id。* @returns 选中图层。1.根据id选择图层。欢迎补充，一起进步。
openlayers 入门（22）图层组切换
qq_53079432的博客
10-18 293
图层切换 那两张图层需要自己找
openlayers：天地图底图矢量图层影像图层切换
qq_34752068的博客
05-10 793
【代码】openlayers：天地图底图矢量图层影像图层切换。
OpenLayers入门-第二篇、在vue3中使用elementplus制作图层控件，图层切换，显示隐藏，图层排序
球球不吃虾WHR2349博客
05-17 4969
介绍openlayers中地图图层控制的组件制作方法，图层切换，显示隐藏，图层排序，在vue3中使用element，tree等组件。
openlayers 使用天地图 切换图层
q1025387665a的博客
04-02 1903
前言： 刚开发完一个模块，主要的功能都是由openlayers实现的，写篇博客，一个是为后来者指引条明路（前端的大佬们都只喜欢讲理论，我不喜欢理论，我只喜欢实现的过程，所以这篇文章我只会告诉你怎么实现。同时作者的水平也不高，没有达到做封装的地步，如果你觉得简单，那就再好不过了。），二是给自己做个总结。 看不懂？没关系，我也看不懂，但相信你有过openlayers的使用你应该能知道这个WMTS是什么。他在官网的有些实例加载地图的时候不是等到地图初始化完毕直接渲染的，而是通过一个一个预定义图块进行渲染的。 了
openlayers缩放地图切换图层
qq_41560089的博客
09-11 1610
openlayers缩放地图切换地图展示
OpenLayers 图层切换器（ol-layerswitcher）使用教程
gitblog_01134的博客
08-13 381
OpenLayers 图层切换器（ol-layerswitcher）使用教程 ol-layerswitcherLayer control for OpenLayers项目地址:https://gitcode.com/gh_mirrors/ol/ol-layerswitcher 项目目录结构及介绍 ol-layerswitcher/ ├── dist/ │ ├── ol-layerswitch...
Openlayer获取多个“图层(不是全部)“的范围
西柚2015地信小白GISer
09-08 970
下面代码中有注释--->>> import {boundingExtent} from 'ol/extent'; //所有的图层名称 GetLayersExtend(layersName){ //所有图层的数据范围坐标点（此数据用于求其最小包裹的矩形，也就是数据范围） let coordinates=[]; layersName.forEach(layerName=>{ //layer代表ol的图层，this._lay.
Vue3中实现OpenLayer图层高亮技术教程
资源摘要信息:"OpenLayer-图层高亮"技术的实现及其在Vue3地图应用中的应用。...这些知识点不仅涵盖了基础的地图操作和样式更改，还包括了Vue3框架与OpenLayer的深度整合方法，以及优化和封装这些功能的最佳实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

@仗剑走天涯

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

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

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

打赏作者

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

抵扣说明：

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

余额充值