highchart地图
都知道echarts的图形比较煊，但是highchart也是比较实用的，速度也快
地图数据格式地址：https://data.jianshukeji.com/
地图实例：
$(function () {
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/anhui.json&callback=?', function (geojson) {
// Prepare the geojson
var states = Highcharts.geojson(geojson, 'map'),
rivers = Highcharts.geojson(geojson, 'mapline'),
cities = Highcharts.geojson(geojson, 'mappoint'),
specialCityLabels = {
'Melbourne': {
align: 'right'
},
'Canberra': {
align: 'right',
y: -5
},
'Wollongong': {
y: 5
},
'Brisbane': {
y: -5
}
};
// Skip or move some labels to avoid collision
$.each(states, function () {
// Disable data labels
alert(this.properties.fullname);
if (this.properties.fullname=== '合肥市') {
this.dataLabels = {
enabled: false
};
}
// Move center for data label
if (this.properties.code_hasc === 'AU.SA') {
this.middleY = 0.3;
}
if (this.properties.code_hasc === 'AU.QL') {
this.middleY = 0.7;
}
});
$.each(cities, function () {
if (specialCityLabels[this.name]) {
this.dataLabels = specialCityLabels[this.name];
}
});
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Highmaps from geojson with multiple geometry types'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
name: 'States and territories',
data: states,
color: Highcharts.getOptions().colors[2],
states: {
hover: {
color: Highcharts.getOptions().colors[4]
}
},
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
width: '80px' // force line-wrap
}
},
tooltip: {
pointFormat: '{point.name}'
}
}]
});
});
});
相关推荐
geojson需要先制作shp，然后导入下面网站生成geojson。geojson，最好放后台，前台通过异步请求去加载json，然后显示。this.map.flyTo;将地图的视野范围添加到相应区域。