想做一个这样的效果,以某个水库为中心点,展示它周围的一些其他点。现在这些点的经纬度坐标都已经有了,怎么能转换成平面的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 '

雨量:' + this.series.userOptions.jyl + ' mm

';

},

style: {

'fontSize': '14px'

}

},

series: []

};

for(var i=0;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);

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

经纬度坐标转换成px_highcharts的极值图,如何将经纬度转换成坐标?相关推荐

  1. 将字符转换成数字(atoi),将数字转换成字符(itoa)

    目录 一.将字符转换为数字. 二.将数字转换成字符. 一.将字符转换为数字. (首先字符必须是"0" -"9",然后转换成十进制的数字) 比如将"12 ...

  2. 将java.util.Date类型转换成json时,使用JsonValueProcessor将date转换成希望的类型

    将java.util.Date类型转换成json时,使用JsonValueProcessor将date转换成希望的类型 问题描述: java里面时间类型转换成json数据就成这样了: "cr ...

  3. jpg转换成pdf格式?怎么把图片jpg转换成pdf格式?

    jpg转换成pdf格式?怎么把图片jpg转换成pdf格式?有时候我们需要把图片转成pdf.可能还有些小伙伴不知道怎么去完成这项转换的,图片转pdf其实很简单,下面给大家分享一个简单把图片转pdf的方法 ...

  4. 计算机怎么把文字转换成表格,Word文档如何将文字转换成表格形式

    一.将Word中文字转换成表格(以Word2003为例) 将文字转换成表格(表格:一或多列储存格,通常用于显示数字及其他项目,以供快速参照及分析.表格中项目的组织形式是列及行)时,要以逗点.tab或其 ...

  5. 输入一行字符,将其中的大写字母转换成小写字母,其中的小写字母转换成大写字母C++--tolower、isalpha等函数的使用

    字母大小写转换 [问题描述] 输入一行字符,将其中的大写字母转换成小写字母,其中的小写字母转换成大写字母,然后输出. [输入形式] 输入一行可显示的字符,回车结束. [输出形式] 输出一行字符,其中输 ...

  6. Android录屏并利用FFmpeg转换成gif(四) 将mp4文件转换成gif文件

    Android录屏并利用FFmpeg转换成gif(四) 写博客时经常会希望用一段动画来演示app的行为,目前大多数的做法是在电脑上开模拟器,然后用gif录制软件录制模拟器屏幕,对于非开发人员来讲这种方 ...

  7. 【图片流转成图片】vue处理后端传来的图片流信息并转换成图片显示在前端页面上【详细解释】

    前言:今天遇到的后端传一个二维码图片给我,然后给我的是图片流的形式,看起来跟一堆乱码一样,根本用不了,必须要处理转换后才能使用,然后我看了网上帖子有的说的不是很明白,可能新人看不懂,我就也写一个详细解 ...

  8. xml文件转换成图片_怎样能把PDF文件转换成图片?

    我们的日常生活工作中时常碰到pdf与Excel.Word.ppt和jpg等文件格式的转换,有时候由于工作的需要,要把PDF文件转换成图片.并且现在网上的很多素材都是PDF文件格式的,如果我们想要里面的 ...

  9. matlab代码转换成python_[Python]40行代码实现公式转换成图片,手把手教你从模仿到实现...

    最近写公式号需要把公式转成图片,有网站能实现转换功能,但是一个一个复制过去然后保存图片太复杂. 能不能实现自动转换并保存图片呢? 这篇文章可以告诉你一个小白如何通过模仿完成一个小功能,并且遇到错误如何 ...

最新文章

  1. python安装mysqldb模块
  2. 用 Go 语言理解 Tensorflow
  3. 关于 spring-aop理解
  4. onSaveInstanceState和onRestoreInstanceState触发的时机
  5. 个人作业——软件工程实践总结
  6. weblogic中数据源_如何在WebLogic Server中创建MySQL数据源
  7. 程序员实用算法 源码_程序员必须知道的十大基础实用算法综述
  8. 三级数据库考mysql_计算机三级MySQL数据库试题及答案
  9. 修改mac地址导致计算机无法上网,如何解决Win7计算机上无法修改MAC地址的问题...
  10. java实现通讯录部分截图
  11. java servlet文件下载_Servlet 实现文件下载
  12. Python matplotlib数据可视化 subplot绘制多个子图
  13. 图像几何校正 (介绍Image to Image几何校正详细步骤)
  14. 秒杀springboot——未来轻量级高性能的Java云原生微服务框架来啦
  15. Ambari自定义stack
  16. VDD、VCC、VSS的区别
  17. java请求url加密_SpringCloud-Config通过Java访问URL对敏感词加密解密
  18. rac节点时间同步方法
  19. AE基础教程第一阶段——15质量图标和效果开关
  20. GitHub Copilot 正在“摧毁”初级开发者,已沦为编程考试作弊的神器?

热门文章

  1. vantUI弹出框和微信小程序的究极大坑
  2. 基于Go语言Beego+Layui的OA办公系统
  3. keycloak 自定义登录页面
  4. spring mcv 拦截器
  5. 微电影宣传片制作步骤分享。
  6. 第一类与第二类曲面积分的关系与变换
  7. 1413:确定进制(C C++)
  8. 中兴换头;任正非表态中美差距还有 50 年;Google 回应隐私丑闻 | CSDN 极客头条...
  9. 输入法不见了,咋办?输入法不能开机启动咋办?
  10. uni-app学习笔记--浏览vue-cli创建uni-app模板的文件结构