ArcGis API for js在vue.js中的使用示例详解
更新时间：2023年08月22日 15:22:40 作者：无is
这篇文章主要为大家介绍了ArcGis API for js在vue.js中的使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
写在前面
最近换了一份工作，公司做的是gis相关的服务，之前完全没有接触过gis，光是把地图展现到页面上就费了好些功夫。所以打算把自己在项目中用到的相关技术点记录下来，供自己日后翻看。有写的不好的地方，还请在评论留言。
在vue中安装ArcGis
在vue中使用arcgis需要一个叫做esri-loader的东西来帮我们加载arcgis文件。
- 首先是npm安装
npm install esri-loader -S
npm上的相关文档参考：https://www.npmjs.com/package/esri-loader
- 安装完之后import一下
import esriLoader from 'esri-loader'
样式文件可以在main.js中引入，也可以在当前组件引入，我选择的是在main.js中引
import '../public/src/assets/js/4.10/esri/themes/light/main.css'//这里用相对路径就可以了
使用
最后加载就可以使用arcgis的api了，部分代码如下
const options = {
url: "/src/assets/js/4.10/init.js"//这里千万小心，要用绝对路径，这是托管在本地服务器上的地址
}
esriLoader
//按需加载模块
.loadModules([
"esri/Map",
"esri/views/MapView",//2d视图模块
"esri/views/SceneView",//3d视图模块
],options)
.then(([
Map,
MapView,
SceneView
])=>{
console.log(Map)
})
如果控制台可以打印出Map对象，那么说明我们已经在vue中成功加载arcgis了
以上就是ArcGis API for js在vue.js中的使用示例详解的详细内容，更多关于vue.js ArcGis API的资料请关注脚本之家其它相关文章！
相关文章
vue3.0中使用Element-Plus中Select下的filter-method属性代码示例
这篇文章主要给大家介绍了关于vue3.0中使用Element-Plus中Select下的filter-method属性的相关资料,Filter-method用法是指从一组数据中选择满足条件的项,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要为大家介绍了使用github部署前端vue项目过程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue移动端使用canvas签名的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
解读element-ui使用el-upload,before-upload函数不好使的问题
这篇文章主要介绍了解读element-ui使用el-upload,before-upload函数不好使的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vuex是一个专门为Vue.js应用程序开发的状态管理库。它采用了一个集中式的架构，将应用程序的所有组件的状态存储在一个单独的地方。这使得状态的管理和维护变得更加容易2023-03-03
项目开发中需要做一个轮询,所以将实现的过程记录了一下,下面这篇文章主要给大家介绍了关于vue轮询解决方案的相关资料,需要的朋友可以参考下2021-07-07
keepalive是Vue的内置组件,作用是将组件缓存在内存当中,防止重复渲染DOM,属于消耗内存获取速度,这篇文章主要介绍了vue3项目keepAlive使用方法,主要将keepaliev在vue3.0中的用法,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue接口请求加密实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue-admin-template 添加、跳转子页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
分布式搜索和全文搜索在现代应用程序中变得越来越重要,因为它们可以帮助用户快速查找和检索大量数据,Elasticsearch是一种强大的分布式搜索引擎,本文将介绍如何在Vue.js应用程序中实现分布式搜索和全文搜索,以及如何与Elasticsearch集成,需要的朋友可以参考下2023-11-11
最新评论