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的甲骨文相似度评估系统&…

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;恭喜您创建成功了 二、启动…

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的顺序进行替…

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…

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

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

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

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

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

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

微信小程序自定义组件---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&…

网络协议 - HTTP 协议详解

网络协议 - HTTP 协议详解 一 、基础概念URL请求和响应报文1. 请求报文2. 响应报文 二、HTTP 方法GETHEADPOSTPUTPATCHDELETEOPTIONSCONNECTTRACE 三、HTTP 状态码1XX 信息2XX 成功3XX 重定向4XX 客户端错误5XX 服务器错误 四、HTTP 首部通用首部字段请求首部字段响应首部字段实…

Maven环境搭建及配置

Maven环境搭建及配置 1.下载部署 官方网站下载正式版的Maven文件,打开bin目录&#xff0c;复制路径然后去环境变量中的path下配置环境变量&#xff0c; 如果只有一个用户只需要在上面path配置复制的路径,当然也可以直接在下面配置,下面配置默认给所有用户都配置 设置完成打开控…

【Unity】简单实现生成式电子围栏

【Unity】简单实现生成式电子围栏 三维电子围栏是一种通过使用三维技术和电子设备来建立虚拟围栏&#xff0c;用于监控和控制特定区域的系统。它可以通过使用传感器和摄像头来检测任何越界行为&#xff0c;并及时发出警报。这种技术可以应用于安防领域以及其他需要对特定区域进…

Leetcode—2413.最小偶倍数【简单】

2023每日刷题&#xff08;六十&#xff09; Leetcode—2413.最小偶倍数 class Solution { public:int smallestEvenMultiple(int n) {return (n % 2 1) * n;} };运行结果 之后我会持续更新&#xff0c;如果喜欢我的文章&#xff0c;请记得一键三连哦&#xff0c;点赞关注收藏…

【构建工具】vite2没捂热,vite5又来了,性能大幅提升!

vite2还没焐热&#xff0c;vite5又来了&#xff01;&#xff01;&#xff01; 就在一周前vite5重磅发布了&#xff01;性能大幅提升! 请看下面&#xff1a;下面是翻译过来的&#xff0c;原文&#xff1a;Vite 5.0 发布&#xff01; |维特 (vitejs.dev) Vite 4 大约在一年前发布…

MODBUS协议

一、概念 modbus是一个公开免费的协议&#xff0c;广泛应用于工业控制领域&#xff08;PLC和仪器&#xff0c;PLC和PLC&#xff0c;PLC和上位机&#xff0c;PLC和触摸屏等等&#xff0c;其中PLC是可控制逻辑单元&#xff09; 他有两种物理接口&#xff08;硬件协议&#xff09;…

uniapp 蓝牙小程序-兼容安卓和iOS

withTimeout方法可以在搜寻设备时等待指定的秒数&#xff0c;如果30秒内未搜索到则取消搜索 /*** 超时控制函数* param {Promise} promise 回调函数* param {number} timeout 超时时间, 默认10s*/ export function withTimeout(promise, timeout 10000) {let timeoutEvent …