ArcGIS API for JavaScript部署开发

官方快速上手教程:https://developers.arcgis.com/javascript/latest/
官方 API 参考文档:https://developers.arcgis.com/javascript/latest/api-reference

文章目录

    • 0.前言
    • 1.引入ArcGIS API for JavaScript部署开发
      • 1.1在线引入(via CDN)
      • 1.2本地引入(via NPM & SDK)
    • 2.结语

0.前言

There are multiple options for bringing the ArcGIS Maps SDK for JavaScript into your app.

ESRI官方提供了如下主要开发方式:

  • AMD modules via ArcGIS CDN
  • ES modules via NPM
  • ES modules via CDN
  • AMD modules hosted locally

简单来说,ArcGIS Maps SDK for JavaScript 开发可以通过在线引用官网CDN 和 通过下载本地开发包引用的两种形式来进行。(这里本地部署又分别可以通过NPM下载模块,或者在官网下载ArcGIS API for JavaScript开发包。)
而,AMD modulesES modules 是js模块化开发的规范。具体可以参考如下文章:https://zhuanlan.zhihu.com/p/467991875
https://developer.aliyun.com/article/1271340
[可以了解:AMD modules 和 ES modules 两种都是异步的,都适用于前端(另外CommonJs是同步的,适用于后端;而 UMD是一种设计模式,可以同时适用于前端和后端这两种不同的模块形式)。 |—| 此外,AMD 使用 requirejs 库来实现,可以使用 require 与 define 两种方式加载依赖。而 ESM 是通过设置type=module ,会将加载的文件视为模块文件,识别模块的import语句并加载。且 Vite 已经在dev与打包中使用ESM。]

一般情况下,我们使用的是AMD Modules,而如果是需要使用框架或构建工具(如VUE)来创建一个项目时,官方推荐使用ES Modules。

下图,这里是AMD and ES modules的比较,可以根据自己的开发需求选择开发方式:
在这里插入图片描述
(从版本 4.0 开始,API 已作为 AMD 提供,例如 CDN 使用 AMD 模块。ES 模块在 4.18 版中可用。)
详情可参考:https://developers.arcgis.com/javascript/latest/tooling-intro/

1.引入ArcGIS API for JavaScript部署开发

1.1在线引入(via CDN)

<!-- 加载官方api -->
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css"/>
<script src="https://js.arcgis.com/4.15/"></script>

通过CDN在线引用,一般用于开发测试。
如下代码为加载官网在线2D地图的示例代码(Build with AMD modules):

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>加载一个地图</title><!-- 加载官方api --><linkrel="stylesheet"href="https://js.arcgis.com/4.15/esri/themes/light/main.css"/><script src="https://js.arcgis.com/4.15/"></script><style type="text/css">html,body,#container {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script type="text/javascript">require(["esri/Map","esri/views/MapView","esri/widgets/BasemapToggle",], (Map, MapView, BasemapToggle) => {//加载地图底图var map = new Map({basemap: "hybrid", // 指定地图的底图});//加载视图var mapview = new MapView({container: "container", // 指定对应的容器map: map,center: [106.595706, 29.423058], // 设置地图显示中心(经纬度)zoom: 6, // 地图显示比例});const basemapGallery = new BasemapToggle({// 定义一个地图切换控件view: mapview,nextBasemap: "terrain",});mapview.ui.add(basemapGallery, "bottom-right");});</script></head><body><div id="container"></div></body>
</html>

如下代码为加载一个官网在线2D地图的示例代码(Build with ES modules):

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>maptest_ESmodule</title><style type="text/css">@import "https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/dark/main.css";html,body,#container {height: 100%;width: 100%;margin: 0;padding: 0;}</style><script type="module">import Map from "https://js.arcgis.com/4.27/@arcgis/core/Map.js";import MapView from "https://js.arcgis.com/4.27/@arcgis/core/views/MapView.js";import BasemapToggle from "https://js.arcgis.com/4.27/@arcgis/core/widgets/BasemapToggle.js";//加载地图底图var map = new Map({basemap: "hybrid", // 指定地图的底图});//加载视图var mapview = new MapView({container: "container", // 指定对应的容器map: map,center: [106.595706, 29.423058], // 设置地图显示中心(经纬度)zoom: 6, // 地图显示比例});const basemapGallery = new BasemapToggle({view: mapview,nextBasemap: "terrain",});mapview.ui.add(basemapGallery, "bottom-right");</script></head><body><div id="container"></div></body>
</html>

在这里插入图片描述

1.2本地引入(via NPM & SDK)

  • AMD modules hosted locally

本地部署可以GIS知乎上的这篇教程(很详细):http://zhihu.geoscene.cn/article/3514
这里是简单记录一下:

  1. 首先,在https://developers.arcgis.com/downloads/#javascript页面登录自己的账号,将ArcGIS API for JavaScript压缩包文件下载到本地电脑。(PS:如无账号登录下载,也可以在CSDN或其他平台下载其他他人分享的资源包。这里给个可以下载的网站http://www.xiaobaigis.com/Resource)
  2. 复制下载解压后的文件“…\arcgis_js_api\library”到你的web服务器的地址。(这里以Windows自带的IIS服务器为例,复制完成之后的地址类似于“C:\Inetpub\wwwroot\arcgis_js_api\library”)【补充:启动IIS服务器可参考这篇博客:https://blog.csdn.net/qq_38553355/article/details/98648491】
  3. 修改相关文件配置,将上述路径下的dojo.js和init.js文件内的[HOSTNAME_AND_PATH_TO_JSAPI]修改为自己的网络地址路径。(例如:localhost/arcgis_js_api/library/4.6/ 。 注意,在4.X的API中默认使用的是https协议,如果你未使用则需将前面的"https://"改成“http://” )
  4. 接下来就可以直接引用了,如CDN引用类似:
<linkrel="stylesheet"href="http://localhost/arcgis_js_api/library/4.6/esri/themes/light/main.css"
/>
<script src="http://localhost/arcgis_js_api/library/4.6/init.js"></script>

JavaScript代码部分就按照 AMD modules 规范写就好。
如果需要访问官方提供的3D或其他地图资源和其他开发服务功能,则还需要设置API密钥。具体可参见:https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/

  • ES modules via NPM

首先,打开一个已构建的项目,在cmd中进入该项目目录,使用如下命令将模块安装到项目中:
npm install @arcgis/core

如果在package.json中写好了依赖包,则可以直接npm install
在这里插入图片描述
(PS:如果npm下载比较慢或者报错,可以使用cnpm或者换源下载)

这里提供一个官网示例项目:https://download.csdn.net/download/m0_53156691/88405539
项目基本目录结构(这里使用了vite打包工具):
在这里插入图片描述
index.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>layers-scenelayer | Sample | ArcGIS Maps SDK for JavaScript 4.27</title></head><body><div id="viewDiv"></div><script type="module" src="/src/main.js"></script></body>
</html>

main.js:

import Map from "@arcgis/core/Map.js";
import SceneView from "@arcgis/core/views/SceneView.js";
import SceneLayer from "@arcgis/core/layers/SceneLayer.js";
import "./style.css";......

style.css:

@import "https://js.arcgis.com/4.27/@arcgis/core/assets/esri/themes/light/main.css";
html,
body,
#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;
}

这里简单讲一下vite,一个基于原生 ES-Module 的前端构建工具:在实际开发中,我们一般不会一直敲 vite 命令,而是会将该命令写进 package.json 文件的 scripts 中,如上。 Vite 会默认把我们的代码打包进 dist/assets 文件夹中。

  • 在开发阶段想要把项目跑起来,那就直接执行 npm run devnpm run serve
  • 如果想打包准备部署了,那就执行 npm run build
  • 而如果是在打包之后,想要预览打包出来的代码的效果,那就执行 npm run preview

执行npm run dev:
在这里插入图片描述
在这里插入图片描述

2.结语

ArcGIS Maps SDK for JavaScript与流行的框架和构建工具集成的其他示例可在 https://github.com/Esri/jsapi-resources GitHub 存储库中找到。

才疏学浅,作此拙文,仅以之为学习记录分享。@WIT

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言进阶---程序环境和预处理

C语言进阶---程序环境和预处理 前言一、程序的翻译环境、执行环境二、详解&#xff1a;C语言程序的编译链接三、预定义符号介绍四、预处理指令 #define五、宏和函数的对比&#xff08;思维导图&#xff09;六、命令定义、预处理指令 #include #undef1.命名约定2.命令行定义 七、…

解决uniapp打包过大问题的实用方法

开发者在使用uniapp开发跨平台应用时&#xff0c;可能会遇到打包过大的问题。过大的应用包不仅会增加用户下载和安装的成本&#xff0c;还会影响应用的性能和加载速度。本篇博客将介绍一些解决uniapp打包过大问题的实用方法&#xff0c;帮助开发者优化应用的大小和性能。 1、移…

[引擎开发] 杂谈ue4中的Vulkan

接触Vulkan大概也有大半年&#xff0c;概述一下自己这段时间了解到的东西。本文实际上是杂谈性质而非综述性质&#xff0c;带有严重的主观认知&#xff0c;因此并没有那么严谨。 使用Vulkan会带来什么呢&#xff1f;简单来说就是对底层更好的控制。这意味着我们能够有更多的手段…

“揭秘淘宝店铺所有商品接口:一键获取海量热销宝贝信息!“

淘宝店铺所有商品接口可以通过shop id或店铺主链接获取到整店商品&#xff0c;数据包括&#xff1a;商品ID&#xff0c;图片地址&#xff0c;店铺标题&#xff0c;优惠价&#xff0c;价格&#xff0c;销量&#xff0c;宝贝链接等整个店铺的商品。 要使用这个接口&#xff0c;需…

【maven私库nexus开机自启动】

linux设置nexus开机自启动_linux centos maven私服nexus安装搭建并设置开机启动 linux centos maven私服nexus安装搭建并设置开机启动&#xff0c;这里是用添加服务的方式开机启动nexus。 1.先要下载jdk并安装&#xff0c;配置java环境变量&#xff0c;直接去oracle下载把&am…

抄写Linux源码(Day17:你的键盘是什么时候生效的?)

回忆我们需要做的事情&#xff1a; 为了支持 shell 程序的执行&#xff0c;我们需要提供&#xff1a; 1.缺页中断(不理解为什么要这个东西&#xff0c;只是闪客说需要&#xff0c;后边再说) 2.硬盘驱动、文件系统 (shell程序一开始是存放在磁盘里的&#xff0c;所以需要这两个东…

使用弹性盒子flex对html进行布局和动态计算视口高度

使用弹性盒子flex对html进行布局的一个练习 height: calc(100vh - 4px); # vh表示视口高度的百分比&#xff0c;所以100vh表示整个视口的高度。 .mytxt { text-indent: 2em; /* 首航缩进2字符 */ line-height: 2; /* 2倍行高 */ padding: 8px; /* 内容与边框的距离 */ } …

SQLServer快速入门

SQL Server快速入门指南&#xff1a;从安装到基本查询 SQL Server是一款强大的关系型数据库管理系统&#xff0c;广泛用于企业和组织中。如果您是初学者或需要快速入门SQL Server&#xff0c;本文将为您提供一个简明的指南&#xff0c;从安装SQL Server到执行基本查询&#xff…

策略模式优雅实践

1 什么是策略模式 策略模式&#xff08;Strategy Pattern&#xff09;是一种常用的面向对象设计模式&#xff0c;它定义了一系列可互相替换的算法或策略&#xff0c;并将每个算法封装成独立的对象&#xff0c;使得它们可以在运行时动态地替换。具体来说&#xff0c;策略模式定义…

Flutter学习笔记

此篇文章用来记录学习Flutter 和 Dart 相关知识 零.Dart基本数据类型 Dart 是一种静态类型的编程语言&#xff0c;它提供了一系列基本数据类型&#xff0c;用于存储和操作不同种类的数据。以下是 Dart 中的一些基本数据类型以及它们的详细介绍&#xff1a; 1. 整数类型&#…

爱国者的润学日记-十月

首先需要科学的准备面试和润。如何进行科学的准备工作呢&#xff1f; 高效的按照面试考察内容进行针对性训练&#xff0c;按 Machine-learning-interview准备保证处于专注的心态&#xff0c;如今互联网娱乐发达&#xff0c;之前即使比赛时我也是一边比赛一边看视频。之后准备面…

Django跨域访问 nginx转发 开源浏览器

Django跨域访问 https://blog.csdn.net/lonelysnowman/article/details/128086205 nginx转发 https://blog.csdn.net/faye0412/article/details/75200607/ 开源浏览器 https://www.oschina.net/p/chromiumengine 浏览器油猴开发 https://blog.csdn.net/mukes/article/detail…

L1-035 情人节 c++解法

题目再现 以上是朋友圈中一奇葩贴&#xff1a;“2月14情人节了&#xff0c;我决定造福大家。第2个赞和第14个赞的&#xff0c;我介绍你俩认识…………咱三吃饭…你俩请…”。现给出此贴下点赞的朋友名单&#xff0c;请你找出那两位要请客的倒霉蛋。 输入格式&#xff1a; 输入…

3.2.OpenCV技能树--二值图像处理--图像腐蚀与膨胀

文章目录 1.文章内容来源2.图像膨胀处理2.1.图像膨胀原理简介2.2.图像膨胀核心代码2.3.图像膨胀效果展示 3.图像腐蚀处理3.1.图像腐蚀原理简介3.2.图像腐蚀核心代码3.3.图像腐蚀效果展示 4.易错点总结与反思 1.文章内容来源 1.题目来源:https://edu.csdn.net/skill/practice/o…

探秘小米增程汽车与仿生机器人的未来:AI大模型的潜在影响及苹果iPhone15Pro发热问题解决之道

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

nignx如何部署让前端不用清缓存就可以部署

在Nginx中&#xff0c;可以使用以下方法来部署前端应用程序&#xff0c;使前端用户无需清空缓存即可进行部署&#xff1a; 1、使用版本号&#xff1a;在前端应用程序的构建过程中&#xff0c;可以添加一个独特的版本号到应用程序的名称中。每次部署时&#xff0c;将版本号更新…

网络参考资料汇总(1)

将这段时间参考的各路大佬的资料加以汇总分类&#xff1a; &#xff08;1&#xff09;FFmpeg: 基于FFmpeg进行rtsp推流及拉流&#xff08;详细教程&#xff09; Linux 编译安装 FFmpeg 步骤&#xff08;带ffplay&#xff09; Jetson 环境安装(三):jetson nano配置ffmpeg和ngin…

mysql主从复制操作

对mysql进行主从复制的简单操作&#xff0c;只限于简单操作&#xff0c;下面的操作均在 centos8 中进行的&#xff0c;centos7也可以看&#xff0c;无妨 主从复制的操作主要分为无数据复制和有数据复制&#xff0c;但是主从关系分为好多种 主从复制 主从复制&#xff08;也称…

代买随想录二刷day57

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣647. 回文子串二、力扣516. 最长回文子序列 前言 一、力扣647. 回文子串 class Solution {public int countSubstrings(String s) {int n s.length()…

现货白银图表分析的依据

现货白银的行情图表分析其实与股票的差不多&#xff0c;投资者可以结合均线、k线的变化&#xff0c;来分析实时的行情走势。当走势图的均线呈多头排列&#xff0c;即短期、中期、长期均线依次从上到下排列并向右上方运行&#xff0c;且白银价格沿各均线向右上方拉升&#xff0c…