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