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

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

相关阅读:
机器学习（第二章）—— 模型评估
力扣刷题记录3.1-----977. 有序数组的平方
MC20CB-04-TTS 四频段GSM/GPRS/GNSS MC20模块应用
TensorRT C# API 项目更新 (1)：支持动态Bath输入模型推理
初始C语言-1（数据类型、变量、常量、变量的作用域和生命周期、字符串+转义字符+注释）
Linux考试复习整理
猿创征文｜栈和队列OJ刷题
父组件中通过v-model来显示子组件
NXP iMX6ULL核心板框架图｜软硬件｜功能功耗｜原理图的规格书资料
美团接口自动化测试实践

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