measure.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. import {
  2. Entity,
  3. Ellipsoid,
  4. Cartesian3,
  5. PolylineOutlineMaterialProperty,
  6. Color,
  7. ScreenSpaceEventType,
  8. HeightReference,
  9. Cartesian2,
  10. LabelStyle,
  11. VerticalOrigin,
  12. ScreenSpaceEventHandler,
  13. handler,
  14. defined,
  15. CallbackProperty,
  16. Cartographic,
  17. EllipsoidGeodesic
  18. } from 'cesium/Cesium'
  19. /******************************************* */
  20. //测量空间直线距离
  21. /******************************************* */
  22. var measureLineSpace = function (cb) {
  23. var handler = new ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);
  24. var positions = [];
  25. var poly = null;
  26. var tooltip = document.getElementById("toolTip");
  27. var distance = 0;
  28. var cartesian = null;
  29. var floatingPoint;
  30. handler.setInputAction(function (movement) {
  31. tooltip.style.left = movement.endPosition.x + 3 + "px";
  32. tooltip.style.top = movement.endPosition.y - 25 + "px";
  33. tooltip.innerHTML = '<p>单击开始,双击结束</p>';
  34. ///////=================================
  35. cartesian = viewer.scene.pickPosition(movement.endPosition);
  36. /////==================================
  37. //cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
  38. if (positions.length >= 2) {
  39. if (!defined(poly)) {
  40. poly = new PolyLinePrimitive(positions);
  41. } else {
  42. positions.pop();
  43. // cartesian.y += (1 + Math.random());
  44. positions.push(cartesian);
  45. }
  46. distance = getSpaceDistance(positions);
  47. // console.log("distance: " + distance);
  48. // tooltip.innerHTML='<p>'+distance+'米</p>';
  49. }
  50. }, ScreenSpaceEventType.MOUSE_MOVE);
  51. handler.setInputAction(function (movement) {
  52. // cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
  53. cartesian = viewer.scene.pickPosition(movement.position);
  54. if (positions.length == 0) {
  55. positions.push(cartesian.clone());
  56. }
  57. positions.push(cartesian);
  58. //在三维场景中添加Label
  59. // var cartographic = Cartographic.fromCartesian(cartesian);
  60. var textDisance = distance + "米";
  61. // console.log(textDisance + ",lng:" + cartographic.longitude/Math.PI*180.0);
  62. floatingPoint = viewer.entities.add({
  63. name: '空间直线距离',
  64. // position: Cartesian3.fromDegrees(cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180,cartographic.height),
  65. position: positions[positions.length - 1],
  66. point: {
  67. pixelSize: 5,
  68. color: Color.RED,
  69. outlineColor: Color.WHITE,
  70. outlineWidth: 2,
  71. heightReference: HeightReference.NONE
  72. },
  73. label: {
  74. text: textDisance,
  75. font: '18px sans-serif',
  76. fillColor: Color.GOLD,
  77. style: LabelStyle.FILL_AND_OUTLINE,
  78. outlineWidth: 2,
  79. verticalOrigin: VerticalOrigin.BOTTOM,
  80. pixelOffset: new Cartesian2(20, -20),
  81. heightReference: HeightReference.NONE
  82. }
  83. });
  84. }, ScreenSpaceEventType.LEFT_CLICK);
  85. handler.setInputAction(function (movement) {
  86. handler.destroy();//关闭事件句柄
  87. positions.pop();//最后一个点无效
  88. viewer.entities.remove(floatingPoint);
  89. cb()
  90. }, ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
  91. var PolyLinePrimitive = (function () {
  92. function _(positions) {
  93. this.options = {
  94. name: '直线',
  95. polyline: {
  96. show: true,
  97. positions: [],
  98. material: Color.CHARTREUSE,
  99. width: 2
  100. }
  101. };
  102. this.positions = positions;
  103. this._init();
  104. }
  105. _.prototype._init = function () {
  106. var _self = this;
  107. var _update = function () {
  108. return _self.positions;
  109. };
  110. //实时更新polyline.positions
  111. this.options.polyline.positions = new CallbackProperty(_update, false);
  112. viewer.entities.add(this.options);
  113. };
  114. return _;
  115. })();
  116. };
  117. //空间两点距离计算函数
  118. function getSpaceDistance(positions) {
  119. var distance = 0;
  120. for (var i = 0; i < positions.length - 1; i++) {
  121. var point1cartographic = Cartographic.fromCartesian(positions[i]);
  122. var point2cartographic = Cartographic.fromCartesian(positions[i + 1]);
  123. /**根据经纬度计算出距离**/
  124. var geodesic = new EllipsoidGeodesic();
  125. geodesic.setEndPoints(point1cartographic, point2cartographic);
  126. var s = geodesic.surfaceDistance;
  127. //console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
  128. //返回两点之间的距离
  129. s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
  130. distance = distance + s;
  131. }
  132. return distance.toFixed(2);
  133. }
  134. export default measureLineSpace