当前位置：首页 > news >正文

ArcGIS Maps SDK for JS：隐藏地图边框

news 2025/9/16 17:59:22

文章目录

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

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>

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

ArcGIS Maps SDK for JS：隐藏地图边框

文章目录 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 控制边框属性。…...

编程日记 2023/10/30 13:54:37

带你秒懂MySQL!! 一万字详细知识点和基础操作欢迎评论区怼我 (三)

表操作创建 # 创建表结构 create table user(id int comment ID,唯一标志,username varchar(20) comment 用户名,name varchar(10) comment 姓名,age int comment 年龄,gender char(1) comment 性别 ) comment 用户表; 约束非空约束限制该字段值不为nullnot null唯一约束保证…...

编程日记 2023/10/30 13:52:34

kubeadmin部署k8s1.27.4

kubeadmin部署k8s1.27.4 环境介绍 IP主机名资源配置系统版本192.168.117.170k8s-master2c2g200gCentos7.9192.168.117.171k8s-node12c2g200gCentos7.9192.168.117.172k8s-node22c2g200gCentos7.9 编辑本地解析且修改主机名三台主机都要做 vim /etc/hosts配置主机名 mast…...

编程日记 2023/10/30 13:50:32

【Aurix Tricore】HighTec启动代码crt0-tc37x.c分析笔记

1. 前言 crt0是hightec 在其toolchain的gcc库中实现启动startup功能的核心代码。 HighTec已为tc3xx设置了一些默认的启动行为。在此启动过程中，目标被初始化并设置为其默认值。启动文件的代码在进入main()函数之前执行。之后，执行main()函数的构造函数。编译器附带的启动…...

编程日记 2023/10/30 13:48:30

Linux高级命令（扩展）

一、find命令 1、find命令作用在Linux操作系统中，find命令主要用于进行文件的搜索。 2、基本语法 # find 搜索路径 [选项选项的值] ... 选项说明： -name ：根据文件的名称搜索文件，支持*通配符 -type ：f代表普通文…...

编程日记 2023/10/30 13:40:18

LLM在text2sql上的应用 | 京东云技术团队

一、前言： 目前，大模型的一个热门应用方向text2sql它可以帮助用户快速生成想要查询的SQL语句。那对于用户来说，大部分简单的sql都是正确的，但对于一些复杂逻辑来说，需要用户在产出SQL的基础上进行简单修改&#xff0c…...

编程日记 2023/10/30 13:39:17

【MySQL】复合查询 | 内外连接

文章目录 1. 复合查询多表笛卡尔积自连接在where子句使用子查询单行子查询多行子查询in关键字all关键字any关键字多列子查询在from子句中使用子查询合并查询unionunion all 2. 内连接3. 外连接左外连接右外连接 1. 复合查询多表笛卡尔积显示雇员名、雇员工资以及所在部门…...

编程日记 2023/10/30 13:36:14

【linux】麒麟v10安装openjdk8

openjdk的官网点我就到官网 jdk8的网址安装 yum install -y java-1.8.0-openjdk-devel 出现Complete! 就是安装完成。验证 java -version配置环境变量查找安装路径 find / -name java 修改配置文件 vim /etc/profile 增加内容 export JAVA_HOME/usr/lib/jvm/j…...

编程日记 2023/10/30 13:35:13

项目部署与上线

文章目录多环境前端后端原始部署安装nginx部署前端部署后端宝塔Linux部署前端部署后端部署 Docker部署Docker平台部署（√）绑定域名跨域问题解决多环境项目部署上线原始前端/后端宝塔Linux容器容器平台多环境同一套项目代码，在不…...

编程日记 2023/10/30 13:32:08

系统架构主题之八：非功能性需求对系统架构及设计的影响

从大的方面来讲，软件系统的需求分为功能性需求和非功能性需求。功能性需求一般由业务分解而来，是直接面向用户的需求，也是直接体现用户价值的需求。非功能性需求一般多是由功能性需求的内在要求衍生而来，其价值更多的体现在对功能…...

编程日记 2023/10/30 13:31:04

盛元广通化工实验室管理系统

随着时代的进步和网络技术的普及应用，管理化工实验室的日常工作和实验过程，企业科研单位对信息化、智能化和安全性日趋要求严格，根据化工实验室的实际需求出发，从完整的开发框架、调度引擎和丰富的组件、页面样例等快速响应应用需…...

编程日记 2023/10/30 13:30:04

代码没注释？一个方法几百行？

干程序员的都有接收别人的代码的经历，大部分时候，我们都会偷偷骂一句“这人是傻逼吧，这代码写的这么烂！” “一个方法写几百行，还没有注释，鬼知道写的什么东西！” 现在，你不需要为…...

编程日记 2023/10/30 13:29:03

Angular-04:指令

① 内置指令1.1 *ngIf 结构指令1.2 [hidden] 属性指令1.3. *ngFor 结构指令1.4 *ngSwitch 结构指令 ② 自定义指令用法指令是angular操作dom的途径，分为属性指令和结构指令。属性指令：修改元素的外观或行为。使用 [ ] 包裹。结构指令：增加、…...

编程日记 2023/10/30 13:27:00

[SpringCloud] Eureka 与 Ribbon 简介

目录一、服务拆分 1、案例一：多端口微服务 2、案例二：服务远程调用二、Eureka 1、Eureka 原理分析 2、Eureka 服务搭建（注册 eureka 服务） 3、Eureka 服务注册（注册其他服务） 4、Eureka 服务发现…...

编程日记 2023/10/30 13:23:56

【Python 零基础入门】常用内置函数再探

【Python 零基础入门】内容补充 1 常用内置函数 Python 简介为什么要学习内置函数集合操作len(): 计算长度sorted(): 排序all(): 检查所有元素any(): 检查任一元素filter(): 过滤元素map(): 应用函数zip(): 组合元素文件操作和输入输出open(): 打开文件read(): 读取文件write(…...

编程日记 2023/10/30 13:21:54

10.30二叉树一些性质，找公共祖先（一般与搜索树），操作的复杂度，选择题细节

课上一些结论，性质 n0,n1,n2指的是子结点的数量，n0没有子节点，叶子结点 n2*n2n11,若n1为奇数，则n为偶数，不然，则为奇数满二叉树没有度为1的结点，即每个结点要么没有孩子结点，要么…...

编程日记 2023/10/30 13:20:54

亮氨酸脯氨酸肽——一种新型的医药中间体研究肽

亮氨酸脯氨酸医药中间体肽是一种合成（人造）激素，类似于大脑中产生的天然激素。它用于治疗许多医疗问题，包括： 子宫平滑肌瘤（子宫肌瘤）出血引起的贫血，或晚期或晚期前列腺癌症&#…...

编程日记 2023/10/30 13:19:53

Ubuntu 22.04 开机闪logo后卡在/dev/sda3: clean

环境 Vmware 17.0.0，CPU 2，内存4G，硬盘50G Ubuntu 22.04 问题描述开机 --> 显示两行代码 --> 显示ubuntu logo --> 左上显示两个代码卡住不动原因分析 1、网上大多说显卡驱动，最近没安装相关软件，也没…...

编程日记 2023/10/30 13:17:49

avue-crud 自定义列

基本设置： option: {columnBtn: false,refreshBtn: false,addBtn: false,delBtn: false,editBtn: false,viewBtn: false,searchShowBtn: false,height: auto,maxHeight: auto,calcHeight: 70,searchLabelWidth: 58,tip: false,searchShow: false,searchMenuSpan: 6…...

编程日记 2023/10/30 13:13:44

达索系统SOLIDWORKS 2024 装配体新增功能

如今市场环境紧迫，许多企业在这样的情形之下，都需要尽快将产品推向市场，赢得头筹。所以产品设计需要快速进行装配验证，以确保产品功能和性能的准确性和可靠性，同时原型或样机的制造和装配需要尽快完成，以满…...

编程日记 2023/10/30 13:11:41

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器在Ubuntu上，你可以使用apt包管理器来安装NFS服务器。打开终端并运行： sudo apt update sudo apt install nfs-kernel-server创建共享目录创建一个目录用于共享，例如/shared： sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2025/9/13 17:46:40

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色&#xf…...

编程新知 2025/9/14 12:35:07

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...

编程新知 2025/9/2 16:07:10

06 Deep learning神经网络编程基础激活函数 --吴恩达

深度学习激活函数详解一、核心作用引入非线性：使神经网络可学习复杂模式控制输出范围：如Sigmoid将输出限制在(0,1)梯度传递：影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

编程新知 2025/7/6 11:42:31

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04

Bean 作用域有哪些？如何答出技术深度？

导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答&#xff0c…...

编程新知 2025/7/9 17:59:19

Golang——7、包与接口详解

包与接口详解 1、Golang包详解1.1、Golang中包的定义和介绍1.2、Golang包管理工具go mod1.3、Golang中自定义包1.4、Golang中使用第三包1.5、init函数 2、接口详解2.1、接口的定义2.2、空接口2.3、类型断言2.4、结构体值接收者和指针接收者实现接口的区别2.5、一个结构体实现多…...

编程新知 2025/9/4 5:13:46

系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。本文通过代码驱动的方式，系统讲解PyTorch核心概念和实战技巧，涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...

编程新知 2025/9/15 20:56:47

sshd代码修改banner

sshd服务连接之后会收到字符串： SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。是否可以通过修改此banner达到让人无法识别此服务的目的呢？ 不能。因为这是写的SSH的协议中的。也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2025/9/2 16:49:30

文章目录

1 问题描述

2 解决方案

相关文章：