问答

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

作者:admin 2021-05-09 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • grom设置json默认值

    grom设置json默认值

  • Vue路由报错,看着没问题

    Vue路由报错,看着没问题

  • 思否邮箱登录为什么区分大小写了呢?

    思否邮箱登录为什么区分大小写了呢?

  • 有没有能够直接上传markdown文件作为博

    有没有能够直接上传markdown文件作为博

腾讯云代理商
海外云服务器