当前位置： 首页 > news >正文

ArcGIS Maps SDK for JS（二）：MapView简介----创建2D地图

news 2025/9/10 16:14:10

文章目录

  • 1 AMD 引用 ArcGIS Maps SDK for JavaScript
  • 2 加载相应模块
  • 3 创建地图
  • 4 创建 2D 视图 view
  • 5 确定页面内容
  • 6 CSS 样式
  • 7 完整代码

本教程使用 AMD 模块，指导您如何在二维地图视图中创建一个简单的地图。

1 AMD 引用 ArcGIS Maps SDK for JavaScript

在 <head> 标记内，使用 <script> 和 <link> 标记引用 ArcGIS Maps SDK for JavaScript：

<!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><!-- 从 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>
</html>

<script> 标记从 CDN 加载 ArcGIS Maps SDK for JavaScript。当新版本的 API 发布时，更新版本号以匹配新发布的版本。

<link> 标签引用 main.css 样式表，其中包含 Esri 部件和组件的特定样式。

2 加载相应模块

在<body>标签内的 <script> 标签中，从 API 加载特定模块。使用下面代码段中的语法加载以下模块：

<script>require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {// Code to create the map and view will go here});
</script>

将 JavaScript 代码放在<script>标签内对于创建简单页面或进行实验非常有用，但不适合大型应用程序。在构建大型应用程序时，所有 JavaScript 都应放在单独的 .js 文件中。

全局 require() 函数用于加载 API 的 AMD 模块。

3 创建地图

新地图使用 Map 创建，Map 是对从 esri/Map 模块加载的 Map 类 的引用。您可以通过向 Map 构造函数传递一个对象来指定地图属性，如 basemap。

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {const map = new Map({basemap: "topo-vector"});
});

其他 basemap 包括：

  • satellite(卫星)
  • hybrid(混合)
  • gray-vector(灰色矢量)
  • dark-gray-vector(深灰色矢量)
  • oceans(海洋)
  • streets-vector(街道矢量)
  • osm
  • national-geographic(国家地理)
  • streets-night-vector(街道夜景矢量)。

4 创建 2D 视图 view

将视图 Views 作为 HTML 文件容器的节点引用，允许用户在 HTML 页面内查看地图。创建一个新的 MapView，并通过向其构造函数传递一个对象来设置其属性：

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {const map = new Map({basemap: "topo-vector"});const view = new MapView({container: "viewDiv", // Reference to the DOM node that will contain the viewmap: map // References the map object});
});

在此代码段中，我们将 container 属性设置为容纳地图的 DOM 节点的名称，在本例中，我们使用了 <div> 元素的 id 属性。map 属性引用我们在上一步中创建的地图对象。有关可在视图上设置的其他属性（包括地图中心 center 和缩放 zoom），请参阅 MapView 文档，这些属性可用于定义视图的初始范围。

有两种类型的视图可用： 地图视图（用于查看二维地图）和场景视图（用于查看三维地图）。单击此处了解更多有关使用 3D 视图创建地图的信息。

5 确定页面内容

现在，创建map和view所需的JavaScript已经完成！下一步是添加用于查看地图的相关HTML。

对于这个例子，HTML非常简单：添加一个<body>标记，它定义了在浏览器中可见的内容，并在将创建视图的body中添加一个 <div> 元素。

<body><div id="viewDiv"></div>
</body>

<div> 的 id 为 viewDiv，以匹配在构造函数中传递给 MapView 中的 container 容器属性的 id。

6 CSS 样式

使用 <head> 标签内的 <style> 标签为页面内容设置样式。要使地图充满浏览器窗口，请在页面 <style> 标签中添加以下 CSS：

<style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}
</style>

7 完整代码

代码：

<!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%;}</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://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/

相关文章：

ArcGIS Maps SDK for JS（二）：MapView简介----创建2D地图

文章目录 1 AMD 引用 ArcGIS Maps SDK for JavaScript2 加载相应模块3 创建地图4 创建 2D 视图 view5 确定页面内容6 CSS 样式7 完整代码 本教程使用 AMD 模块&#xff0c;指导您如何在二维地图视图中创建一个简单的地图。 1 AMD 引用 ArcGIS Maps SDK for JavaScript 在 <…...

编程日记 2023/9/5 23:24:21

知识图谱推理研究综述9.3

综述分类 根据样本量大小的不同&#xff0c;将知识图谱推理方法分为多样本推理、少样本推理和零与单样本推理 KG定义&#xff1a;&#xff08;Y&#xff09; 知识图谱是以图的形式表示真实世界的实体与关系之间关系的知识库。 具体来说知识图谱是通过将应用数学、图形学、信…...

编程日记 2023/9/5 23:23:20

详细介绍c++中的类

C 中的类是面向对象编程的基本概念&#xff0c;它指的是一种能够封装数据和方法的用户定义数据类型。类是程序中一个重要的概念&#xff0c;它允许程序员通过定义类来实现代码复用、模块化和继承等特性。 C 中的类由以下部分组成&#xff1a; Data members&#xff1a;成员变量…...

编程日记 2023/9/5 23:22:20

C语言：扫雷小游戏

文接上一篇博文C语言&#xff1a;三子棋小游戏。本篇博文是使用C语言来实现扫雷小游戏的。这里不对扫雷的规则进行赘述。玩家通过键盘输入坐标来探雷。博主在实现扫雷之前从未看过扫雷实现的相关视频&#xff0c;所以这里实现的扫雷完全是博主的原生思路&#xff0c;具有逻辑性…...

编程日记 2023/9/5 23:21:16

VScode SSH无法免密登录

配置方法 引用高赞贴&#xff1a;点击 debug方法 连不上需要找到问题原因&#xff0c;看ssh的 log Linux服务器&#xff1a;2222是我们指定的端口&#xff0c;可以是1234等 sudo /usr/sbin/sshd -d -p 2222windows这边&#xff1a;端口号要一致 ssh -vvv ubuntusername192…...

编程日记 2023/9/5 23:20:15

Spring Cloud--从零开始搭建微服务基础环境【四】

&#x1f600;前言 本篇博文是关于Spring Cloud–从零开始搭建微服务基础环境【四】&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;…...

编程日记 2023/9/5 23:19:13

FreeRTOS操作系统中，断言输出 Error:..\..\FreeRTOS\portable\RVDS\ARM_CM4F\port.c,766 原因

分析&#xff1a;Error:..\..\FreeRTOS\portable\RVDS\ARM_CM4F\port.c,766 出现这个原因表示&#xff0c;你现在系统某个中断的优先级高于FreeRTOS可管理的优先级范围&#xff0c;一旦你这个中断触发&#xff0c;断言的信息即你串口就会输出这个条语句&#xff08;前提你串口…...

编程日记 2023/9/5 23:18:12

【Linux】进程间通信与同步

IPC进程间通信 无名管道pipe&#xff08;血缘关系的进程&#xff09;有名管道fifo &#xff08;无血缘关系的进程&#xff09;共享内存信号(开销小)消息队列信号量套接字 进程间同步 文件锁信号量...

编程日记 2023/9/5 23:17:09

SpringBoot 统一功能处理

目录 一、用户登录权限验证 1.1 SpringAOP可以进行处理吗&#xff1f; 1.2 创建自定义拦截器 1.3 将自定义拦截器配置到系统配置项中 1.4 拦截器的实现原理 1.4.1 实现原理源码分析 1.5 统一访问前缀添加 二、统一异常处理 2.1 为什么需要使用统一异常处理&#xff1f;…...

编程日记 2023/9/5 23:16:08

解决：sh: vite: command not found

文章目录 问题描述原因分析解决方案 问题描述 第一次pull项目&#xff0c;运行npm run dev时报错&#xff1a;sh: vite: command not found 原因分析 查看了package.json&#xff0c;发现是有vite的。 没有安装依赖导致的&#xff1b; 解决方案 执行npm i重新安装依赖&#…...

编程日记 2023/9/5 23:15:07

el-select下拉多选框 el-select 设置默认值不可删除功能

Element3.0vue3.0 el-select下拉多选框 el-select 设置默认值不可删除功能 Element-UI是一款广泛使用的Vue.js组件库&#xff0c;其中El-Select下拉多选框组件在实际项目开发中经常被使用。然而&#xff0c;在Element 3.0版本中&#xff0c;El-Select下拉多选框默认值可被删除&…...

编程日记 2023/9/5 23:14:06

Jetsonnano B01 笔记1：基础理解—网络配置—远程连接

今日开始学习 Jetsonnano B01&#xff0c;这是一台小电脑&#xff0c;可以用来&#xff1a; 运行现代 AI 负载&#xff0c;并行运行多个神经网络&#xff0c;以及同时处理来自多个高清传感器的数据&#xff0c;可广泛应用与图像分类、对象检测、图像分割、语音处 理等领域。它…...

编程日记 2023/9/5 23:13:05

Ubuntu系统信息查看指南：了解你的操作系统

要查看Ubuntu系统的信息&#xff0c;你可以使用一些命令行工具来获取系统的各种信息。以下是一些常用的命令&#xff1a; 1. lsb_release -a&#xff1a;列出Ubuntu版本号、发行代号和描述信息。 2. uname -a&#xff1a;显示Linux内核的版本信息。 3. lscpu&#xff1a;提供…...

编程日记 2023/9/5 23:12:04

【STM32】学习笔记-SPI通信

SPI通信 SPI通信&#xff08;Serial Peripheral Interface&#xff09;是一种同步的串行通信协议&#xff0c;用于在微控制器、传感器、存储器、数字信号处理器等之间进行通信。SPI通信协议需要使用4个线路进行通信&#xff1a;时钟线(SCLK)、主输入/主输出线(MISO)、主输出/主…...

编程日记 2023/9/5 23:11:03

解决vue项目首行报红（ ESLint 配置）和新建的vue文件首行报红问题

目录 前情提要&#xff1a; 修改ESLint 配置 新建的vue文件首行还是报红 报红原因&#xff1a; 解决方法&#xff1a; 前情提要&#xff1a; 在网上查到的方法可能是在package.json文件或者.eslintrc.js文件中添加 requireConfigFile: false 如果此方法对你的错误不起作用…...

编程日记 2023/9/5 23:10:02

Linux 调试技术 Kprobe

目录 用途&#xff1a;一、技术背景1.1 kprobes的特点与使用限制1.2 kprobe原理 二、 基于kprobe探测模块的探测方式2.1、struct kprobe结构体2.2 kprobe API函数2.3 示例代码参考资料&#xff1a; 用途&#xff1a; 判断内核函数是否被调用&#xff0c;获取调用上下文、入参以…...

编程日记 2023/9/5 23:09:01

一文了解评估 K8s 原生存储产品需要关注的关键能力

近些年&#xff0c;越来越多的企业使用 Kubernetes&#xff08;K8s&#xff09;支持生产环境关键业务。这些业务往往对存储性能和稳定性具有更高的要求&#xff0c;传统存储方案难以充分满足&#xff0c;因此不少用户开始关注更契合 K8s 环境的 K8s 原生存储方案。 不过&#…...

编程日记 2023/9/5 23:08:00

linux免密登录报错 Bad owner or permissions on /etc/ssh/ssh_config.d/05-redhat.conf

问题&#xff1a;权限不对的 解决&#xff1a; 1.检查文件的所有者和权限。 确保文件的所有者是正确的。 运行以下命令来确定文件的所有者和权限&#xff1a; ls -l /etc/ssh/ssh_config.d/05-redhat.conf 通常情况下&#xff0c;SSH配置文件应该属于root用户。如果所有者不是…...

编程日记 2023/9/5 23:06:59

Kafka常用参数

文章目录 概要broker端参数producer端参数consumer端参数 概要 kafka broker、consumer、和producer都有很多可配置的参数。本文主要总结日常开发中常用到的参数。其中producer端可以在org.apache.kafka.clients.producer.ProducerConfig 中找到配置项&#xff0c;consumer端可…...

编程日记 2023/9/5 23:05:57

NFT Insider#105：The Sandbox即将参加韩国区块链周，YGG的声誉和进步(RAP)将引领玩家晋升到下一层级

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members(https://twitter.com/WHALEMembers)、BeepCrypto&#xff08;https://twitter.com/beep_crypto&#xff09;联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周…...

编程日记 2023/9/5 23:04:55

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/9/7 8:54:04

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/9/6 1:12:27

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/7/18 10:35:00

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

NFT模式：数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

编程新知 2025/8/27 2:19:34

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2025/9/3 23:09:31

保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...

编程新知 2025/9/6 0:16:50

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/9/4 9:53:24

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2025/9/6 22:13:40