首页 > 其他分享 >mapbox显示隐藏图层

mapbox显示隐藏图层

时间:2023-04-29 22:02:07浏览次数:41  
标签:map visibility visible mapbox 图层 隐藏 属性

在 Mapbox 中,如果您想要显示或隐藏一个图层,可以使用 setLayoutProperty() 方法,通过设置该图层的 visibility 属性来实现。

setLayoutProperty() 方法可以修改地图上指定图层的样式属性。对于 visibility 属性,您可以将其设置为 'visible''none' 来分别显示或隐藏该图层。

下面是一个示例代码,演示了如何通过按钮点击事件来设置指定图层的 visibility 属性以显示或隐藏该图层:

mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-122.4194, 37.7749],
    zoom: 12
});

// 显示或隐藏指定图层的函数
function toggleLayer(layerId){
    var visibility = map.getLayoutProperty(layerId, 'visibility');
    
    if (visibility === 'visible') {
        map.setLayoutProperty(layerId, 'visibility', 'none');
    } else {
        map.setLayoutProperty(layerId, 'visibility', 'visible');
    }
}

// 按钮点击事件
var toggleButton = document.getElementById('toggle-layer');
toggleButton.addEventListener('click', function(){
    toggleLayer('layer-id'); // 将 'layer-id' 替换为要显示或隐藏的图层的 ID
});

在上面的代码中,我们通过 getLayoutProperty() 方法获取了指定图层的 visibility 属性的值,并检查其是否为 'visible'。如果该属性的值为 'visible',则说明该图层目前可见,我们就将 visibility 属性设置为 'none' 来隐藏该图层。如果该属性的值不是 'visible',则说明该图层目前不可见,我们就将 visibility 属性设置为 'visible' 来显示该图层。

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。



标签:map,visibility,visible,mapbox,图层,隐藏,属性
From: https://blog.51cto.com/echohye/6236958

相关文章

  • Mapbox Style 规范(转载)
    Mapbox致力于打造全球最漂亮的个性化地图。这里记录下其Web端APIMapboxGLJS的地图样式规范Style的各个配置项:必填项会加上*,方便根据目录进行查看1.version*version:版本号(必填,且值必须为8)"version":82.namename:名称(可选,用于给style取名,方便阅读)"name"......
  • mapbox加载geojson报错error: Style is not done loading
    Mapbox加载GeoJSON地图时,遇到error:Styleisnotdoneloading错误通常是由于地图样式文件没有加载完成引起的。具体来说,可能是因为Mapbox样式文件中包含了某些需要加载的图片或者矢量图层,而这些图片或矢量图层尚未完全加载完成,导致无法渲染地图。为解决此问题,可以尝试以......
  • 设置wordpress:隐藏 自豪地采用WordPress 链接(wordpress 6.2)
    一,未隐藏前的效果说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest     对应的源码可以访问这里获取: https://github.com/liuhongdi/     或: https://gitee.com/liuhongdi说明:作者:刘宏缔邮箱:[email protected]......
  • js javascript js隐藏页面上有id的控件,隐藏页面上无控件包含的文字,控制页面控件属性
    1.隐藏页面上有id的控件varinput=document.getElementsByTagName("input");//获取页面所有inputfor(vari=0;i<input.length;i++){if(input.item(i).id.indexOf("txt")>=0)//判断input的id中是否包含txt字符串{......
  • 视图层
    目录三板斧本质HttpResponse和redirect的区别JsonResponse上传文件Django视图层-FBV与CBVFBV中request对象的几个方法CBVCBV的源码剖析分析步骤:详细分析:使用操作对应知识点:三板斧本质用来处理请求的视图函数都必须返回HttpResponse对象#可以查看源码1.HttpResponse():肯定......
  • Chrome浏览器中的隐藏用法 - Google浏览器协议
    谷歌浏览器本身自带的协议其实这些协议当我们在打开设置的时候,地址栏也会显示的释放内存chrome://restart,使用这个命令后,浏览器会立刻关闭并重新开启,重新开启时会恢复之前打开的页面谷歌应用chrome://apps,该命令会打开谷歌浏览器的应用,是单独的一个不在浏览器页面的应用谷......
  • HarmonyOS 3.1系统隐藏的这几个小细节 你都发现了么
    就在前不久,华为发布了搭载HarmonyOS3.1系统的HUAWEI P60系列,精致内核搭配典雅外观,一亮相就获得了众多用户的喜爱。而笔者拿到真机进行上手后,发现HarmonyOS3.1在UX交互体验和视觉感观的打磨上都下足了功夫,包括了系统动效的全面优化,图标圆角细节的打磨,个性化AOD随心设置等等。接......
  • element-ui中多个表单el-form进行显示/隐藏切换时校验失效
    问题描述:当一个弹窗或页面中含有多个表单(都需要校验),且需要进行显示/隐藏切换时,容易造成切换后的表单元素的校验失效。如下: 第一个表单的输入框都触发blur提示语后,切换至第二个表单第二个表单的输入框触发blur后,第一个输入框的校验失效了。返回后,第一个输入框触发blur,校验......
  • 使用arcpy替换工程文件中的栅格图层数据源异常
    参考:https://www.cnblogs.com/Leechg/p/10668992.html前面的1月1日到1月31日输出正常但是从2月1日开始就开始重复输出1月1日的图片到3月1日开始也是输出1月1日的图片。。难道每个月的必须分开存放?原因是???......
  • 前端隐藏和显示div的方式js和beetle:
    方式一:设置元素style对象中的display属性1、vart=document.getElementById('demo');//选取id为test的div元素2、t.style.display='none';//隐藏选择的元素3、t.style.display='block';//以块级样式显示方式二:设置元素style对象中的visibility属性1、vart=documen......