本篇文章給大家談談vue實現GIS地圖,以及vue gis對應的知識點,希望對各位有所幫助,不要忘了收藏本站喔。
目錄一覽:
- 1、關于Vue+ECharts 地圖引用空間文件或GIS(.shp)
- 2、ArcGis API for js 在vue.js中的使用
- 3、Vue2/ArcGis4開發實戰
- 4、vue 解析shape文件并加載到arcgis
- 5、如何利用gis制作紅色地圖
關于Vue+ECharts 地圖引用空間文件或GIS(.shp)
效果圖:
直接步入主題
GIS 能夠讓你查看這個 .shp 文件的地圖內容,但是我感覺用不用都可以,反正我是沒用,因為他在合并的時候我不是很理解,畢竟太過跨越了;
關于引用空間文件
添加微信好友, 獲取更多信息
復制微信號
1.首先你需要得到一些 .shp 文件,當然是越輕量級越好;
2.你需要將你得到的空間文件在 這個網站進行轉化為geo *** ON ;
3.你轉換的是geo *** ON 但是到手的確實 *** ON文件,這個不用慌,就是這么的無厘頭;
4.如果你得到的是一個 *** ON文件當然更好,如果是多個你就需要合并了,就像我是的安裝了很多插件,但是最后都沒成,還是自己手動的合成了一下,但好在不是很多,我只有三個,簡單地看了一下應該是 (點、線、面)湊成的三個 *** ON文件;
5.你得到這個 *** ON文件你成功了三分之二,剩下的就是echarts的操作了,以上的一些步驟卡了我2天時間,畢竟比較菜雞,葉很水,當然你看見了我這個文章你就樂吧,穩穩地能幫你把這個需求搞定;
以下是ECharts的操作了
1.你需要將你得到的 *** ON文件放到你的項目文件中以便引入;
這是一個引入外部 *** ON文件 在ECharts中有過案例;
把這個寫上,這個也是官網的案例;
以上就是我的實現經歷 如果大家有更方便的辦法請聯系我或評論哦 (在將幾個 *** ON文件合并時感覺好尷尬)
ArcGis API for js 在vue.js中的使用
最近換了一份工作,公司做的是gis相關的服務,之前完全沒有接觸過gis,光是把地圖展現到頁面上就費了好些功夫。所以打算把自己在項目中用到的相關技術點記錄下來,供自己日后翻看。有寫的不好的地方,還請在評論留言。
在vue中使用arcgis需要一個叫做 esri-loader 的東西來幫我們加載arcgis文件。
npm上的相關文檔參考:
樣式文件可以在main.js中引入,也可以在當前組件引入,我選擇的是在main.js中引
如果控制臺可以打印出Map對象,那么說明我們已經在vue中成功加載arcgis了
Vue2/ArcGis4開發實戰
更新:2021-8-18
最近用 Vue2結合 ArcGis4 做了一個項目,因為此前并沒有怎么接觸過ArcGis for JavaScript,所以整個過程還是比較痛苦的,雖然GIS官網有例子,并沒有起到什么實質作用,網上關于vue/gis的資料又少的可憐,好了廢話不多說,直接上干貨!
安裝好 cli 后,開始引入 GIS ,在目錄 src assetsjs 下新建下新建 ArcGisServe.js 文件,供我們編寫 ArcGis Serve 服務地址。
這里可以定義自己服務器上的底圖的地址,默認情況下是官網地址,也可以添加其它服務地址,隨意。
這中 *** 就不多說了,直接 script 標簽 引入 CDN 網址,要說明的是,可用 CDN 網址較少,官網提供的地址在國內加載較滿。
.vue 組件
.vue 組件
二者都可以通過npm 安裝的依賴包,不同的是:
vue 解析shape文件并加載到arcgis
zip包解壓shp 文件讀取轉化格式用 arcgis js 加載。
Vue是一套用于構建用戶界面的漸進式JavaScript框架。與傳統 *** 和JQuery框架不同,Vue的漸進式框架表示開發者可以由簡單組件寫起,漸漸搭建出一個復雜的前端平臺。
如何利用gis制作紅色地圖
如何利用gis制作紅色地圖,這里分享下操作 *** 。
設備:聯想電腦
系統:win8
軟件:ArcMap 10.5
1、首先雙擊打開gis軟件,運行軟件,單擊“新建地圖”中的“我的模板”,打開一個空白模板。
2、單擊“文件”,再單擊“添加數據”中的“添加底圖”。
3、選擇“中國地圖彩色英文版(含POI點)”這個底圖,因為arcmap10.5只有這個版本含POI的,如果有“中國地圖彩色中文版(含POI點)”的建議選擇中文版的底圖。
4、放大找到自己要標注的項目位置后,在菜單欄中的“視圖”工具選擇“布局視圖”。
5、然后可以建立一個標題和給項目位置添加標注和文字說明。
6、最后使位置圖更完善,這樣位置圖就做好了。
vue實現GIS地圖的介紹就聊到這里吧,感謝你花時間閱讀本站內容,更多關于vue gis、vue實現GIS地圖的信息別忘了在本站進行查找喔。