摘要:需求展示西安市各區縣的地圖,點擊各區縣下鉆到各鄉鎮街道,只能內網環境使用,不可用通過百度高德地圖來實現。利用展示自定義的地圖關于具體如何導入格式數據到的方法,可以參考官方示例。
需求
展示西安市各區縣的地圖,點擊各區縣下鉆到各鄉鎮/街道,只能內網環境使用,不可用通過百度/高德地圖來實現。
解決 利用地圖數據生成區域的geojson網絡上大部分地圖數據只是到省市,最多到區縣,再往下的數據就比較難找了;經過搜索,找到了一個可以買地圖數據的地方,數據可以精確到鄉鎮/街道,價格還比較劃算;
地圖數據格式為shp(shape格式),如果需要其他的格式,得加點錢獲取比如svg、dbf、shx等額外格式的文件;
echarts支持的格式有geojson,此時我們需要一個工具把shp格式的文件轉換為geojson格式,有兩種工具,推薦第2種:
【轉換工具1】在線轉換工具MyGeodata Converter
這個工具是收費,每月最多可以轉換3次文件,上傳時網站會提示:
Don"t forgot to upload all relevant files to your .SHP file - you need at least also .DXF and .SHX files uploaded together with your .SHP file!
不僅要上傳shp格式,還要上傳dbf和shx等格式的文件,來獲得更完整的地理數據,如果把所有格式的數據都上傳了,那么生成的geojson可能會有問題(親測),所以只上傳3種格式是比較穩妥的辦法;
上傳后會跳轉到一個設置的界面,先不要點擊開始轉換按鈕,首先檢查一下轉換的編碼格式,默認為UTF-8,如果是中文的地圖數據,最好把轉換格式切換為GB18030-Chinese格式;然后點擊開始轉換就可以了。
轉換超過3個會提示下圖,這時可以清一下瀏覽器緩存試試:
轉換后可以下載到.geojson格式的數據文件,放到項目中時,把.geojson格式手動修改為.json格式,就可以被echarts使用了,直接import geojson格式的文件會報錯;
【轉換工具2】mapshaper(http://mapshaper.org/)
同時上傳.dbf .shp .shx .prj格式的文件,然后點擊右上角的export,就會看到如下界面,選擇geoJSON,就完成了。
利用geojson展示自定義的echart地圖關于具體如何導入json格式數據到echarts的方法,可以參考官方示例。
以下是我自己的代碼:
結果
設計圖的地圖效果是3D的,為了達到效果,將地圖的顏色設為透明,使用設計圖作為背景圖,此時需要調整echart地圖的比例(top/bottom/right/left),調整好之后,地圖選擇高亮和點擊事件,和地區名字還是繼續用echart實現。最終結果:
參考文章
https://blog.csdn.net/gisboyg...
https://www.cnblogs.com/sd-ax...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100671.html
摘要:廣告開始最近做了表格數據轉成圖表展示的一個組件,地址如下整合地圖的時候發現針對地級市的一些文件太多了,全部引入后有將近,所以就用了下高德老爺給的組件和接口,然后弄完在這記錄一下雖然這種例子在社區里有很多這個組件文件放在了中,樣式奇丑,請原諒 /——————廣告開始——————/ 最近做了表格數據轉成圖表展示的一個react組件,地址如下: https://github.com/Lyla...
摘要:比如我們對調與會怎樣我們得到了三個不同類目近個月的趨勢,之所以是折線圖,因為圖表的維度軸列是連續的。在正式介紹標記區域前,先理解一下為何會發生這種轉變表格類組件是雙維度組件,折線圖是單維度組件。 1. 引言 Tableau 探索式分析功能非常強大,各種功能組合似乎有著無限的可能性。 今天筆者會分析這種探索式模型解題思路,一起看看這種探索式分析功能是如何做到的。 2. 精讀 要掌握探索式...
摘要:因為地圖數據過于龐大,例子中刪除了除北京外其他的地市信息。所以,請點擊北京查看效果,其他省沒效果。最終效果點擊北京市查看效果,其他區域切換效果,空白區域返回全國。 使用d3.js實現中國地圖及中國地圖下鉆到省市區 在可視化開發中,地圖是很重要的一個環節,很多時候需要展現的不僅是國家地圖,還需要能從國家進入到省市,看到區這樣的下鉆過程,今天我們就來實現這個效果。 因為地圖數據過于龐大,例...
摘要:閑話不多說,介紹工具開發工具平臺框架百度地圖。給出源代碼,不做研究百度地圖瀏覽器定位您的位置根據和百度地圖相關,大家還可以在此基礎上擴展很多功能,有相關問題或意見可以評論討論哦。下面是官方文檔飛機路線點我點我百度地圖點我點我 前天突發奇想做一個地圖定位的前端界面,于是就研究了一下百度定位功能。新手,歷時兩天終于完成了本次的設計。雖然看上去簡單,但是用到的東西不少。我在網上找資源的時候還...
閱讀 3208·2021-09-30 09:48
閱讀 3485·2021-09-22 16:00
閱讀 1062·2019-08-30 13:08
閱讀 3098·2019-08-30 10:53
閱讀 2410·2019-08-29 18:33
閱讀 1583·2019-08-29 12:47
閱讀 896·2019-08-29 12:16
閱讀 1929·2019-08-26 12:02