index.esm.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. import { getAngle, CameraType, deg2rad, createVec3, runtime, Camera } from '@antv/g-lite';
  2. import { isString, isNumber } from '@antv/util';
  3. import { quat, mat4, vec3 } from 'gl-matrix';
  4. function _inheritsLoose(subClass, superClass) {
  5. subClass.prototype = Object.create(superClass.prototype);
  6. subClass.prototype.constructor = subClass;
  7. _setPrototypeOf(subClass, superClass);
  8. }
  9. function _setPrototypeOf(o, p) {
  10. _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
  11. o.__proto__ = p;
  12. return o;
  13. };
  14. return _setPrototypeOf(o, p);
  15. }
  16. /**
  17. * Provides camera action & animation.
  18. */
  19. var AdvancedCamera = /*#__PURE__*/function (_Camera) {
  20. _inheritsLoose(AdvancedCamera, _Camera);
  21. function AdvancedCamera() {
  22. var _this;
  23. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  24. args[_key] = arguments[_key];
  25. }
  26. _this = _Camera.call.apply(_Camera, [this].concat(args)) || this;
  27. /**
  28. * switch between multiple landmarks
  29. */
  30. _this.landmarks = [];
  31. _this.landmarkAnimationID = void 0;
  32. return _this;
  33. }
  34. var _proto = AdvancedCamera.prototype;
  35. /**
  36. * Changes the azimuth and elevation with respect to the current camera axes
  37. * @param {Number} azimuth the relative azimuth
  38. * @param {Number} elevation the relative elevation
  39. * @param {Number} roll the relative roll
  40. */
  41. _proto.rotate = function rotate(azimuth, elevation, roll) {
  42. this.relElevation = getAngle(elevation);
  43. this.relAzimuth = getAngle(azimuth);
  44. this.relRoll = getAngle(roll);
  45. this.elevation += this.relElevation;
  46. this.azimuth += this.relAzimuth;
  47. this.roll += this.relRoll;
  48. if (this.type === CameraType.EXPLORING) {
  49. var rotX = quat.setAxisAngle(quat.create(), [1, 0, 0], deg2rad((this.rotateWorld ? 1 : -1) * this.relElevation));
  50. var rotY = quat.setAxisAngle(quat.create(), [0, 1, 0], deg2rad((this.rotateWorld ? 1 : -1) * this.relAzimuth));
  51. var rotZ = quat.setAxisAngle(quat.create(), [0, 0, 1], deg2rad(this.relRoll));
  52. var rotQ = quat.multiply(quat.create(), rotY, rotX);
  53. rotQ = quat.multiply(quat.create(), rotQ, rotZ);
  54. var rotMatrix = mat4.fromQuat(mat4.create(), rotQ);
  55. mat4.translate(this.matrix, this.matrix, [0, 0, -this.distance]);
  56. mat4.multiply(this.matrix, this.matrix, rotMatrix);
  57. mat4.translate(this.matrix, this.matrix, [0, 0, this.distance]);
  58. } else {
  59. if (Math.abs(this.elevation) > 90) {
  60. return this;
  61. }
  62. this.computeMatrix();
  63. }
  64. this._getAxes();
  65. if (this.type === CameraType.ORBITING || this.type === CameraType.EXPLORING) {
  66. this._getPosition();
  67. } else if (this.type === CameraType.TRACKING) {
  68. this._getFocalPoint();
  69. }
  70. this._update();
  71. return this;
  72. }
  73. /**
  74. * 沿水平(right) & 垂直(up)平移相机
  75. */;
  76. _proto.pan = function pan(tx, ty) {
  77. var coords = createVec3(tx, ty, 0);
  78. var pos = vec3.clone(this.position);
  79. vec3.add(pos, pos, vec3.scale(vec3.create(), this.right, coords[0]));
  80. vec3.add(pos, pos, vec3.scale(vec3.create(), this.up, coords[1]));
  81. this._setPosition(pos);
  82. this.triggerUpdate();
  83. return this;
  84. }
  85. /**
  86. * 沿 n 轴移动,当距离视点远时移动速度较快,离视点越近速度越慢
  87. */;
  88. _proto.dolly = function dolly(value) {
  89. var n = this.forward;
  90. var pos = vec3.clone(this.position);
  91. var step = value * this.dollyingStep;
  92. var updatedDistance = this.distance + value * this.dollyingStep;
  93. // 限制视点距离范围
  94. step = Math.max(Math.min(updatedDistance, this.maxDistance), this.minDistance) - this.distance;
  95. pos[0] += step * n[0];
  96. pos[1] += step * n[1];
  97. pos[2] += step * n[2];
  98. this._setPosition(pos);
  99. if (this.type === CameraType.ORBITING || this.type === CameraType.EXPLORING) {
  100. // 重新计算视点距离
  101. this._getDistance();
  102. } else if (this.type === CameraType.TRACKING) {
  103. // 保持视距,移动视点位置
  104. vec3.add(this.focalPoint, pos, this.distanceVector);
  105. }
  106. this.triggerUpdate();
  107. return this;
  108. };
  109. _proto.cancelLandmarkAnimation = function cancelLandmarkAnimation() {
  110. if (this.landmarkAnimationID !== undefined) {
  111. this.canvas.cancelAnimationFrame(this.landmarkAnimationID);
  112. }
  113. };
  114. _proto.createLandmark = function createLandmark(name, params) {
  115. var _position$, _position$2, _focalPoint$, _focalPoint$2;
  116. if (params === void 0) {
  117. params = {};
  118. }
  119. var _params = params,
  120. _params$position = _params.position,
  121. position = _params$position === void 0 ? this.position : _params$position,
  122. _params$focalPoint = _params.focalPoint,
  123. focalPoint = _params$focalPoint === void 0 ? this.focalPoint : _params$focalPoint,
  124. roll = _params.roll,
  125. zoom = _params.zoom;
  126. var camera = new runtime.CameraContribution();
  127. camera.setType(this.type, undefined);
  128. camera.setPosition(position[0], (_position$ = position[1]) !== null && _position$ !== void 0 ? _position$ : this.position[1], (_position$2 = position[2]) !== null && _position$2 !== void 0 ? _position$2 : this.position[2]);
  129. camera.setFocalPoint(focalPoint[0], (_focalPoint$ = focalPoint[1]) !== null && _focalPoint$ !== void 0 ? _focalPoint$ : this.focalPoint[1], (_focalPoint$2 = focalPoint[2]) !== null && _focalPoint$2 !== void 0 ? _focalPoint$2 : this.focalPoint[2]);
  130. camera.setRoll(roll !== null && roll !== void 0 ? roll : this.roll);
  131. camera.setZoom(zoom !== null && zoom !== void 0 ? zoom : this.zoom);
  132. var landmark = {
  133. name: name,
  134. matrix: mat4.clone(camera.getWorldTransform()),
  135. right: vec3.clone(camera.right),
  136. up: vec3.clone(camera.up),
  137. forward: vec3.clone(camera.forward),
  138. position: vec3.clone(camera.getPosition()),
  139. focalPoint: vec3.clone(camera.getFocalPoint()),
  140. distanceVector: vec3.clone(camera.getDistanceVector()),
  141. distance: camera.getDistance(),
  142. dollyingStep: camera.getDollyingStep(),
  143. azimuth: camera.getAzimuth(),
  144. elevation: camera.getElevation(),
  145. roll: camera.getRoll(),
  146. relAzimuth: camera.relAzimuth,
  147. relElevation: camera.relElevation,
  148. relRoll: camera.relRoll,
  149. zoom: camera.getZoom()
  150. };
  151. this.landmarks.push(landmark);
  152. return landmark;
  153. };
  154. _proto.gotoLandmark = function gotoLandmark(name, options) {
  155. var _this2 = this;
  156. if (options === void 0) {
  157. options = {};
  158. }
  159. var landmark = isString(name) ? this.landmarks.find(function (l) {
  160. return l.name === name;
  161. }) : name;
  162. if (landmark) {
  163. var _ref = isNumber(options) ? {
  164. duration: options
  165. } : options,
  166. _ref$easing = _ref.easing,
  167. easing = _ref$easing === void 0 ? 'linear' : _ref$easing,
  168. _ref$duration = _ref.duration,
  169. duration = _ref$duration === void 0 ? 100 : _ref$duration,
  170. _ref$easingFunction = _ref.easingFunction,
  171. easingFunction = _ref$easingFunction === void 0 ? undefined : _ref$easingFunction,
  172. _ref$onfinish = _ref.onfinish,
  173. onfinish = _ref$onfinish === void 0 ? undefined : _ref$onfinish;
  174. var epsilon = 0.01;
  175. if (duration === 0) {
  176. this.syncFromLandmark(landmark);
  177. if (onfinish) {
  178. onfinish();
  179. }
  180. return;
  181. }
  182. // cancel ongoing animation
  183. this.cancelLandmarkAnimation();
  184. var destPosition = landmark.position;
  185. var destFocalPoint = landmark.focalPoint;
  186. var destZoom = landmark.zoom;
  187. var destRoll = landmark.roll;
  188. var easingFunc = easingFunction || runtime.EasingFunction(easing);
  189. var timeStart;
  190. var endAnimation = function endAnimation() {
  191. _this2.setFocalPoint(destFocalPoint);
  192. _this2.setPosition(destPosition);
  193. _this2.setRoll(destRoll);
  194. _this2.setZoom(destZoom);
  195. _this2.computeMatrix();
  196. _this2.triggerUpdate();
  197. if (onfinish) {
  198. onfinish();
  199. }
  200. };
  201. var animate = function animate(timestamp) {
  202. if (timeStart === undefined) {
  203. timeStart = timestamp;
  204. }
  205. var elapsed = timestamp - timeStart;
  206. if (elapsed > duration) {
  207. endAnimation();
  208. return;
  209. }
  210. // use the same ease function in animation system
  211. var t = easingFunc(elapsed / duration);
  212. var interFocalPoint = vec3.create();
  213. var interPosition = vec3.create();
  214. var interZoom = 1;
  215. var interRoll = 0;
  216. vec3.lerp(interFocalPoint, _this2.focalPoint, destFocalPoint, t);
  217. vec3.lerp(interPosition, _this2.position, destPosition, t);
  218. interRoll = _this2.roll * (1 - t) + destRoll * t;
  219. interZoom = _this2.zoom * (1 - t) + destZoom * t;
  220. _this2.setFocalPoint(interFocalPoint);
  221. _this2.setPosition(interPosition);
  222. _this2.setRoll(interRoll);
  223. _this2.setZoom(interZoom);
  224. var dist = vec3.dist(interFocalPoint, destFocalPoint) + vec3.dist(interPosition, destPosition);
  225. if (dist <= epsilon && destZoom == undefined && destRoll == undefined) {
  226. endAnimation();
  227. return;
  228. }
  229. _this2.computeMatrix();
  230. _this2.triggerUpdate();
  231. if (elapsed < duration) {
  232. _this2.landmarkAnimationID = _this2.canvas.requestAnimationFrame(animate);
  233. }
  234. };
  235. this.canvas.requestAnimationFrame(animate);
  236. }
  237. };
  238. _proto.syncFromLandmark = function syncFromLandmark(landmark) {
  239. this.matrix = mat4.copy(this.matrix, landmark.matrix);
  240. this.right = vec3.copy(this.right, landmark.right);
  241. this.up = vec3.copy(this.up, landmark.up);
  242. this.forward = vec3.copy(this.forward, landmark.forward);
  243. this.position = vec3.copy(this.position, landmark.position);
  244. this.focalPoint = vec3.copy(this.focalPoint, landmark.focalPoint);
  245. this.distanceVector = vec3.copy(this.distanceVector, landmark.distanceVector);
  246. this.azimuth = landmark.azimuth;
  247. this.elevation = landmark.elevation;
  248. this.roll = landmark.roll;
  249. this.relAzimuth = landmark.relAzimuth;
  250. this.relElevation = landmark.relElevation;
  251. this.relRoll = landmark.relRoll;
  252. this.dollyingStep = landmark.dollyingStep;
  253. this.distance = landmark.distance;
  254. this.zoom = landmark.zoom;
  255. };
  256. return AdvancedCamera;
  257. }(Camera);
  258. runtime.CameraContribution = AdvancedCamera;
  259. export { AdvancedCamera };