可視化製做之地圖製做技巧

背景

一般可視化地圖咱們使用geojson數據+(echarts/highchart等)製做,常常咱們業務須要的地圖沒有合適geojson數據,緣由大體以下:

• 《測繪法》圖表地圖一般是簡易版地圖,很難與真實地圖一致,致使結果:正規網站不能提供下載
• 第三方能下載到的矢量地圖數據只能到國級省級
• 縣區級別的行政劃分變更頻繁(好比前兩年的杭州地圖不包括臨安)
• 地圖區域劃分可能不一樣於行政劃分

思路

本文給出的是本人獨家解決方法是經過AI製做地圖數據,以真實地圖或者草圖爲底,秒出邊界和中心,導出svg,經過正則(下面提供一個gulp插件轉)轉爲geojson數據;

爲何使用AI

• 有圖層有組合有鋼筆製做準確省事
• 有前進有後退不怕出錯
• 出了製做地圖geojson數據,還能夠利用生產svg作各類吊炸天效果(好比3D地圖曬個demo)
• 本人美工大佬,精通PS AE AI等等;

秀張鼠繪

案例

使用方法

1.下載

git clone https://github.com/yuhonyon/svg2geojson.git

2.安裝

npm i

3.使用

• 將 svg 文件直接放在 svg/ 目錄下
• 輸入命令

gulp

在 dist/ 目錄下將生產對應的目錄,目錄下有轉換後的 geojson 文件以及行政中心的座標文件和 svg 原文件

教學

製做地圖 geojson 數據的全部步驟

• 設計地圖草稿
• 根據設計稿使用 ai 畫矢量地圖
• 導出 svg
• 使用 gulp 將 svg 轉換爲 geojson
• 使用圖表庫製做地圖

設計地圖草稿

設計師設計地圖草稿(只需明確行政劃分區域便可),以下圖

使用 AI 描出矢量圖

• 將設計草稿導入 AI
• 新建圖層,在圖層內跟據設計稿使用鋼筆工具描出一個行政區的行政(使用多邊形描邊)
• 將該圖層取名爲行政區名字
• 重複第 2 步,描出全部行政區

• 選擇全部描點,轉換尖角,去除不當心畫出的曲線(導出的 svg 不是由 polygon 組成的而是 path 的時候使用這個方法,建議描完後就使用一次)
  
• 在每一個圖層中心處再畫一個圓形或者橢圓
  
• 刪除設計草稿的圖層導出 svg，沒有出錯的話格式應該以下
  
• 若是發現 poluygon 標籤變成了 path,請注意第 4 步驟

** 注意:導出的 svg 轉換出的 geojson 製做的地圖將會是垂直顛倒的(多是座標軸不同,
一個左上角一個右下角),因此咱們要把咱們製做的 AI 圖垂直翻轉後再導出 svg **

將 svg 轉換爲 geojson

效果