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"http://這里千萬小心，要用絕對路徑，這是托管在本地服務器上的地址
}
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+echarts5踩坑以及resize方法報錯的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue 修改網站圖標的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue2.0實現檢測無用的代碼并刪除方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
今天小編就為大家分享一篇vue路由切換之淡入淡出的簡單實現，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家介紹了vue實現At人文本輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
v-for是Vue.js中用于循環(huán)渲染元素的指令,非常強大但也需要遵循一些最佳實踐,下面這篇文章主要介紹了Vue列表渲染v-for用法的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-03-03
webpack + vue 打包生成公共配置文件（域名） 方便動態(tài)修改
這篇文章主要介紹了webpack + vue 打包生成公共配置文件（域名） 方便動態(tài)修改,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue+echarts定時重新繪制以達到刷新的動效問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue+echarts實現3D柱形圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04