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}'

}

}]

});

});

});

#container {

height: 500px;

min-width: 310px;

max-width: 800px;

margin: 0 auto;

}

.loading {

margin-top: 10em;

text-align: center;

color: gray;

}

{"resource":"1,30,7,9","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":7}}","code":{"code":"hhhhA0","name":"GeoJSON 数据类型","version":0,"doctype":0,"description":"","meta":"\n","newGroup":7,"group":{"id":7,"name":"Highmaps","code":"highmaps"}}}