Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.1k views
in Technique[技术] by (71.8m points)

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

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);

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...