Newer
Older
KaiFengPC / src / views / sponeScreen / gisMF / legendKF.vue
@jimengfei jimengfei on 22 Jul 9 KB updata
  1. <template>
  2. <!-- 海绵综合一张图图例 -->
  3. <div :class="['lengendPageHM', 'animate__animated', showLegend ? 'animate__fadeInUp' : 'animate__fadeOutDown']" v-if="showLegend">
  4. <!-- 图例框 -->
  5. <div class="publicLegendHM">
  6. <div class="legendTitle">
  7. <div class="legendName">
  8. 图层控制
  9. <img src="@/assets/newImgs/HMScreen/closeIcon.png" alt="" @click="showLegend = false" />
  10. </div>
  11. </div>
  12. <div class="legendContent">
  13. <div v-for="item in legendList" :key="item.layername" style="width: 100%">
  14. <div class="titleB" @click="changeAllLegend(item)">
  15. {{ item.title }}
  16. </div>
  17. <div class="legendItemContent">
  18. <div class="part" v-for="item2 in item.children">
  19. <div class="partItem" v-for="item3 in item2" @click="changeLegend(item3)">
  20. <div class="iconImg">
  21. <el-icon v-if="item3.isCheck" size="15">
  22. <Check />
  23. </el-icon>
  24. </div>
  25. <img :src="getImageUrl(item3.url, 'cesiumMap/legendIcon')" class="img" />
  26. <div class="title">{{ item3.name }}</div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </template>
  35.  
  36. <script setup>
  37. import { getImageUrl } from '@/utils/ruoyi';
  38. import cesiumMapCommonLegend from './cesiumMapLegend.js';
  39. import changeMapStyle from './changeMapStyle.js';
  40. import topography from '@/assets/newImgs/topography.png';
  41. import cesiumPaiShuiArea from './cesiumPaiShuiArea.js';
  42. import newfiberVectorLayer from './newfiberVectorLayer.js';
  43. import bus from '@/bus/index';
  44.  
  45. const { proxy } = getCurrentInstance();
  46. const legendList = ref([]);
  47. const showLegend = ref(false);
  48.  
  49. // 面板内容展开收起控制
  50. const props = defineProps({
  51. showLegend: {
  52. type: Boolean,
  53. },
  54. });
  55. watch(
  56. () => props.showLegend,
  57. () => {
  58. console.log('showLegend---', props.showLegend);
  59. showLegend.value = props.showLegend;
  60. },
  61. { immediate: true }
  62. );
  63.  
  64. //图例一级标题点击
  65. const changeAllLegend = item => {
  66. console.log('item---', item);
  67. // item.isCheck = !item.isCheck;
  68. };
  69. //图例点击
  70. const changeLegend = item => {
  71. item.isCheck = !item.isCheck;
  72. console.log('item--', item);
  73. if (item.layername == 'weather_cloud') {
  74. return newfiberMap.setLayersVisible([item.layername], item.isCheck);
  75. }
  76. if (item.layername == 'whiteMap') {
  77. legendList.value[0]['children'][0][1].isCheck = false;
  78. legendList.value[0]['children'][1][0].isCheck = false;
  79. changeMapStyle.mapSetWhiteStyle(newfiberMap);
  80. }
  81. if (item.layername == 'blackMap') {
  82. legendList.value[0]['children'][0][0].isCheck = false;
  83. legendList.value[0]['children'][1][0].isCheck = false;
  84. changeMapStyle.mapSetBlueStyle(newfiberMap);
  85. }
  86. if (item.layername == 'imageMap') {
  87. legendList.value[0]['children'][0][0].isCheck = false;
  88. legendList.value[0]['children'][0][1].isCheck = false;
  89. changeMapStyle.mapSetImageStyle(newfiberMap);
  90. }
  91. if (item.isCheck) {
  92. if (item.layername == 'topography') {
  93. newfiberMap.getMap().entities.add({
  94. id: 'topography',
  95. rectangle: {
  96. coordinates: Cesium.Rectangle.fromDegrees(114.110631109158, 34.6762585421128, 114.550431262765, 34.9438974105791),
  97. material: new Cesium.ImageMaterialProperty({
  98. // 纹理
  99. image: topography,
  100. // repeat: new Cesium.Cartesian2(4, 4),
  101. // color: Cesium.Color.BLUE,
  102. transparent: true,
  103. }),
  104. },
  105. });
  106. }
  107. if (item.layername == 'cesiumPaishuiArea1') {
  108. legendList.value[0]['children'][5][0].isCheck = false;
  109. legendList.value[0]['children'][6][0].isCheck = false;
  110. cesiumPaiShuiArea.addCesiumPaishuiArea1(newfiberMap);
  111. newfiberMap.removeByIds(['cesiumPaishuiArea2', 'cesiumPaishuiArea3']);
  112. }
  113. if (item.layername == 'cesiumPaishuiArea2') {
  114. legendList.value[0]['children'][4][0].isCheck = false;
  115. legendList.value[0]['children'][6][0].isCheck = false;
  116. cesiumPaiShuiArea.addCesiumPaishuiArea2(newfiberMap);
  117. newfiberMap.removeByIds(['cesiumPaishuiArea1', 'cesiumPaishuiArea3']);
  118. }
  119. if (item.layername == 'cesiumPaishuiArea3') {
  120. legendList.value[0]['children'][4][0].isCheck = false;
  121. legendList.value[0]['children'][5][0].isCheck = false;
  122. cesiumPaiShuiArea.addCesiumPaishuiArea3(newfiberMap);
  123. newfiberMap.removeByIds(['cesiumPaishuiArea1', 'cesiumPaishuiArea2']);
  124. }
  125. if (item.type == 'polygon') {
  126. newfiberVectorLayer.addGeojsonPolygon(newfiberMap, item.data, item.layername);
  127. }
  128. if (item.type == 'point') {
  129. newfiberVectorLayer.addGeojsonPoint(newfiberMap, item.data, item.url, item.layername);
  130. }
  131. if (item.type == 'areaWall') {
  132. newfiberVectorLayer.addGeojsonWall(newfiberMap, item.data, item.layername);
  133. }
  134. if (item.layername == 'dynamicWater') {
  135. let dynamicWaterList = newfiberMap.getMap().scene.primitives._primitives.filter(i => i.key == 'dynamicWater');
  136. if (!dynamicWaterList.length) {
  137. newfiberVectorLayer.addDynamicWater(newfiberMap, item.data, item.layername);
  138. } else {
  139. newfiberVectorLayer.setDynamicWaterVisible(item.isCheck);
  140. }
  141. }
  142. if (item.type == '3dModel') {
  143. item.data.forEach((url, index) => {
  144. newfiberVectorLayer.add3DModelLayers(newfiberMap, url, item.layername + index);
  145. });
  146. }
  147. if (item.type == 'point') {
  148. newfiberVectorLayer.addGeojsonPoint(newfiberMap, item.data, getImageUrl(item.url, 'cesiumMap/legendIcon'), item.layername);
  149. if (item.dataArea) {
  150. newfiberVectorLayer.addGeojsonPolygon(newfiberMap, item.dataArea, item.layername);
  151. }
  152. }
  153. if (item.layername == 'pipeLineFlow') {
  154. newfiberVectorLayer.addDynamicLine(item.data, item.layername);
  155. }
  156. }
  157. if (!item.isCheck) {
  158. if (item.layername == 'topography') {
  159. newfiberMap.getMap().entities.removeById('topography');
  160. }
  161. if (item.layername == 'dynamicWater') {
  162. newfiberVectorLayer.setDynamicWaterVisible(item.isCheck);
  163. }
  164. if (item.type == '3dModel') {
  165. item.data.forEach((url, index) => {
  166. newfiberVectorLayer.set3DModelVisible(item.layername + index, item.isCheck);
  167. });
  168. }
  169. newfiberMap.removeByIds([item.layername]);
  170. }
  171. };
  172. onMounted(() => {
  173. cesiumMapCommonLegend.getStationData();
  174. nextTick(() => {
  175. bus.on('legendDataList', legendDataList => {
  176. legendList.value = legendDataList;
  177. });
  178. });
  179. bus.on('setIniteLayer', data => {
  180. console.log('data---', data);
  181. if (!data.length) {
  182. let legendList_1 = legendList.value[1]['children'].concat(legendList.value[2]['children']).flat();
  183. legendList_1.forEach(layer => {
  184. layer.isCheck = true;
  185. changeLegend(layer);
  186. });
  187. } else {
  188. let legendList_1 = legendList.value[0]['children']
  189. .concat(legendList.value[1]['children'])
  190. .concat(legendList.value[2]['children'])
  191. .flat();
  192. data.forEach(layer => {
  193. let selectedLayer = legendList_1.filter(item => item.layername == layer.layername);
  194. console.log('selectedLayer--', selectedLayer);
  195. selectedLayer.map(i => {
  196. i.isCheck = layer.show;
  197. changeLegend(i);
  198. });
  199. });
  200. }
  201. });
  202. });
  203. </script>
  204.  
  205. <style lang="scss">
  206. .lengendPageHM {
  207. position: absolute;
  208. left: 480px;
  209. bottom: 63px;
  210. z-index: 205;
  211. width: 347px;
  212. height: 554px;
  213. background: #004565;
  214. .publicLegendHM {
  215. opacity: 0.8;
  216. .legendTitle {
  217. width: 100%;
  218. height: 46px;
  219. position: absolute;
  220. top: 1px;
  221. background: url('@/assets/cesiumMap/legendIcon/legendTitle_img.png');
  222. .legendName {
  223. margin: 10px 0px 15px 9px;
  224. font-family: YouSheBiaoTiHei;
  225. font-weight: 400;
  226. font-size: 22px;
  227. color: #e4f5ff;
  228. img {
  229. width: 22px;
  230. height: 22px;
  231. float: right;
  232. margin-right: 10px;
  233. cursor: pointer;
  234. }
  235. }
  236. }
  237. .legendContent {
  238. width: 100%;
  239. position: absolute;
  240. height: 500px;
  241. overflow-x: hidden;
  242. overflow-y: auto;
  243. top: 47px;
  244. .titleB {
  245. margin: 10px 0px 10px 20px;
  246. display: flex;
  247. height: 17px;
  248. font-family: Source Han Sans CN;
  249. font-weight: 500;
  250. font-size: 16px;
  251. color: #3afff8;
  252. .iconImg {
  253. margin-top: 3px;
  254. margin-left: 21px;
  255. margin-right: 10px;
  256. width: 16px;
  257. height: 16px;
  258. border: 2px solid #41f4ee;
  259. .el-icon {
  260. font-weight: bold;
  261. &.active {
  262. color: #41f4ee;
  263. }
  264. }
  265. }
  266. }
  267. .legendItemContent {
  268. width: 100%;
  269. .part {
  270. width: 100%;
  271. display: flex;
  272. height: 30px;
  273. align-items: center;
  274. cursor: pointer;
  275. .partItem {
  276. margin-left: 20px;
  277. display: flex;
  278. width: 180px;
  279. &:hover {
  280. background: #08596a;
  281. }
  282. .img {
  283. width: 16px;
  284. height: 16px;
  285. margin-left: 10px;
  286. margin-right: 5px;
  287. }
  288. .title {
  289. font-family: Source Han Sans CN;
  290. font-weight: 500;
  291. font-size: 14px;
  292. color: #b8ecff;
  293. }
  294. .iconImg {
  295. width: 16px;
  296. height: 16px;
  297. border: 1px solid #a6daf0;
  298. .el-icon {
  299. font-weight: bold;
  300. &.active {
  301. color: #00ee6f;
  302. }
  303. }
  304. }
  305. }
  306. }
  307. }
  308. }
  309. }
  310. }
  311. </style>