1.序言
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 核心库
2.1 内网配置-json静态资源文件从本地读取
官方默认的一些配置json 是从官网链接读取,但是内网环境无法链接,需要本地化操作,其实
@arcgis/core 依赖中就存在这些json静态资源,我们需要将这些静态资源拷贝到public文件夹下,并指定读取路径即可。
我由于是工程化配置,我这边使用的是ncp去处理文件的复制
npm i ncp -D
接下来修改一下package.json,在启动前和打包前完成静态资源的移动
最后一步,指定arcgis 加载路径
重启一下项目,能看到public文件夹下的静态资源,以及json请求
2.2 内网配置-字体文件从本地读取
arcgis 默认字体是从官网链接读取,这里需要先下载(.pbf)字体包,并且按照需要的格式进行命名,然后再指定文件路径即可
先在网上下一份默认字体包,存放在public/arcgisAssets/font文件夹下,
可以看出该字体包有两种字体arial-unicode-ms(默认字体,一定需要有该字体)、lisu-regular(自定义字体)
这里在多说一下,字体包需要的格式为.pbf,没有验证3D字体和2D字体是否需要单独下载,有大佬知道的可以留言说下
以上两步就完成了本地化配置
3.初步认知 ArcGIS for Javascript SDK
目前是通读了一下以下链接的“新手教程”,让自己有一个大概的认知
非常推荐新入门的读一下HOHO大佬的导学文章,读完大致就清楚如何学习了
总结起来就是,有了基本概念,在学习如何查询官方文档,再根据自己的需求,找到差不多的例子,去实践一下。
因为之前初步的学习过Cesium、ThreeJS,对坐标系、几何体稍微有一点认知,因为在这里不展开了。
下面就是实现不同的功能,加深对某些API对应用。
本篇完。