【入门01】arcgis api 4.x 创建地图、添加图层、添加指北针、比例尺、图例、卷帘、图层控制、家控件(附完整源码)

1.效果

2.代码 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><link rel="stylesheet" href="https://js.arcgis.com/4.30/esri/themes/light/main.css"><script src="https://js.arcgis.com/4.30/"></script><style>/* 容器大小 */#viewDiv {position: absolute;left: 0;top: 0;width: 100vw;height: 100vh;}</style><script>require(["esri/WebMap","esri/views/MapView","esri/widgets/Compass","esri/widgets/ScaleBar","esri/widgets/Legend","esri/layers/FeatureLayer","esri/widgets/Expand","esri/widgets/LayerList","esri/widgets/Home","esri/widgets/Swipe",], (WebMap,MapView,Compass,ScaleBar,Legend,FeatureLayer,Expand,LayerList,Home,Swipe) => {// 底图const map = new WebMap({portalItem: {id: "56b5bd522c52409c90d902285732e9f1"}});// viewconst view = new MapView({container: "viewDiv", // 指定容器map: map, // 底图// 显示范围extent: {xmin: -9177811,ymin: 4247000,xmax: -9176791,ymax: 4247784,spatialReference: 102100 //空间坐标系}});// 添加图层const featureLayer = new FeatureLayer({url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"});map.add(featureLayer);// 指北针const compass = new Compass({view: view})// 比例尺const scaleBar = new ScaleBar({view: view})// 图例const legend = new Legend({view: view})// 图层控制控件const layerList = new LayerList({view: view,});// 扩展控件const llExpand = new Expand({view: view,content: layerList,expanded: false,});// 添加控件到地图view.ui.add(compass, 'top-left')view.ui.add(scaleBar, "bottom-left")view.ui.add(legend, "bottom-right")view.ui.add(llExpand, "top-left");// 家控件view.ui.add(new Home({view}), "top-left")// 卷帘控件view.ui.add(new Swipe({view: view,leadingLayers: [featureLayer], //比较图层trailingLayers: [map], //底图direction: "horizontal", //滚轴方向position: 90, //滚轴位置 百分比}))});</script>
</head><body><!-- 容器 --><div id="viewDiv"></div>
</body></html>

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

物联网行业中通信断线重连现象介绍以及如何实现

01 概述 断线重连是指在计算机网络中&#xff0c;当网络连接遇到异常中断或者断开时&#xff0c;系统会自动尝试重新建立连接&#xff0c;以保证网络通信的连续性和稳定性。这是一种常见的网络通信技术&#xff0c;广泛应用于各种计算机网络场景&#xff0c;包括互联网、局域…

MSVCR100.dll丢失怎么办,教你6种解决MSVCR100.dll丢失的方法

在计算机的日常使用中&#xff0c;我们可能会遇到各种各样的问题&#xff0c;其中之一就是MSVCR100.dll文件丢失。这个文件是Microsoft Visual C 2010的一个组件&#xff0c;如果丢失&#xff0c;可能会导致某些程序无法正常运行。那么&#xff0c;如何解决这个问题呢&#xff…

MySQL Unittest实践(下 Gmock篇)

一、简介 使用Gtest基本上能够满足绝大多数的测试场景&#xff0c;但是对于一些涉及多个模块交互、文件系统、网络通信等复杂的场景&#xff0c;很难仿真一个真实的环境进行单元测试。这时就需要引入模拟对象Mock Objects来模拟程序的一部分来构造测试场景。 Google C Mockin…

【大数据】数据中台怎么样助力企业创新和客户实践

在当今数字化时代&#xff0c;数据成为了企业竞争的关键因素。企业拥有大量的数据&#xff0c;但如何高效地利用这些数据&#xff0c;实现创新和提升客户体验&#xff0c;成为了一项重要的挑战。数据中台作为一种重要的数据管理和分析工具&#xff0c;发挥着关键的作用。本文将…

Select插件的用法

文章目录 1.知识回顾2.使用方法2.1 builder属性2.2 selector属性2.3 shouldRebuild属性2.4 child属性3 示例代码我们在上一章回中介绍了组件之间共享数据相关的内容,本章回中将继续介绍该内容.闲话休提,让我们一起Talk Flutter吧。 1.知识回顾 我们在前面章回中介绍了全局共…

今年1-8月,Temu的客户量下降了25%,Shein和TikTok Shop不降反增

根据Earnest信用卡数据&#xff0c;2024年1月至8月&#xff0c;在Temu平台上交易的购物者减少了约25%&#xff0c;表明该平台的增长放缓。 自上线两年以来&#xff0c;Temu通过打折和广告策略&#xff0c;尤其是在超级碗期间投放大量广告&#xff0c;迅速扩展并广泛影响了爱好…

分享5款AI毕业论文生成系统使用教程!开题报告一键生成!

在当前的学术研究和写作领域&#xff0c;AI论文生成工具的应用越来越广泛。这些工具不仅能够提高写作效率&#xff0c;还能帮助研究人员快速生成高质量的论文内容。今天&#xff0c;我将分享五款AI毕业论文生成系统&#xff0c;并重点推荐千笔-AIPassPaper&#xff0c;帮助你高…

自动驾驶系列—DOW(开门预警):让每一次开门都更安心

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

嵌入式项目:STM32平衡车详解 (基础知识篇) (基于STM32F103C8T6)

前言&#xff1a; 本文是基于B站草履虫编写的平衡车相关内容&#xff0c;包括模块和基础知识&#xff0c;结合代码进行讲解&#xff0c;将知识进行汇总 &#xff08;由于本篇内容较长&#xff0c;请结合目录使用) 注&#xff1a;基于开源精神&#xff0c;本文仅供学习参考 目…

滑动窗口 -- 限制窗口内某元素的数量/种类

目录 长度最小的数组 题解&#xff1a; 将x减到0的最小操作数 题解&#xff1a; 最大连续1的个数 题解&#xff1a; 无重复字符的最长子串&#xff08;限制数量&#xff09; 题解&#xff1a; 水果成篮&#xff08;限制种类&#xff09; 题解&#xff1a; 找到字符串中…

Studying-图论包含的算法总结

目录 1.DFS&#xff08;深度优先搜索&#xff09; 代码框架&#xff1a; 2. BFS&#xff08;广度优先搜索&#xff09; 代码框架&#xff1a; 3. 并查集 4.最小生成树之Prim 5.最小生成树之Kruskal 6.拓扑排序 7. 最短路径之-dijkstra&#xff08;朴素版&#xff…

淘宝霸屏必备工具:淘宝商品评论电商API接口

淘宝商品评论电商API接口是指用于获取淘宝商品评论信息的一种接口&#xff0c;通过该接口可以获取淘宝网上商品的评价内容、评价等级、评价数量等信息。通过了解并使用该接口&#xff0c;能够帮助电商了解消费者对商品的评价情况&#xff0c;做好商品的推广和销售工作。 接口使…

Leetcode - 周赛416

目录 一&#xff0c;3295. 举报垃圾信息 二&#xff0c;3296. 移山所需的最少秒数 三&#xff0c;3297. 统计重新排列后包含另一个字符串的子字符串数目 I 四&#xff0c;3298. 统计重新排列后包含另一个字符串的子字符串数目 II 一&#xff0c;3295. 举报垃圾信息 本题就是…

消息号 FS215 对科目 2221010200 7333允许销项税, J1 不允许

业务场景&#xff1a; 在做发票校验时&#xff0c;报错“消息号 FS215 对科目 2221010200 7333允许销项税, J1 不允许”而且计算税额失效&#xff0c;红灯报错。 初步怀疑是税码配置问题 FTXP J1是进项税&#xff0c;但是这里维护了销项税和均一税&#xff0c;在这里删除是需…

SQLSERVER通过触发器限制客户端IP地址

方法一&#xff1a;SQL Server 2005 SP2或更高版本(触发器) 当SQL Server 2005升级到SP2或者更高的版本的时候&#xff0c;还可以通过新增的触发器来实现控制。 执行下面的T-SQL后&#xff0c;将使除IP地址为192.168.1.1之外的客户端连接失败。 USE master; GO CREATE TRIGGE…

CMA软件检测机构人员职责分类、要求、档案资料

一、CMA软件检测机构人员职责分类&#xff1a; 1、最高管理者 2、授权签字人 3、技术负责人 4、质量负责人 5、软件测试人员 &#xff08;从事软件测试项目管理、测试需求分析、测试策划和测试设计活动的人员、软件测试执行人员&#xff09; 6、报告编制员 7、报告审核…

革新体验:细数3D在线预览在多个行业的广泛应用

‌3D在线预览展示技术的应用领域非常广泛&#xff0c;涵盖了从电子商务、产品设计、建筑设计到文化遗产保护等多个方面。‌ ‌1、电子商务‌&#xff1a; 在电商领域&#xff0c;3D展示技术为商品提供了全方位的展示&#xff0c;包括产品的外观、功能和卖点。这种交互式的购物…

【Docker】01-Docker常见指令

1. Docker Docker会下载镜像&#xff0c;运行的时候&#xff0c;创建一个隔离的环境&#xff0c;称为容器。 docker run -d \ # 创建并运行一个容器&#xff0c;-d表示后台运行 --name mysql \ # 容器名称-p 3307:3306 \ # 端口映射&#xff0c;宿主机端口映射到容器端口-e TZ…

buuctf [ACTF2020 新生赛]Include

学习笔记。 开启靶机。 进入靶场&#xff1a; 我们跟进 tips瞅瞅&#xff1a; 额&#xff0c;纯小白&#xff0c;能想到的就是先F12看看&#xff0c;在CTRLu、以及抓包。 得&#xff0c;不会了&#xff0c;看wp呗&#xff0c;不会死磕没脑子0,0&#xff1f; 参考&#xff1a;…

如何在 VitePress 站点中集成 Gitalk 评论插件及其关键注意事项

你好&#xff0c;我是陈明勇&#xff0c;一名热爱技术、乐于分享的开发者&#xff0c;同时也是开源爱好者。 成功的路上并不拥挤&#xff0c;有没有兴趣结个伴&#xff1f; 个人网站&#xff1a;https://chenmingyong.cn 文章持续更新&#xff0c;如果本文能让您有所收获&#…