0%

去除ArcGIS JS API 4.16实例化后的地图拖动时默认自带的5px的外边框

当我们用ArcGIS JS API 4版本实例化完一张二维地图的时候,鼠标移入地图区域内进行点击时,在地图周围会出现一个5像素的黑色边框,虽然不影响其他功能,但是看起来不太美观,所以本文介绍下如何去除ArcGIS JS API 4.16实例化后的地图拖动时默认自带的5px的外边框,这种方法对4版本的API都是通用的。

问题描述

使用ArcGIS JS API 4.16实例化完地图后,当我们的鼠标拖动地图时发现地图的四周会默认自带一圈的外边框,这在我们的系统中看起来是很不协调的,大致样子如下所示:

img

就像上图中的四周,有一圈黑色的外边框,但是当我们鼠标移除的时候它会自动消失,所以这就很不舒服,今天就给大家介绍下该如何去除这个烦人的外边框。

解决方法

1、通过在浏览器的控制台扑捉元素后发现,当我们的鼠标点击拖动地图时,我们存放地图的dom元素节点上会增加一个after的伪类,这个默认自带的外边框就是在这个伪类中定义的,所以找到问题后就好解决了,我们在css文件中直接自己定义一下即可,如下:

1
2
3
4
5
/*去除mapview拖动时的边框*/
.esri-view .esri-view-surface--inset-outline:focus::after {
outline: auto 0px Highlight !important;
outline: auto 0px -webkit-focus-ring-color !important;
}

2、通过在样式文件中写进去那两行自定义样式后,就发现拖动地图时不再有默认的边框了。如果你是在vue中进行项目开发的话,即便添加了以上样式也不会生效,那可能是你的style标签上有scope属性导致的,自己重新新建一个css文件,然后将这两行代码写进新建的文件里,然后在你的地图组件中引入一下吧,注意引入的时候style标签不要加scope属性哈。