ArcGIS Maps SDK for JS：关闭地图边框（v4.27）

文章目录

- 1 问题描述
- 2 解决方案

1 问题描述

近期，将ArcGIS Api for JS v4.16更新到了ArcGIS Maps SDK for JS v4.27，原本去除地图的css代码失效了。

v4.26及以前版本 ，需要用.esri-view-surface--inset-outline:focus::after 控制边框属性。

从 v4.27版本开始 ，改用.esri-view-surface--touch-none::after控制边框属性。

下面为没有关闭地图边框的效果图。（亮色版地图为黑色边框，暗色版地图为白色边框。下图为亮色版地图）
在这里插入图片描述

2 解决方案

ArcGIS Api for JS v4.26及以前版本

/*移除地图边框 ArcGIS Api for JS v4.26及以前版本*/
.esri-view .esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}

/*不加.esri-view 也可以*/
.esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}
1
2
3
4
5
6
7
8
9

ArcGIS Maps SDK for JavaScript v4.27

/*移除地图边框 ArcGIS Maps SDK for JavaScript v4.27*/
.esri-view-surface--touch-none::after {
  outline: none !important;
}
1
2
3
4

完整代码：

DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D maptitle>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }


        /*移除地图边框 ArcGIS Maps SDK for JavaScript v4.27*/
        .esri-view-surface--touch-none::after {
            outline: none !important;
        } 
    style>

    
    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    
    <script src="https://js.arcgis.com/4.27/">script>

head>

<body>
    
    <div id="viewDiv">div>

    <script>
        require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
            // 创建Map对象，指定地图
            const map = new Map({
                basemap: "topo-vector"
            });

            // 创建MapView对象
            const view = new MapView({
                container: "viewDiv", // viewDiv为容器div的id
                map: map, // 地图所在的Map对象
                zoom: 4, // 初始LOD缩放等级（0-23） level of detail (LOD)
                // scale: 50000000, // 设置初始比例尺为 1:50,000,000  zoom和scale选其一即可
                center: [108, 32] // 地图初始中心位置经纬度 [longitude,latitude]
            });
        });
    script>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

结果展示：
在这里插入图片描述

相关阅读:
Spring的bean装配和bean的自动装配
k8s集群StatefulSets的Pod优雅调度问题思考？
【浅学Java】深入理解TCP的10种机制
视频特效制作软件 After Effects 2024 mac中文版新增功能
24点游戏题库算法分析
ClickHouse 存算分离改造：小红书自研云原生数据仓库实践
破解软件的原理是什么(软件被破解公开)
浮点数(小数)在计算机中如何用二进制存储？
【无公网IP】在公网环境下Windows远程桌面Ubuntu 18.04
Rust 从入门到精通09-模式解构

原文地址：https://blog.csdn.net/weixin_46098577/article/details/134048718