放大地图时地图点出现问题

Question

我目前正在使用 highchart 地图在世界地图上显示一些城市。除了我在地图上放大时，一切都按预期工作。城市点不停留在他的坐标上，而是跟随缩放（参见下面的屏幕截图）。

无缩放1

放大2

我试图在文档中查找可以避免这种情况但没有成功的参数。 geoJson 是自定义的。我正在使用 proj4 库 (WGS84 / EPSG:4326).

如果有人知道如何解决这个问题，我将非常高兴。

这里是地图初始化相关的代码：

                                  $("##container").highcharts('Map', {

                                        title: {
                                            text: null
                                        },

                                        mapNavigation: {
                                            enabled: true
                                        },

                                        colorAxis: {
                                            min: 0,
                                            max: 100,
                                            stops: [
                                                [0, '##EFEFFF'],
                                                [0.5, Highcharts.getOptions().colors[0]],
                                                [1, Highcharts.color(Highcharts.getOptions().colors[0]).brighten(-0.5).get()]
                                            ]
                                        },

                                        legend: {
                                            layout: 'vertical',
                                            align: 'left',
                                            verticalAlign: 'bottom'
                                        },

                                        series: [{
                                            data: data,
                                            mapData: mapGeoJSON,
                                            joinBy: ['ISO3CD', 'key'],
                                            name: tooltipName,
                                            states: {
                                                hover: {
                                                    color: Highcharts.getOptions().colors[2]
                                                }
                                            },
                                            dataLabels: {
                                                enabled: showDataLabels,
                                                formatter: function () {
                                                    return mapKey === 'custom/world' || mapKey === 'countries/us/us-all' ?
                                                        (this.point.properties && this.point.properties['name']) :
                                                        this.point.name;
                                                }
                                            },
                                            point: {
                                                events: {
                                                    // On click, look for a detailed map
                                                    click: function () {
                                                        var key = this.key;
                                                        $('##mapDropdown option').each(function () {
                                                            if (this.value === 'countries/' + key.substr(0, 2) + '/' + key + '-all.js') {
                                                                $('##mapDropdown').val(this.value).change();
                                                            }
                                                        });
                                                    }
                                                }
                                            }
                                        }, {
                                            type: 'mapline',
                                            name: "Separators",
                                            data: Highcharts.geojson(mapGeoJSON, 'mapline'),
                                            nullColor: 'gray',
                                            showInLegend: false,
                                            enableMouseTracking: false
                                        },
                                        {
                                        // Specify points using lat/lon
                                            type: 'mappoint',
                                            name: 'Cities',
                                            color: Highcharts.getOptions().colors[1],
                                            data: [{
                                                name: 'Paris',
                                                lat: 48.864716,
                                                lon: 2.349014,
                                                data: "test"
                                            }],
                                            tooltip: {
                                                headerFormat: "TITLE<br>",
                                                pointFormat: "{point.data}"
                                            }
                                        }
                                    ]});

                                    showDataLabels = $("##chkDataLabels").prop('checked');

                                }

Answer 1

这是一个错误，这是一个可能的解决方法的示例。

Highcharts.seriesTypes.mappoint.prototype.useMapGeometry = true;

现场演示：

https://jsfiddle.net/BlackLabel/1jp9kmna/

Github可以关注的票

https://github.com/highcharts/highcharts/issues/16534

放大地图时地图点出现问题

Issue with mappoint when zooming on map

highcharts