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

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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:ArcGIS Maps SDK for JS:关闭地图边框(v4.27) 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除! 

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

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

相关文章

LeetCode-42. 接雨水【栈 数组 双指针 动态规划 单调栈】

LeetCode-42. 接雨水【栈 数组 双指针 动态规划 单调栈】 题目描述&#xff1a;解题思路一&#xff1a;单调栈&#xff0c;维护一个单调递减栈。每当遇到当前元素大于栈顶元素就出栈&#xff0c;在出栈时更新答案。当遇到出栈的情况&#xff0c;若单调栈栈左边有一个元素则必有…

基于深度学习的Python+OpenCV的甲骨文相似度评估系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介1. 数据获取2. 深度学习模型训练3. 图像相似度评估4. 结果展示 二、功能三、系统四. 总结 一项目简介 基于深度学习的PythonOpenCV的甲骨文相似度评估系统&…

【INTEL(ALTERA)】 quartus 专业版软件 23.4 中模拟以太网子 FPGA IP 时p_ss_app_st_tx_ready 信号变为 X

问题描述 选择启用<n>前导码直通参数时&#xff0c;为什么在模拟以太网子英特尔 FPGA IP系统的 40GbE 和 50GbE Intel Agilex 7 F-Tile 变体时&#xff0c;p_ss_app_st_tx_ready 信号变为 X。 说明 由于英特尔 Quartus Prime 专业版软件 23.4 中存在一个问题&#xff…

Vue前端与后端放在一起的搭建方式

1.首先把后端项目搭建好 去到项目的存放位置 2.然后cmd黑窗口输入命令创建vue项目 3.创建成功后回到后端项目进行合并 3.1在File处选择Project Structure 3.2选择模块 3.3找到自己的vue项目 3.4疯狂next最后create 3.5选择Apply并确定OK&#xff0c;恭喜您创建成功了 二、启动…

not exists用法

not exists用法 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 不容忽视的数据库利器&#xff1a;NOT EXISTS用法详解 在数据库查询中&#xff0c;我们经常会遇到…

C# URL参数编码

string s "lw123abc测试信息&#xff01;#&#xffe5;%……&*&#xff08;&#xff09;——"; Console.WriteLine("原数据:\t\t" s); String s2 Uri.EscapeDataString(s);//Uri.EscapeDataString() 编码 Console.WriteLine("Hexdata:\t&qu…

一文读懂Java中的设计模式——适配器模式,对于兼容不同系统特别适用!

适配器模式概念 适配器&#xff08;变压器&#xff09;模式&#xff1a;这种模式的核心是当你想实现一个接口但又不想实现所有接口方法&#xff0c;只想去实现一部分方法时&#xff0c;就用默认的适配器模式&#xff0c;他的方法是在接口和具体实现类中添加一个抽象类&#xf…

升级Doris集群——2.0.1.1到2.0.3版本

之前安装的Doris版本官方说不太稳定&#xff0c;所以我们可以对其进行升级 1.关闭所有节点 2.下载2.0.3版本的Doris安装包&#xff0c;将旧版本的bin和lib目录替换为 对应新版本bin和lib目录&#xff0c;按照非master节点到master节点&#xff0c;be—broker—fe的顺序进行替…

融合技术之力:跨界电商与游戏产业的无限可能

随着全球化浪潮的不断涌现&#xff0c;出海跨界电商和游戏产业逐渐成为引领科技发展的双强。本文将深入研究Socks5代理、代理IP等技术在出海跨界电商与游戏领域的技术性应用&#xff0c;揭示它们如何为企业带来更广阔的国际市场以及在游戏领域中创造更丰富的用户体验。 1. 背景…

Intewell-Hyper I_V2.0.0_release版本正式发布

新型工业操作系统_Intewell-Hyper I_V2.0.0_release版本正式发布 软件发布版本信息 版本号&#xff1a;V2.0.0 版本发布类型&#xff1a;release正式版本 版本特点 1.建立Intewell-Hyper I基线版本 版本或修改说明 基于Intewell-Lin V2.3.0_release版本&#xff1a; 1.Devel…

算法训练营Day17

110.平衡二叉树 110. 平衡二叉树 - 力扣&#xff08;LeetCode&#xff09; 核心&#xff1a;左右子树的高度不超过1 如果不是平衡二叉树&#xff0c;则返回-1.通过是否是-1来判断是否是平衡二叉树 求高度&#xff0c;采用后续遍历。 再复习一下后续遍历的思想&#xff0c;…

在 Windows PC 上轻松下载并安装 FFmpeg

FFmpeg 是一种开源媒体工具&#xff0c;可用于将任何视频格式转换为您需要的格式。该工具只是命令行&#xff0c;因此它没有图形、可点击的界面。如果您习惯使用常规图形 Windows 程序&#xff0c;安装 FFmpeg 一开始可能看起来很复杂&#xff0c;但不用担心&#xff0c;它;很简…

淘宝、抖音、视频号直播电商“赛马”

经过多年发展&#xff0c;货架电商和社交电商在当下已是一片红海&#xff0c;因此&#xff0c;淘宝、京东、拼多多API接口等电商巨头为寻求新的增长&#xff0c;纷纷另辟蹊径&#xff0c;开始在异域探索。而由于用户如今的购物需求已经发生了天翻地覆的变化&#xff0c;于是&am…

pythom selenium Web自动化测试项目---购票系统实战

pythom selenium Web自动化测试项目—购票系统实战 环境搭建 python环境&#xff08;建议使用anaconda&#xff09; pycharm IDE集成开发工具 selenimu的安装S 安装命令&#xff1a;pip install selenium 校验环境是否搭建成功 写一个简单的demo打开浏览器看能否成功 webDriv…

中国社会科学院大学-新加坡新跃社科大学教育项目招生简章

一、项目简介 全球经济正在经历由科技进步和创新、政治和人口剧烈变化所带来的巨大的不确定性和挑战。面对日趋复杂的外部竞争环境&#xff0c;企业的领导者和管理者需要具备卓越的战略思维和全球洞察力、以科学的精神和严谨务实的态度引领企业创新发展。 为此&#xff0c;中…

IPC之七:使用 System V 共享内存段进行进程间通信的实例

IPC 是 Linux 编程中一个重要的概念,IPC 有多种方式,本文主要介绍共享内存(Shared Memory),因为没有像管道、消息队列这样的中介介入,所以通常认为共享内存是迄今为止最快的 IPC 方式;Linux 既支持 UNIX SYSTEM V 的共享内存,也支持 POSIX 的共享内存,本文针对 System V…

微信小程序自定义组件---behaviors

1.什么是behaviors behaviors是小程序中&#xff0c;用于实现组件间代码共享的特性&#xff0c;类似于vue中的mixins 2.behaviors的工作方式 每个behavior可以包含一组属性、数据、生命周期函数和方法。组件引用它时&#xff0c;它的属性、数据和方法会被合并到组件中。每个组…

数字孪生项目的开发平台

WEBGL 开发数字孪生项目的流程涵盖了需求分析、场景搭建、模型创建、数据接入、动画与交互、性能优化、测试与部署以及维护与升级等方面。WEBGL 开发数字孪生项目的流程可以分为以下几个步骤&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外…

UniGui使用CSS移动端按钮标题垂直

unigui移动端中按钮拉窄以后&#xff0c;标题无法垂直居中&#xff0c;是因为标题有一个padding属性&#xff0c;在四周撑开一段距离。会变成这样&#xff1a; 解决方法&#xff0c;用css修改padding&#xff0c;具体做法如下 首先给button的cls创建一个cls,例如 然后添加css&…

SSE Server-Send Events适用于什么场景,有什么弊端存在

Server-Sent Events (SSE) 是一种用于在客户端和服务器之间实现单向实时通信的 Web 技术。它主要适用于需要从服务器向客户端推送实时信息的场景&#xff0c;例如新闻更新、股票价格变动、社交媒体通知等。 SSE 的优点&#xff1a; 实时性&#xff1a; SSE 提供了从服务器到客…