GeoJSON 数据类型 | JShare

$(function () {
	$.getJSON('https://data.jianshukeji.com/jsonp?filename=json/australia.geo.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
			if (this.properties.code_hasc === 'AU.CT' || this.properties.code_hasc === 'AU.JB') {
				this.dataLabels = {
					enabled: false
				};
			}
			if (this.properties.code_hasc === 'AU.TS') {
				this.dataLabels = {
					style: {
						color: '#333333'
					}
				};
			}
			// 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 : 'GeoJSON 数据（面、线、点）'
			},
			mapNavigation: {
				enabled: true,
				buttonOptions: {
					verticalAlign: 'bottom'
				}
			},
			series : [{
				name: '洲和地区',
				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}'
				}
			}, {
				name: '河流',
				type: 'mapline',
				data: rivers,
				color: Highcharts.getOptions().colors[0],
				tooltip: {
					pointFormat: '{point.properties.NAME}'
				}
			}, {
				name: '城市',
				type: 'mappoint',
				data: cities,
				color: 'black',
				marker: {
					radius: 2
				},
				dataLabels: {
					align: 'left',
					verticalAlign: 'middle'
				},
				animation: false,
				tooltip: {
					pointFormat: '{point.name}'
				}
			}]
		});
	});
});

<div id="container" style="min-width: 310px; max-width: 600px"></div>

#container {
	height: 500px; 
	min-width: 310px; 
	max-width: 800px; 
	margin: 0 auto; 
}
.loading {
	margin-top: 10em;
	text-align: center;
	color: gray;
}

{"doctype":0,"resouces":"1,30,7,9","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","meta":"<link rel=\"icon\" href=\"https://jscdn.com.cn/highcharts/images/favicon.ico\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">"}

GeoJSON 数据类型 | JShare

模板（查看所有模板）