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

这篇具有很好参考价值的文章主要介绍了ArcGIS Maps SDK for JS:隐藏地图边框。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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控制边框属性。

下面为没有关闭地图边框的效果图。(亮色版地图为黑色边框,暗色版地图为白色边框。下图为亮色版地图)
ArcGIS Maps SDK for JS:隐藏地图边框,arcgis,javascript

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的id
                map: 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:隐藏地图边框,arcgis,javascript文章来源地址https://www.toymoban.com/news/detail-714787.html

到了这里,关于ArcGIS Maps SDK for JS:隐藏地图边框的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ArcGIS Maps SDK for JavaScript系列之二:认识Map和MapView

    在 ArcGIS Maps SDK for JavaScript 中,Map 和 MapView 是两个重要的概念,用于创建和展示地图应用程序。 Map 表示一个地图对象,它是地图应用程序的基础。Map 可以包含一个或多个图层(Layer),可以是基础底图图层、矢量图层、栅格图层或者任何其他类型的图层。Map 也可以包含地图

    2024年02月12日
    浏览(39)
  • ArcGIS Maps SDK for Unity 在Unity中离线高程数据的加载

    1、制作tpkx文件 软件:91卫图助手、ArcGIS Pro 首先打开91卫图助手,左上角切换地图地图为高德地图 可以框选地图,也可以根据左边目录选择想要的地图范围 双击选中区域,选择高程DEM数据,选择影像级别 选择导出设置 选择导出路径,也可以不选择使用默认路径,坐标投影选

    2024年01月21日
    浏览(53)
  • ArcGIS API for JavaScript Map与地图控件

    目录 添加网页 引用接口 添加模块与模块实例 获取API密钥 创建地图 创建地图视图 添加图形图层 在底图之间切换 在图库中选择底图 默认底图视图(Home)控件 图层列表(Layerlist)控件 图例(Legend)控件 比例尺(ScaleBar)控件 指北针(Compass)控件 查看我的位置(Locate)控件

    2024年02月12日
    浏览(52)
  • ArcGIS API for JavaScript 3.44 地图Demo示例合集

    用于JavaScript的ArcGIS API是在web应用程序中嵌入地图和任务的轻量级方法。您可以从ArcGIS Online、您自己的ArcGIS Server或其他服务器获取这些地图。 描述 此示例演示如何创建一个完整的页面映射应用程序。此示例创建一个以旧金山市为中心的新地图,并将其中一个预定义的基本地

    2024年02月13日
    浏览(45)
  • ArcGIS API for JavaScript 4.x 教程(一) 显示一张地图

    了解如何创建和显示带有基本地图图层的地图。 地图包含地理数据层。地图包含一个基本地图层,以及一个或多个数据层(可选)。可以使用地图视图显示地图的特定区域,并设置位置和缩放级别。 本教程将向您展示如何使用地形底图层创建和显示加利福尼亚州圣莫尼卡山

    2024年02月14日
    浏览(44)
  • ArcGIS API for JavaScript 4.x 教程(二)切换基础地图图层

    了解如何更改地图中的基础地图图层。 基础地图图层: 基础地图层是用于访问和显示来自基础地图层服务的数据的层。它为地图或场景提供视觉和地理上下文,通常包含具有管理边界和地名的全局数据。 基本地图图层服务提供了许多基本地图图层样式,例如地形、街道和图

    2024年02月14日
    浏览(35)
  • ARCGIS PRO SDK 地图图层单一符号化_____线图层

       1、定义渲染器线符号:         1)、自定义线符号              Dim Linesymbol As CIMLineSymbol = SymbolFactory.Instance.ConstructLineSymbol(ColorFactory.Instance.RedRGB,width ,SimpleLineStyle) width:                    要构造的线条符号的宽度。 SimpleLineStyle:类型见下表:如一条虚线:SimpleLine

    2024年01月19日
    浏览(46)
  • 《ArcGIS Runtime SDK for Android开发笔记1》——基于Android Studio构建ArcGIS Android开发环境(在线部署)

    (最近要做个课设,顺便记录分享一些内容。) 一. 简介 1. 概述:ArcGIS Runtime SDK for Android是Esri公司开发的一种工具包,用于在Android设备上创建和部署地理信息系统(GIS)应用程序。它提供了一套强大的API,使开发者能够利用各种地理数据和功能,构建具有地图显示、地理查

    2024年01月19日
    浏览(44)
  • 一、ArcGIS Pro SDK for Microsoft .NET 开发环境配置

    ArcGIS Pro二次开发需要的工具: 1.Visual Studio 2.ArcGIS Pro SDK 一、Visual Studio安装 经过查阅资料,ArcGIS Pro3.0版本需要安装Visual Studio2022版,因为只有22版的才会有有ArcGIS Pro3.0以上版对应ArcGIS Pro SDK,因此,本次以2022版安装为例。 首先,去官网https://visualstudio.microsoft.com/zh-hans/downlo

    2024年01月17日
    浏览(52)
  • ArcGIS API for JavaScript 4.x 实现动态脉冲效果

    主要通过定时刷新,每一次的脉冲渲染圈不停的放大,并且透明度缩小,直到达到一定的大小再退回0。 这个文件拿去可以直接使用,下面是引入的方式: 然后可以调用提供的方法实现动态点的添加,动画的暂停和启动。

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包