Newer
Older
KaiFengPC / src / views / sponeScreen / gisMF / cesiumMap.vue
@jimengfei jimengfei on 22 Jul 4 KB updata
  1. <template>
  2. <!-- 海绵综合一张图地图cesium -->
  3. <div class="mapContainerMF" id="mapContainerMF" v-show="popupShow">
  4. <cesiumPopup></cesiumPopup>
  5. </div>
  6. </template>
  7.  
  8. <script setup>
  9. import blue_vector from './mapStyle.js';
  10. import cesiumPopup from '@/views/sponeScreen/gisMF/cesiumPopup.vue';
  11. import NewFiberMapUtils from '@/utils/gis/NewFiberMapUtils';
  12. import bus from '@/bus/index';
  13. const { proxy } = getCurrentInstance();
  14. const dataList = ref({});
  15. const popupShow = ref(false);
  16. //创建地图实例
  17. const createIniteMap = () => {
  18. window.newfiberMap = new NewFiberMap('mapContainerMF', {
  19. terrain: false,
  20. selectionIndicator: false, //单击是否出现绿色边框
  21. });
  22. // newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.TC_BLACK]);
  23. // changeMapStyle.mapSetImageStyle(newfiberMap);
  24. var layer = new NewFiberMap.Layer.MVTImageryProvider({
  25. style: blue_vector,
  26. tileSize: 1024,
  27. });
  28. layer.newfiberId = 'blackMap';
  29. newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString('rgba(8,27,54,1)');
  30. newfiberMap.getMap().imageryLayers.addImageryProvider(layer);
  31. newfiberMap.setView({
  32. lng: 114.312,
  33. lat: 34.502,
  34. heading: 2.281299097855777,
  35. zoom: 16358.12942752382,
  36. pitch: -25.2508969308367,
  37. roll: 0.005453465256790101,
  38. });
  39. newfiberMap.registerLeftClickEvt(async (position, point, feature) => {
  40. if (!feature) return;
  41. if (
  42. feature.key == 'YSBZ' ||
  43. feature.key == 'WSBZ' ||
  44. feature.key == 'combineBengZhan' ||
  45. feature.key == 'sewageFactory' ||
  46. feature.key == 'waterLoging' ||
  47. feature.key == 'rainStation'
  48. ) {
  49. let properties = feature.properties.getValue();
  50. console.log('properties--', properties);
  51. dataList.value = properties;
  52. console.log('初始化弹窗--', window.PopupInfo);
  53. if (!!!window.PopupInfo) {
  54. window.PopupInfo = newfiberMap.createPopup({
  55. id: 'cesiumPopupID',
  56. position: [...point].concat(0),
  57. map: newfiberMap.getMap(),
  58. maxHeight: 130000,
  59. });
  60. } else {
  61. window.PopupInfo.position = Cesium.Cartesian3.fromDegrees(...point.concat(0));
  62. }
  63. bus.emit('popupcontent', {
  64. popupShow: true,
  65. popupInfo: properties,
  66. });
  67. }
  68. });
  69. NewFiberMapUtils.weatherToMap(newfiberMap);
  70. };
  71.  
  72. onMounted(() => {
  73. createIniteMap();
  74. bus.on('closeCesiumPopup', () => {
  75. popupShow.value = false;
  76. window.PopupInfo && window.PopupInfo.hide();
  77. window.PopupInfo = null;
  78. });
  79. });
  80. </script>
  81.  
  82. <style lang="scss" scoped>
  83. .mapContainerMF {
  84. width: 100%;
  85. height: 100%;
  86. position: absolute;
  87. top: 0px;
  88. left: 0px;
  89. z-index: 100;
  90. .psPopup {
  91. width: 500px;
  92. height: 300px;
  93. padding: 10px;
  94. background: rgba(0, 49, 78, 0.5);
  95. border: 1px solid #094065;
  96. z-index: 111;
  97. .title {
  98. display: flex;
  99. align-items: center;
  100. justify-content: space-between;
  101. .titleName {
  102. display: flex;
  103. align-items: center;
  104. height: 22px;
  105. font-size: 14px;
  106. font-family: PingFang SC;
  107. font-weight: 400;
  108. color: #ccf1ff;
  109. line-height: 22px;
  110. margin: 5px;
  111. width: 330px;
  112. &:before {
  113. display: block;
  114. content: '';
  115. width: 3px;
  116. height: 16px;
  117. background: #00d1ff;
  118. margin-right: 10px;
  119. }
  120. }
  121. .closePopup {
  122. position: absolute;
  123. margin-left: 450px;
  124. height: 22px;
  125. z-index: 9999;
  126. cursor: pointer;
  127. }
  128. }
  129.  
  130. .basicContent {
  131. position: absolute;
  132. top: 60px;
  133. left: -30px;
  134. .contentInfo {
  135. display: flex;
  136. align-items: center;
  137. margin-left: 50px;
  138. .contentName {
  139. margin: 3px;
  140. // height: 20px;
  141. width: 100px;
  142. font-size: 14px;
  143. font-weight: 400;
  144. line-height: 20px;
  145. color: #00d1ff;
  146. }
  147. .contentName1 {
  148. margin: 3px;
  149. // height: 20px;
  150. width: 185px;
  151. font-size: 14px;
  152. font-weight: 400;
  153. line-height: 20px;
  154. color: #00d1ff;
  155. }
  156. .contentValue {
  157. margin: 3px;
  158. // height: 20px;
  159. width: 100px;
  160. font-size: 14px;
  161. font-weight: 400;
  162. // line-height: 20px;
  163. color: #00d1ff;
  164. // overflow: hidden;
  165. word-wrap: break-word;
  166. // white-space: nowrap;
  167. // text-overflow: ellipsis;
  168. }
  169. }
  170. }
  171. }
  172. }
  173. </style>