去除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文件中直接自己定义一下即可，如下：

/*去除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属性哈。