vue使用ArcGis?API?for?js創(chuàng)建地圖實現(xiàn)示例
更新時間：2023年08月22日 15:30:06 作者：無is
這篇文章主要為大家介紹了vue使用ArcGis?API?for?js創(chuàng)建地圖實現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
arcgis api在vue中創(chuàng)建地圖實例
今天分享利用arcgis的api，在vue中創(chuàng)建地圖實例，并且在地圖上顯示出來。
先是引入arcgis
這個具體可以參考上一篇文章：ArcGis API for js 在vue.js中的使用
創(chuàng)建map實例
這個Map類就是用于存儲，管理和覆蓋2D和3D查看共有的圖層的屬性和方法。
var map = new Map({
basemap:'streets' //配置底圖類型
})
視圖去引用地圖
- 地圖創(chuàng)建好后，還需要一個視圖去引用地圖，這樣才能在網(wǎng)頁中顯示出來。
//創(chuàng)建2d視圖
var view = new MapView({
container:'viewDiv',//html結(jié)構(gòu)，要用id來聲明
map:map,//引用的地圖實例
zoom: 4,//表示視圖當(dāng)前的縮放級別，通常和center一起使用，設(shè)置視圖的初始值
center: [15, 65]//設(shè)置顯示的地圖中心位置
})
創(chuàng)建3d視圖
創(chuàng)建3d視圖也是大同小異
var view = new SceneView({
container: "viewMap",
map: map,
center:[113.54,22.36],
zoom:4,
extent:{//配置初始地圖范圍
xmin: 113.53778263250001,
ymin: 22.361690773984428,
xmax: 113.56382441750009,
ymax: 22.377545955584687,
spatialReference: 4326//配置坐標(biāo)系
},
});最后運(yùn)行項目，就可以看到地圖已經(jīng)成功在網(wǎng)頁中展示了。
具體配置文檔可以參考arcgis官網(wǎng)的API
以上就是vue使用ArcGis API for js創(chuàng)建地圖實現(xiàn)示例的詳細(xì)內(nèi)容，更多關(guān)于vue ArcGis API for js創(chuàng)建地圖的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
axios的封裝和api接口的統(tǒng)一管理，其實主要目的就是在幫助我們簡化代碼和利于后期的更新維護(hù)，在vue項目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，本文就給大家介紹一下axios封裝與api接口封裝管理,需要的朋友可以參考下2023-06-06
本文主要介紹了vue項目打包發(fā)布上線的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue使用zTree插件封裝樹組件操作,結(jié)合實例形式分析了vue.js整合zTree插件實現(xiàn)樹組件與使用相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了在vue項目中配置你自己的啟動命令和打包命令方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue路由分文件拆分管理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項目怎樣用nginx反向代理WebSocket請求地址
這篇文章主要介紹了vue項目怎樣用nginx反向代理WebSocket請求地址問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了Vue3中注冊全局的組件,并在TS中添加全局組件提示方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue如何使用媒體查詢實現(xiàn)響應(yīng)式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue、uniapp實現(xiàn)組件動態(tài)切換效果
在Vue中，通過使用動態(tài)組件，我們可以實現(xiàn)組件的動態(tài)切換，從而達(dá)到頁面的動態(tài)展示效果，這篇文章主要介紹了vue、uniapp實現(xiàn)組件動態(tài)切換,需要的朋友可以參考下2023-10-10