经纬度坐标转换成px_highcharts的极值图,如何将经纬度转换成坐标?
想做一个这样的效果,以某个水库为中心点,展示它周围的一些其他点。现在这些点的经纬度坐标都已经有了,怎么能转换成平面的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 '
';
},
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的极值图,如何将经纬度转换成坐标?相关推荐
- 将字符转换成数字(atoi),将数字转换成字符(itoa)
目录 一.将字符转换为数字. 二.将数字转换成字符. 一.将字符转换为数字. (首先字符必须是"0" -"9",然后转换成十进制的数字) 比如将"12 ...
- 将java.util.Date类型转换成json时,使用JsonValueProcessor将date转换成希望的类型
将java.util.Date类型转换成json时,使用JsonValueProcessor将date转换成希望的类型 问题描述: java里面时间类型转换成json数据就成这样了: "cr ...
- jpg转换成pdf格式?怎么把图片jpg转换成pdf格式?
jpg转换成pdf格式?怎么把图片jpg转换成pdf格式?有时候我们需要把图片转成pdf.可能还有些小伙伴不知道怎么去完成这项转换的,图片转pdf其实很简单,下面给大家分享一个简单把图片转pdf的方法 ...
- 计算机怎么把文字转换成表格,Word文档如何将文字转换成表格形式
一.将Word中文字转换成表格(以Word2003为例) 将文字转换成表格(表格:一或多列储存格,通常用于显示数字及其他项目,以供快速参照及分析.表格中项目的组织形式是列及行)时,要以逗点.tab或其 ...
- 输入一行字符,将其中的大写字母转换成小写字母,其中的小写字母转换成大写字母C++--tolower、isalpha等函数的使用
字母大小写转换 [问题描述] 输入一行字符,将其中的大写字母转换成小写字母,其中的小写字母转换成大写字母,然后输出. [输入形式] 输入一行可显示的字符,回车结束. [输出形式] 输出一行字符,其中输 ...
- Android录屏并利用FFmpeg转换成gif(四) 将mp4文件转换成gif文件
Android录屏并利用FFmpeg转换成gif(四) 写博客时经常会希望用一段动画来演示app的行为,目前大多数的做法是在电脑上开模拟器,然后用gif录制软件录制模拟器屏幕,对于非开发人员来讲这种方 ...
- 【图片流转成图片】vue处理后端传来的图片流信息并转换成图片显示在前端页面上【详细解释】
前言:今天遇到的后端传一个二维码图片给我,然后给我的是图片流的形式,看起来跟一堆乱码一样,根本用不了,必须要处理转换后才能使用,然后我看了网上帖子有的说的不是很明白,可能新人看不懂,我就也写一个详细解 ...
- xml文件转换成图片_怎样能把PDF文件转换成图片?
我们的日常生活工作中时常碰到pdf与Excel.Word.ppt和jpg等文件格式的转换,有时候由于工作的需要,要把PDF文件转换成图片.并且现在网上的很多素材都是PDF文件格式的,如果我们想要里面的 ...
- matlab代码转换成python_[Python]40行代码实现公式转换成图片,手把手教你从模仿到实现...
最近写公式号需要把公式转成图片,有网站能实现转换功能,但是一个一个复制过去然后保存图片太复杂. 能不能实现自动转换并保存图片呢? 这篇文章可以告诉你一个小白如何通过模仿完成一个小功能,并且遇到错误如何 ...
最新文章
- python安装mysqldb模块
- 用 Go 语言理解 Tensorflow
- 关于 spring-aop理解
- onSaveInstanceState和onRestoreInstanceState触发的时机
- 个人作业——软件工程实践总结
- weblogic中数据源_如何在WebLogic Server中创建MySQL数据源
- 程序员实用算法 源码_程序员必须知道的十大基础实用算法综述
- 三级数据库考mysql_计算机三级MySQL数据库试题及答案
- 修改mac地址导致计算机无法上网,如何解决Win7计算机上无法修改MAC地址的问题...
- java实现通讯录部分截图
- java servlet文件下载_Servlet 实现文件下载
- Python matplotlib数据可视化 subplot绘制多个子图
- 图像几何校正 (介绍Image to Image几何校正详细步骤)
- 秒杀springboot——未来轻量级高性能的Java云原生微服务框架来啦
- Ambari自定义stack
- VDD、VCC、VSS的区别
- java请求url加密_SpringCloud-Config通过Java访问URL对敏感词加密解密
- rac节点时间同步方法
- AE基础教程第一阶段——15质量图标和效果开关
- GitHub Copilot 正在“摧毁”初级开发者,已沦为编程考试作弊的神器?