GeoJSON数据的HIghcharts映射显示太小
我试图实现一个自定义的交互式地图使用海图表地图JavaScript库（http://www.highcharts.com/maps/）。我设法让地图出现在屏幕上，但它太小了，无法正确查看。
我用GeoJSON数据绘制了一幅有行政边界的海地地图。
地图如下：http://haitidata.org/layers/cnigs.spatialdata:hti_boundaries_communes_adm2_cnigs_polygon
这是指向地图数据的GeoJSON文件的直接链接：http://haitidata.org/geoserver/wfs?srsName=EPSG:4326
这是我的HTML文件：
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type='text/css' href="css/normalize.css" type="text/css">
<link rel="stylesheet" type='text/css' href="css/main.css" type="text/css">
<link rel="stylesheet" type='text/css' href="css/responsive.css" type="text/css">
<!-- start JavaScript includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="js/haiti.js"></script> }
<!-- end JavaScript includes -->
</head>
<body>
<div id="container">
</div>
<p>This is some text.</p>
</body>
</html>
这是海地的内容。js，一个JavaScript文件，包含初始化映射的代码：
$(function () {
// Prepare random data
var data = [
{
"id_dept": 1,
"value": 5000
},
{
"id_dept": 2,
"value": 10000
},
{
"id_dept": 3,
"value": 15000
},
{
"id_dept": 4,
"value": 20000
},
{
"id_dept": 5,
"value": 25000
},
{
"id_dept": 6,
"value": 30000
},
{
"id_dept": 7,
"value": 40000
},
{
"id_dept": 8,
"value": 5000
},
{
"id_dept": 9,
"value": 60000
},
{
"id_dept": 10,
"value": 70000
},
];
$.getJSON('js/haiti.json', function (geojson) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoom: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
},
series : [{
data : data,
mapData: geojson,
joinBy: ['id_com', 'id_dept'],
name: 'Random data',
dataLabels: {
enabled: true,
format: '{point.properties.id_com}'
}
}]
});
});
});
我将地图的GeoJSON数据放在一个名为海地的单独文件中。json。请参阅问题顶部的链接。
我做错了什么？地图显示得太小，我无法单击并放大它。
这是我屏幕上显示的内容的截图。地图的容器应该是500px×500px，所以地图显示的宽度和高度只有几个像素。https://www.dropbox.com/s/844030r2o395zea/Screenshot2014-08-0123.15.50.png
共有1个答案
您可以使用javascript中的地图，然后使用data模块将数据添加到您的地图中，例如：http://jsfiddle.net/X85CS/3/
var mapData = Highcharts.geojson(Highcharts.maps['countries/ht/ht-all']);
var data = [{
"value": 1438,
"code": "OU"
}];
-
我试图将我的GeoJson从内联jcript移动到一个URL，以评估它如何提高具有大量标记（3,000）的地图的性能。然而，我一直无法让我的标记显示在地图上，并希望有一双新的眼睛。我的测试页面的url在这里：http://webapps.fhsu.edu/ksherp/testmapbox.aspxGeoJson文件链接
-
通过在我的渲染函数中返回这个，我可以毫不费力地渲染Geojson数据： 所以接下来我尝试的是用null初始化this.state.geojson_data，然后加载组件上的数据，然后我用GeoJSON修改了这一行，因为很明显，null不是一个有效的Geojson对象。 获取数据没有问题，但我的geojson根本不显示，有人知道为什么吗？ 我认为有两种方法可以避免这种情况： 使用地图参考添加层香草传
-
问题内容： 我正在尝试在Python的大草坪地图中显示以下geojson文件，但它仅显示一个空地图，没有任何数据。 这是我尝试的步骤： 我尝试使用下面的python代码，但未显示任何内容。 我使用相同的代码在下面的github存储库中尝试了其他geojson文件，并且数据显示没有问题，所以看起来我的python代码很好 我在github和Mapshaper中打开了“ census_tracts_2
-
我做了一个教程，用world-50m.json文件在d3中显示地图。然而，我希望使用我自己的json文件。这是我的. json文件的结构。 “类型”：“FeatureCollection”，“features”：[{“type”：“Feature”，“properties”：{“FID”：0.000000}，“geometry”：{“type”：“MultiPolygon”，“坐标”：[[[[14
-
注意 当前章节中涉及的配置一般适用于关系数据库。这里展示的扩展方法在你安装了关系数据库提供程序之后就能获得（由Microsoft.EntityFrmeworkCore.Relational 程序包共享）。 列映射用于标识应该从数据库查询或写入哪些列数据。 惯例 按照惯例，实体类型属性会被设置为映射到与该属性同名的数据列上。 数据注解 可以使用数据注解来配置实体类型属性所映射的数据列。 public
-
注意 当前章节中涉及的配置一般适用于关系数据库。这里展示的扩展方法在你安装了关系数据库提供程序之后就能获得（由Microsoft.EntityFrmeworkCore.Relational 程序包共享）。 表映射用于标识应该从数据库查询或写入哪些表数据。 惯例 按照惯例，一旦在派生的上下文中通过 DbSet<TEntity> 属性暴露了实体，该实体就会被设置为映射到与该属性同名的数据表上。如果给定