<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';
const wmsVisibility = ref(false);
const policiesList = ref([
{
name: '一心',
NumberA: '01',
content: '中心城区',
},
{
name: '一核',
NumberA: '02',
content: '开封新区',
},
{
name: '一带',
NumberA: '03',
content: '沿黄河南岸形成的沿黄生态涵养带',
},
{
name: '三片',
NumberA: '04',
content: '水源保护(北)、海绵城市建设(中)、卫生防护(南)',
},
{
name: '三廊',
NumberA: '05',
content: '运粮河、开封西湖以及东护城大堤',
},
]);
const showTotalArea = () => {
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',
]);
bus.emit('setIniteLayer', [
{
layername: 'topography',
show: false,
},
// {
// layername: 'buildingModel',
// show: true,
// },
{
layername: 'builtCity',
show: true,
},
{
layername: 'centerCity',
show: true,
},
]);
newfiberMapbox.map.easeTo({
center: [114.312, 34.852],
zoom: 10.4,
pitch: 10,
});
};
const showCenterCity = () => {
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',
]);
bus.emit('setIniteLayer', [
// {
// layername: 'buildingModel',
// show: true,
// },
{
layername: 'topography',
show: true,
},
{
layername: 'builtCity',
show: true,
},
{
layername: 'centerCity',
show: false,
},
]);
newfiberMapbox.map.easeTo({
center: [114.312, 34.802],
zoom: 10,
pitch: 10,
});
};
const showBuiltCity = () => {
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',
]);
bus.emit('setIniteLayer', [
// {
// layername: 'buildingModel',
// show: true,
// },
{
layername: 'topography',
show: true,
},
{
layername: 'builtCity',
show: false,
},
{
layername: 'centerCity',
show: true,
},
]);
newfiberMapbox.map.easeTo({
center: [114.322, 34.852],
zoom: 10.4,
pitch: 10,
});
// newfiberMap.setCenter({
// lng: 114.312,
// lat: 34.262,
// heading: 2.281299097855777,
// zoom: 42358.12942752382,
// pitch: -35.2508969308367,
// roll: 0.005453465256790101,
// });
};
const showOneCenterLayer = () => {
if (newfiberMapbox.map.getLayer('hn_kf_hm_dltb')) {
newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
}
newfiberMapBoxVectorLayer.removeByIds([
'rainAreaLayer', //年经总量控制率
'rainAreaLayer_label',
]);
bus.emit('setIniteLayer', [
// {
// layername: 'buildingModel',
// show: true,
// },
{
layername: 'topography',
show: true,
},
{
layername: 'builtCity',
show: true,
},
{
layername: 'centerCity',
show: true,
},
]);
newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter', oneCenter);
newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1, 0, 2);
newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter2', oneCenter2);
newfiberMapbox.map.easeTo({
center: [114.315, 34.852],
zoom: 10.4,
pitch: 10,
});
};
const setLayerVisible = () => {
wmsVisibility.value = !wmsVisibility.value;
newfiberMapBoxVectorLayer.removeByIds([
'oneCenter',
'oneCenter_label',
'oneCenter1',
'oneCenter1_label',
'oneCenter2',
'oneCenter2_label',
'oneCenter3',
]);
// 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');
} else {
newfiberMapbox.map.setLayoutProperty('hn_kf_hm_dltb', 'visibility', 'none');
}
};
onMounted(() => {
let mapboxTimer = setInterval(() => {
if (!newfiberMapbox) return;
if (!newfiberMapbox.map.getLayer('kaifengWaterLabel1')) return;
newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter', oneCenter);
newfiberMapBoxVectorLayer.addGeojsonPolygonWithLabel('oneCenter1', oneCenter1, 0, 2);
newfiberMapBoxVectorLayer.addGeojsonPolygon('oneCenter2', oneCenter2);
newfiberMapBoxVectorLayer.addLabelAlongLine('oneCenter3', oneCenter3);
newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel1', 'visibility', 'none');
newfiberMapbox.map.setLayoutProperty('kaifengWaterLabel2', 'visibility', 'none');
clearInterval(mapboxTimer);
});
newfiberMapbox.map.easeTo({
center: [114.315, 34.852],
zoom: 10.4,
pitch: 10,
});
// 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: 150px;
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: 235px;
// background: red;
}
.Lowerleft {
margin-top: 10px;
}
</style>
