ArcGIS Maps SDK for JS:关闭地图边框(v4.27)

news2024/11/24 18:49:25

文章目录

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

1 问题描述

近期,将ArcGIS Api for JS v4.16更新到了ArcGIS Maps SDK for JS v4.27,原本去除地图的css代码失效了。v4.27需要用.esri-view-surface--touch-none::after控制边框属性。

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

2 解决方案

ArcGIS Api for JS v4.16

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

ArcGIS Maps SDK for JavaScript v4.27

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

完整代码:

<!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 map</title>

    <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>

    <!-- 从 CDN 加载 ArcGIS Maps SDK for JavaScript -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    <!-- 引用 main.css 样式表 -->
    <script src="https://js.arcgis.com/4.27/"></script>

</head>

<body>
    <!-- 存放地图内容的div -->
    <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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1135536.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电脑录屏快捷键,轻松提升录屏效率

“想问问大家&#xff0c;电脑录屏有快捷键吗&#xff1f;每次都要去定位搜索才能打开&#xff0c;来来回回花费的时间太多&#xff0c;要是有快捷键就方便多了&#xff0c;有人知道电脑录屏的快捷键是什么吗。” 电脑录屏已经成为人们日常学习和工作中不可或缺的一部分&#…

WIFI7协议概述

简介 支持6G频段的320M带宽&#xff0c;提供更快地速度&#xff0c;OFDMA并发数提高至148(wifi6为74)&#xff0c;最大连接终端数对比wifi6提升2倍 支持多链路连接&#xff0c;提供不同的延迟服务 支持rtwt&#xff0c;进行更加细化的节电管理 支持4096QAM高阶调制技术&…

中小型企业选择CRM系统时应该注意哪些?

如今市面上充斥着各种各样的CRM客户管理系统&#xff0c;尽管功能说的天花乱坠&#xff0c;中小企业选型时还是应该以自身需求为主。下面是中小企业选型CRM系统的几个要点&#xff0c;大家可以根据以下需求来筛选。 1、明确自身需求 决定企业选择哪一个CRM系统的前提应是需求…

盘点国产ChatGPT十大模型

什么是ChatGPT ChatGPT是一种基于OpenAI的GPT&#xff08;Generative Pre-trained Transformer&#xff09;模型的聊天机器人。GPT是一种基于深度学习的自然语言处理模型&#xff0c;它使用了Transformer架构来处理文本数据。GPT模型通过在大规模文本数据上进行预训练&#xff…

Clickhouse实时数仓建设

1.概述 Clickhouse是一个开源的列式存储数据库&#xff0c;其主要场景用于在线分析处理查询&#xff08;OLAP&#xff09;&#xff0c;能够使用SQL查询实时生成分析数据报告。今天&#xff0c;笔者就为大家介绍如何使用Clickhouse来构建实时数仓&#xff0c;来满足一些实时性要…

Docker系列---【mysql容器手动停止后,重启服务器,mysql容器被删掉了,如何恢复mysql数据?】...

mysql容器手动停止后&#xff0c;重启服务器&#xff0c;mysql容器被删掉了&#xff0c;如何恢复mysql数据&#xff1f; 1.问题描述 为了快速搭建数据库&#xff0c;我使用了docker搭建数据库&#xff0c;由于服务器资源紧张&#xff0c;我想先把mysql容器停掉&#xff0c;启动…

Elsevier (爱思唯尔) 期刊 投稿流程与注意点

&#x1f604; Elsevier (爱思唯尔) 期刊投稿流程中还是遇到了不少问题的&#xff0c;本篇文章总结一些说明文档和提交要点。 ⭐ LaTex 模板说明 & 投稿流程与准备 latex模版和投稿流程相关参考说明可看下面几个网址&#xff0c;总结的非常全面了&#xff1a; Elsevier&am…

Geoda-双变量空间自相关

Geoda-双变量空间自相关https://mp.weixin.qq.com/s/cOkgBCf5ljlVJkWoIwkzxw 之前空间自相关—莫兰指数中简单写了一下如何在ArcGIS中计算莫兰指数&#xff0c;本次简要演示在Geoda中计算双变量空间自相关的步骤。案例数据是武汉市资源环境承载力指数&#xff08;RECC&#xf…

Golang关键字-select

一、Select解决什么问题&#xff1f; 在Golang中&#xff0c;两个协程之间通信Channel&#xff08;图一&#xff09;&#xff0c;在接受协程中通过代码表示即为<ch&#xff1b;如果协程需要监听多个Channel&#xff0c;只要有其中一个满足条件&#xff0c;就执行相应的逻辑&…

尚硅谷Flume(仅有基础)

q 1 概述 1.1 定义 Flume 是Cloudera 提供的一个高可用的&#xff0c;高可靠的&#xff0c;分布式的海量日志采集、聚合和传输的系统。Flume 基于流式架构&#xff0c;灵活简单。 Flume最主要的作用就是&#xff0c;实时读取服务器本地磁盘的数据&#xff0c;将数据写入到HD…

易点易动固定资产管理系统:高效盘点海量固定资产的得力助手

固定资产是企业重要的财务资源之一&#xff0c;盘点是保证固定资产准确性和完整性的关键环节。然而&#xff0c;对于拥有海量固定资产的企业来说&#xff0c;传统的手工盘点方式效率低下且容易出错。为了解决这一难题&#xff0c;易点易动固定资产管理系统应运而生。本文将深入…

AM@第二类换元法积分

文章目录 abstract第一类换元法第二类换元法分析定理&#x1f47a;证明第二类换元公式的应用 倒代换三角恒等化去根式其他使用第二换元法情形例 附加积分公式表例 附 abstract 第二类换元法(简称第二换元法)的原理和应用 第一类换元法 通过变量代换 u ϕ ( x ) u\phi(x) uϕ…

GoLong的学习之路(十)语法之函数

书接上回&#xff0c;上回书说到&#xff0c;结构体&#xff0c;一言之重在于体。一体之重在于经。经之重甚于骨。这张就说go的经络—函数。 文章目录 函数函数如何定义参数可变参数 返回值多返回值 函数类型与变量 高阶函数函数作为参数函数作为返回值匿名函数闭包defer语句底…

虹科 | 解决方案 | 非道路移动机械诊断方案

虹科Pico汽车示波器为卡车、拖拉机、叉车、船只、联合收割机、挖掘机开发了专用的测试附件和软件测试菜单&#xff0c;比如 24 V 电池、Bosch Denoxtronic、J1939 通信、发动机和液压传动系统以及部件测试等。我们为从事重型车辆和非道路移动机械的维护与诊断的朋友&#xff0c…

通用表表达式查询

1.方法&#xff1a; 1.1普通变量创建 with 表名&#xff08;列名&#xff09; as&#xff08;select 内容&#xff09; 语义&#xff1a;创建一张表 列名和内容11对应 和临时表的区别&#xff0c;这个类似变量&#xff0c;变量和常量的区别 后面可以影响前面&#xff1a; 1…

通天之网:卫星互联网与跨境电商的数字化未来

在当今数字化时代&#xff0c;互联网已经成为商业的核心。跨境电商&#xff0c;作为在线商业的一部分&#xff0c;一直在寻求新的途径来拓宽其边界。近年来&#xff0c;卫星互联网技术的发展已经成为这一领域的重要驱动力&#xff0c;不仅将互联网带到了全球各个角落&#xff0…

DSP 开发例程: led_flash

此例程实现在 EVM6678L 开发板控制 LED 闪烁. 使用了 SYS/BIOS 和 MCSDK PDK TMS320CC6678 两个组件. 例程源码可从我的 gitee.com 仓库上克隆或下载. 目录 创建工程源码编辑main.cplatform_osal.capp.cfg 编译调试使用 板载仿真器使用 外部仿真器 创建工程 点击菜单: File | N…

51单片机实验:数码管动态显示00-99

1、实验要求 利用STC89C52RC单片机开发板实现&#xff1a;使用2位数码管循环显示00-99&#xff0c;每次间隔1s&#xff0c;并且当计数到20时&#xff0c;则蜂鸣器鸣响1次。 2、实验分析 程序实现分析&#xff1a; 1、定义数码管位选引脚&#xff08;P2.4、P2.5、P2.6、…

C++ BinarySercahTree for version

搜索二叉树定义 搜索二叉树模拟实现 首先写一个模版&#xff0c;然后写一个搜索二叉树的类 BSTree&#xff0c;类里面给 BSTe进行重命名为&#xff1a;Node。 template<class K> class BSTree {tyepdef BSTree<K> Node; private:Node* root nullptr; };再写一个…

Qt中的枚举变量,Q_ENUM,Q_FLAG以及Qt中自定义结构体、枚举型做信号参数传递

Qt中的枚举变量,Q_ENUM,Q_FLAG,Q_NAMESPACE,Q_ENUM_NS,Q_FLAG_NS以及其他 理论基础&#xff1a;一、Q_ENUM二、QMetaEnum三、Q_FLAG四、示例 Chapter1 Qt中的枚举变量,Q_ENUM,Q_FLAG,Q_NAMESPACE,Q_ENUM_NS,Q_FLAG_NS以及其他前言Q_ENUM的使用Q_FLAG的引入解决什么问题&#xf…