【完整的WebGIS教程】6.2 使用@arcgis/core本地部署ArcGIS API for JS
来源:http://www.tudoupe.com时间:2022-06-12
前言
这前面的文章中,我使用 esri-loader模式介绍ArcGIS API,但是有时候我们需要在互联网上写程序,或者有时网络状况不好(Arcgis api服务器在国外), Uploading an onlineapi is slow.因此,我仍然认为最好在当地部署ployapi。
关于 @arcgis/core
ArcGIS API for JavaScript已经从"dojo"变为"esri-loader",在4.18版本后支持 在ES模块模式中引入API 。但是我一直没用过,我使用 esri-loader模式,首先通过以下代码介绍 loadModules andapi的js和css文件,在代码中需要使用api:
然后通过async await在需要在API中使用的功能内实现API模块的步骤方法:
在ES模块模式中引入API
引入的方法是
@arcgis/core可以实现API模块的模型,需要直接在组件顶部引入,例如:import Map from '@arcgis/core/Map'; import MapView from '@arcgis/core/views/MapView';方法,然后在组件代码中使用Map和MapView模块了。
我选择@arcgis/core的原因有以下几条:
- 它等同于非线性部署ArcGIS API for JS,可以在内部网上使用。
- ES6模块是最新的JavaScript标准ECMAScript6新功能,它的语法类似于Python,比较简洁易用。另外,与其他模块载体相比,ES6模块在语法层面实现,它的静态代码分析比其他框架更快和更有效率,方便做代码检测。
安装@arcgis/core
1安装@arcgis/core库
在package.json中可以查看@arcgis/core的版本。

2复制@arcgis/core/assets文件
拷贝@arcgis/core/assets文件到项目的public文件夹中:
将/node_modules/@arcgis/core/assets文件夹复制到public接下来,这个步骤的目的是添加esri的css风格,从而避免使用css文件的在线链接,以及在内部网络环境中使用 arcgis api的js函数和css风格。
/node_modules/@arcgis/core/assets文件夹所在位置:

拷贝至public下:

主要介绍 @arcgis/core/config和js中的样本文件
在js中的ConfigureseriConfig和css文件中:
在主页中.给js添加代码:
此部分来源于官网:
https://developers.arcgis.com/javascript/latest/api-reference/esri-config.html#assetsPath
意思是:在使用NPM包的本地构建时,覆盖用于ផ្ទុកAPI资产的URL。这些资产包括样式 、 图像 、 网络工人 、 wasm 和本地化文件.默认情况下,当运行时,资产从CDN上被载入.
使用@arcgis/core
删除将esri-loader模式引入组件的代码,并将其更改为ES模块模式:
我们将MapView.vue和MapTool.vue从列表中删除esri-loader代码,并用ES模块的代码替换它。

参考文章:
https://blog.csdn.net/tjx1997/article/details/119610327
https://zhuanlan.zhihu.com/p/360733386
后语
如果您认为我所说的是好的,请注意并收集它。这对我很重要!我将把代码放在我的电子邮件地址上:"张先生的WebGIS"(金四声)请在我的电子邮件地址上联系我。
下一篇:win10发起远程协助
相关新闻
- 2022-08-04 WPF的由来
- 2022-08-04 Win11勒索软件防护怎么打开?Win11安
- 2022-08-04 Windows系统jdk的配置
- 2022-08-04 Windows10 OneNote怎么重新登录?如何重
- 2022-08-04 超好用的 Windows 效率工具推荐
- 2022-08-04 Windows如何在CMD或PowerShell中配置代理
- 2022-08-04 powershell和cmd对比
- 2022-08-04 【QT】Windows下QT下载安装
- 2022-08-04 windows下 C++ 实现类属性的get和set方
- 2022-08-04 Win11快速助手在哪里?Win11打开快速
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
