![cover](https://img-blog.csdnimg.cn/c445b4462cf44dbdae5c18f0addab724.jpg)
Vue 项目引入ArcGIS API for JavaScript,并创建一张地图 (学不会揍我)
1.(阅读arcgis官网)理解arcgis api安装与设置,不愿意看的同学直接看第二步干货讲解官网链接:Install and set up | Overview | ArcGIS API for JavaScript 4.21 | ArcGIS Developer2. (干货) ArcGIS API for JavaScript 引入Vue项目的两种方式(推荐第二种)方法一:使用托管版本,通
1.(阅读arcgis官网)理解arcgis api安装与设置,不愿意看的同学直接看第二步干货讲解
官网链接:Install and set up | Overview | ArcGIS API for JavaScript 4.21 | ArcGIS Developer
2. (干货) ArcGIS API for JavaScript 引入Vue项目的两种方式(推荐第二种)
方法一:使用托管版本,通过ArcGIS CDN 引入 AMD 模块,这也是访问 API 的最常见方法。
<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.21/"></script>
将以上两行代码复制,粘贴至vue项目中public 文件目录下的index.html页面中
如下图方式放置即可
然后创建一个地图页面,try 一 try吧
页面效果,如下:
方法二: 使用 NPM 的 ES 模块,API 也可通过JavaScript 包管理器npm作为 ES 模块使用。
进入项目目录,打开命令行
安装 @arcgis/core,如下图:
指令输入敲回车,等待安装完成即可:
出现如下图效果,即为安装完成
新建一个地图页面,按需引入相应的方法
页面效果:
聪明的朋友会发现,两种方法构造出来的地图不一样,而且第二种很明显会出现一些样式问题
不要着急,既然是样式不对,那么知道是样式原因即可解决,上代码
引入样式后,刷新页面,效果如下:
3. 那么关于以上AMD、ES方法都可以实现,那么如何知道自己应该结合项目使用哪一个方法呢?这两个方法有什么区别呢?小朋友你是否有很多问号?有问号,看比较
更多推荐
所有评论(0)