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

最新推荐文章于 2024-09-07 15:00:32 发布

核桃园

最新推荐文章于 2024-09-07 15:00:32 发布

阅读量343

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/qq_36040910/article/details/107363520

版权

为了满足用户在查看大地坐标数据的电子地图展示前，先预览坐标缩略图的需求，本文介绍了一种实现方法。通过分析坐标点，计算最大横纵坐标差，确定缩略图的尺寸。利用坐标差的比例计算单位度数在图片上的尺寸，以最小坐标为原点，根据坐标与原点的差值计算绘图坐标，最终使用canvas进行绘制。

摘要由CSDN通过智能技术生成

需求是这样的：

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

二次需求：

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

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

数据格式：
高斯克吕格平面直角坐标系
思路：
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.