本篇文章給大家談?wù)剉ue中加載gis地圖，以及vue引入地圖對(duì)應(yīng)的知識(shí)點(diǎn)，希望對(duì)各位有所幫助，不要忘了收藏本站喔。
目錄一覽：
關(guān)于Vue+ECharts 地圖引用空間文件或GIS(.shp)
效果圖：
直接步入主題
GIS 能夠讓你查看這個(gè) .shp 文件的地圖內(nèi)容，但是我感覺(jué)用不用都可以，反正我是沒(méi)用，因?yàn)樗诤喜⒌臅r(shí)候我不是很理解，畢竟太過(guò)跨越了；
添加微信好友, 獲取更多信息
復(fù)制微信號(hào)
關(guān)于引用空間文件
1.首先你需要得到一些 .shp 文件，當(dāng)然是越輕量級(jí)越好；
2.你需要將你得到的空間文件在 這個(gè)網(wǎng)站進(jìn)行轉(zhuǎn)化為geo *** ON ；
3.你轉(zhuǎn)換的是geo *** ON 但是到手的確實(shí) *** ON文件，這個(gè)不用慌，就是這么的無(wú)厘頭；
4.如果你得到的是一個(gè) *** ON文件當(dāng)然更好，如果是多個(gè)你就需要合并了，就像我是的安裝了很多插件，但是最后都沒(méi)成，還是自己手動(dòng)的合成了一下，但好在不是很多，我只有三個(gè)，簡(jiǎn)單地看了一下應(yīng)該是 （點(diǎn)、線、面）湊成的三個(gè) *** ON文件；
5.你得到這個(gè) *** ON文件你成功了三分之二，剩下的就是echarts的操作了，以上的一些步驟卡了我2天時(shí)間，畢竟比較菜雞，葉很水，當(dāng)然你看見(jiàn)了我這個(gè)文章你就樂(lè)吧，穩(wěn)穩(wěn)地能幫你把這個(gè)需求搞定；
以下是ECharts的操作了
1.你需要將你得到的 *** ON文件放到你的項(xiàng)目文件中以便引入；
這是一個(gè)引入外部 *** ON文件 在ECharts中有過(guò)案例；
把這個(gè)寫(xiě)上，這個(gè)也是官網(wǎng)的案例；
以上就是我的實(shí)現(xiàn)經(jīng)歷 如果大家有更方便的辦法請(qǐng)聯(lián)系我或評(píng)論哦 （在將幾個(gè) *** ON文件合并時(shí)感覺(jué)好尷尬）
ArcGis API for js 在vue.js中的使用
最近換了一份工作，公司做的是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需要一個(gè)叫做 esri-loader 的東西來(lái)幫我們加載arcgis文件。
npm上的相關(guān)文檔參考：
樣式文件可以在main.js中引入，也可以在當(dāng)前組件引入，我選擇的是在main.js中引
如果控制臺(tái)可以打印出Map對(duì)象，那么說(shuō)明我們已經(jīng)在vue中成功加載arcgis了
vue加載高德地圖（原生）
1. 在 public 文件夾下的 index.html 中加入
///script type="text/javascript" src=";key=你申請(qǐng)的key"/script
2. 在 vue.config.js 文件中配置?externals
///module.exports = {
? devServer: {
? ? port: 57103 // 端口號(hào)配置
? },
? configureWebpack: {
? ? externals: {
? ? ? 'AMap': 'AMap' // 高德地圖配置
? ? } }}
注： vue.config.js 文件要自己創(chuàng)建，vue-cli 3.0 不會(huì)自動(dòng)生成此文件。 此外，修改 vue.config.js 不會(huì)觸發(fā)熱加載，也就是修改之后你需要重新 run 一下你的項(xiàng)目，它才能生效。
3.加載地圖
地圖容器要給他一個(gè)寬高。
注：init() *** 請(qǐng)?jiān)?mounted 生命周期中調(diào)用，因?yàn)槿绻?created 階段調(diào)用，會(huì)找不到 html 元素 div#container
注2:若中途遇到?'map' is assigned a value but never used
可找到package.json中找到rules:{} 添加 "no-unused-vars":0
最終效果
高德API：
關(guān)于vue中加載gis地圖和vue引入地圖的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。
