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