- <template>
- <!-- 自然地理 -->
- <div class="partTitleHM" @click="setLayerVisible">自然地理</div>
- <div class="partContHM">
- <div class="ListBox ListBox1">
- <div class="physicalGeography">
- <div class="waterSupply">
- <div class="bottomBgc"></div>
- <div class="eachDescribe">
- <div class="text" @click="showTotalArea()">总面积</div>
- <div class="sum bgcYellow">6118</div>
- <div class="unit">km²</div>
- <div class="icon colorBlue"></div>
- <div class="text" @click="showCenterCity()">中心城区</div>
- <div class="sum colorBlue">647.55</div>
- <div class="unit">km²</div>
- <div class="iconTwo bgcblue"></div>
- <div class="text" @click="showBuiltCity()">建成区</div>
- <div class="sum bgcblue">117</div>
- <div class="unit">km²</div>
- </div>
- </div>
- </div>
- <tslyqk_constituent_3d></tslyqk_constituent_3d>
- </div>
- <div class="ListBox ListBox3">
- <div class="ListTitle" @click="showOneCenterLayer()">城水格局(一带、两域、四廊、五区)</div>
- <div class="ListContent">
- <div class="SpatialPattern" v-for="item in policiesList">
- <div class="eachinfo cyan">
- <div class="number">{{ item.NumberA }}</div>
- <div class="headText">{{ item.name }}</div>
- <div class="rightText">{{ item.content }}</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 降雨特征 -->
- <div class="Lowerleft">
- <rainfall />
- </div>
- </template>
-
- <script setup>
- import tslyqk_constituent_3d from '@/views/sponeScreen/Echarts/tslyqk_constituent_3d.vue'; //3d图例
- import rainfall from '@/views/sponeScreen/cityGK/rainfall.vue'; //降雨页面
- import oneCenter from '@/assets/geojson/kaifeng/oneCenter.json';
- import oneCenter1 from '@/assets/geojson/kaifeng/oneCenter1.json';
- import oneCenter2 from '@/assets/geojson/kaifeng/oneCenter2.json';
- import oneCenter3 from '@/assets/geojson/kaifeng/oneCenter3.json';
- import newfiberVectorLayer from '@/views/sponeScreen/gisMF/newfiberVectorLayer.js';
- import bus from '@/bus/index';
- import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
- import kaifengAllArea from '@/assets/geojson/kaifeng/kaifengAllArea.json';
- import kaifengAllWater from '@/assets/geojson/kaifeng/kaifengAllWater.json';
- import kaifengAllAreaLabel from '@/assets/geojson/kaifeng/kaifengAllAreaLabel.json';
- import kaifengPSFQ1 from '@/assets/geojson/kaifeng/kaifengPSFQ1.json';
- import kaifengAllAreaBoundary from '@/assets/geojson/kaifeng/kaifengAllAreaBoundary.json';
- const policiesList = ref([
- {
- name: '一带',
- NumberA: '01',
- content: '黄河生态文化带',
- },
- {
- name: '两域',
- NumberA: '02',
- content: '惠济河流域、运粮河流域',
- },
- {
- name: '四廊',
- NumberA: '03',
- content: '四条河流廊道作为开封市重要排水出路',
- },
- {
- name: '五区',
- NumberA: '04',
- content: '充分尊重自然本底,保护生态环境,落实海绵理念',
- },
- ]);
- const showTotalArea = () => {
- bus.emit('checkLandXDM', false);
- if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
- newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
- }
- newfiberMapBoxVectorLayer.removeByIds([
- 'oneCenter',
- 'oneCenter_label',
- 'oneCenter1',
- 'oneCenter1_label',
- 'oneCenter2',
- 'oneCenter2_label',
- 'oneCenter3',
- 'rainAreaLayer', //年经总量控制率
- 'rainAreaLayer_label',
- 'kaifengAllArea',
- 'kaifengAllArea_label',
- 'kaifengAllWater',
- 'kaifengAllAreaLabel',
- 'builtCity',
- 'kaifengAllAreaBoundary',
- ]);
- bus.emit('setIniteLayer', [{ layername: 'topography', show: true }]);
- newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('kaifengAllArea', kaifengAllArea);
- newfiberMapBoxVectorLayer.addGeojsonLine('kaifengAllWater', kaifengAllWater, ['get', 'lineWidth']);
- newfiberMapBoxVectorLayer.addGeojsonLine('kaifengAllAreaBoundary', kaifengAllAreaBoundary);
- newfiberMapBoxVectorLayer.addGeojsonLabel('kaifengAllAreaLabel', kaifengAllAreaLabel, ['get', 'textsize'], ['get', 'textmaxwidth']);
- newfiberMapbox.map.easeTo({
- center: [114.502, 34.732],
- zoom: 9,
- pitch: 30,
- });
- newfiberMapbox.map.setMinZoom(9);
- };
- const showCenterCity = () => {
- bus.emit('checkLandXDM', false);
- if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
- newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
- }
- newfiberMapBoxVectorLayer.removeByIds([
- 'oneCenter',
- 'oneCenter_label',
- 'oneCenter1',
- 'oneCenter1_label',
- 'oneCenter2',
- 'oneCenter2_label',
- 'oneCenter3',
- 'rainAreaLayer', //年经总量控制率
- 'rainAreaLayer_label',
- 'kaifengAllArea',
- 'kaifengAllArea_label',
- 'kaifengAllWater',
- 'kaifengAllAreaLabel',
- 'builtCity',
- 'kaifengAllAreaBoundary',
- ]);
- bus.emit('setIniteLayer', [
- // {
- // layername: 'buildingModel',
- // show: true,
- // },
- {
- layername: 'topography',
- show: false,
- },
- ]);
- newfiberMapbox.map.easeTo({
- center: [114.322, 34.852],
- zoom: 10.4,
- pitch: 30,
- });
- newfiberMapbox.map.setMinZoom(0);
- };
- const showBuiltCity = () => {
- bus.emit('checkLandXDM', false);
- if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
- newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
- }
- newfiberMapBoxVectorLayer.removeByIds([
- 'oneCenter',
- 'oneCenter_label',
- 'oneCenter1',
- 'oneCenter1_label',
- 'oneCenter2',
- 'oneCenter2_label',
- 'oneCenter3',
- 'rainAreaLayer', //年经总量控制率
- 'rainAreaLayer_label',
- 'kaifengAllArea',
- 'kaifengAllArea_label',
- 'kaifengAllWater',
- 'kaifengAllAreaLabel',
- 'builtCity',
- 'kaifengAllAreaBoundary',
- ]);
- bus.emit('setIniteLayer', [{ layername: 'topography', show: true }]);
- newfiberMapBoxVectorLayer.addGeojsonPolygon('builtCity', kaifengPSFQ1);
- newfiberMapbox.map.easeTo({
- center: [114.322, 34.762],
- zoom: 10.4,
- pitch: 30,
- });
- newfiberMapbox.map.setMinZoom(0);
- };
- const showOneCenterLayer = () => {
- bus.emit('checkLandXDM', false);
- if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
- newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
- }
- newfiberMapBoxVectorLayer.removeByIds([
- 'rainAreaLayer', //年经总量控制率
- 'rainAreaLayer_label',
- 'kaifengAllArea',
- 'kaifengAllArea_label',
- 'kaifengAllWater',
- 'kaifengAllAreaLabel',
- 'builtCity',
- 'kaifengAllAreaBoundary',
- ]);
- bus.emit('setIniteLayer', [
- // {
- // layername: 'buildingModel',
- // show: true,
- // },
- {
- layername: 'topography',
- show: true,
- },
- ]);
- newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter', oneCenter);
- newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter1', oneCenter1);
- newfiberMapBoxVectorLayer.addLabelAlongLine('oneCenter2', oneCenter2);
- newfiberMapBoxVectorLayer.addGeojsonLabel('oneCenter3', oneCenter3);
- newfiberMapbox.map.easeTo({
- center: [114.315, 34.832],
- zoom: 10.7,
- pitch: 30,
- });
- newfiberMapbox.map.setMinZoom(0);
- };
- const setLayerVisible = () => {
- bus.emit('checkLandXDM', true);
- // wmsVisibility.value = !wmsVisibility.value;
- newfiberMapBoxVectorLayer.removeByIds([
- 'oneCenter',
- 'oneCenter_label',
- 'oneCenter1',
- 'oneCenter1_label',
- 'oneCenter2',
- 'oneCenter2_label',
- 'oneCenter3',
- 'rainAreaLayer', //年经总量控制率
- 'rainAreaLayer_label',
- 'kaifengAllArea',
- 'kaifengAllArea_label',
- 'kaifengAllWater',
- 'kaifengAllAreaLabel',
- 'builtCity',
- 'kaifengAllAreaBoundary',
- ]);
- bus.emit('setIniteLayer', [
- {
- layername: 'topography',
- show: true,
- },
- ]);
- // newfiberMap.removeByIds(['oneCenter']);
- // if (!newfiberMap.xdmWms) {
- // newfiberMap.xdmWms = newfiberMap.loadWmsLayer({
- // url: '/geoserver/demo/wms',
- // layers: 'hn_kf_hm_dltb',
- // visible: true,
- // });
- // return;
- // }
- // let imageryProvider = newfiberMap.getLayers([newfiberMap.xdmWms])[0];
- // imageryProvider.show = !!!imageryProvider.show;
- // if (wmsVisibility.value) {
- newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'visible');
- newfiberMapbox.map.easeTo({
- center: [114.315, 34.832],
- zoom: 10.7,
- pitch: 30,
- });
- newfiberMapbox.map.setMinZoom(9);
- // } else {
- // newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
- // }
- };
-
- onMounted(() => {
- let mapboxTimer = setInterval(() => {
- if (!newfiberMapbox) return;
- if (!newfiberMapbox.map.getLayer('kaifengWaterLabel1')) return;
- //newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'visible');
-
- newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter', oneCenter);
- newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter1', oneCenter1);
- newfiberMapBoxVectorLayer.addLabelAlongLine('oneCenter2', oneCenter2);
- newfiberMapBoxVectorLayer.addGeojsonLabel('oneCenter3', oneCenter3);
- newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel1', 'visibility', 'none');
- newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel2', 'visibility', 'none');
- newfiberMapbox.map.easeTo({
- center: [114.315, 34.832],
- zoom: 10.7,
- pitch: 30,
- });
- clearInterval(mapboxTimer);
- });
-
- // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter1, 'oneCenter');
- // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter2, 'oneCenter');
- // newfiberVectorLayer.addGeojsonPolygon(newfiberMap, oneCenter, 'oneCenter');
- // newfiberMap.setCenter({
- // lng: 114.312,
- // lat: 34.742,
- // heading: 2.281299097855777,
- // zoom: 75358.12942752382,
- // pitch: -80.2508969308367,
- // roll: 0.005453465256790101,
- // });
- });
- </script>
-
- <style lang="scss" scoped>
- .ListBox {
- .ListTitle {
- width: 100%;
- height: 32px;
- line-height: 32px;
- background: url('@/assets/newImgs/HMScreen/title_img.png') no-repeat;
- background-size: 100% 100%;
- position: relative;
- // box-sizing: border-box;
- padding-left: 30px;
- font-family: SourceHanSansCN-Medium;
- font-weight: bold;
- font-size: 15px;
- color: #e4f5ff;
- }
- .ListContent {
- width: 100%;
- height: calc(100% - 32px);
- overflow: auto;
- // background: red;
- }
- .SpatialPattern {
- padding-top: 5px;
- overflow: auto;
- // background: red;
- .eachinfo {
- width: 100%;
- height: 32px;
- display: flex;
- align-items: center;
- // background: yellow;
- margin-bottom: 3px;
- cursor: pointer;
- }
- .headText {
- font-weight: 500;
- font-size: 16px;
- min-width: 50px;
- color: #18ffff;
- margin-left: 15px;
- text-align: center;
- z-index: 111;
- // background: red;
- }
- .rightText {
- overflow: hidden;
- text-overflow: ellipsis; /* 超出部分省略号 */
- word-break: break-all; /* break-all(允许在单词内换行。) */
- display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
- -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
- -webkit-line-clamp: 1; /* 显示的行数 */
- padding-left: 10px;
- color: #b8ecff;
- // background: yellow;
- }
- .cyan {
- background: url('@/assets/newImgs/HMScreen/Numberbox.png') no-repeat;
- background-size: 100% 100%;
- .number {
- color: #d1dff7;
- font-weight: 400;
- font-size: 16px;
- position: relative;
- left: 8px;
- // background: blueviolet;
- }
- }
- }
-
- width: 100%;
- margin-top: 2px;
- height: 190px;
- position: relative;
- // background: red;
- .physicalGeography {
- position: absolute;
- top: 0;
- width: 100%;
- // background: yellowgreen;
- .waterSupply {
- position: relative;
- display: flex;
- justify-content: space-around;
- align-items: center;
- .eachDescribe {
- display: flex;
- align-items: center;
- font-family: SourceHanSansCN-Regular;
- font-weight: 300;
- z-index: 1000;
- cursor: pointer;
- // background: red;
- .unit {
- padding-top: 2px;
- color: #ffffff;
- }
- .icon {
- display: inline-block;
- border-color: #3afff8;
- border-style: solid;
- border-width: 2px;
- width: 0;
- height: 0;
- margin-right: 7px;
- position: relative;
- top: -2px;
- -moz-transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- margin-left: 7px;
- }
- .iconTwo {
- display: inline-block;
- border-color: #18e87a;
- border-style: solid;
- border-width: 2px;
- width: 0;
- height: 0;
- margin-right: 7px;
- position: relative;
- top: -2px;
- -moz-transform: rotate(45deg);
- -webkit-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- margin-left: 7px;
- }
- .colorYellow {
- color: #ffed52;
- }
- .colorBlue {
- color: #18ffff;
- }
- .bgcYellow {
- color: #ffed52;
- }
- .bgcblue {
- color: #18e87a;
- }
- .text {
- padding: 0 6px 0 5px;
- font-size: 16px;
- color: #b8ecff;
- }
- .sum {
- font-size: 16px;
- padding-right: 3px;
- font-weight: bold;
- }
- }
- .bottomBgc {
- width: 100%;
- height: 16px;
- position: absolute;
- bottom: 0;
- left: 0;
- background: url('@/assets/newImgs/HMScreen/bottomBgcimg.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- }
- }
- .ListBox3 {
- margin-top: 40px;
- height: 195px;
- // background: red;
- }
- .Lowerleft {
- margin-top: 10px;
- }
- </style>