highcharts的极值图,如何将经纬度转换成坐标?

发布于 2022-09-12 13:56:34 字数 3188 浏览 19 评论 0

image.png
想做一个这样的效果,以某个水库为中心点,展示它周围的一些其他点。现在这些点的经纬度坐标都已经有了,怎么能转换成平面的XY轴的坐标呢?
这个图我现在使用的是highcharts的极值图,图表的代码如下:

var data = [
    {
        'name': '降雨点1',
        'x': 10,
        'y': 20,
        'jyl': 10
    },
    {
        'name': '降雨点2',
        'x': 15,
        'y': 17,
        'jyl': 0.5
    }
];
var chartOptions = {
    chart: {
        polar: true
    },
    title: {
        text: null
    },
    pane: {
        startAngle:  0,
        endAngle: 360,
        background: [{
            backgroundColor: '#EDF3FF'
        }]
    },
    legend: {
        enabled: false
    },
    credits: {
        // 禁用版权信息
        enabled: false
    },
    xAxis: {
        tickInterval: 45,
        min: 0,
        max: 360,
        title: {
            text: '达洪江水库',
            y: 70
        },
        labels: {
            formatter: function () {
                switch (this.value){
                    case 0:
                        return '北';
                    case 45:
                        return '东北';
                    case 90:
                        return '东';
                    case 135:
                        return '东南';
                    case 180:
                        return '南';
                    case 225:
                        return '西南';
                    case 270:
                        return '西';
                    case 315:
                        return '西北';
                }
            }
        },
        tickmarkPlacement: 'on'
    },
    yAxis: {
        min: 0,
        labels:{  
            // 设置不显示刻度值
            enabled:false
        },
        // title: {
        //     text: '123'
        // }
    },
    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 45
        },
        column: {
            pointPadding: 0,
            groupPadding: 0
        }
    },
    tooltip: {
        useHTML: true,
        pointFormatter: function(){
            return '<div style="font-size:12px;">雨量:' + this.series.userOptions.jyl + ' mm</div>';
        },
        style: {
            'fontSize': '14px'
        }
    },
    series: []
};
for(var i=0;i<data.length;i++){
    var color = '';
    var jyl = data[i].jyl
    if(jyl == 0){
        color = '#fff';
    } else if(jyl > 0 && jyl < 10){
        color = '#A5F394';
    } else if(jyl >= 10 && jyl < 25){
        color = '#0edd1d';
    } else if(jyl >= 25 && jyl < 50){
        color = '#63B6FF';
    } else if(jyl >= 50 && jyl < 100){
        color = '#2100FF';
    } else if(jyl >= 100 && jyl < 250){
        color = '#DE08CE';
    }
    chartOptions.series.push({
        type: 'scatter',
        name: data[i].name,
        // data: result,
        data: [[data[i].x, data[i].y]],
        color: color,
        marker: {
            symbol: 'circle'
        },
        jyl: jyl,
        reservoirName: data[i].name
    });
}
var chart = Highcharts.chart('container', chartOptions);
// console.log('chart', chart.series[0].data);

如何才能实现,大家有什么想法或者经验,求助求助。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文