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.mfbz.cn/a/228543.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python AI学习资料包这一套就够!

历时两个月&#xff0c;小Mo终于为大家整理好了 Python & AI 学习资料包&#xff01; 资料包内容细分为「&#x1f393;新手」「&#x1f3a2;进阶」「&#x1f381;分享」&#xff0c;包括 ✅50 个 PDF 课程资料&#xff0c;从基础到进阶 ✅18 本专业书籍&#xff0c;从…

DevEco Studio 运行项目有时会自动出现.js和.map文件

运行的时候报错了&#xff0c;发现多了.js和.map&#xff0c;而且还不是一个&#xff0c;很多个。 通过查询&#xff0c;好像是之前已知问题了&#xff0c;给的建议是手动删除(一个一个删)&#xff0c;而且有的评论还说&#xff0c;一周出现了3次&#xff0c;太可怕了。 搜的过…

ABP vNext 扩展 CurrentUser

ABP内置Users表&#xff0c;我们可以对其字段进行扩展&#xff0c;辅助进行更详细的数据记录 ICurrentUser 是主要的服务,用于获取有关当前活动的用户信息. 以下是 ICurrentUser 接口的基本属性:1. IsAuthenticated 如果当前用户已登录(已认证),则返回 true. 如果用户尚未登录…

网站采集工具,网站自动采集发布的软件【免费】

在当今数字化时代&#xff0c;网站信息的采集对于市场调研、竞争分析以及内容创作都至关重要。本文将着深入探讨如何通过输入关键词实现全网采集&#xff0c;并支持指定任意网站的详尽数据抓取。 采集软件 147SEO采集软件作为一款强大而灵活的网站信息采集工具&#xff0c;以其…

Notepad安装

中文免安装版&#xff0c;下载解压即可。 NotepadV7.5.6 (访问密码: 1666)https://url48.ctfile.com/f/33868548-986668939-7a3316?p1666

一文帮你搞懂继承(c++笔记)

继承 继承概念继承语法格式定义继承基类成员的访问方式 基类和派生类对象赋值转换继承中的作用域派生类的默认成员函数继承和友元继承和静态成员给我实现一个不能被继承的类菱形继承菱形继承有什么问题呢&#xff1f;疑问&#xff1f;总结 继承和组合 继承概念 继承是面向对象…

105.长度最小的子数组(力扣)|滑动窗口

代码演示 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {int result INT_MAX; // 用于存储最小子数组的长度int sum 0; // 滑动窗口的长度int i 0; // 滑动窗口的起始位置int sumlength 0; // 当前子数…

docker:部署java Springboot项目

文章目录 1、打 jar 包1、创建Dockerfile3、创建镜像4、启动容器其他注意事项docker中jdk的版本命名举例&#xff1a;openjdk:11-ea-17-jre-slim举例&#xff1a;8u312-jre-nanoserver-1809 通过find找文件 1、打 jar 包 将项目打一个 jar 包&#xff0c;可以使用 IDEA 1、…

第一课【习题】给应用添加通知和提醒

构造进度条模板通知&#xff0c;name字段当前需要固定配置为downloadTemplate。 给通知设置分发时间&#xff0c;需要设置showDeliveryTime为false。 OpenHarmony提供后台代理提醒功能&#xff0c;在应用退居后台或退出后&#xff0c;计时和提醒通知功能被系统后台代理接管…

浪潮信息KeyarchOS——保卫数字未来的安全防御利器

浪潮信息KeyarchOS——保卫数字未来的安全防御利器 前言 众所周知&#xff0c;目前流行的操作系统有10余种&#xff0c;每一款操作系统都有自己的特点。作为使用者&#xff0c;我们该如何选择操作系统。如果你偏重操作系统的安全可信和稳定高效&#xff0c;我推荐你使用浪潮信…

Docker网络原理

Docker网络概述 1.桥接模式介绍 bridge模式是docker的默认网络模式。 桥接模式是一种用于连接两个不同网络段的设备&#xff0c;使它们能够共享通信的一种方式。 桥接设备工作在OSI模型的第二层&#xff0c;即数据链路层&#xff0c;通常基于MAC地址进行帧转发。 物理层连接…

2024山东健博会,济南健康展,5月中国大健康展,健康管理展

China-DJK山东健博会&#xff1a;5月黄金招商季&#xff0c;携千家参展商、万余款产品精彩亮相&#xff1b; DJK 2024第6届中国&#xff08;济南&#xff09;国际大健康产业博览会 The 2024 sixth China (Jinan) International Big Health Industry Expo 时间&#xff1a;2024…

FastAPI之Cookie参数

示例代码 from typing import Annotated, Unionfrom fastapi import Cookie, FastAPIapp FastAPI()app.get("/items/") async def read_items(ads_id: Annotated[str, Cookie()]):print(ads_id)return {"ads_id": ads_id, "code": 200}测试效果…

柔性数组详解

目录 一、柔性数组的特点&#xff1a;​ 二、使用sizeof计算包含柔性数组的结构体的大小 三、柔性数组的使用 代码1: 四、用结构体指针代替柔性数组 代码2&#xff1a; 五、柔性数组与结构体指针对比 • 在结构体中 • 最后一个成员 • 未知大小的数组 这就是柔性…

node js 递归生成vue文件目录

目录 什么是 fs 文件系统模块 fs.existsSync方法 方法说明&#xff1a; 语法&#xff1a; 向指定的文件中写入内容 writeFile fs.writeFile() 的语法格式 fs.writeFile() 的示例代码 判断文件是否写入成功 fs.mkdir 创建目录 目录已存在&#xff0c;重复创建 创建的目…

vuepress-----19、自动生成侧边栏

自动生成侧边栏插件 https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar https://shanyuhai123.github.io/vuepress-plugin-auto-sidebar/ 安装 npm i vuepress-plugin-auto-sidebar -Dmodule.exports {plugins: [["vuepress-plugin-auto-sidebar",…

在imx6ull中加入ov5640模块

本来觉得是一件很简单的事情但是走了很多的弯路&#xff0c;记录一下调试过程。 先使用正点原子提供的出厂内核把摄像头影像调试出来&#xff0c;然后cat /dev/video1&#xff0c;看一下video1牵扯到哪些模块&#xff0c;可以看到需要ov5640_camera.ko和 mx6s_capture.ko这两个…

Facebook广告报告指标CPC

在Facebook广告中&#xff0c;CPC可以作为一个关键指标来评估广告效果和投资回报。较低的CPC意味着广告主能以更低的价格获得更多的点击量&#xff0c;从而降低广告投放成本。而较高的CPC可能暗示着广告主需要更大的预算才能获得相同数量的点击。本文小编将讲讲Facebook广告报告…

k8s volumes and data

Overview 传统上&#xff0c;容器引擎(Container Engine)不提供比容器寿命更长的存储。由于容器被认为是瞬态(transient)的&#xff0c;这可能会导致数据丢失或复杂的外部存储选项。Kubernetes卷共享 Pod 生命周期&#xff0c;而不是其中的容器。如果容器终止&#xff0c;数据…

JAVA程序如何打jar和war问题解决

背景: 近期研究一个代码审计工具 需要jar包 jar太多了 可以将jar 打成war包 首先看下程序目录结构 pom.xml文件内容 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"ht…
最新文章