<template>
<!-- 规划引领 阶段二区域治理-->
<div class="sheHuiNetTwo">
<div class="navBtn">
<p :class="[swIndex == 1 ? 'active' : '']" @click="checkSw(1)">黄孝河</p>
<p :class="[swIndex == 2 ? 'active' : '']" @click="checkSw(2)">机场河</p>
</div>
<div class="content">
<!-- 黄孝河 -->
<div class="nowGc animate__animated animate__fadeInRight" v-if="swIndex == 1">
<!-- 动态箭头 -->
<div class="anqu" style="width: 100px; left: 15px; bottom: 620px"></div>
<div class="anqu" style="width: 100px; left: 15px; bottom: 360px"></div>
<div class="anqu" style="width: 100px; left: 15px; bottom: 105px"></div>
<div class="mingqu" style="width: 230px; left: 132px; bottom: 105px"></div>
<div class="mingqu" style="width: 230px; left: 132px; bottom: 360px"></div>
<div class="mingqu" style="width: 230px; left: 132px; bottom: 620px"></div>
<div class="fuhe" style="width: 170px; left: 295.5px; bottom: 582px; transform: rotate(90deg)"></div>
<div class="fuhe" style="width: 170px; left: 295.5px; bottom: 335px; transform: rotate(90deg)"></div>
<div class="fuhe" style="width: 170px; left: 295.5px; bottom: 70px; transform: rotate(90deg)"></div>
<!-- 策略1 -->
<div class="line" style="width: 190px; left: 105px; bottom: 698px"></div>
<div class="line" style="width: 60px; left: 75px; bottom: 671px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 190px; left: 105px; bottom: 438px"></div>
<div class="line" style="width: 60px; left: 262px; bottom: 671px; transform: rotate(90deg)"></div>
<div class="line" style="width: 20px; left: 172px; bottom: 605px; transform: rotate(-90deg)"></div>
<!-- 策略2 -->
<div class="line" style="width: 170px; left: 105px; bottom: 255px"></div>
<div class="line" style="width: 100px; left: 56px; bottom: 303px; transform: rotate(90deg)"></div>
<div class="line" style="width: 60px; left: 75px; bottom: 411px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 190px; left: 105px; bottom: 438px"></div>
<div class="line" style="width: 60px; left: 262px; bottom: 411px; transform: rotate(90deg)"></div>
<div class="line" style="width: 20px; left: 172px; bottom: 340px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 50px; left: 250px; bottom: 330px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 50px; left: 250px; bottom: 291px; transform: rotate(-90deg)"></div>
<!-- 策略3 -->
<div class="line" style="width: 170px; left: 105px; bottom: 2px"></div>
<div class="line" style="width: 100px; left: 56px; bottom: 58px; transform: rotate(90deg)"></div>
<div class="line" style="width: 60px; left: 75px; bottom: 158px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 190px; left: 105px; bottom: 183px"></div>
<div class="line" style="width: 60px; left: 262px; bottom: 158px; transform: rotate(90deg)"></div>
<div class="line" style="width: 20px; left: 172px; bottom: 85px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 50px; left: 250px; bottom: 70px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 50px; left: 250px; bottom: 38px; transform: rotate(-90deg)"></div>
</div>
<!-- 机场河 -->
<div class="nowJch animate__animated animate__fadeInRight" v-if="swIndex == 2">
<!-- 策略1 -->
<div class="fuhe" style="width: 170px; left: 297px; bottom: 560px; transform: rotate(90deg)"></div>
<div class="mingqu" style="width: 140px; left: 163px; bottom: 505px"></div>
<div class="mingqu" style="width: 165px; left: 130px; bottom: 600px"></div>
<div class="line" style="width: 73px; left: 43px; bottom: 603px"></div>
<div class="line" style="width: 35px; left: 87px; bottom: 585px; transform: rotate(90deg)"></div>
<div class="line" style="width: 135px; left: 10px; bottom: 510px"></div>
<div class="line" style="width: 45px; left: 82px; bottom: 529px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 45px; left: 114px; bottom: 535px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 50px; left: 138px; bottom: 556px"></div>
<div class="line" style="width: 53px; left: 140px; bottom: 642px; transform: rotate(-180deg)"></div>
<div class="line" style="width: 20px; left: 160px; bottom: 623px; transform: rotate(90deg)"></div>
<div class="line" style="width: 25px; left: 128px; bottom: 625px; transform: rotate(90deg)"></div>
<div class="line" style="width: 75px; left: 131px; bottom: 557px; transform: rotate(90deg)"></div>
<div class="line" style="width: 25px; left: 12px; bottom: 525px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 25px; left: 27px; bottom: 525px; transform: rotate(90deg)"></div>
<!-- 策略2 -->
<div class="fuhe" style="width: 170px; left: 297px; bottom: 300px; transform: rotate(90deg)"></div>
<div class="mingqu" style="width: 140px; left: 163px; bottom: 250px"></div>
<div class="mingqu" style="width: 165px; left: 130px; bottom: 345px"></div>
<div class="line" style="width: 73px; left: 43px; bottom: 350px"></div>
<div class="line" style="width: 35px; left: 87px; bottom: 332px; transform: rotate(90deg)"></div>
<div class="line" style="width: 135px; left: 10px; bottom: 256px"></div>
<div class="line" style="width: 45px; left: 82px; bottom: 276px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 45px; left: 114px; bottom: 280px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 50px; left: 138px; bottom: 301px"></div>
<div class="line" style="width: 53px; left: 140px; bottom: 387px; transform: rotate(-180deg)"></div>
<div class="line" style="width: 20px; left: 160px; bottom: 370px; transform: rotate(90deg)"></div>
<div class="line" style="width: 25px; left: 128px; bottom: 370px; transform: rotate(90deg)"></div>
<div class="line" style="width: 75px; left: 131px; bottom: 304px; transform: rotate(90deg)"></div>
<div class="line" style="width: 25px; left: 217px; bottom: 325px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 25px; left: 12px; bottom: 270px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 25px; left: 27px; bottom: 270px; transform: rotate(90deg)"></div>
<!-- 策略3 -->
<div class="fuhe" style="width: 170px; left: 297px; bottom: 70px; transform: rotate(90deg)"></div>
<div class="mingqu" style="width: 140px; left: 163px; bottom: 22px"></div>
<div class="mingqu" style="width: 165px; left: 130px; bottom: 116px"></div>
<div class="line" style="width: 73px; left: 40px; bottom: 122px"></div>
<div class="line" style="width: 35px; left: 165px; bottom: 95px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 135px; left: 14px; bottom: 27px"></div>
<div class="line" style="width: 45px; left: 115px; bottom: 50px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 45px; left: 140px; bottom: 73px"></div>
<div class="line" style="width: 30px; left: 225px; bottom: 95px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 43px; left: 83px; bottom: 48px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 50px; left: 140px; bottom: 159px; transform: rotate(-180deg)"></div>
<div class="line" style="width: 25px; left: 156px; bottom: 142px; transform: rotate(90deg)"></div>
<div class="line" style="width: 25px; left: 128px; bottom: 142px; transform: rotate(90deg)"></div>
<div class="line" style="width: 35px; left: 87px; bottom: 100px; transform: rotate(90deg)"></div>
<div class="line" style="width: 30px; left: 205px; bottom: 99px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 25px; left: 12px; bottom: 45px; transform: rotate(-90deg)"></div>
<div class="line" style="width: 25px; left: 27px; bottom: 45px; transform: rotate(90deg)"></div>
</div>
</div>
</div>
</template>
<script>
import { toRefs, onMounted, reactive, onBeforeUnmount } from 'vue';
import bus from '@/utils/util';
import Popup from './Popup.vue';
export default {
name: 'sheHuiNetTwo',
components: { Popup },
setup() {
const allData = reactive({
swIndex: 1,
checkedLegend: [
{ isCheck: false, layername: 'rainAndwu' },
{ isCheck: false, layername: 'layer1' },
{ isCheck: false, layername: 'layer3' },
{ isCheck: false, layername: 'layer4' },
{ isCheck: false, layername: 'layer5' },
{ isCheck: false, layername: 'layer6' },
{ isCheck: false, layername: 'layer8' },
{ isCheck: false, layername: 'layer9' },
{ isCheck: false, layername: 'layer11' },
{ isCheck: false, layername: 'layer12' },
],
});
// 初始化图例数据
async function initLayer() {
for (let i = 0; i < 14; i++) {
mapbox._map.on('click', 'layer' + i + '_layer', function (e) {
e.preventDefault();
const features = mapbox._map.queryRenderedFeatures(e.point);
// 判断是否点击当前点位
features.map((item) => {
if (item.layer.id == 'layer' + i + '_layer') {
// 拼接显示详情内容
bus.emit('pointToDetail', item);
}
});
});
mapbox.changeTypeOfmouse('layer' + i + '_layer'); //切换鼠标样式
}
bus.on('pointToDetail', (param) => {
mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties));
});
}
async function checkSw(index) {
allData.swIndex = index;
}
onMounted(() => {
initLayer();
//设置初始化视角
mapbox._map.setPitch(60).setBearing(0);
setTimeout(() => {
mapbox.flyto([114.265596, 30.620028], 12.5, 0.8);
}, 300);
// 设置默认选中的图例图层
setTimeout(() => {
bus.emit('showDefaultLegend', allData.checkedLegend);
});
});
onBeforeUnmount(() => {
//清空图例默认开启,true 代表关闭图层
bus.emit('showDefaultLegend', [
{ isCheck: true, layername: 'rainAndwu' },
{ isCheck: true, layername: 'layer1' },
{ isCheck: true, layername: 'layer3' },
{ isCheck: true, layername: 'layer4' },
{ isCheck: true, layername: 'layer5' },
{ isCheck: true, layername: 'layer6' },
{ isCheck: true, layername: 'layer8' },
{ isCheck: true, layername: 'layer9' },
{ isCheck: true, layername: 'layer11' },
{ isCheck: true, layername: 'layer12' },
]);
//清除选中图层
!!window.timertuokuan && clearInterval(window.timertuokuan);
!!window.timerspread && clearInterval(window.timerspread);
!!window.timerbushui && clearInterval(window.timerbushui);
//清除弹窗
bus.off('pointToDetail');
if (!!mapbox._popup) {
mapbox._popup.remove();
}
});
return {
...toRefs(allData),
initLayer,
checkSw,
};
},
};
</script>
<style lang="less">
.sheHuiNetTwo {
position: relative;
.navBtn {
position: absolute;
right: 0px;
top: -45px;
width: 160px;
height: 30px;
display: flex;
p {
height: 25px;
padding: 0 10px;
line-height: 27px;
text-align: center;
color: #d4f7ff;
cursor: pointer;
}
.active {
background: #16a2aa;
border-radius: 10px;
color: #000;
transition: 200ms;
}
}
.content {
height: 735px;
overflow: auto;
margin: 20px 0px 50px 0px;
padding-left: 10px;
.nowJch {
width: 407px;
height: 1059px;
background: url('@/assets/newImgs/nowJch.png') no-repeat center;
background-size: 100% 100%;
margin-bottom: 60px;
position: relative;
.anqu {
position: absolute;
height: 14px;
background: url('@/assets/newImgs/ahArrow.png') no-repeat center;
background-size: 100% 100%;
}
.mingqu {
position: absolute;
height: 14px;
background: url('@/assets/newImgs/mqArrow.png') no-repeat center;
background-size: 100% 100%;
}
.fuhe {
position: absolute;
height: 28px;
background: url('@/assets/newImgs/ahArrow.png') no-repeat center;
background-size: 100% 100%;
}
.line {
position: absolute;
height: 5px;
background: url('@/assets/newImgs/lineArrow.png') no-repeat center;
}
}
.nowGc {
width: 407px;
height: 1059px;
background: url('@/assets/newImgs/nowHxh.png') no-repeat center;
background-size: 100% 100%;
margin-bottom: 60px;
position: relative;
.anqu {
position: absolute;
height: 14px;
background: url('@/assets/newImgs/ahArrow.png') no-repeat center;
background-size: 100% 100%;
}
.mingqu {
position: absolute;
height: 14px;
background: url('@/assets/newImgs/mqArrow.png') no-repeat center;
background-size: 100% 100%;
}
.fuhe {
position: absolute;
height: 33px;
background: url('@/assets/newImgs/ahArrow.png') no-repeat center;
background-size: 100% 100%;
}
.line {
position: absolute;
height: 5px;
background: url('@/assets/newImgs/lineArrow.png') no-repeat center;
}
}
}
}
</style>
