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

news/2025/5/12 2:50:16

文章目录

    • 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的idmap: 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>

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

文章来源:https://blog.csdn.net/weixin_46098577/article/details/134048718
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:https://dhexx.cn/news/show-5091414.html

相关文章

带着问题去分析:Spring Bean 生命周期 | 京东物流技术团队

1: Bean在Spring容器中是如何存储和定义的 Bean在Spring中的定义是_org.springframework.beans.factory.config.BeanDefinition_接口&#xff0c;BeanDefinition里面存储的就是我们编写的Java类在Spring中的元数据&#xff0c;包括了以下主要的元数据信息&#xff1a; 1&…

态路小课堂丨InfiniBand AOC有源光缆简介

TARLUZ态路 InfiniBand&#xff08;直译为“无限带宽”技术&#xff0c;缩写为IB&#xff09;是一个用于高性能计算的计算机网络通信标准&#xff0c;它具有极高的吞吐量和极低的延迟&#xff0c;用于计算机与计算机之间的数据互连。InfiniBand也用作服务器与存储系统之间的直…

计算机网络——计算机网络体系结构(3/4)-计算机网络体系结构分层思想举例

目录 发送请求报文 应用层构建HTTP请求报文 运输层添加TCP首部 网络层添加IP首部 数据链路层形成帧 物理层转化为比特流 路由器处理 服务器处理 发回响应报文 计算机网络体系结构分层思想举例 假设网络拓扑如下所示&#xff0c;主机属于网络N1&#xff0c;Web服务器属…

进阶C++__STL__set/ multiset和map/ multimap使用方法

目录 一、关联式容器 二、键值对 三、树形结构的关联式容器 set/ multiset 容器 set基本概念 set构造和赋值 set大小和交换 set插入和删除 set查找和统计 set和multiset区别 set / multiset总结 pair对组创建 set容器排序 内置类型指定排序规则 自定义数据类型指…

Java-API简析_java.net.URL类(基于 Latest JDK)(浅析源码)

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/134024288 出自【进步*于辰的博客】 因为我发现目前&#xff0c;我对Java-API的学习意识比较薄弱…

C语言之数组详解

目录 一维数组的定义和使用 二维数组的定义和使用 字符数组和字符串 练习题 练习一 练习二 练习三 一维数组的定义和使用 当涉及到一系列相同类型的数据时&#xff0c;C语言中的一维数组是一种非常有用的数据结构。以下是关于C语言一维数组的定义和使用的详细说明&…

FlutterUnit 周边 | 收录排序算法可视化

theme: cyanosis 1. FlutterUnit 更新&#xff1a;排序算法可视化 排序算法可视化是用视图层表现出算法执行过程中排序的过程&#xff0c;感谢 编程的平行世界 在 《十几种排序算法的可视化效果&#xff0c;快来看看&#xff01;&#x1f440;》》 一文中提供的算法支持。我进行…

古诗数据,json版本

古诗数据 项目地址 分享一个古诗数据&#xff0c;包含作者、朝代、古诗名称及古诗内容。 分为两个版本&#xff0c;第一个是纯净的故事内容&#xff0c;数据如下&#xff1a; [{"title":"下终南山过斛斯山人宿置酒","auth":"李白"…

Linux 连接工具

1.MobaXterm 官方网址&#xff1a;https://mobaxterm.mobatek.net/ 2.RealVNC 官方网址&#xff1a;https://www.realvnc.com/en/ 3.Xshell 官方网址&#xff1a;https://www.xshell.com/zh/xshell/ 4.secureCRT 官方网址&#xff1a;https://www.vandyke.com/products/sec…

微服务技术导学

文章目录 微服务结构认识微服务技术栈 微服务结构 技术&#xff1a; 解决异常定位&#xff1a; 持续集成&#xff0c;解决自动化的部署&#xff1a; 总结如下&#xff1a; 认识微服务 微服务演变&#xff1a; 技术栈 SpringCloud与SpringBoot版本对应关系