Question

我需要使用highmaps实现mapbubble。我已经使用qgis生成了地图的自定义geojson文件。

我参考了this的示例，但在地图上没有看到气泡。除此之外，即使在控制台中我也没有任何错误：

[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Highmap</title>
</head>
<body>
<div id="container" style="height: 500px; min-width: 350px; max-width: 800px; margin: 0 auto;"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/offline-exporting.js"></script>

<script src='./data/custom-world.js'></script>

<script>
$.getJSON('./data/data.json', function (data) {


        Highcharts.mapChart('container', {
            chart: {
                borderWidth: 1,
                map: 'custom/world'
            },

            title: {
                text: 'World population 2013 by country'
            },

            subtitle: {
                text: 'Demo of Highcharts map with bubbles'
            },

            legend: {
                enabled: false
            },

            mapNavigation: {
                enabled: true,
                buttonOptions: {
                    verticalAlign: 'bottom'
                }
            },

            series: [{
                name: 'Countries',
                color: '#E0E0E0',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                name: 'Population 2016',
                joinBy: ['ISO_A2', 'name'],
                data: data,
                minSize: 4,
                maxSize: '12%',
                tooltip: {
                    pointFormat: '{point.deposited}: [BTC]'
                }
            }]
        });
    });

</script>
</body>
</html>

data.json

[
  {
    "name" : "GB",
    "deposited" : "5"
  },
  {
    "name" : "RU",
    "deposited" : "10"
  },
  {
  "name" : "CH",
  "deposited" : "3"
  },
  {
    "name" : "IN",
    "deposited" : "50"
  }
]

custom-world.js

请从here下载该文件

现在的问题是，我正在获取自定义地图，但没有地图气泡。

任何帮助将不胜感激，因为这些高图/地图对我来说有点令人困惑。

Answer 1

代码看起来非常好。但是，问题似乎与您的data.json文件有关。您无需定义气泡的大小（z-属性）。查看文档：{{3}}。这就是为什么气泡不可见的原因。

data.json示例：

[
  {
    "name" : "GB",
    "deposited" : "5",
    "z": 1000
  },
  {
    "name" : "RU",
    "deposited" : "10",
    "z": 1350
  }
  ...
]

如何使用Qgis生成的自定义地图json在highmaps中实现mapbubble？

1 个答案: