Ich versuche, eine Chlorpleth-Karte der Population in HighMaps mit benutzerdefinierten Geojson-Dateien zu erstellen.Hinzufügen von Kartenlinien in HighMaps mit Geojson-Datei
Ich habe 2 Geojson-Dateien - die erste enthält Daten auf Kreisebene und die zweite enthält kleinere Townlands, die in den Grafschaften enthalten sind.
Ich versuche Kreisebene Grenzen meiner chloropleth Karte ähnlich zu diesem Beispiel hinzuzufügen: http://www.highcharts.com/maps/demo/us-counties
ich in der Lage bin zu bekommen die kleinen Flächen korrekt mit den entsprechenden Farbverläufen zu zeichnen; Die Grenzen der Grafschaft erscheinen jedoch nicht auf meiner Karte.
Mein js Code ist unten:
$(function() {
$.getJSON('population.json', function(data) {
$.getJSON('smaller_areas.geojson', function(geojson) {
$.getJSON('counties.geojson', function(maplines){
// Initiate the chart
Highcharts.mapChart('container', {
chart: {
width: 600,
borderWidth: 1
},
title: {
text: 'Population'
},
legend: {
title: {
text: 'Crime Rates',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
align: 'right',
verticalAlign: 'top',
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 14
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
data: data,
mapData: geojson,
joinBy: ['GEOGID', 'GEOGID'],
name: 'Population',
tooltip: {
pointFormat: '{point.Name}: {point.value}'
}
},
{
type: 'mapline',
name: 'County Borders',
Data: maplines,
color: 'black',
lineWidth: 10
}]
});
});
});
});
});
Ich bin der Annahme, dass ich die ‚Daten‘ Befehl für die maplines Serie aufgrund der Tatsache ändern, muss ich von einer GeoJSON Datei lese; Ich bin mir jedoch nicht sicher, wie ich das machen soll.
Meine GeoJSON für die Grafschaft Daten sieht wie folgt aus: { "type": "FeatureCollection", "crs": { "type": "Name", "Eigenschaften": { "name" „urn: ogc: def: crs: EPSG :: 3857 "}}, " Features ": [ {" Typ ":" Feature "," Eigenschaften ": {" COUNTYNAME ":" Leitrim "}," Geometrie ": {" type ": "Multipolygon", "Koordinaten": [[[[-925332,1353, 7260461,4174], [-925.231,9477, 7260212,372], [-925020,4407, 7260020,804], [-924.719,8781, 7259925,0218], [-924597,4266, 7259886,7092],
gefolgt von den restlichen Prognosen für diesen Kreis und die nachfolgenden Grafschaften.
Kann jemand helfen?
Vielen Dank im Voraus.
Daten sollten mit dem kleinen Buchstaben beginnen. Können Sie das Problem auf jsfiddle/codepen/etc. Neu erstellen? Sie können den JSON-Kontext einfügen, so dass er keinen AJAX-Aufruf verwendet. – morganfree