快捷導(dǎo)航

ArcGis?API?for?js在vue.js中的使用示例詳解

更新時(shí)間：2023年08月22日 15:22:40 作者：無is

這篇文章主要為大家介紹了ArcGis?API?for?js在vue.js中的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

寫在前面

最近換了一份工作，公司做的是gis相關(guān)的服務(wù)，之前完全沒有接觸過gis，光是把地圖展現(xiàn)到頁面上就費(fèi)了好些功夫。所以打算把自己在項(xiàng)目中用到的相關(guān)技術(shù)點(diǎn)記錄下來，供自己日后翻看。有寫的不好的地方，還請(qǐng)?jiān)谠u(píng)論留言。

在vue中安裝ArcGis

在vue中使用arcgis需要一個(gè)叫做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'//這里用相對(duì)路徑就可以了

使用

最后加載就可以使用arcgis的api了，部分代碼如下

      const options = {
        url: "/src/assets/js/4.10/init.js"http://這里千萬小心，要用絕對(duì)路徑，這是托管在本地服務(wù)器上的地址
      }
      esriLoader
      //按需加載模塊
      .loadModules([
        "esri/Map", 
        "esri/views/MapView",//2d視圖模塊
        "esri/views/SceneView",//3d視圖模塊
      ],options)
      .then(([
        Map,
        MapView,
        SceneView
      ])=&gt;{
        console.log(Map)
      })

如果控制臺(tái)可以打印出Map對(duì)象，那么說明我們已經(jīng)在vue中成功加載arcgis了

以上就是ArcGis API for js在vue.js中的使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于vue.js ArcGis API的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

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