arcgis-vite-vue3入门学习(1)

854 阅读3分钟

1.序言

学习代码:git仓库-init分支

argis是一套地学信息系统(GIS)的应用平台,前端主要是关注于ArcGIS API for JavaScript,该SDK可以将ArcGIS Server提供的地图资源和其它资源(ArcGIS Online)嵌入到Web应用中。

目前是按照官网的学习资料以及各位大佬的文档输出进行入门

  • ArcGIS for Javascript 目前没有找到收费信息,好像服务端是收费的
  • 目前而言,ArcGIS for Javascript是引入到前端工程是半本地化,因为有一些json\字体文件都是默认请求官方的,因为我是内网开发,我这里是需要进行额外的配置的。

目前而言,arcgis有三种引入方式

  • AMD的方式去引入(目前不推荐)
import { loadModules } from "esri-loader";
loadModules([ 
    "esri/Map",
    "esri/views/MapView" 
 ]).then(([Map, MapView])=>{
    ...其他代码
)
  • ES的方式引入本工程引入方式
import Map from "@arcgis/core/Map"; 
import MapView from "@arcgis/core/views/MapView"; 
const map = new Map({ basemap: "topo-vector" });
const view = new MapView({ 
     container: "viewDiv", // reference the div id 
     map: map 
});
  • react/angular的组件式引入方式
import "@arcgis/map-components/dist/components/arcgis-map";

<body>
    <arcgis-map item-id="e691172598f04ea8881cd2a4adaa45ba"></arcgis-map> 
    <script type="module" src="/main.js"></script> 
</body>

可能是之前接触了threejs库等等原因,我这边更习惯于ES的方式引入,而非组件化

2.ES方式-项目初始化(含本地化部署)

我是参考官方的帖子进行建立工程的,目前先实现Holle World

前置说明

  • node版本 v20.14.0
  • 使用的是javascript,而非ts,主要是想降低复杂度
npm create vite@latest // 创建工程

npm install @arcgis/core // 安装arcgis 核心库

image.png

image.png

image.png

2.1 内网配置-json静态资源文件从本地读取

image.png 官方默认的一些配置json 是从官网链接读取,但是内网环境无法链接,需要本地化操作,其实 @arcgis/core 依赖中就存在这些json静态资源,我们需要将这些静态资源拷贝到public文件夹下,并指定读取路径即可。 我由于是工程化配置,我这边使用的是ncp去处理文件的复制

npm i ncp -D

接下来修改一下package.json,在启动前和打包前完成静态资源的移动

image.png 最后一步,指定arcgis 加载路径

image.png

重启一下项目,能看到public文件夹下的静态资源,以及json请求

image.png

image.png

2.2 内网配置-字体文件从本地读取

arcgis 默认字体是从官网链接读取,这里需要先下载(.pbf)字体包,并且按照需要的格式进行命名,然后再指定文件路径即可

先在网上下一份默认字体包,存放在public/arcgisAssets/font文件夹下, 可以看出该字体包有两种字体arial-unicode-ms(默认字体,一定需要有该字体)、lisu-regular(自定义字体)

这里在多说一下,字体包需要的格式为.pbf,没有验证3D字体和2D字体是否需要单独下载,有大佬知道的可以留言说下 image.png

以上两步就完成了本地化配置

3.初步认知 ArcGIS for Javascript SDK

目前是通读了一下以下链接的“新手教程”,让自己有一个大概的认知

非常推荐新入门的读一下HOHO大佬的导学文章,读完大致就清楚如何学习了

总结起来就是,有了基本概念,在学习如何查询官方文档,再根据自己的需求,找到差不多的例子,去实践一下。

因为之前初步的学习过CesiumThreeJS,对坐标系、几何体稍微有一点认知,因为在这里不展开了。

下面就是实现不同的功能,加深对某些API对应用。

本篇完。