需求描述
我想自己做一個室內(nèi)地圖但是并沒有地圖數(shù)據(jù)（Geojson），因?yàn)楦鞔笃脚_只提供了像全國地圖凡简、世界地圖這種通用地圖數(shù)據(jù) 冀自。這篇文章告訴你怎么將一個矢量圖紙轉(zhuǎn)成地圖數(shù)據(jù)汽纠，并結(jié)合echarts的線圖、點(diǎn)圖炼七、關(guān)系圖做出豐富的地圖圖表缆巧！
最終效果
這里只為介紹如何實(shí)現(xiàn)效果，echarts豌拙、highcharts陕悬、G2官網(wǎng)都有提供豐富的圖表
底圖準(zhǔn)備
-
通常情況下設(shè)計(jì)師會將繪制好的地圖給開發(fā)員，這里要求設(shè)計(jì)稿必須為矢量圖按傅，有一點(diǎn)需要注意的是為了方便后期開發(fā)捉超，作圖的時(shí)候需要將每個圖形和你需要表示的東西關(guān)聯(lián)起來，譬如在我的業(yè)務(wù)中唯绍，這里的每一個圖形代表一個商鋪拼岳，所以在下圖左側(cè)可以看到我將圖形命名為商鋪名稱+位置。
設(shè)計(jì)稿.png -
接著我將整個圖導(dǎo)出來况芒，格式選擇SVG惜纸；來看一下導(dǎo)出的文件；可以看到我給圖形的命名就是這個圖形的id绝骚，這樣我們就可以在生成geojson的時(shí)候用圖形的id來標(biāo)識圖形堪簿。
導(dǎo)出svg圖.png
圖形轉(zhuǎn)數(shù)據(jù)（SVG轉(zhuǎn)Geojson）
網(wǎng)絡(luò)上有一些svgtogeojson的庫，經(jīng)過我的挑選之后皮壁，找到一個非常好用的但仍然不符合我需求的庫，地址是這個 https://github.com/Phrogz/svg2geojson 哪审，這個庫可以說相當(dāng)不錯了蛾魄，唯一的缺點(diǎn)是，它不會讀取圖形的id信息湿滓，它導(dǎo)出的geojson不能區(qū)分每一個圖形滴须，所以在它的基礎(chǔ)上做了修改，這個修改是將id里的信息檢索出來放在geojson的properties屬性中叽奥，修改后的代碼地址：https://github.com/lastcaveman/svg2geojson
- 根據(jù)我的業(yè)務(wù)修改的主要代碼如下：將商鋪的名稱和位置檢索出來
- 你可以根據(jù)自己的需要在原作者的基礎(chǔ)上做修改
- 具體的導(dǎo)出方法 原作者的github上已經(jīng)說了
將geojson導(dǎo)出扔水，來看一下數(shù)據(jù)格式：
它是這樣的json數(shù)據(jù)，properties里是我們想要的標(biāo)識圖形的屬性朝氓，coordinates存放的是構(gòu)成圖形的點(diǎn)的坐標(biāo)集魔市。
繪制地圖
以上是數(shù)據(jù)準(zhǔn)備主届，最后效果的代碼地址在這里：https://github.com/ZhenhuaChen/customizeMap/blob/master/mall_map.html
圖表庫可以選擇G2 也可以選擇echarts，這里介紹Echarts待德。
$.getJSON('http://testcdn.zhimatech.com/map.json',function(value) {
echarts.registerMap('mallMap',value);
})
echarts 提供自定義地圖的api君丁，registerMap('地圖名稱',地圖數(shù)據(jù)），這里為了方便我讀取數(shù)據(jù)我將geojson的后綴改為json将宪，使用上是一樣的绘闷。
接下來就是地圖的樣式部分，我們知道echarts中繪制地圖可以選擇geo也可以選擇series的type為map较坛，如果你要在地圖上繪制別的圖表印蔗，譬如線圖、點(diǎn)圖那么這里你需要將地圖以Echarts中的geo方式呈現(xiàn)
geo: {
map: 'mallMap',
roam:true,
...
},
這樣地圖就有了
畫圖表
如果你使用echarts繪制線圖丑勤，還需要知道每個圖形的中心點(diǎn)华嘹；這里就需要借助G2的Dataset：
// value為地圖的json數(shù)據(jù)
var shop_center_point_arr = {}
var worldMap = ds.createView().source(value, {
type: 'GeoJSON'
}).transform({
type: 'map',
callback: function callback(row) {
let t_key = row.name
let obj = {};
shop_center_point_arr[t_key] = [row.centroidX,row.centroidY]
return row;
}
})
// shop_center_point_arr:{'漢堡王',[x,y]}
shop_center_point_arr 就存儲了圖形的名稱和對應(yīng)中心點(diǎn)坐標(biāo)
這時(shí)候就可以繪制線圖了(lines) ，具體繪制方法可以參考echarts官網(wǎng)确封，或者去https://github.com/ZhenhuaChen/customizeMap/blob/master/mall_map.html查看我寫的小示例除呵！
完成地圖的繪制后echarts官網(wǎng)上所有有關(guān)地圖的圖表就都可以搬到你自己的地圖上實(shí)現(xiàn)啦！幫到你的話點(diǎn)贊吧爪喘！
