Newer
Older
KaiFengPC / src / views / gisMapPage / commonLegendNew.vue
@鲁yixuan 鲁yixuan on 29 Aug 11 KB updata
  1. <template>
  2. <div class="lengendPage">
  3. <!-- 展开收起 -->
  4. <div :class="['zksqImg', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'goLeft']" title="展开收起" @click="changeZhan"></div>
  5. <!-- 图例框 -->
  6. <div :class="['publicLegend', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
  7. <div v-for="item in legendList" :key="item.layername">
  8. <div class="titleB" @click="changeAllLegend(item)">
  9. {{ item.title }}
  10. <div class="iconImg">
  11. <el-icon v-if="item.isCheck" size="22">
  12. <Check />
  13. </el-icon>
  14. </div>
  15. </div>
  16. <div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
  17. <img :src="getImageUrl(item2.url, 'newImgs/layerIcon')" class="img" />
  18. <p class="title">{{ item2.name }}</p>
  19. <div class="iconImg">
  20. <el-icon v-if="item2.isCheck" size="22">
  21. <Check />
  22. </el-icon>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. </template>
  29. <script>
  30. import { getImageUrl } from '@/utils/ruoyi';
  31. import bus from '@/bus';
  32. import mapCommonLegend from './commonLegend.js';
  33. import kaifengPSFQarea from './addPSFQarea.js';
  34.  
  35. export default {
  36. components: {},
  37. props: {},
  38. setup(props) {
  39. const allData = reactive({
  40. dataList: {},
  41. legendList: [],
  42. ifExpand: true,
  43. mapPopupShow: false,
  44. pipeData: {},
  45. pipePopupShow: false,
  46. pointData: {},
  47. pointPopupShow: false,
  48. allMapList: [],
  49. isOpenBuilding: false,
  50. buildingModels: null,
  51. mapActive: 1,
  52. });
  53. const timer = ref(null);
  54. const filterMapList = ref([]);
  55. // 展开收起
  56. const changeZhan = () => {
  57. allData.ifExpand = !allData.ifExpand;
  58. };
  59.  
  60. // 图例点击
  61. const changeLegend = item => {
  62. item.isCheck = !item.isCheck;
  63. if (item.layername == 'imageTiler') {
  64. if (item.isCheck) {
  65. newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'visible');
  66. newfiberMapbox.map.moveLayer('newfiber-XYZLayer', 'buildingModel');
  67. newfiberMapbox.map.setMaxZoom(17.5);
  68. } else {
  69. newfiberMapbox.map.setLayoutProperty('newfiber-XYZLayer', 'visibility', 'none');
  70. newfiberMapbox.map.setMaxZoom(24);
  71. }
  72. }
  73. if (item.layername == 'kaifengBuilding') {
  74. if (item.isCheck) {
  75. newfiberMapbox.map.setLayoutProperty('buildingModel', 'visibility', 'visible');
  76. } else {
  77. newfiberMapbox.map.setLayoutProperty('buildingModel', 'visibility', 'none');
  78. }
  79. }
  80. if (!item.isCheck) {
  81. if (item.layername == 'ysLine1' || item.layername == 'wsLine1') {
  82. bus.emit('closePipeInfo');
  83. let clearSelectedFeature = [];
  84. newfiberMapbox.getLayers().forEach(feature => {
  85. if (feature.newfiberId == 'highlight_linestring') {
  86. clearSelectedFeature.push(feature);
  87. }
  88. });
  89.  
  90. if (!!clearSelectedFeature.length) {
  91. clearSelectedFeature[0].setData({ type: 'FeatureCollection', features: [] });
  92. }
  93. }
  94. }
  95. if (item.layername == 'imageTiler') {
  96. if (item.isCheck) {
  97. newfiberMapbox.map.setMaxZoom(20);
  98. } else {
  99. newfiberMapbox.map.setMaxZoom(24);
  100. }
  101. }
  102. if (item.layername == 'YSFQ1') {
  103. let visibility;
  104. item.isCheck == true ? (visibility = 'visible') : (visibility = 'none');
  105. //bus.emit('setLayerVisible', item);
  106. newfiberMapbox.map.setLayoutProperty('YSFQ1', 'visibility', visibility);
  107. newfiberMapbox.map.setLayoutProperty('YSFQlabel1', 'visibility', visibility);
  108. newfiberMapbox.map.setLayoutProperty('YSFQline1', 'visibility', visibility);
  109.  
  110. newfiberMapbox.map.setLayoutProperty('YSFQ2', 'visibility', visibility);
  111. newfiberMapbox.map.setLayoutProperty('YSFQlabel2', 'visibility', visibility);
  112. newfiberMapbox.map.setLayoutProperty('YSFQline2', 'visibility', visibility);
  113.  
  114. newfiberMapbox.map.setLayoutProperty('YSFQ3', 'visibility', visibility);
  115. newfiberMapbox.map.setLayoutProperty('YSFQlabel3', 'visibility', visibility);
  116. newfiberMapbox.map.setLayoutProperty('YSFQline3', 'visibility', visibility);
  117. } else {
  118. if (item.data) {
  119. bus.emit('setGeoJSON', { json: item.data, key: item.layername });
  120. }
  121. bus.emit('setLayerVisible', item);
  122. }
  123. };
  124. //图例一级标题勾选
  125. const changeAllLegend = item => {
  126. if (item.noAllCheck) {
  127. return;
  128. }
  129. item.isCheck = !item.isCheck;
  130. item.children.forEach(element => {
  131. element.isCheck = !item.isCheck;
  132. changeLegend(element);
  133. });
  134. };
  135. //取消弹窗
  136. const closePopup = () => {
  137. if (window.PopupInfo) {
  138. window.PopupInfo.hide();
  139. allData.mapPopupShow = false;
  140. }
  141. allData.pipePopupShow = false;
  142. };
  143. const closePointPopup = () => {
  144. allData.pointPopupShow = false;
  145. };
  146.  
  147. //控制默认图层开启图层
  148. watch(filterMapList, (newVal, oldVal) => {
  149. if (!!oldVal) {
  150. oldVal.map(item => {
  151. item.isCheck = true;
  152. changeLegend(item);
  153. });
  154. }
  155. newVal.map(item => {
  156. item.isCheck = false;
  157. changeLegend(item);
  158. });
  159. });
  160. onMounted(() => {
  161. mapCommonLegend.getStationData();
  162.  
  163. nextTick(() => {
  164. bus.on('legendDataList', legendDataList => {
  165. allData.legendList = legendDataList;
  166. allData.allMapList = allData.legendList[1].children
  167. .concat(allData.legendList[2].children)
  168. .concat(allData.legendList[3].children)
  169. .concat(allData.legendList[0].children);
  170. bus.emit('setLegendData', allData.allMapList);
  171.  
  172. timer.value = setInterval(() => {
  173. if (!!!newfiberMapbox.map.getLayer('point')) {
  174. return;
  175. } else {
  176. kaifengPSFQarea.addPSFQ1(newfiberMapbox.map, 0, 10, 'none');
  177. kaifengPSFQarea.addPSFQ2(newfiberMapbox.map, 10.01, 12, 'none');
  178. kaifengPSFQarea.addPSFQ3(newfiberMapbox.map, 12.01, 'none');
  179. bus.emit('initeLayer', ['YSBZ', 'PLBZ', 'WSBZ', 'WSCLC', 'wsLine1', 'ysLine1']);
  180. clearInterval(timer.value);
  181. }
  182. }, 1000);
  183. });
  184.  
  185. //右侧面板地图联动,开启默认图层
  186. bus.on('initeLayer', e => {
  187. filterMapList.value = [];
  188. if (!!e) {
  189. e.forEach(layername => {
  190. allData.allMapList.forEach(item => {
  191. if (item.layername == layername) {
  192. filterMapList.value.push(item);
  193. }
  194. });
  195. });
  196. } else {
  197. allData.allMapList.forEach(item => {
  198. item.isCheck = false;
  199. changeLegend(item);
  200. });
  201. }
  202. });
  203. //老澴河排口弹窗
  204. bus.on('supervisePopupPK3', e => {
  205. allData.ifExpand = false;
  206. });
  207. //取消老澴河排口弹窗
  208. bus.on('clonesupervisePopupPK3', e => {
  209. allData.ifExpand = true;
  210. });
  211. });
  212. });
  213. onBeforeUnmount(() => {
  214. bus.off('legendDataList');
  215. bus.off('initeLayer');
  216. bus.off('supervisePopupPK3');
  217. bus.off('clonesupervisePopupPK3');
  218. if (timer.value) {
  219. clearInterval(timer.value);
  220. }
  221. });
  222. return {
  223. ...toRefs(allData),
  224. changeZhan,
  225. changeLegend,
  226. changeAllLegend,
  227. closePointPopup,
  228. closePopup,
  229. };
  230. },
  231. };
  232. </script>
  233. <style lang="scss">
  234. .el-popper {
  235. .typeMap {
  236. img {
  237. width: 100%;
  238. cursor: pointer;
  239. }
  240. .activeImg {
  241. border: 1px solid #00d1ff;
  242. }
  243. }
  244. }
  245. .isOpenBuildingTL {
  246. width: 240px;
  247. position: absolute;
  248. top: 6%;
  249. left: 5px;
  250. z-index: 100;
  251. display: flex;
  252. justify-content: flex-end;
  253. .earthIcon {
  254. cursor: pointer;
  255. width: 35px;
  256. height: 35px;
  257. }
  258. }
  259. .lengendPage {
  260. .zksqImg {
  261. width: 13px;
  262. height: 130px;
  263. background: url('@/assets/newImgs/down.png');
  264. background-size: 100% 100%;
  265. border-radius: 10px 10px 0px 0px;
  266. position: absolute;
  267. top: 40%;
  268. left: 243px;
  269. z-index: 115;
  270. cursor: pointer;
  271. }
  272. .goLeft {
  273. left: 2px;
  274. }
  275. .publicLegend {
  276. background: #00314e;
  277. border: 1px solid #094065;
  278. box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
  279. opacity: 0.7;
  280. border-radius: 10px;
  281. position: absolute;
  282. top: 10%;
  283. left: 5px;
  284. z-index: 110;
  285. height: 750px;
  286. width: 240px;
  287. overflow: auto;
  288. .titleB {
  289. display: flex;
  290. height: 35px;
  291. line-height: 35px;
  292. background: #094065;
  293. font-size: 16px;
  294. padding-left: 10px;
  295. .iconImg {
  296. margin-left: 125px;
  297. margin-top: 5px;
  298. height: 20px;
  299. .el-icon {
  300. font-weight: bold;
  301. &.active {
  302. color: #00ee6f;
  303. }
  304. }
  305. }
  306. }
  307. .part {
  308. display: flex;
  309. height: 40px;
  310. align-items: center;
  311. cursor: pointer;
  312. &:hover {
  313. background: #08596a;
  314. }
  315. .img {
  316. width: 12px;
  317. height: 12px;
  318. margin-left: 15px;
  319. margin-right: 5px;
  320. }
  321. .title {
  322. margin-left: 5px;
  323. font-size: 14px;
  324. height: 30px;
  325. line-height: 30px;
  326. width: 155px;
  327. }
  328. .iconImg {
  329. width: 20px;
  330. height: 20px;
  331. .el-icon {
  332. font-weight: bold;
  333. &.active {
  334. color: #00ee6f;
  335. }
  336. }
  337. }
  338. }
  339. }
  340. }
  341. #mapPopup {
  342. width: 300px;
  343. height: 200px;
  344. background: #00314e;
  345. border: 1px solid #094065;
  346. z-index: 115;
  347. .title {
  348. margin-top: 20px;
  349. display: flex;
  350. align-items: center;
  351. justify-content: space-between;
  352. .titleName {
  353. display: flex;
  354. align-items: center;
  355. height: 22px;
  356. font-size: 16px;
  357. font-family: PingFang SC;
  358. font-weight: 400;
  359. color: #ccf1ff;
  360. line-height: 22px;
  361. &:before {
  362. display: block;
  363. content: '';
  364. width: 3px;
  365. height: 16px;
  366. background: #00d1ff;
  367. margin-right: 10px;
  368. }
  369. }
  370. .closePopup {
  371. margin-right: 20px;
  372. height: 22px;
  373. cursor: pointer;
  374. }
  375. }
  376. .basicContent {
  377. display: flex;
  378. align-items: center;
  379. margin: 20px 80px;
  380. .contentKey {
  381. width: 80px;
  382. margin: 3px;
  383. height: 20px;
  384. font-size: 14px;
  385. font-weight: 400;
  386. line-height: 20px;
  387. color: #00d1ff;
  388. }
  389. .contentValue {
  390. margin: 3px 3px 3px 15px;
  391. width: 200px;
  392. height: 20px;
  393. font-size: 14px;
  394. font-weight: 400;
  395. line-height: 20px;
  396. color: #00d1ff;
  397. }
  398. }
  399. }
  400. #pipeInfo {
  401. width: 350px;
  402. padding: 10px;
  403. background: rgba(0, 49, 78, 0.5);
  404. border: 1px solid #094065;
  405. z-index: 111;
  406. }
  407. #pointInfo {
  408. width: 350px;
  409. padding: 10px;
  410. background: rgba(0, 49, 78, 0.5);
  411. border: 1px solid #094065;
  412. z-index: 111;
  413. }
  414. .title {
  415. display: flex;
  416. .infoTitle {
  417. display: flex;
  418. align-items: center;
  419. height: 22px;
  420. font-size: 14px;
  421. font-family: PingFang SC;
  422. font-weight: 400;
  423. color: #ccf1ff;
  424. line-height: 22px;
  425. margin: 5px;
  426. width: 330px;
  427. &:before {
  428. display: block;
  429. content: '';
  430. width: 3px;
  431. height: 16px;
  432. background: #00d1ff;
  433. margin-right: 10px;
  434. }
  435. }
  436. .closePopup {
  437. margin: 5px;
  438. height: 22px;
  439. cursor: pointer;
  440. }
  441. }
  442.  
  443. .dividerLine {
  444. height: 2px;
  445. border: 1px;
  446. margin: 0px 0 10px 0px;
  447. background: linear-gradient(90deg, rgba(0, 115, 165, 0) 0.79%, #0073a5 20.43%, #0073a5 82.43%, rgba(0, 115, 165, 0) 100%);
  448. }
  449. </style>