【超图】SuperMap iClient3D for WebGL/WebGPU —— 坐标系&位置 —— Cartesian2

作者：taco

说到关于地理必然逃不开位置的关系。借用百度百科的内容来说地理学（geography） ，是研究地球表层空间地理 要素或者地理综合体空间分布规律 、时间演变过程和区域特征的一门学科。所以位置&坐标系必然逃不掉了。那么在SuperMap iClient3D for WebGL/WebGPU中包含了哪些坐标系信息呢？

一、Cartesian 笛卡尔坐标系

可能说到笛卡尔坐标系，对于一个毕业多年的人来说，或者很少接触数学、物理理科的人来算的话会有一些陌生。但是说到直角坐标系的时候，相信大家就会想到这个从小学到大的坐标系概念。笛卡儿坐标系（Cartesian coordinates，法语：les coordonnées cartésiennes）就是直角坐标系和斜坐标系的统称。

1.二维笛卡尔直角坐标系 Cartesian2（x,y）

在SuperMap iClient3D for WebGL/WebGPU 同样提供了笛卡尔直角坐标系这个最基础的坐标系。

javascript 复制代码

var cartesian2 = new SuperMap3D.Cartesian2(0,0);
console.log("cartesian2===================",cartesian2);

那在使用过程中，什么情况能拿到Cartesian2的坐标呢？

1.1 获取Cartesian2

在场景里其是Cartesian2，我们主要作为屏幕坐标来使用。也就是说我们获取到的屏幕坐标就是Cartesian2。我们来验证一下，首先我们添加一个监听点击事件获取屏幕坐标。

javascript 复制代码

				document.addEventListener("click", function(e) {
					var x = e.clientX;
					var y = e.clientY;
					console.log("鼠标当前位置：x=" + x + ", y=" + y);
				});

再通过SuperMap3D提供的点击事件获取默认拾取的坐标。

javascript 复制代码

				var handler = new SuperMap3D.ScreenSpaceEventHandler(scene.canvas);
				//设置鼠标左键单击回调事件
				handler.setInputAction(function(e) {
					//获取点击位置笛卡尔坐标
					console.log("拾取坐标x=", e.position.x, "y=", e.position.y);

				}, SuperMap3D.ScreenSpaceEventType.LEFT_CLICK);

令人不出意外的事情出现了，他们一样。所以当我们通过接口拿到的屏幕坐标其实就是界面上的屏幕坐标。

屏幕坐标的原点与标准的笛卡尔坐标的原点还是有那么一些区别的。这里以左上角为坐标原点（0,0）而并非屏幕中心位置。向下为y轴正方形，向右为x轴正方向。右下角为屏幕分辨率的数值。

1.2 Cartesian2的构建

那么关于Cartesian2有哪些构建方法可以使用呢？接下来我们看下。

1.2.1 单位向量

在该方法中默认提供了三种方式创建单位向量 ，同时也包含了零向量。UNIT_X、UNIT_Y、ZERO

创建X单位向量：SuperMap3D.Cartesian2.UNIT_X （1.0,0.0）

创建Y单位向量：SuperMap3D.Cartesian2.UNIT_Y （0.0,1.0）

创建零向量：SuperMap3D.Cartesian2.ZERO （0.0,0.0）

javascript 复制代码

				var Cartesian2X = SuperMap3D.Cartesian2.UNIT_X;
				var Cartesian2Y = SuperMap3D.Cartesian2.UNIT_Y;
				var Cartesian2ZERO = SuperMap3D.Cartesian2.ZERO;
				console.log("Cartesian2X", Cartesian2X, "Cartesian2Y", Cartesian2Y, "Cartesian2ZERO", Cartesian2ZERO);

1.2.2 数组构建Cartesian2 fromArray(array, startingIndex, result)

该方法可以通过数组构建Cartesian2点,同时可以通过startingIndex指定数组位置创建Cartesian2点。

javascript 复制代码

				var array = [1.0, 2.0];
				var p = SuperMap3D.Cartesian2.fromArray(array);
				console.log("array=",array,"p=",p);
				var array2 = [0.0, 0.0, 1.0, 2.0];
				var startingIndex = 2;
				var p2 = SuperMap3D.Cartesian2.fromArray(array2, startingIndex);
				console.log("array2=",array2,"p2=",p2);

1.2.3 Cartesian3 构建 Cartesian2 fromCartesian3(cartesian, result)

该方法从现有Cartesian3创建Cartesian2实例。取Cartesian3的x和y分量赋值，并去掉z分量的值。

javascript 复制代码

				var c3 = new SuperMap3D.Cartesian3(5, 6, 7);
				var c2 = SuperMap3D.Cartesian2.fromCartesian3(c3);
				console.log("Cartesian3=", c3, "Cartesian2=", c2);

1.2.4 Cartesian4 构建 Cartesian2 fromCartesian4(cartesian, result)

该方法从现有Cartesian4创建Cartesian2实例。取Cartesian4的x和y分量赋值，并去掉z、w分量的值。

javascript 复制代码

				var c4 = new SuperMap3D.Cartesian4(5, 6, 7, 1);
				var c2 = SuperMap3D.Cartesian2.fromCartesian4(c4);
				console.log("Cartesian4=", c4, "Cartesian2=", c2);

1.2.5 通过x,y 构建 Cartesian2 fromElements(x, y, result)

该方法可通过x,y坐标值构建Cartesian2实例

javascript 复制代码

				var x = 1;
				var y = 2;
				var result = SuperMap3D.Cartesian2.fromElements(x, y)

				console.log("x=", x, "y=", y, "result=", result);

1.3 Cartesian2的运算

1.3.1 各分量的绝对值 abs(cartesian, result)

该方法可以将各分量求绝对值。

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(-3, -4);
				var result = new  SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.abs(c2,result)
				console.log("c2===",c2,"result===",result);

1.3.2 相加 add(left, right, result)

该方法可以将各分量相加

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(1, 2);
				var c2b = new SuperMap3D.Cartesian2(12, 24);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.add(c2a, c2b,result)
				console.log("c2a===",c2a,"c2b===",c2b,"result===",result);

1.3.3 求差 subtract(left, right, result)

该方法可以对两个矢量中各分量进行相减

javascript 复制代码

				var first = new SuperMap3D.Cartesian2(10, 5);
				var second = new SuperMap3D.Cartesian2(10, 3);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.subtract(first, second, result)

				console.log("first=", first, "second=", second, "result=", result);

1.3.4 弧度值 angleBetween(left, right)

该方法可以求得两向量之间的弧度值

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(1, 0);
				var c2b = new SuperMap3D.Cartesian2(0, 1);
				var c2c = new SuperMap3D.Cartesian2(1, 1);
				var angleab = SuperMap3D.Cartesian2.angleBetween(c2a, c2b);
				var angleac = SuperMap3D.Cartesian2.angleBetween(c2a, c2c);
				console.log("c2a=",c2a,"c2b=",c2b,"弧度值angleab=",angleab,"角度值",SuperMap3D.Math.toDegrees(angleab));
				console.log("c2a=",c2a,"c2c=",c2c,"弧度值angleac=",angleac,"角度值",SuperMap3D.Math.toDegrees(angleac));

1.3.5 向量距离 distance(left, right)

该方法可以求得两个向量之间的距离。距离公式参考向量距离公式运算

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(1, 0);
				var c2b = new SuperMap3D.Cartesian2(0, 1);
				var c2c = new SuperMap3D.Cartesian2(1, 1);
				var dab = SuperMap3D.Cartesian2.distance(c2a, c2b);
				var dac = SuperMap3D.Cartesian2.distance(c2a, c2c);
				console.log("c2a=", c2a, "c2b=", c2b, "distance_a_b=", dab);
				console.log("c2a=", c2a, "c2c=", c2c, "distance_a_c=", dac);

1.3.6 求商 divideComponents(left, right, result)

该方法可以将各分量进行求商。

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(18, 14);
				var c2b = new SuperMap3D.Cartesian2(2, 7);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.divideComponents(c2a, c2b, result)
				console.log("c2a:", c2a, "c2b:", c2b, "result:", result);

1.3.7 指定值求商 divideByScalar(cartesian, scalar, result)

该方法可以将各分量与指定数值进行求商

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(13, 14);
				var scalar = 2;
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.divideByScalar(c2, scalar, result)
				console.log("c2:", c2, "scalar:", scalar, "result:", result);

1.3.8 点乘 dot(left, right)

对两个矢量进行点乘

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(2, 4);
				var c2b = new SuperMap3D.Cartesian2(2, 1);
				var result = SuperMap3D.Cartesian2.dot(c2a, c2a)
				console.log("c2a:", c2a, "c2b:", c2b, "result:", result);

1.3.9 向量距离平方 distanceSquared(left, right)

该方法可以求得两个向量距离的平方。

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(1, 0);
				var c2b = new SuperMap3D.Cartesian2(0, 1);
				var c2c = new SuperMap3D.Cartesian2(1, 1);
				var dab = SuperMap3D.Cartesian2.distanceSquared(c2a, c2b);
				var dac = SuperMap3D.Cartesian2.distanceSquared(c2a, c2c);
				console.log("c2a=", c2a, "c2b=", c2b, "distanceSquared_a_b=", dab);
				console.log("c2a=", c2a, "c2c=", c2c, "distanceSquared_a_c=", dac);

1.3.10 向量lerp插值运算 lerp(start, end, t, result)

该方法可以对向量进行lerp插值运算公式：Lerp(A, B, β)= (A-B)β+B

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(1, 0);
				var c2b = new SuperMap3D.Cartesian2(0, 1);
				var result = new SuperMap3D.Cartesian2();
				var t = 1;
				SuperMap3D.Cartesian2.lerp(c2a, c2b, t, result);

				console.log("c2a=", c2a, "c2b=", c2b, "t=", t, "result=", result);

1.3.11 求向量的数值大小 magnitude(cartesian)

该方法可以计算向量的大小

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(-1,-1);
				var length = SuperMap3D.Cartesian2.magnitude(c2)

				console.log("c2=", c2, "length=", length);

1.3.12 求向量的数值大小的平方 magnitudeSquared(cartesian)

该方法可以计算向量的大小的平方

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(-1,-1);
				var magnitudeSquared = SuperMap3D.Cartesian2.magnitudeSquared(c2)

				console.log("c2=", c2, "magnitudeSquared=", magnitudeSquared);

1.3.13 向量各分量乘以指定值 multiplyByScalar(cartesian, scalar, result)

该方法可以将向量中的各分量乘以指定值scalar

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(10, 5);
				var scalar = 2;
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.multiplyByScalar(c2, scalar, result)

				console.log("c2=", c2, "scalar=", scalar, "result=", result);

1.3.14 向量各分量相乘 multiplyComponents(left, right, result)

该方法可以将两向量中的各分量进行相乘

javascript 复制代码

				var first = new SuperMap3D.Cartesian2(10, 5);
				var second = new SuperMap3D.Cartesian2(2, 3);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.multiplyComponents(first, second, result)

				console.log("first=", first, "second=", second, "result=", result);

1.3.15 向量的值取反 negate(cartesian, result)

该方法可以对向量的值取反

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(10, 5);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.negate(c2, result);

1.3.16 归一化处理 normalize(cartesian, result)

该方法可以对向量进行归一化处理

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(10, 5);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.normalize(c2, result);

				console.log("c2=", c2, "result=", result);

1.4 Cartesian2的其他方法

1.4.1 复制 clone(result)

该方法可以复制一个Cartesia2实例。

javascript 复制代码

                //方法一
				var c2 = new SuperMap3D.Cartesian2(100, 100);
				var c2Clone = c2.clone(c2Clone);
                //方法2
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.clone(c2, result)
				console.log("c2===", c2, "c2Clone===", c2Clone);

1.4.2 相等 equals(right)

该方法用来判断两个Cartesia2示例是否相等。

我们这里创建3个示例，其中c2a 和c2c相同，与c2b不同。通过该方法可以判断是否相同。

javascript 复制代码

			var c2a = new SuperMap3D.Cartesian2(100, 100);
			var c2b = new SuperMap3D.Cartesian2(50, 100);
			var c2c = new SuperMap3D.Cartesian2(100, 100);
			var b1 = c2a.equals(c2b);
			var b2 = c2a.equals(c2c);
			console.log("b1===",b1,"b2===",b2);

            //方法2
            SuperMap3D.Cartesian2.equals(c2a, c2b)

1.4.3 误差内相等 equalsEpsilon(right, relativeEpsilon, absoluteEpsilon)

将两个Cartesian示例进行比较。判断在误差允许内是否相同。

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(1, 1);
				var c2b = new SuperMap3D.Cartesian2(1.01, 1.01);
				var c2c = new SuperMap3D.Cartesian2(1.001, 1.001);
				var b1 = c2a.equalsEpsilon(c2b,0.001)
				var b2 = c2a.equalsEpsilon(c2c,0.001)
				console.log("b1===",b1,"b2===",b2);

                //方法2
                SuperMap3D.Cartesian2.equalsEpsilon(c2a,c2b,0.001)

可以发现在误差的允许范围内，我们c2c是与c2a数据相同的。

1.4.4 求最大的Cartesian2向量 maximumByComponent(first, second, result)

该方法可以返回两个Cartesian2中最大的Cartesian2

javascript 复制代码

				var first = new SuperMap3D.Cartesian2(1, 1);
				var second = new SuperMap3D.Cartesian2(2, 2);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.maximumByComponent(first, second, result)

				console.log("first=", first, "second=", second, "result=", result);

1.4.5 求最小的Cartesian2向量 minimumByComponent(first, second, result)

该方法可以返回两个Cartesian2中最小的Cartesian2

javascript 复制代码

				var first = new SuperMap3D.Cartesian2(1, 1);
				var second = new SuperMap3D.Cartesian2(2, 2);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.minimumByComponent(first, second, result)

				console.log("first=", first, "second=", second, "result=", result);

1.4.6 求Cartesian2分量中的最大值 maximumComponent(cartesian)

该方法可以返回Cartesian2实例中最大的分量值

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(10, 5);
				var Number = SuperMap3D.Cartesian2.maximumComponent(c2);

				console.log("c2=", c2, "Number=", Number);

1.4.7 求Cartesian2分量中的最小值

该方法可以返回Cartesian2实例中最小的分量值

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(10, 5);
				var Number = SuperMap3D.Cartesian2.minimumComponent(c2);

				console.log("c2=", c2, "Number=", Number);

1.4.8 判断正交轴 mostOrthogonalAxis(cartesian, result)

该方法可以返回最正交的轴,相当于该向量最垂直的轴

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(10, 5);
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.mostOrthogonalAxis(c2, result) 

				console.log("c2=", c2, "result=", result);

1.5 Cartesian2的类型转换

1.5.1 转换为String 类型 toString()

该方法可以将实例对象转换为字符串类型，目前看来感觉作用不大。

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(1, 1);
				var c2String = c2.toString();
				console.log("c2===", c2, "c2String===", c2String);

1.5.2 Cartesian2分量存入数组 pack(value, array, startingIndex)

该方法可以将Cartesian2存入数组中，或存入数组指定位置

javascript 复制代码

				var c2 = new SuperMap3D.Cartesian2(10, 5);
				var array = [];
				SuperMap3D.Cartesian2.pack(c2, array)

				console.log("c2=", c2, "array=", array);
				// return array = [10, 5]

				var array2 = [1, 1, 2, 2, 3, 5, 5];
				var startingIndex = 2;
				SuperMap3D.Cartesian2.pack(c2, array2, startingIndex)

				console.log("c2=", c2, "array2=", array2);
				// return array2 = [1, 1, 10, 5, 3, 5, 5]

1.5.3 Cartesian2数组转为普通数组 packArray(array, result)

该方法可以将包含多个Cartesian2实例的数组转换为普通数组

javascript 复制代码

				var c2a = new SuperMap3D.Cartesian2(10, 5);
				var c2b = new SuperMap3D.Cartesian2(15, 7);
				var c2c = new SuperMap3D.Cartesian2(20, 9);
				var array = [c2a, c2b, c2c];
				var result = [];
				SuperMap3D.Cartesian2.packArray(array, result)

				console.log("c2a=", c2a, "c2b=", c2b, "c2c=", c2c, "array=", array, "result=", result);
				// return result = [10, 5, 15, 7, 20, 9]

1.5.4 普通数组转换Cartesian2 unpack(array, startingIndex, result)

该方法可以将数组中指定索引的数值创建Cartesian2实例

javascript 复制代码

				var array = [10, 5, 15, 7, 20, 9];
				var startingIndex = 2;
				var result = new SuperMap3D.Cartesian2();
				SuperMap3D.Cartesian2.unpack(array, startingIndex, result)

				console.log("result=", result);

1.5.5 普通数组转换为Cartesian2实例数组 unpackArray(array, result)

该方法可以将普通数组转换为Cartesian2实例数组，注：数组数量必须为双数，否则会失败

javascript 复制代码

				var array = [10, 5, 15, 7, 20, 9];
				var resultA = [];
				SuperMap3D.Cartesian2.unpackArray(array, resultA)
				console.log("array=",array,"resultA=", resultA);

上述关于二维笛卡尔坐标系目前就介绍到这里。关于坐标系&位置的综合应用，欢迎收看下一期！