首页 > 其他分享 >leaflet频繁切换mapbox矢量图层-短暂空白问题

leaflet频繁切换mapbox矢量图层-短暂空白问题

时间:2024-03-20 09:55:53浏览次数:14  
标签:矢量图 leaflet 层时 切换 mapbox 图层

leaflet加载mapbox矢量图层-最佳方案推荐

闪烁问题

比如现在有卫星图和mapboxgl矢量图层,两者有时常常需要切换,但在切换回矢量图层时,会出先短暂的空白问题(就是初始化图层),那有什么办法,可以实现平滑过渡切换呢

解决思路

大概讲一下思路,就是在切换卫星图时,矢量图层不要立刻移除,通过遍历样式表图层设置'visibility': 'none',那么就可以把矢量图层进行隐藏了,再兹切换回矢量图层时也是遍历样式表图层设置'visibility': 'visible'就可以平滑显示了。

但这样如果我长时间不切换回矢量图层,它又没有被销毁,岂不是一直挂载着占用内存。所以,我们还可以加上一个定时器任务,比如超过10分钟没有再次加载矢量图层时,那就直接把矢量图层移除。

标签:矢量图,leaflet,层时,切换,mapbox,图层
From: https://www.cnblogs.com/echohye/p/18084551

相关文章

  • 百度地图 矢量图标阴影消除
    在qt项目实践过程中,发现在绘制轨迹时,矢量图标下会存在一个很难看的阴影部分,借用百度地图示例中心的demo,如下所示这一部分的矢量图标代码如下//=======================相关参数初始化varplaneIcon=newBMap.Symbol(BMap_Symbol_SHAPE_PLANE,{//飞机图标s......
  • Mapbox实战项目(1)-栅格图片图层实现地图方位展示
    需求背景需要实现地图上展示一个类似于罗盘的标记,随着地图的缩放、切换、旋转等,能够在地图的中央指示出地图的方位。系统自带的方位控件太小,在特殊业务场景下不够醒目。技术选型Mapbox实现分析官网已经有地图上展示图片矢量图层的demo,“Addarasterimagetoamaplayer......
  • MapBox信息补填
    Mapbox目前仍然不允许国内用户注册(但可以登录使用,奇怪了),近期已注册的账号也让补充一些信息,很多人不知道怎么填写,为源GIS来帮您详细讲解说明一下。问题描述2024年Mapbox官网注册账号发生一些变化,注册时需要填写账号的类别是个人使用还是商业用途。以前注册过的账号,登录时,强制要......
  • Leaflet实现极地坐标投影
    <!DOCTYPEhtml><htmllang="en"><head> <metacharset="utf-8"> <metaname="viewport"content="width=device-width,initial-scale=1"> <title>LeafletPolarGraticule-Arctic<......
  • Openlayer加载mapboxgl矢量图层
    注意Openlayer的版本Openlayer是支持直接加载矢量图层的,如下图层会没有样式渲染<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0&q......
  • Leaflet 实现自定义瓦片实现xyz信息和边框绘制到瓦片上
    Leaflet实现自定义瓦片的渲染,将一些信息和边框绘制到瓦片上。主要作用是创建一个Canvas元素作为Leaflet的瓦片,并在Canvas上绘制一些文本信息和边框。实现步骤:创建一个Canvas元素作为Leaflet的瓦片,并获取其2D绘图上下文。设置Canvas的大小为当前瓦片的大小。......
  • 在vue2中使用leaflet.AnimatedMarker来移动某个目标
    需求是:点击某个按钮后让扫描仪沿着某条线移动进行扫描效果:  扫描仪是沿着河流移动的,河流的生成方式通过geojson数据生成,geojson里包含了河流的一些点位的经纬度,扫描仪根据经纬度来移动leaflet:1.9.4 leaflet.AnimatedMarker:1.0.0 1.引入 importLfrom'leaf......
  • [Mac软件]Boxy SVG 4.20.0 矢量图形编辑器
    BoxySVG是一款入门级矢量图形编辑器,具有全套基本功能、易于学习的选项卡式界面和可自定义的键盘快捷键。有了它,您可以轻松创建横幅、图标、按钮、图形、界面草图,甚至有趣的表情包。编辑器支持使用多种工具创建和编辑矢量对象,用颜色渐变装饰它们,用文本元素补充它们。元数据编辑功......
  • Leaflet 使用图片作为地图
    Leaflet使用图片作为地图关键代码:L.CRS.Simple.transformation=newL.Transformation(1,0,1,0);//坐标原点切换为左上角varmap=newL.Map('map',{crs:L.CRS.Simple,//设置地图坐标模式为简单模式center:[0,0],//地图中心zoom:-0.5,//缩放......
  • Leaflet 使用图片作为地图
    Leaflet使用图片作为地图关键代码:L.CRS.Simple.transformation=newL.Transformation(1,0,1,0);//坐标原点切换为左上角varmap=newL.Map('map',{crs:L.CRS.Simple,//设置地图坐标模式为简单模式center:[0,0],//地图中心zoom:-0.5,//缩......