Newer
Older
KaiFengPC / src / views / sponeScreen / cityGK / PhysicalGeography.vue
@zhangdeliang zhangdeliang on 11 Dec 13 KB update
  1. <template>
  2. <!-- 自然地理 -->
  3. <div class="partTitleHM" @click="setLayerVisible">自然地理</div>
  4. <div class="partContHM">
  5. <div class="ListBox ListBox1">
  6. <div class="physicalGeography">
  7. <div class="waterSupply">
  8. <div class="bottomBgc"></div>
  9. <div class="eachDescribe">
  10. <div class="text" @click="showTotalArea()">总面积</div>
  11. <div class="sum bgcYellow">6118</div>
  12. <div class="unit">km²</div>
  13. <div class="icon colorBlue"></div>
  14. <div class="text" @click="showCenterCity()">中心城区</div>
  15. <div class="sum colorBlue">647.55</div>
  16. <div class="unit">km²</div>
  17. <div class="iconTwo bgcblue"></div>
  18. <div class="text" @click="showBuiltCity()">建成区</div>
  19. <div class="sum bgcblue">117</div>
  20. <div class="unit">km²</div>
  21. </div>
  22. </div>
  23. </div>
  24. <tslyqk_constituent_3d></tslyqk_constituent_3d>
  25. </div>
  26. <div class="ListBox ListBox3">
  27. <div class="ListTitle" @click="showOneCenterLayer()">城水格局(一带、两域、四廊、五区)</div>
  28. <div class="ListContent">
  29. <div class="SpatialPattern" v-for="item in policiesList">
  30. <div class="eachinfo cyan">
  31. <div class="number">{{ item.NumberA }}</div>
  32. <div class="headText">{{ item.name }}</div>
  33. <div class="rightText">{{ item.content }}</div>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. <!-- 降雨特征 -->
  40. <div class="Lowerleft">
  41. <rainfall />
  42. </div>
  43. </template>
  44.  
  45. <script setup>
  46. import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
  47. import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
  48. import oneCenter from '@/assets/geojson/kaifeng/oneCenter.json';
  49. import oneCenter1 from '@/assets/geojson/kaifeng/oneCenter1.json';
  50. import oneCenter2 from '@/assets/geojson/kaifeng/oneCenter2.json';
  51. import oneCenter3 from '@/assets/geojson/kaifeng/oneCenter3.json';
  52. import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js';
  53. import bus from '@/bus/index';
  54. import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
  55. import kaifengAllArea from '@/assets/geojson/kaifeng/kaifengAllArea.json';
  56. import kaifengAllWater from '@/assets/geojson/kaifeng/kaifengAllWater.json';
  57. import kaifengAllAreaLabel from '@/assets/geojson/kaifeng/kaifengAllAreaLabel.json';
  58. import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
  59. import kaifengAllAreaBoundary from '@/assets/geojson/kaifeng/kaifengAllAreaBoundary.json';
  60. const policiesList = ref([
  61. {
  62. name: '一带',
  63. NumberA: '01',
  64. content: '黄河生态文化带',
  65. },
  66. {
  67. name: '两域',
  68. NumberA: '02',
  69. content: '惠济河流域、运粮河流域',
  70. },
  71. {
  72. name: '四廊',
  73. NumberA: '03',
  74. content: '四条河流廊道作为开封市重要排水出路',
  75. },
  76. {
  77. name: '五区',
  78. NumberA: '04',
  79. content: '充分尊重自然本底,保护生态环境,落实海绵理念',
  80. },
  81. ]);
  82. const showTotalArea = () => {
  83. bus.emit('checkLandXDM', false);
  84. if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
  85. newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  86. }
  87. newfiberMapBoxVectorLayer.removeByIds([
  88. 'oneCenter',
  89. 'oneCenter_label',
  90. 'oneCenter1',
  91. 'oneCenter1_label',
  92. 'oneCenter2',
  93. 'oneCenter2_label',
  94. 'oneCenter3',
  95. 'rainAreaLayer', //年经总量控制率
  96. 'rainAreaLayer_label',
  97. 'kaifengAllArea',
  98. 'kaifengAllArea_label',
  99. 'kaifengAllWater',
  100. 'kaifengAllAreaLabel',
  101. 'builtCity',
  102. 'kaifengAllAreaBoundary',
  103. ]);
  104. bus.emit('setIniteLayer', [{ layername: 'topography', show: true }]);
  105. newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('kaifengAllArea', kaifengAllArea);
  106. newfiberMapBoxVectorLayer.addGeojsonLine('kaifengAllWater', kaifengAllWater, ['get', 'lineWidth']);
  107. newfiberMapBoxVectorLayer.addGeojsonLine('kaifengAllAreaBoundary', kaifengAllAreaBoundary);
  108. newfiberMapBoxVectorLayer.addGeojsonLabel('kaifengAllAreaLabel', kaifengAllAreaLabel, ['get', 'textsize'], ['get', 'textmaxwidth']);
  109. newfiberMapbox.map.easeTo({
  110. center: [114.502, 34.732],
  111. zoom: 9,
  112. pitch: 30,
  113. });
  114. newfiberMapbox.map.setMinZoom(9);
  115. };
  116. const showCenterCity = () => {
  117. bus.emit('checkLandXDM', false);
  118. if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
  119. newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  120. }
  121. newfiberMapBoxVectorLayer.removeByIds([
  122. 'oneCenter',
  123. 'oneCenter_label',
  124. 'oneCenter1',
  125. 'oneCenter1_label',
  126. 'oneCenter2',
  127. 'oneCenter2_label',
  128. 'oneCenter3',
  129. 'rainAreaLayer', //年经总量控制率
  130. 'rainAreaLayer_label',
  131. 'kaifengAllArea',
  132. 'kaifengAllArea_label',
  133. 'kaifengAllWater',
  134. 'kaifengAllAreaLabel',
  135. 'builtCity',
  136. 'kaifengAllAreaBoundary',
  137. ]);
  138. bus.emit('setIniteLayer', [
  139. // {
  140. // layername: 'buildingModel',
  141. // show: true,
  142. // },
  143. {
  144. layername: 'topography',
  145. show: false,
  146. },
  147. ]);
  148. newfiberMapbox.map.easeTo({
  149. center: [114.322, 34.852],
  150. zoom: 10.4,
  151. pitch: 30,
  152. });
  153. newfiberMapbox.map.setMinZoom(0);
  154. };
  155. const showBuiltCity = () => {
  156. bus.emit('checkLandXDM', false);
  157. if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
  158. newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  159. }
  160. newfiberMapBoxVectorLayer.removeByIds([
  161. 'oneCenter',
  162. 'oneCenter_label',
  163. 'oneCenter1',
  164. 'oneCenter1_label',
  165. 'oneCenter2',
  166. 'oneCenter2_label',
  167. 'oneCenter3',
  168. 'rainAreaLayer', //年经总量控制率
  169. 'rainAreaLayer_label',
  170. 'kaifengAllArea',
  171. 'kaifengAllArea_label',
  172. 'kaifengAllWater',
  173. 'kaifengAllAreaLabel',
  174. 'builtCity',
  175. 'kaifengAllAreaBoundary',
  176. ]);
  177. bus.emit('setIniteLayer', [{ layername: 'topography', show: true }]);
  178. newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1);
  179. newfiberMapbox.map.easeTo({
  180. center: [114.322, 34.762],
  181. zoom: 10.4,
  182. pitch: 30,
  183. });
  184. newfiberMapbox.map.setMinZoom(0);
  185. };
  186. const showOneCenterLayer = () => {
  187. bus.emit('checkLandXDM', false);
  188. if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
  189. newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  190. }
  191. newfiberMapBoxVectorLayer.removeByIds([
  192. 'rainAreaLayer', //年经总量控制率
  193. 'rainAreaLayer_label',
  194. 'kaifengAllArea',
  195. 'kaifengAllArea_label',
  196. 'kaifengAllWater',
  197. 'kaifengAllAreaLabel',
  198. 'builtCity',
  199. 'kaifengAllAreaBoundary',
  200. ]);
  201. bus.emit('setIniteLayer', [
  202. // {
  203. // layername: 'buildingModel',
  204. // show: true,
  205. // },
  206. {
  207. layername: 'topography',
  208. show: true,
  209. },
  210. ]);
  211. newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter', oneCenter);
  212. newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter1', oneCenter1);
  213. newfiberMapBoxVectorLayer.addLabelAlongLine('oneCenter2', oneCenter2);
  214. newfiberMapBoxVectorLayer.addGeojsonLabel('oneCenter3', oneCenter3);
  215. newfiberMapbox.map.easeTo({
  216. center: [114.315, 34.832],
  217. zoom: 10.7,
  218. pitch: 30,
  219. });
  220. newfiberMapbox.map.setMinZoom(0);
  221. };
  222. const setLayerVisible = () => {
  223. bus.emit('checkLandXDM', true);
  224. // wmsVisibility.value = !wmsVisibility.value;
  225. newfiberMapBoxVectorLayer.removeByIds([
  226. 'oneCenter',
  227. 'oneCenter_label',
  228. 'oneCenter1',
  229. 'oneCenter1_label',
  230. 'oneCenter2',
  231. 'oneCenter2_label',
  232. 'oneCenter3',
  233. 'rainAreaLayer', //年经总量控制率
  234. 'rainAreaLayer_label',
  235. 'kaifengAllArea',
  236. 'kaifengAllArea_label',
  237. 'kaifengAllWater',
  238. 'kaifengAllAreaLabel',
  239. 'builtCity',
  240. 'kaifengAllAreaBoundary',
  241. ]);
  242. bus.emit('setIniteLayer', [
  243. {
  244. layername: 'topography',
  245. show: true,
  246. },
  247. ]);
  248. // newfiberMap.removeByIds(['oneCenter']);
  249. // if (!newfiberMap.xdmWms) {
  250. // newfiberMap.xdmWms = newfiberMap.loadWmsLayer({
  251. // url: '/geoserver/demo/wms',
  252. // layers: 'hn_kf_hm_dltb',
  253. // visible: true,
  254. // });
  255. // return;
  256. // }
  257. // let imageryProvider = newfiberMap.getLayers([newfiberMap.xdmWms])[0];
  258. // imageryProvider.show = !!!imageryProvider.show;
  259. // if (wmsVisibility.value) {
  260. newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'visible');
  261. newfiberMapbox.map.easeTo({
  262. center: [114.315, 34.832],
  263. zoom: 10.7,
  264. pitch: 30,
  265. });
  266. newfiberMapbox.map.setMinZoom(9);
  267. // } else {
  268. // newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
  269. // }
  270. };
  271.  
  272. onMounted(() => {
  273. let mapboxTimer = setInterval(() => {
  274. if (!newfiberMapbox) return;
  275. if (!newfiberMapbox.map.getLayer('kaifengWaterLabel1')) return;
  276. //newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'visible');
  277.  
  278. newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter', oneCenter);
  279. newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter1', oneCenter1);
  280. newfiberMapBoxVectorLayer.addLabelAlongLine('oneCenter2', oneCenter2);
  281. newfiberMapBoxVectorLayer.addGeojsonLabel('oneCenter3', oneCenter3);
  282. newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel1', 'visibility', 'none');
  283. newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel2', 'visibility', 'none');
  284. newfiberMapbox.map.easeTo({
  285. center: [114.315, 34.832],
  286. zoom: 10.7,
  287. pitch: 30,
  288. });
  289. clearInterval(mapboxTimer);
  290. });
  291.  
  292. // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter');
  293. // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter');
  294. // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter');
  295. // newfiberMap.setCenter({
  296. // lng: 114.312,
  297. // lat: 34.742,
  298. // heading: 2.281299097855777,
  299. // zoom: 75358.12942752382,
  300. // pitch: -80.2508969308367,
  301. // roll: 0.005453465256790101,
  302. // });
  303. });
  304. </script>
  305.  
  306. <style lang="scss" scoped>
  307. .ListBox {
  308. .ListTitle {
  309. width: 100%;
  310. height: 32px;
  311. line-height: 32px;
  312. background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
  313. background-size: 100% 100%;
  314. position: relative;
  315. // box-sizing: border-box;
  316. padding-left: 30px;
  317. font-family: SourceHanSansCN-Medium;
  318. font-weight: bold;
  319. font-size: 15px;
  320. color: #e4f5ff;
  321. }
  322. .ListContent {
  323. width: 100%;
  324. height: calc(100% - 32px);
  325. overflow: auto;
  326. // background: red;
  327. }
  328. .SpatialPattern {
  329. padding-top: 5px;
  330. overflow: auto;
  331. // background: red;
  332. .eachinfo {
  333. width: 100%;
  334. height: 32px;
  335. display: flex;
  336. align-items: center;
  337. // background: yellow;
  338. margin-bottom: 3px;
  339. cursor: pointer;
  340. }
  341. .headText {
  342. font-weight: 500;
  343. font-size: 16px;
  344. min-width: 50px;
  345. color: #18ffff;
  346. margin-left: 15px;
  347. text-align: center;
  348. z-index: 111;
  349. // background: red;
  350. }
  351. .rightText {
  352. overflow: hidden;
  353. text-overflow: ellipsis; /* 超出部分省略号 */
  354. word-break: break-all; /* break-all(允许在单词内换行。) */
  355. display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
  356. -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
  357. -webkit-line-clamp: 1; /* 显示的行数 */
  358. padding-left: 10px;
  359. color: #b8ecff;
  360. // background: yellow;
  361. }
  362. .cyan {
  363. background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
  364. background-size: 100% 100%;
  365. .number {
  366. color: #d1dff7;
  367. font-weight: 400;
  368. font-size: 16px;
  369. position: relative;
  370. left: 8px;
  371. // background: blueviolet;
  372. }
  373. }
  374. }
  375.  
  376. width: 100%;
  377. margin-top: 2px;
  378. height: 190px;
  379. position: relative;
  380. // background: red;
  381. .physicalGeography {
  382. position: absolute;
  383. top: 0;
  384. width: 100%;
  385. // background: yellowgreen;
  386. .waterSupply {
  387. position: relative;
  388. display: flex;
  389. justify-content: space-around;
  390. align-items: center;
  391. .eachDescribe {
  392. display: flex;
  393. align-items: center;
  394. font-family: SourceHanSansCN-Regular;
  395. font-weight: 300;
  396. z-index: 1000;
  397. cursor: pointer;
  398. // background: red;
  399. .unit {
  400. padding-top: 2px;
  401. color: #ffffff;
  402. }
  403. .icon {
  404. display: inline-block;
  405. border-color: #3afff8;
  406. border-style: solid;
  407. border-width: 2px;
  408. width: 0;
  409. height: 0;
  410. margin-right: 7px;
  411. position: relative;
  412. top: -2px;
  413. -moz-transform: rotate(45deg);
  414. -webkit-transform: rotate(45deg);
  415. -o-transform: rotate(45deg);
  416. transform: rotate(45deg);
  417. margin-left: 7px;
  418. }
  419. .iconTwo {
  420. display: inline-block;
  421. border-color: #18e87a;
  422. border-style: solid;
  423. border-width: 2px;
  424. width: 0;
  425. height: 0;
  426. margin-right: 7px;
  427. position: relative;
  428. top: -2px;
  429. -moz-transform: rotate(45deg);
  430. -webkit-transform: rotate(45deg);
  431. -o-transform: rotate(45deg);
  432. transform: rotate(45deg);
  433. margin-left: 7px;
  434. }
  435. .colorYellow {
  436. color: #ffed52;
  437. }
  438. .colorBlue {
  439. color: #18ffff;
  440. }
  441. .bgcYellow {
  442. color: #ffed52;
  443. }
  444. .bgcblue {
  445. color: #18e87a;
  446. }
  447. .text {
  448. padding: 0 6px 0 5px;
  449. font-size: 16px;
  450. color: #b8ecff;
  451. }
  452. .sum {
  453. font-size: 16px;
  454. padding-right: 3px;
  455. font-weight: bold;
  456. }
  457. }
  458. .bottomBgc {
  459. width: 100%;
  460. height: 16px;
  461. position: absolute;
  462. bottom: 0;
  463. left: 0;
  464. background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
  465. background-size: 100% 100%;
  466. }
  467. }
  468. }
  469. }
  470. .ListBox3 {
  471. margin-top: 40px;
  472. height: 195px;
  473. // background: red;
  474. }
  475. .Lowerleft {
  476. margin-top: 10px;
  477. }
  478. </style>