ArcGis?API?for?js在vue.js中的使用示例詳解
更新時間：2023年08月22日 15:22:40 作者：無is
這篇文章主要為大家介紹了ArcGis?API?for?js在vue.js中的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
寫在前面
最近換了一份工作，公司做的是gis相關(guān)的服務(wù)，之前完全沒有接觸過gis，光是把地圖展現(xiàn)到頁面上就費了好些功夫。所以打算把自己在項目中用到的相關(guān)技術(shù)點記錄下來，供自己日后翻看。有寫的不好的地方，還請在評論留言。
在vue中安裝ArcGis
在vue中使用arcgis需要一個叫做esri-loader的東西來幫我們加載arcgis文件。
- 首先是npm安裝
npm install esri-loader -S
npm上的相關(guān)文檔參考：https://www.npmjs.com/package/esri-loader
- 安裝完之后import一下
import esriLoader from 'esri-loader'
樣式文件可以在main.js中引入，也可以在當(dāng)前組件引入，我選擇的是在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://這里千萬小心，要用絕對路徑，這是托管在本地服務(wù)器上的地址
}
esriLoader
//按需加載模塊
.loadModules([
"esri/Map",
"esri/views/MapView",//2d視圖模塊
"esri/views/SceneView",//3d視圖模塊
],options)
.then(([
Map,
MapView,
SceneView
])=>{
console.log(Map)
})
如果控制臺可以打印出Map對象，那么說明我們已經(jīng)在vue中成功加載arcgis了
以上就是ArcGis API for js在vue.js中的使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue.js ArcGis API的資料請關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
- python使用IP歸屬地查詢API追蹤網(wǎng)絡(luò)活動
- Django Rest Framework框架構(gòu)建復(fù)雜API技能詳解
- vue使用ArcGis?API?for?js創(chuàng)建地圖實現(xiàn)示例
- Flask進(jìn)階之構(gòu)建RESTful?API和數(shù)據(jù)庫交互操作
- TypeScript開發(fā)HapiJS應(yīng)用詳解
- python3調(diào)用ansible?api使用實例例說明
- JavaScript國際化API格式化數(shù)據(jù)Intl.NumberFormat使用講解
- 智能文本糾錯API應(yīng)用工作原理分析
相關(guān)文章
這篇文章主要介紹了vue-cli3+typescript初體驗小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue3使用組合式API實現(xiàn)代碼的邏輯復(fù)用
在 Vue 3 的生態(tài)中,組合式 API（Composition API）引入了全新的方式來構(gòu)建組件,使得邏輯復(fù)用變得更加簡單和靈活,在傳統(tǒng)的選項API中,邏輯復(fù)用通常依賴于混入和高階組件,本文將通過示例,帶你了解如何在 Vue 3 中使用組合式 API 來實現(xiàn)代碼的邏輯復(fù)用2025-01-01
這篇文章主要介紹了詳解vuex之store源碼簡單解析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue過濾器filters的用法及時間戳轉(zhuǎn)換問題
Vue的filters過濾器是比較常見的一個知識點，下面我將結(jié)合時間戳轉(zhuǎn)換的例子帶你快速了解filters的用法，感興趣的朋友一起看看吧2021-09-09
這篇文章主要為大家介紹了undefined是否會變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要介紹了vue中如何實現(xiàn)錨點定位平滑滾動方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
一文詳解vue-router如何實現(xiàn)動態(tài)路由
在構(gòu)建基于Vue.js的單頁面應(yīng)用（SPA）時,Vue?Router是一個不可或缺的工具,本文將詳細(xì)介紹動態(tài)路由的概念與作用及其在Vue?Router中的具體實現(xiàn),需要的可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue+ts實現(xiàn)元素鼠標(biāo)拖動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
關(guān)于Vue中img動態(tài)拼接src圖片地址的問題
這篇文章主要介紹了關(guān)于Vue中img動態(tài)拼接src圖片地址的問題,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue上傳圖片到oss的方法示例（圖片帶有刪除功能），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09