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

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

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

问题描述

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

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

解决方法

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属性哈。

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.xbeichenbei.com/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • ArcGIS API for JavaScript开发入门必读

    ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线...

    X北辰北
  • ArcGIS JS API 4.16控制地图的缩放大小

    在3.X的ArcGIS JS API版本中我们可以轻松的调用相应的API来实现地图的缩放大小的控制,让实例化后的地图在我们设置的范围中进行缩放,但是在4.X的版...

    X北辰北
  • 【番外】 Vue中使用ArcGIS JS API 4.14开发

    本文主要介绍如何在Vue项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在Vue...

    X北辰北
  • 【番外】 使用@arcgis/cli脚手架进行ArcGIS JS API开发

    本文主要介绍如何在Vue和React项目中使用ArcGIS JS API进行开发,与以往的esri-loader开发方式不同的是,本文使用的是@arcgis/c...

    X北辰北
  • ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core

    ArcGIS API for JavaScript 4.18中新增加了一种基于ES Modules的新开发方式@arcgis/core,这篇文章就来介绍一下如何...

    X北辰北
  • 实例化二维地图

    主要介绍如何用ArcGIS JS API 4.14去实例化一张二维地图,并简单介绍了和3.X版本实现方式的异同。

    X北辰北
  • ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

    当我们使用ArcGIS JS API开发项目时,经常会用到地图测量控件,用于测量地图上两点之间的距离、一片区域的面积或周长等,但是ArcGIS JS API测量...

    X北辰北
  • html2canvas实现ArcGIS API for JavaScript 4.X截图功能

    主要介绍ArcGIS API for JavaScript 4.X实现地图截图的两种方式,解决普通地图截图是底图空白的问题,最终效果如下:

    X北辰北
  • 【番外】 React中使用ArcGIS JS API 4.14开发

    本文主要介绍如何在React项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在R...

    X北辰北
  • 手写原生代码专题 | 图片拖拽效果(一)

    前端的小伙伴们,我想大多数都是颜值控吧,看到一个漂亮或新奇的效果,都想搞明白是怎么实现的吧。但是前端发展的实在太快,各种框架和组件五花八门,由于项目业务时间的问...

    前端达人
  • ArcGIS JS API 4.15实现地图加载图片(优化版)

    主要介绍如何用ArcGIS JS API 4.15实现在二维地图中添加图片的操作。上一篇文章已经介绍了如何添加图片的四种方法,但是添加到地图上的图片在拖动时有些...

    X北辰北
  • 地理信息系统(GIS)系列——ArcGIS中的各种图层

    Arcgis Javascript API 提供了5种类型的图层,分别是地图切片图层、动态地图图层、图形图层、带地理参考的影像图层以及KML图层,这些图层类都继...

    魏晓蕾
  • 【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评

    本文主要针对于在Vue和React项目中使用esri-loader和@arcgis/cli脚手架进行ArcGIS JS API开发时,比较两种方式的不同,供各位...

    X北辰北
  • ArcGis API JS 4.X本地化部署与地图的基础使用

    首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19。

    Kiba518
  • 地理信息系统(GIS)系列——ArcGIS API for JavaScript 3.9(1)

    Map 是承载图层的容器,主要用于呈现地图服务、影像服务,此外还可以展示 WMS 服务等,一个图层只有被添加到 Map 中,才能被显示出来。

    魏晓蕾
  • ArcGIS API for JavaScript应用开发

    ArcGIS API for JavaScript 提供在线版API,4.x 是 ArcGIS API for JavaScript 的新一代版本,实...

    IT技术小咖
  • 地理信息系统(GIS)系列——Portal for ArcGIS

    Portal 是一个基于 Web 的应用,它能提供个性化,单点登陆,不同源的内容聚合,和信息系统的表示层集中。聚合是整合不同 Web 页面源数据的过程。为了提供...

    魏晓蕾
  • ArcGIS JS API 4.14离线部署

    本文主要介绍ArcGIS JS API 4.14的离线部署和测试离线部署是否成功,JS API离线部署是ArcGIS JS API开发的首要前提,也是基本技能,...

    X北辰北
  • 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制网络路径图的实现步骤,包括二维和三维。

    X北辰北

扫码关注腾讯云开发者

领取腾讯云代金券