“He who seize the right moment, is the right man. ”
序言
这两年数据可视化被越来越多的人提起。主要原因还是大数据的兴起。那我们免不了要用一些数据可视化组件了。主要有d3、highcharts、echarts.
这里我主要想聊一下echarts加载geoJson地图数据的实现
认识geoJson
GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
这里官方的解释，我们先来看一下庐山真面目：
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
了解更多：geojson官网
Echarts加载geoJson数据
你看完上面可能你会想，什么鬼，我要这数据有什么用。这个可是非常有用的。有了这个数据就可以转成topojson在D3里用了或者转成SVG放浏览器里直观感受了。
这里我先准备一份图家-省份-市区的geojson的数据省市geojson. 有了这份数据我们就可以通过echarts轻松把地图信息展示到页面上去了。
示例：
js代码：
(function(echarts) {
var map = echarts.init(document.getElementById('map'))
var reset = function() {
map = echarts.init(document.getElementById('map'))
map.setOption({
geo: {
map: 'mapCity',
label: {
emphasis: {
show: true,
color: '#fff',
}
},
roam: true, //允许拖动
itemStyle: {
normal: {
areaColor: '#00405b',
borderColor: '#02334a',
borderWidth: 1,
shadowColor: 'rgba(0, 189, 249, 0.5)',
shadowBlur: 2,
shadowOffsetY: 0,
shadowOffsetX: 0,
},
emphasis: {
areaColor: '#006387'
}
}
}
})
}
var level = 1
var country = function(){
level = 1
$.ajax({
url: 'mapdata/china.json',
type: 'get',
success: function(res) {
echarts.registerMap("mapCity", res);
map.dispose()
reset()
map.on('click', (params) => {
const provinceCode=JSON.parse(res).features.filter((val) => {
if(val.properties.name.indexOf(params.name)!==-1){
return true
}
});
province(provinceCode[0].properties.id,params.name)
});
}
})
}
var province = function(id,name){
level = 2
$.ajax({
url: 'mapdata/geometryProvince/'+id+'.json',
type: 'get',
success: function(res) {
echarts.registerMap("mapCity", res);
map.dispose()
reset()
map.on('click', (params) => {
const provinceCode=JSON.parse(res).features.filter((val) => {
if(val.properties.name.indexOf(params.name)!==-1){
return true
}
});
city(provinceCode[0].properties.id,params.name)
});
}
})
}
var city = function(id,name){
level = 3
$.ajax({
url: 'mapdata/geometryCouties/'+id+'00.json',
type: 'get',
success: function(res) {
echarts.registerMap("mapCity", res);
map.dispose()
reset()
map.on('click', (params) => {
alert(params.name)
});
}
})
}
country()
})(echarts)
html代码：
<div id="map"></div>
svg转geoJson
是的，看到这里你可能还在想，这个geoJson这么好用那怎么去写出来呀，这么一大坨。是的让我手写也不可能。但是SVG会画吧，我们可以直接画好SVG然后再转成我们想要的geoJson数据。当然SVG本身也是很好用的。在d3里体现的淋漓尽致。 这里我用的工具是SVG 2 GeoJSON
示例：
svg:
可拖拽、缩放（兼容手机）：
结束语
其实到这一步应该可以想象它的应用还是很广。如果觉得不够炫再加上3D效果（GL）试试。😏
