map3d.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. <script setup>
  2. </script>
  3. <template>
  4. <div id="cesiumContainer" class="jt-map"></div>
  5. <div id="cesiumContainer2" class="mapview" style="display: none;"></div>
  6. </template>
  7. <script>
  8. import * as jt3dSDK from '@/jtMap3d/index.js';
  9. import jt3dNavigation from "cesium-navigation-es6";
  10. let jt3d = undefined;
  11. export default {
  12. /* 数据 */
  13. data() {
  14. return {
  15. name: "jt-map3d",
  16. }
  17. },
  18. /* 方法 */
  19. methods: {
  20. /**
  21. * 初始化
  22. */
  23. init(el) {
  24. //初始化大球
  25. this.initMap3d(el);
  26. //设置默认视图
  27. this.setView(jt3d);
  28. // 初始化项目区域范围视角
  29. this.fullMap(jt3d);
  30. //加载天空盒子
  31. this.addSkybox(jt3d);
  32. // 比例尺、指南针
  33. this.initNavigation();
  34. //单击事件
  35. // this.clickEntity(jt3d);
  36. //调用父组件的方法,onload是在父组件的的动态组件component上面的方法,并将jt3d传过去
  37. this.$emit("onload", jt3d);
  38. // console.log('this.$parent',this.$parent)
  39. // this.$parent.jtMap3DOnload(jt3d);
  40. },
  41. /**
  42. * 单击事件
  43. */
  44. clickEntity() {
  45. let _self = this;
  46. if (jt3d.handlerLeftClick) {
  47. jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //移除事件
  48. }
  49. jt3d.handlerLeftClick = new Cesium.ScreenSpaceEventHandler(
  50. window.viewer.scene.canvas
  51. );
  52. //注册大球单机事件
  53. jt3d.handlerLeftClick.setInputAction(function(e) {
  54. var pick = window.viewer.scene.pick(e.position); //拾取当前的entity对象
  55. var cartesian = window.viewer.scene.pickPosition(e.position); //获取当前点坐标
  56. if (Cesium.defined(cartesian)) {
  57. //将笛卡尔坐标转换为地理坐标
  58. let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
  59. //将弧度转为度的十进制度表示
  60. let lng = Cesium.Math.toDegrees(cartographic.longitude);
  61. let lat = Cesium.Math.toDegrees(cartographic.latitude);
  62. let alt = cartographic.height; //高度
  63. _self.$parent.$refs._refQueryGraphics.initQuery({
  64. spatialType: '点',
  65. coordinate: lng + " " + lat,
  66. buffer: ''
  67. });
  68. }
  69. }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  70. },
  71. /**
  72. * 创建大球
  73. */
  74. initMap3d(el) {
  75. jt3d = new jt3dSDK.jtMap3d({
  76. container: el,
  77. });
  78. jt3d.statusBar.show = true;
  79. window.viewer = jt3d._viewer;
  80. // this.statusBar = new jt3dSDK.StatusBar(window.viewer);
  81. // this.statusBar.show = true;
  82. },
  83. /**
  84. * 设置默认视图-初始化中国区域范围视角
  85. */
  86. setView(jt3d) {
  87. // jt3d.flytoChina();
  88. //初始化中国区域范围视角
  89. jt3d.setViewChina();
  90. // jt3d.setView({
  91. // longitude: 103.84, //经度
  92. // latitude: 31.15, // 维度
  93. // height: 24000000, // 高度
  94. // heading: 0, // 偏航
  95. // pitch: -90, // 俯仰,人如果在赤道上空,俯仰角为0可见地球。如果在北纬,俯仰角为负才能见地球
  96. // roll: 0.0 // 翻滚
  97. // });
  98. },
  99. /**
  100. * 全图-飞行到项目区域范围视角
  101. */
  102. fullMap(jt3d) {
  103. // 初始化项目区域范围视角
  104. let optionsS = {
  105. west: 121.563298,
  106. south: 37.284514,
  107. east: 121.565298,
  108. north: 37.286514,
  109. isRemove: false, //定位完成后是否删除
  110. duration: 3, //飞行时间
  111. heading: 0,
  112. pitch: -90,
  113. range: 115000
  114. };
  115. let optionsE = {
  116. west: 121.563298,
  117. south: 37.284514,
  118. east: 121.565298,
  119. north: 37.286514,
  120. isRemove: true, //定位完成后是否删除
  121. duration: 3, //飞行时间
  122. heading: 0,
  123. pitch: -60,
  124. range: 115000
  125. };
  126. var fullMapPromise = jt3d.fullMap(optionsS);
  127. fullMapPromise.then(function(flyPromise) {
  128. jt3d.fullMap(optionsE);
  129. });
  130. },
  131. /**
  132. * 设置天空盒子
  133. */
  134. addSkybox(jt3d) {
  135. //设置天空盒子,默认蓝天
  136. this.SceneEffects = new jt3dSDK.SceneEffects.SkyBox(window.viewer);
  137. this.SceneEffects.setGroundSkyBox();
  138. },
  139. /**
  140. * 比例尺、指南针
  141. * @param {Object} options 具有以下属性:
  142. * @param {Number} options.longitude 经度,以度为单位
  143. * @param {Number} options.latitude 纬度,以度为单位
  144. * @param {Number} [options.height=0.0] 椭球的高度,以米为单位
  145. * @param {Number} [options.heading=0.0] 指向,默认值0.0(北)
  146. * @param {Number} [options.pitch=-90] 视角,默认值-90(向下看)。俯仰,人如果在赤道上空,俯仰角为0可见地球。如果在北纬,俯仰角为负才能见地球
  147. * @param {Number} [options.roll=0.0] 翻滚
  148. * @param {Number} [options.enableCompass=true] 用于启用或禁用罗盘。true是启用罗盘,false是禁用罗盘。默认值为true。如果将选项设置为false,则罗盘将不会添加到地图中。
  149. * @param {Number} [options.enableZoomControls=true] 用于启用或禁用缩放控件。true是启用,false是禁用。默认值为true。如果将选项设置为false,则缩放控件将不会添加到地图中。
  150. * @param {Number} [options.enableDistanceLegend=true] 用于启用或禁用距离图例。true是启用,false是禁用。默认值为true。如果将选项设置为false,距离图例将不会添加到地图中。
  151. * @param {Number} [options.enableCompassOuterRing=true] 用于启用或禁用指南针外环。true是启用,false是禁用。默认值为true。如果将选项设置为false,则该环将可见但无效。
  152. */
  153. initNavigation() {
  154. let options = {};
  155. // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
  156. options.defaultResetView = Cesium.Rectangle.fromDegrees(121.13766, 36.99670, 121.94984, 37.55286);
  157. // options.defaultResetView = Cesium.Cartographic(103.84,31.15,24000000);
  158. // options.defaultResetView = Cesium.Cartographic.fromDegrees(jtMap3dBase.Math.toRadians(103.84), Cesium.Math.toRadians(31.15), 24000000);
  159. options.orientation = {
  160. heading: Cesium.Math.toRadians(0),
  161. pitch: Cesium.Math.toRadians(-90),
  162. roll: 0,
  163. }
  164. //相机延时
  165. options.duration = 4 //默认为3s
  166. // 用于启用或禁用罗盘。
  167. options.enableCompass = true;
  168. // 用于启用或禁用指南针外环。
  169. options.enableCompassOuterRing = true;
  170. // 用于启用或禁用缩放控件。
  171. options.enableZoomControls = true;
  172. // 用于启用或禁用距离图例。
  173. options.enableDistanceLegend = false;
  174. //修改重置视图的tooltip
  175. options.resetTooltip = "重置视图";
  176. //修改放大按钮的tooltip
  177. options.zoomInTooltip = "放大";
  178. //修改缩小按钮的tooltip
  179. options.zoomOutTooltip = "缩小";
  180. //如需自定义罗盘控件,请看下面的自定义罗盘控件
  181. new jt3dNavigation(window.viewer, options);
  182. },
  183. /**
  184. * 地图绕点自旋
  185. */
  186. setMapSpin() {
  187. //移除左键单击事件
  188. if (jt3d.handlerLeftClick) {
  189. jt3d.handlerLeftClick.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
  190. }
  191. let SketchViewModel = new jt3dSDK.SketchViewModel(window.viewer, {
  192. isClear: true,
  193. isDrawPoint: false, //是否标记参考点
  194. isRetainDrawPoint: false, //绘制完成是否保留绘制点
  195. iconType: 'blue',
  196. }, );
  197. SketchViewModel.sketchTools('point', {
  198. onComplete(cPoint, gPoint) {
  199. jt3d.setMapSpinByPoint(cPoint, {
  200. // height: 100000
  201. });
  202. },
  203. onError(message) {}
  204. });
  205. },
  206. /**
  207. * 地图指北
  208. */
  209. setMapNorth() {
  210. jt3d.setMapNorth();
  211. jt3d.isSpan = false;
  212. },
  213. },
  214. mounted() {
  215. this.init("cesiumContainer");
  216. let mapView1 = document.getElementById("cesiumContainer");
  217. var canvas = window.viewer.canvas; // 获取画布
  218. console.log('画布', canvas.width)
  219. }
  220. };
  221. </script>
  222. <style scoped>
  223. #cesiumContainer {
  224. height: 100vh;
  225. margin: 0;
  226. padding: 0;
  227. border: 0px solid red;
  228. }
  229. </style>