使用使用原生绘图方式 实现平移缩放
上一章实现了绘图坐标和地理坐标的互相转换,接下来开始实现画面平移、缩放;
平移
场景1:把指定地理坐标点G移动到屏幕中心
实现思路:
关系图:
核心思路就是计算点G距离屏幕中心的距离,因为G可能不在屏幕显示范围,所以我们应该计算实地距离,而不是屏幕距离;
- 计算屏幕中心的地理坐标点CenterG:拿到绘图坐标系中的中心坐标(窗口宽高的一般+左上角坐标即可),用上一章提到的办法做转换得到地理坐标
- 用CenterG减去G点得到X方向和Y方向的实地距离Lx,Ly;
- 把我们的绘图基准点X,Y分别移动Lx,Ly距离,即相当于把G点移到地图中心;核心代码:
public void MoveGeoPointToCenter(float[] geoPoint)
{
//获得屏幕中心的地理坐标
var centerGeo = GetGeoCenter();
//计算差值
var diffX = (centerGeo[0] - geoPoint[0]);
var diffY = (centerGeo[1] - geoPoint[1]);
//把绘图基准点做相对移动
baseGeoPoint[0] -= diffX;
baseGeoPoint[1] -= diffY;
}
- 重绘地图即可
鼠标拖拽画面,实现平移
场景:鼠标拖拽画面,实现画面平移
思路:和上面基本一致,只不过这里我们要多做一步转换,在屏幕拖拽,可以直接得到起始点和终点的像素距离,再把距离转换成实地距离,把绘图基准坐标平移即可;
核心代码:
public void MovePixelToPixel(float[] sourcePixelPoint, float[] targePixelPoint)
{
//计算像素x和y方向像素差值
var diff = new float[] { targePixelPoint[0] - sourcePixelPoint[0], targePixelPoint[1] - sourcePixelPoint[1] };
//因为是像素距离,我们要转换成实地距离
baseGeoPoint[0] += (diff[0] * xScal);
//由于绘图坐标系y轴和屏幕坐标系相反,向上拖相当于实际y值在减少
baseGeoPoint[1] -= (diff[1] * yScal);
}
放大
场景:实现鼠标滚轮向后滚动一次,画面以鼠标位置为中心放大一级
思路:缩放无非是把x方向和y方向的比例变大而已,问题是如何保证以鼠标点为基础放大;因为绘图坐标在不同比例尺下会发生变化,所以我们只要记下缩放前鼠标的位置对应的地理坐标P0,和缩放后P0对应的绘图坐标,通过上面的像素平移方法MovePixelToPixel即可,关系图:
核心代码:
/// <summary>
/// 以某点为基点放大
/// </summary>
/// <param name="mousePoint">空则以左下角为基点</param>
public void ZoomIn(float[] pXY)
{
//获得改点的地理坐标
float[] geoPoint = PixelToGeo(pXY);
//执行放大
this.xScal += scaleLevel;
this.yScal += scaleLevel;
//做下判断,预防放太大
if (this.xScal > maxScaleX)
{
this.xScal = maxScaleX;
}
if (this.yScal > maxScaleY)
{
this.yScal = maxScaleY;
}
//计算缩放后地理坐标对应的像素点
float[] afterScalePixel = GeoToPixel(geoPoint);
if (pXY != null)
{
//平移回原来的位置
MovePixelToPixel(pXY, afterScalePixel);
}
}
缩小原理也是如此
第二篇 完结