使用 geojson 文件在 HighMaps 中添加地图线
Adding Maplines in HighMaps using geojson file
我尝试使用自定义 geojson 文件在 HighMaps 中创建人口叶绿素图。
我有 2 个 geojson 文件 - 第一个包含县级数据,第二个包含县内较小的城镇区域。
我正在尝试向我的叶绿素地图添加县级边界,类似于此示例:http://www.highcharts.com/maps/demo/us-counties
我能够使用适当的颜色渐变正确绘制小区域;但是我的地图上没有出现县界线。
我的js代码如下:
$(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
}]
});
});
});
});
});
我假设我需要修改 maplines 系列的 'data' 命令,因为我正在读取 geojson 文件;但是我不确定该怎么做。
我的县数据 geojson 如下所示:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name" "urn:ogc:def:crs:EPSG::3857" } },
"features":[
{ "type": "Feature", "properties": {"COUNTYNAME": "Leitrim"}, "geometry": { "type": "MultiPolygon","coordinates":[[[[[[[-925332.1353,7260461.4174]],[-925231.9477,7260212.372] ]
接着是该县和后续县的剩余预测。
有人能帮忙吗?
提前致谢。
实际上我自己解决了 - 诀窍是调用 javascript 包含 geojson 数据的文件而不是直接调用 geojson 文件。
我尝试使用自定义 geojson 文件在 HighMaps 中创建人口叶绿素图。
我有 2 个 geojson 文件 - 第一个包含县级数据,第二个包含县内较小的城镇区域。
我正在尝试向我的叶绿素地图添加县级边界,类似于此示例:http://www.highcharts.com/maps/demo/us-counties
我能够使用适当的颜色渐变正确绘制小区域;但是我的地图上没有出现县界线。
我的js代码如下:
$(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
}]
});
});
});
});
});
我假设我需要修改 maplines 系列的 'data' 命令,因为我正在读取 geojson 文件;但是我不确定该怎么做。
我的县数据 geojson 如下所示: { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name" "urn:ogc:def:crs:EPSG::3857" } }, "features":[ { "type": "Feature", "properties": {"COUNTYNAME": "Leitrim"}, "geometry": { "type": "MultiPolygon","coordinates":[[[[[[[-925332.1353,7260461.4174]],[-925231.9477,7260212.372] ]
接着是该县和后续县的剩余预测。
有人能帮忙吗?
提前致谢。
实际上我自己解决了 - 诀窍是调用 javascript 包含 geojson 数据的文件而不是直接调用 geojson 文件。