高斯克吕格平面直角坐标用canvas方法，生成坐标缩略图

需求是这样的：

初期，
用户输入大地坐标在电子地图上，实现对某类数据的分析

二次需求：

用户希望在实现电子地图展示功能前，先看到他们输入坐标的缩略图。

实现思路：参考根据经纬度绘制坐标点相对位置

数据格式：
高斯克吕格平面直角坐标系
思路：
1.求出所有坐标点的最大横坐标差、最大纵坐标差。比较，将大的那一个的长度作为maxsize。

2.根据最大横坐标差、最大纵坐标差之间的比例，可以算出我们短的那一边的长度。

3.求出一个Rate。这个Rate值表示单位度数在生成图片上所占的尺寸，生成一个类似比例尺的东西。

4.然后我们现在已经确定了我们的图片的长和宽。同时我们以最小横坐标，最小纵坐标为图片的x，y轴
原点。然后再根据Rate，以及当前点的坐标与最小横坐标，最小纵坐标的差，求出当前点在图片上绘制时候的坐标。

5.求出了绘图坐标之后，就可以进行绘图操作了。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="pic-group"> <canvas id="myCanvas" width="350" height="350"></canvas></div>
<script>
function draw() {// 这是原始数据格式var arrX = [39371393.41, 39371403.73, 39371631.54, 39371618.84];var arrY = [3561483.96, 3561269.65, 3561269.65, 3561494.28];var xy = "";var points = [];for (var i = 0; i < arrX.length; i++) {var point = {};point.L = arrX[i]point.B = arrY[i]points.push(point);// 拼接成数组}//坐标区域长或宽，最大为250px。判断标准：坐标经度差与纬度差，大的那个为250px。再根据经度差与纬度差的比例计算出短的一边有多少px。// canvas画布设置var MAXSIZE = 300;var maxL = points[0]['L'];var maxB = points[0]['B'];var minL = points[0]['L'];var minB = points[0]['B'];var value;for (var i = 0, pointsLen = points.length; i < pointsLen; i++) {value = points[i];maxL = maxL < value['L'] ? value['L'] : maxL;maxB = maxB < value['B'] ? value['B'] : maxB;minL = minL > value['L'] ? value['L'] : minL;minB = minB > value['B'] ? value['B'] : minB;}var diffL = maxL - minL;//经度差var diffB = maxB - minB;//纬度差var width, height, Rate, diff;//计算坐标区域height width;if (diffL == 0) {width = MAXSIZE;height = MAXSIZE;Rate = MAXSIZE / parseFloat(diffB);} else if (diffB == 0) {width = MAXSIZE;height = MAXSIZE;Rate = MAXSIZE / parseFloat(diffL);} else if (diffL >= diffB) {diff = diffL;width = MAXSIZE;Rate = MAXSIZE / parseFloat(diffL);//单位坐标的有多少个px值。height = diffB / diffL * MAXSIZE;} else {diff = diffB;height = MAXSIZE;Rate = MAXSIZE / parseFloat(diffB);//单位坐标的有多少个px值。width = diffL / diffB * MAXSIZE;}var ctx = document.getElementById("myCanvas").getContext("2d");ctx.clearRect(0, 0, 350, 350);//清空画布ctx.save();ctx.translate(20, 20);//多出来的40是用来防止名字，以及点上的圆点显示不下// 根据B,L计算像素位置。计算应该有px。多出来的6，和10，表示所有坐标都向右移动6px,向下移动10px,也是避免基站名和圆点显示不下。for (var k = 0, pointsLen = points.length; k < pointsLen; k++) {value = points[k];if (diffL == 0) {points[k]['Lpx'] = MAXSIZE / 2;points[k]['Bpx'] = parseInt(height - (value['B'] - minB) * Rate);} else if (diffB == 0) {points[k]['Lpx'] = parseInt((value['L'] - minL) * Rate);points[k]['Bpx'] = MAXSIZE / 2;} else {points[k]['Lpx'] = parseInt((value['L'] - minL) * Rate);points[k]['Bpx'] = parseInt(height - (value['B'] - minB) * Rate);}}ctx.beginPath();ctx.moveTo(points[0]['Lpx'], points[0]['Bpx']);for (var x = 0, pointsLen = points.length; x < pointsLen; x++) {value = points[x];i = x + 1;while (i < pointsLen) {ctx.lineTo(points[i]['Lpx'], points[i]['Bpx']);i++;}ctx.stroke();ctx.fillStyle = 'rgb(29,143,254)';}ctx.fill();ctx.beginPath();ctx.arc(285, 285, 30, 0, Math.PI, false);ctx.fill();ctx.restore();
};draw()
</script></body>
</html>

代码实现效果：

高斯克吕格平面直角坐标用canvas方法，生成坐标缩略图相关推荐

关于高斯克吕格平面直角坐标系
高斯克吕格平面直角坐标系是投影坐标系的一种,根据我国的地理情况,为建立地形图的测量控制和城市.矿山等区域性的测量控制,早在1952年决定,采用高斯克吕格平面直角坐标系. 投影面的形成: 椭球面是不可展 ...
经纬度坐标转换高斯-克吕格平面坐标
文章目录前言主要代码使用示例参考链接原作者链接:https://blog.csdn.net/jianyi7659/article/details/7583339 前言支持将地理坐标(经纬度 ...
经纬度与高斯-克吕格平面坐标转换
原作者链接:https://blog.csdn.net/jianyi7659/article/details/7583339 前言支持将地理坐标(经纬度坐标)转换到高斯-克吕格投影下的平面坐标,如北 ...
GIS算法基础实验1高斯克吕格的正反算
主题:用编程实现高斯克吕格的正反算目录目的算法思想计算模型程序说明结果分析一.目的通过编程进一步体会和掌握高斯克吕格的正反算算法. 二.算法思想高斯投影-正算公式就是由大地坐标(L, ...
墨卡托、高斯克吕格和UTM投影
1．墨卡托(Mercator)投影 1.1 墨卡托投影简介墨卡托(Mercator)投影,是一种"等角正切圆柱投影",由荷兰地图学家墨卡托(Gerhardus Mercator ...
高斯-克吕格(Gauss-Kruger)投影与UTM投影的区别
高斯-克吕格(Gauss-Kruger)投影与UTM投影(Universal Transverse Mercator,通用横轴墨卡托投影)都是横轴墨卡托投影的变种,目前一些国外的软件或国外进口仪器的配 ...
高斯-克吕格(Gauss-Kruger)投影与UTM投影的在ArcGIS中的区别
HiGIS.cn 原创文章,转载请注明出处咱们国家使用的北京54或者西安80都是高斯克吕格投影(Gauss Kruger),但是ArcGIS用户使用栅格数据的时候可能会发现,每每给栅格定义北京54或 ...
高斯克吕格与地理坐标相互转换算法（JS版本）
最近一段时间在研究高斯克吕格与地理坐标的互换算法,刚才的时候写了一个只能用于标准分带的算法,发现并不符合实际的一些地方坐标系的互换操作.经过研究最终写出了即可以应用于标准分带的和地方性的高斯克吕格与地 ...
[GIS] 常见地图投影 - 投影坐标系 - UTM|高斯克吕格|兰勃特等角投影|墨卡托投影
文章目录我国常见的地图投影情况墨卡托投影特征适用通用横轴墨卡托投影UTM 用途类型特点座标编排兰勃特等角投影特点适用高斯-克吕格投影形成条件特点适用分带 6度带 3度带 ...

高斯克吕格平面直角坐标用canvas方法，生成坐标缩略图

高斯克吕格平面直角坐标用canvas方法，生成坐标缩略图相关推荐

最新文章

热门文章