Question

我正在尝试使用Highcharts Maps 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%3A4326&typename=cnigs.spatialdata%3Ahti_boundaries_communes_adm2_cnigs_polygon&outputFormat=json&version=1.0.0&service=WFS&request=GetFeature

这是我的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>

这是haiti.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数据放在一个名为haiti.json的单独文件中。请参阅问题顶部的链接。

我做错了什么？地图显示得太小，我无法点击并放大。

以下是我的屏幕上显示内容的屏幕截图。地图的容器应该是500px乘500px，因此地图显示的宽度和高度只有几个像素。 https://www.dropbox.com/s/844030r2o395zea/Screenshot%202014-08-01%2023.15.50.png

Answer 1

您可以使用javascript中的地图，然后使用数据模块将数据添加到地图中，例如：http://jsfiddle.net/X85CS/3/

var mapData = Highcharts.geojson(Highcharts.maps['countries/ht/ht-all']);

var data = [{
    "value": 1438,
    "code": "OU"
}];

来自GeoJSON数据的HIghcharts地图显示太小

1 个答案: