欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2023年08月22日 15:22:40   作者：無(wú)is  
這篇文章主要為大家介紹了ArcGis?API?for?js在vue.js中的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

寫(xiě)在前面

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

在vue中安裝ArcGis

在vue中使用arcgis需要一個(gè)叫做esri-loader的東西來(lái)幫我們加載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://這里千萬(wàn)小心，要用絕對(duì)路徑，這是托管在本地服務(wù)器上的地址
      }
      esriLoader
      //按需加載模塊
      .loadModules([
        "esri/Map", 
        "esri/views/MapView",//2d視圖模塊
        "esri/views/SceneView",//3d視圖模塊
      ],options)
      .then(([
        Map,
        MapView,
        SceneView
      ])=>{
        console.log(Map)
      })

如果控制臺(tái)可以打印出Map對(duì)象，那么說(shuō)明我們已經(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)文章

  • vue-cli3+typescript初體驗(yàn)小結(jié)

    vue-cli3+typescript初體驗(yàn)小結(jié)

    這篇文章主要介紹了vue-cli3+typescript初體驗(yàn)小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-02-02
  • Vue3使用組合式API實(shí)現(xiàn)代碼的邏輯復(fù)用

    Vue3使用組合式API實(shí)現(xiàn)代碼的邏輯復(fù)用

    在 Vue 3 的生態(tài)中,組合式 API（Composition API）引入了全新的方式來(lái)構(gòu)建組件,使得邏輯復(fù)用變得更加簡(jiǎn)單和靈活,在傳統(tǒng)的選項(xiàng)API中,邏輯復(fù)用通常依賴(lài)于混入和高階組件,本文將通過(guò)示例,帶你了解如何在 Vue 3 中使用組合式 API 來(lái)實(shí)現(xiàn)代碼的邏輯復(fù)用
    2025-01-01
  • 詳解vuex之store源碼簡(jiǎn)單解析

    詳解vuex之store源碼簡(jiǎn)單解析

    這篇文章主要介紹了詳解vuex之store源碼簡(jiǎn)單解析，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-06-06
  • Vue過(guò)濾器filters的用法及時(shí)間戳轉(zhuǎn)換問(wèn)題

    Vue過(guò)濾器filters的用法及時(shí)間戳轉(zhuǎn)換問(wèn)題

    Vue的filters過(guò)濾器是比較常見(jiàn)的一個(gè)知識(shí)點(diǎn)，下面我將結(jié)合時(shí)間戳轉(zhuǎn)換的例子帶你快速了解filters的用法，感興趣的朋友一起看看吧
    2021-09-09
  • undefined是否會(huì)變?yōu)閚ull原理解析

    undefined是否會(huì)變?yōu)閚ull原理解析

    這篇文章主要為大家介紹了undefined是否會(huì)變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02
  • vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)

    vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)

    這篇文章主要介紹了vue中如何實(shí)現(xiàn)錨點(diǎn)定位平滑滾動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • 一文詳解vue-router如何實(shí)現(xiàn)動(dòng)態(tài)路由

    一文詳解vue-router如何實(shí)現(xiàn)動(dòng)態(tài)路由

    在構(gòu)建基于Vue.js的單頁(yè)面應(yīng)用（SPA）時(shí),Vue?Router是一個(gè)不可或缺的工具,本文將詳細(xì)介紹動(dòng)態(tài)路由的概念與作用及其在Vue?Router中的具體實(shí)現(xiàn),需要的可以參考下
    2024-11-11
  • vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動(dòng)效果

    vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動(dòng)效果

    這篇文章主要為大家詳細(xì)介紹了vue+ts實(shí)現(xiàn)元素鼠標(biāo)拖動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-11-11
  • 關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問(wèn)題

    關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問(wèn)題

    這篇文章主要介紹了關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2021-10-10
  • vue上傳圖片到oss的方法示例（圖片帶有刪除功能）

    vue上傳圖片到oss的方法示例（圖片帶有刪除功能）

    這篇文章主要介紹了vue上傳圖片到oss的方法示例（圖片帶有刪除功能），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09

最新評(píng)論