【超图】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 同样提供了笛卡尔直角坐标系这个最基础的坐标系。

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

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

        1.1 获取Cartesian2

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

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

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

				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）

				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点。

				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分量的值。

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