<template>
<!-- 公共图例 -->
<div class="lengendPage">
<n-select
class="selectedPoi"
v-model:value="selectedPoi"
:options="selectedPois"
filterable
clearable
placeholder="站点搜索"
@update:value="getPOIinfo"
/>
<!-- 展开收起 -->
<div :class="['zksqImg', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'goLeft']" title="展开收起" @click="changeZhan"></div>
<!-- 图例框 -->
<div :class="['publicLegend', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
<!-- 流域选择 -->
<div>
<div class="titleB">流域选择</div>
<div class="part" v-for="item2 in legendLy" @click="changeLiuyu(item2)" :key="item2.layername">
<img :src="getLayerImg(item2.url)" class="img" />
<p class="title">{{ item2.name }}</p>
<n-icon size="22" :class="item2.isCheck ? 'active' : ''">
<Checkmark />
</n-icon>
</div>
</div>
<!-- 非流域选择 -->
<div v-for="item in legendList" :key="item.layername">
<div class="titleB">{{ item.title }}</div>
<div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
<img :src="getLayerImg(item2.url)" class="img" />
<p class="title">{{ item2.name }}</p>
<n-icon size="22" :class="item2.isCheck ? 'active' : ''">
<Checkmark />
</n-icon>
</div>
</div>
</div>
<!-- 水质详情弹窗页面 -->
<n-modal
v-model:show="showModalSzjcz"
:show-icon="false"
:mask-closable="false"
preset="card"
title="水质监测站详情"
style="width: 950px"
>
<ShuizhiModal v-if="showModalSzjcz" :stationCode="stationCode" />
</n-modal>
<!-- 水位详情弹窗页面 -->
<n-modal v-model:show="showModalSwjcz" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 950px">
<ShuiweiModal v-show="showModalSwjcz" :YWstationCode="YWstationCode" />
</n-modal>
</div>
</template>
<script>
import { ref, toRefs, onMounted, reactive, onBeforeUnmount, nextTick } from 'vue';
import { getLayerImg } from '@/utils/util';
import bus from '@/utils/util';
import { legendData } from './legendData.js';
import { Checkmark } from '@vicons/ionicons5';
import {
lyInfoStationListall,
sheHuiStationListall,
sheHuiLineListall,
StationPointInfo,
getAllSiteEquipmentProjectPoint,
} from '@/services';
import Popup from './Popup.vue';
import ShuizhiModal from './modal/shuizhiModal.vue'; //水质监测弹窗
import ShuiweiModal from './modal/shuiweiModal.vue'; //水位监测弹窗
import Area from '@/assets/json/政区.json';
import AreaLine from '@/assets/json/政区line.json';
import Areaname from '@/assets/json/政区name.json';
import LiuyuArea from '@/assets/json/LiuyuArea.json'; //合改
import LiuyuAreaLine from '@/assets/json/LiuyuArealine.json';
import Liuyuname from '@/assets/json/Liuyuname.json';
import rainAreaone from '@/assets/json/雨水一级.json';
import rainAreaoneLine from '@/assets/json/雨水一级line.json';
import rainAreanameone from '@/assets/json/雨水一级name.json';
import rainAreatwo from '@/assets/json/雨水二级.json';
import rainAreatwoLine from '@/assets/json/雨水二级line.json';
import rainAreanametwo from '@/assets/json/雨水二级name.json';
import wsAreaone from '@/assets/json/污水一级.json';
import wsAreaoneLine from '@/assets/json/污水一级line.json';
import wsAreanameone from '@/assets/json/污水一级name.json';
import wsAreatwo from '@/assets/json/污水二级.json';
import wsAreatwoLine from '@/assets/json/污水二级line.json';
import wsAreanametwo from '@/assets/json/污水二级name.json';
import anquJSON from '@/assets/json/暗涵.json';
import ahNameJSON from '@/assets/json/暗涵name.json';
import mingqupolygon from '@/assets/json/明渠polygon.json';
import mqNameJSON from '@/assets/json/明渠name.json';
import xhjson from '@/assets/json/箱涵.json';
import xhNameJSON from '@/assets/json/箱涵name.json';
import bspoint from '@/assets/json/补水点.json';
import fensanIcon from '@/assets/newImgs/layerIcon/分散设备.png';
import pailaoIcon from '@/assets/newImgs/layerIcon/排涝泵.png';
import wscIcon from '@/assets/newImgs/layerIcon/污水厂.png';
import wushuiIcon from '@/assets/newImgs/layerIcon/污水泵.png';
import zhamenIcon from '@/assets/newImgs/layerIcon/闸门.png';
import tiaoxuIcon from '@/assets/newImgs/layerIcon/调蓄池.png';
import yeweiIcon from '@/assets/newImgs/layerIcon/液位计.png';
import liuliangIcon from '@/assets/newImgs/layerIcon/流量计.png';
import shuizhiIcon from '@/assets/newImgs/layerIcon/水质站.png';
import CSOIcon from '@/assets/newImgs/layerIcon/cso.png';
import bushui from '@/assets/newImgs/layerIcon/补水工程s.png';
import yuliangImg from '@/assets/newImgs/layerIcon/雨量计.png';
import { time } from 'echarts';
import WKT from 'terraformer-wkt-parser';
export default {
name: 'lengendPage',
components: {
Checkmark,
Popup,
ShuizhiModal,
ShuiweiModal,
},
setup() {
const allData = reactive({
showModalSzjcz: false,
showModalSwjcz: false,
stationCode: '',
YWstationCode: '',
ifExpand: true,
qingyu: null,
bushui: null,
tuokuan: null,
qingyuname: null,
bushuiname: null,
tuokuaname: null,
selectedPoi: null,
selectedPois: [],
POIinfo: {},
legendLy: [
{
isCheck: false,
name: '全部流域', //切换视角
layername: 'allArea',
url: 'bushuixian.png',
type: 'view',
},
{
isCheck: false,
name: '黄孝河流域', //切换视角
layername: 'huangxiaoArea',
url: 'bushuixian.png',
type: 'view',
},
{
isCheck: false,
name: '机场河流域', //切换视角
layername: 'jichangArea',
url: 'bushuixian.png',
type: 'view',
},
],
legendList: legendData,
});
// 初始化默认选中的图层判断显示
const getDefaultLayer = () => {
bus.on('showDefaultLegend', (data) => {
for (let i = 0; i < data.length; i++) {
if (data[i].isCheck == false) {
// 选中
allData.legendList.map((item) => {
item.children.map((item2) => {
if (data[i].layername == item2.layername) {
item2.isCheck = true;
changeLegend(data[i]);
}
});
});
} else {
// 取消选中
allData.legendList.map((item) => {
item.children.map((item2) => {
if (data[i].layername == item2.layername) {
item2.isCheck = false;
changeLegend(data[i]);
}
});
});
}
// }
}
});
};
// 流域选择点击
const changeLiuyu = (params) => {
allData.legendLy.map((item) => {
item.isCheck = false;
});
params.isCheck = true;
if (params.layername == 'allArea') {
toAll();
} else if (params.layername == 'huangxiaoArea') {
toHuangxiao();
} else if (params.layername == 'jichangArea') {
toJichang();
}
};
//定位全局
function toAll() {
mapbox._map.setPitch(60).setBearing(0);
setTimeout(() => {
mapbox.flyto([114.275596, 30.610028], 13.5, 0.8);
}, 300);
}
//定位黄孝河
function toHuangxiao() {
mapbox._map.setPitch(60).setBearing(45);
setTimeout(() => {
mapbox.flyto([114.302596, 30.645028], 14, 0.8);
}, 300);
}
//定位机场河
function toJichang() {
mapbox._map.setPitch(55).setBearing(300);
setTimeout(() => {
mapbox.flyto([114.255596, 30.64028], 14, 0.8);
}, 300);
}
//液位、流量
const getMapJSON = async () => {
let params = {
stationType: 'all',
};
let res = await lyInfoStationListall(params);
if (res && res.code == 200) {
let arry15 = res.data.filter((item) => item.stationType == '流量站');
let arry14 = res.data.filter((item) => item.stationType == '水位站');
let arry16 = res.data.filter((item) => item.stationType == '水质站(地表水)');
let liuliangjson = mapbox.getgeojson(arry15);
mapbox.loadPointsLayer(liuliangIcon, 'layer15', liuliangjson, 'stName', false); // 加载流量监测站点位
let yeweijson = mapbox.getgeojson(arry14);
mapbox.loadPointsLayer(yeweiIcon, 'layer14', yeweijson, 'stName', false); // 加载液位监测站点位
let shuizhijson = mapbox.getgeojson(arry16);
mapbox.loadPointsLayer(shuizhiIcon, 'layer16', shuizhijson, 'stName', false); // 加载水质监测站点位
}
let sataion = await sheHuiStationListall();
if (sataion && sataion.code == 0) {
let arry5 = sataion.data.filter((item) => item.stationClass == '污水泵站' && item.projectClass == '已建工程');
let arry3 = sataion.data.filter((item) => item.stationClass == '闸门' && item.projectClass != '第二阶段新建');
let arry8 = sataion.data.filter((item) => item.stationClass == '污水处理厂' && item.projectClass == '已建工程');
let arry9 = sataion.data.filter((item) => item.stationClass == '污水处理厂' && item.projectClass == '第二阶段新建');
let arry0 = sataion.data.filter((item) => item.stationClass == '排涝泵站' && item.projectClass == '已建工程');
let arry10 = sataion.data.filter((item) => item.stationClass == '分散处理设施' && item.projectClass == '第一阶段新建');
let arry1 = sataion.data.filter((item) => item.stationClass == '排涝泵站' && item.projectClass == '第二阶段新建');
let arry4 = sataion.data.filter((item) => item.stationClass == '闸门' && item.projectClass == '第二阶段新建');
let arry6 = sataion.data.filter((item) => item.stationClass == '污水泵站' && item.projectClass == '第二阶段新建');
let arry11 = sataion.data.filter((item) => item.stationClass == '调蓄池' && item.projectClass == '第二阶段新建');
let arry7 = sataion.data.filter((item) => item.stationClass == '调蓄池' && item.projectClass == '第三阶段新建');
let arry2 = sataion.data.filter((item) => item.stationClass == '排涝泵站' && item.projectClass == '第三阶段新建');
let arry12 = sataion.data.filter((item) => item.stationClass == 'CSO强化处理设施' && item.projectClass == '第二阶段新建');
let arry13 = sataion.data.filter((item) => item.stationClass == 'CSO强化处理设施' && item.projectClass == '第三阶段新建');
let pailao1 = mapbox.getWKTtoGeojson(arry0);
mapbox.loadPointsLayer(pailaoIcon, 'layer0', pailao1, 'name', false); //排涝泵站一
let wushuibeng1 = mapbox.getWKTtoGeojson(arry5);
mapbox.loadPointsLayer(wushuiIcon, 'layer5', wushuibeng1, 'name', false); //污水泵站一
let fensan = mapbox.getWKTtoGeojson(arry10);
mapbox.loadPointsLayer(fensanIcon, 'layer10', fensan, 'name', false); //分散设施
let zhamen1 = mapbox.getWKTtoGeojson(arry3);
mapbox.loadPointsLayer(zhamenIcon, 'layer3', zhamen1, 'name', false); //闸门一
let pailao2 = mapbox.getWKTtoGeojson(arry1);
mapbox.loadPointsLayer(pailaoIcon, 'layer1', pailao2, 'name', false); //排涝泵站二
let zhamen2 = mapbox.getWKTtoGeojson(arry4);
mapbox.loadPointsLayer(zhamenIcon, 'layer4', zhamen2, 'name', false); //闸门二
let wushuibeng2 = mapbox.getWKTtoGeojson(arry6);
mapbox.loadPointsLayer(wushuiIcon, 'layer6', wushuibeng2, 'name', false); //污水泵二
let tiaoxuchi = mapbox.getWKTtoGeojson(arry11);
mapbox.loadPointsLayer(tiaoxuIcon, 'layer11', tiaoxuchi, 'name', false); //调蓄池
let tiaoxuchi3 = mapbox.getWKTtoGeojson(arry7);
mapbox.loadPointsLayer(tiaoxuIcon, 'layer7', tiaoxuchi3, 'name', false); //调蓄池三
let pailao3 = mapbox.getWKTtoGeojson(arry2);
mapbox.loadPointsLayer(pailaoIcon, 'layer2', pailao3, 'name', false); //排涝泵站三
let wushuichang = mapbox.getWKTtoGeojson(arry8);
mapbox.loadPointsLayer(wscIcon, 'layer8', wushuichang, 'name', false); //污水厂
let wushuichang2 = mapbox.getWKTtoGeojson(arry9);
mapbox.loadPointsLayer(wscIcon, 'layer9', wushuichang2, 'name', false); //污水厂二
let CSO = mapbox.getWKTtoGeojson(arry12);
mapbox.loadPointsLayer(CSOIcon, 'layer12', CSO, 'name', false); //CSO
let CSO3 = mapbox.getWKTtoGeojson(arry13);
mapbox.loadPointsLayer(CSOIcon, 'layer13', CSO3, 'name', false); //CSO三
}
let resline = await sheHuiLineListall();
if (resline && resline.code == 0) {
let arryqy = resline.data.filter((item) => item.stationClass == '清淤工程' && item.projectClass == '第一阶段新建');
let arryqyname_1 = resline.data.filter((item) => item.stationClass == '清淤工程' && item.projectClass == '第三阶段新建');
let arryqyname_2 = resline.data.filter((item) => item.stationClass == '修复工程' && item.projectClass == '第三阶段新建');
let arrybs = resline.data.filter((item) => item.stationClass == '补水工程' && item.projectClass == '第一阶段新建');
let arrytkname = resline.data.filter((item) => item.stationClass == '扩宽工程' && item.projectClass == '第三阶段新建');
let arryqyname = resline.data.filter((item) => item.stationClass == '清淤工程' && item.projectClass == '' && item.dataType == 1);
let arryqy_1 = resline.data.filter((item) => item.stationClass == '清淤工程' && item.projectClass == '' && item.dataType == 2);
let arrybsname = resline.data.filter((item) => item.stationClass == '补水工程' && item.projectClass == '' && item.dataType == 1);
let arrytk = resline.data.filter((item) => item.stationClass == '扩宽工程' && item.projectClass == '' && item.dataType == 2);
let arryqy_2 = resline.data.filter((item) => item.stationClass == '修复工程' && item.projectClass == '' && item.dataType == 2);
allData.qingyu = mapbox.getWKTtoGeojson(arryqy.concat(arryqy_1).concat(arryqy_2));
allData.bushui = mapbox.getWKTtoGeojson(arrybs);
allData.qingyuname = mapbox.getWKTtoGeojson(arryqyname.concat(arryqyname_1).concat(arryqyname_2));
allData.bushuiname = mapbox.getWKTtoGeojson(arrybsname);
allData.tuokuan = mapbox.getWKTtoGeojson(arrytk);
allData.tuokuaname = mapbox.getWKTtoGeojson(arrytkname);
}
mapbox.loadWmsLayer(
'layer17',
'http://139.196.225.242:7002/geoserver/hj2work/wms?service=WMS&version=1.1.0&request=GetMap&layers=hj2work:pipe_main_all&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE',
false
);
//设置字体颜色
setTimeout(() => {
mapbox._map.setPaintProperty('layer0_layer', 'text-color', 'rgba(193, 0, 100,1)');
mapbox._map.setPaintProperty('layer1_layer', 'text-color', 'rgba(193, 0, 100,1)');
mapbox._map.setPaintProperty('layer2_layer', 'text-color', 'rgba(193, 0, 100,1)');
mapbox._map.setPaintProperty('layer3_layer', 'text-color', 'rgba(0, 245, 114,1)');
mapbox._map.setPaintProperty('layer4_layer', 'text-color', 'rgba(0, 245, 114,1)');
mapbox._map.setPaintProperty('layer5_layer', 'text-color', 'rgba(198, 108, 12,1)');
mapbox._map.setPaintProperty('layer6_layer', 'text-color', 'rgba(198, 108, 12,1)');
mapbox._map.setPaintProperty('layer7_layer', 'text-color', 'rgba(0, 196, 195,1)');
mapbox._map.setPaintProperty('layer8_layer', 'text-color', 'rgba(196, 107, 12,1)');
mapbox._map.setPaintProperty('layer9_layer', 'text-color', 'rgba(196, 107, 12,1)');
mapbox._map.setPaintProperty('layer10_layer', 'text-color', 'rgba(0, 226, 105,1)');
mapbox._map.setPaintProperty('layer11_layer', 'text-color', 'rgba(0, 196, 195,1)');
mapbox._map.setPaintProperty('layer12_layer', 'text-color', 'rgba(147, 50, 214,1)');
mapbox._map.setPaintProperty('layer13_layer', 'text-color', 'rgba(147, 50, 214,1)');
mapbox._map.setPaintProperty('layer14_layer', 'text-color', 'rgba(53, 206, 0,1)');
mapbox._map.setPaintProperty('layer15_layer', 'text-color', 'rgba(215, 142, 0,1)');
mapbox._map.setPaintProperty('layer16_layer', 'text-color', 'rgba(116, 116, 116,1)');
}, 1000);
//将图层移动至白膜上方
setTimeout(() => {
for (let i = 0; i < 18; i++) {
if (mapbox._map.getLayer('yuliangJC_layer')) {
mapbox._map.moveLayer('layer' + i + '_layer', 'yuliangJC_layer');
}
}
}, 2500);
//添加弹窗
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));
});
//添加卡片
mapbox._map.on('click', 'layer16_layer', (e) => {
e.preventDefault();
const features = mapbox._map.queryRenderedFeatures(e.point);
let layerId = features[0].layer.id;
allData.stationCode = features[0].properties.stCode;
if (!!!layerId) return;
allData.showModalSzjcz = true;
});
//添加鼠标样式
mapbox.changeTypeOfmouse('layer14_layer');
for (let j = 14; j < 16; j++) {
mapbox._map.on('click', 'layer' + j + '_layer', (e) => {
e.preventDefault();
const features = mapbox._map.queryRenderedFeatures(e.point);
let layerId = features[0].layer.id;
allData.YWstationCode = features[0].properties.stCode;
if (!!!layerId) return;
allData.showModalSwjcz = true;
});
//添加鼠标样式
mapbox.changeTypeOfmouse('layer' + j + '_layer');
}
};
// 图例点击
const changeLegend = (item) => {
item.isCheck = !item.isCheck;
/**
* isCheck:true为选中，false未选中
* layer:图层名称
* url：icon的图片地址（/src/assets/newImgs/layerIcon/）
*/
if (item.isCheck) {
// 显示图层
if (item.layername == 'zhengqu') {
addArealayer();
}
if (item.layername == 'rainAndwu') {
addLiuyuArealayer();
}
if (item.layername == 'rainArea') {
addRainArea();
}
if (item.layername == 'wsArea') {
addSewageArea();
}
if (item.layername == 'anhan') {
addanhanlayer();
}
if (item.layername == 'mingqu') {
addmingquLayer();
}
if (item.layername == 'xianghan') {
addanhxianglayer();
}
if (item.layername == 'bushui') {
addBushuiLine();
}
if (item.layername == 'qingyu') {
addQingyuLine();
}
for (let i = 0; i < 18; i++) {
if (item.layername == 'layer' + i) {
if (mapbox._map.getLayer(item.layername + '_layer')) {
mapbox._map.setLayoutProperty(item.layername + '_layer', 'visibility', 'visible');
//mapbox._map.moveLayer(item.layername + "_layer", "bulding_layer")
}
}
}
if (item.layername == 'hedaotuokuan') {
addTuokuanLine();
}
if (item.layername == 'wushuiroad') {
addSewageRoad();
}
if (item.layername == 'bushuipoint') {
addBushuiPoint();
}
} else {
// 隐藏图层
if (item.layername == 'zhengqu') {
removeArealayer();
}
if (item.layername == 'rainAndwu') {
removeLiuyuArealayer();
}
if (item.layername == 'rainArea') {
removeRainArea();
}
if (item.layername == 'wsArea') {
removeSewageArea();
}
if (item.layername == 'anhan') {
removeanhanlayer();
}
if (item.layername == 'mingqu') {
removemingquLayer();
}
if (item.layername == 'xianghan') {
removexianghanlayer();
}
if (item.layername == 'bushui') {
removeBushuiLine();
}
if (item.layername == 'qingyu') {
removeQingyuLine();
}
for (let i = 0; i < 18; i++) {
if (item.layername == 'layer' + i) {
if (mapbox._map.getLayer(item.layername + '_layer')) {
mapbox._map.setLayoutProperty(item.layername + '_layer', 'visibility', 'none');
if (!!mapbox._popup) {
mapbox._popup.remove();
}
}
}
}
if (item.layername == 'hedaotuokuan') {
removeTuokuanLine();
}
if (item.layername == 'wushuiroad') {
removeSewageRoad();
}
if (item.layername == 'bushuipoint') {
removeBushuiPoint();
}
}
};
//添加政区图
function addArealayer() {
mapbox.addGeolayer('Area', Area, true);
mapbox.addPolylineLayer('Arealine', AreaLine, true);
mapbox._map.setPaintProperty('Arealine_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
mapbox._map.moveLayer('Arealine_layer', 'Area_layer');
mapbox._map.moveLayer('Area_layer', 'bulding_layer');
mapbox.addmapchart('Areaname', Areaname, true);
mapbox._map.setPaintProperty('Areaname_layer', 'text-color', 'rgba(0, 225, 104,1)');
}
//移除政区图
function removeArealayer() {
if (mapbox._map.getLayer('Area_layer') && mapbox._map.getLayer('Arealine_layer') && mapbox._map.getLayer('Areaname_layer')) {
mapbox._map.removeLayer('Area_layer').removeSource('Area_source');
mapbox._map.removeLayer('Arealine_layer').removeSource('Arealine_source');
mapbox._map.removeLayer('Areaname_layer').removeSource('Areaname_source');
}
}
//添加雨污分流改造
function addLiuyuArealayer() {
mapbox.addGeolayer('LiuyuArea', LiuyuArea, true);
mapbox.addPolylineLayer('LiuyuArealine', LiuyuAreaLine, true);
mapbox._map.setPaintProperty('LiuyuArealine_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
mapbox._map.moveLayer('LiuyuArealine_layer', 'LiuyuArea_layer');
mapbox._map.moveLayer('LiuyuArea_layer', 'bulding_layer');
mapbox.addmapchart('LiuyuAreaname', Liuyuname, true);
mapbox._map.setPaintProperty('LiuyuAreaname_layer', 'text-color', 'rgba(185, 106, 17,1)');
}
//移除雨污分流改造
function removeLiuyuArealayer() {
if (
mapbox._map.getLayer('LiuyuArea_layer') &&
mapbox._map.getLayer('LiuyuArealine_layer') &&
mapbox._map.getLayer('LiuyuAreaname_layer')
) {
mapbox._map.removeLayer('LiuyuArea_layer').removeSource('LiuyuArea_source');
mapbox._map.removeLayer('LiuyuArealine_layer').removeSource('LiuyuArealine_source');
mapbox._map.removeLayer('LiuyuAreaname_layer').removeSource('LiuyuAreaname_source');
}
}
//添加雨水分区
function addRainArea() {
//一级
mapbox.addGeolayer('rainArea1', rainAreaone, true);
mapbox.addPolylineLayer('rainArea1line', rainAreaoneLine, true);
mapbox._map.setPaintProperty('rainArea1line_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
mapbox._map.moveLayer('rainArea1line_layer', 'rainArea1_layer');
mapbox.addmapchart('rainAreaname1', rainAreanameone, true);
mapbox._map.moveLayer('rainArea1_layer', 'bulding_layer');
mapbox._map.setLayerZoomRange('rainArea1_layer', 2, 13);
mapbox._map.setLayerZoomRange('rainArea1line_layer', 2, 13);
mapbox._map.setLayerZoomRange('rainAreaname1_layer', 2, 13);
mapbox._map.setPaintProperty('rainAreaname1_layer', 'text-color', 'rgba(188, 0, 98,1)');
//二级
mapbox.addGeolayer('rainArea2', rainAreatwo, true);
mapbox.addPolylineLayer('rainArea2line', rainAreatwoLine, true);
mapbox._map.setPaintProperty('rainArea2line_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
mapbox._map.moveLayer('rainArea2line_layer', 'rainArea2_layer');
mapbox.addmapchart('rainAreaname2', rainAreanametwo, true);
mapbox._map.moveLayer('rainArea2_layer', 'bulding_layer');
mapbox._map.setLayerZoomRange('rainArea2_layer', 13, 24);
mapbox._map.setLayerZoomRange('rainArea2line_layer', 13, 24);
mapbox._map.setLayerZoomRange('rainAreaname2_layer', 13, 24);
mapbox._map.setPaintProperty('rainAreaname2_layer', 'text-color', 'rgba(188, 0, 98,1)');
}
//移除雨水分区
function removeRainArea() {
if (
mapbox._map.getLayer('rainArea1_layer') &&
mapbox._map.getLayer('rainArea1line_layer') &&
mapbox._map.getLayer('rainAreaname1_layer') &&
mapbox._map.getLayer('rainArea2_layer') &&
mapbox._map.getLayer('rainAreaname2_layer') &&
mapbox._map.getLayer('rainArea2line_layer')
) {
mapbox._map.removeLayer('rainArea1_layer').removeSource('rainArea1_source');
mapbox._map.removeLayer('rainArea1line_layer').removeSource('rainArea1line_source');
mapbox._map.removeLayer('rainAreaname1_layer').removeSource('rainAreaname1_source');
mapbox._map.removeLayer('rainArea2_layer').removeSource('rainArea2_source');
mapbox._map.removeLayer('rainAreaname2_layer').removeSource('rainAreaname2_source');
mapbox._map.removeLayer('rainArea2line_layer').removeSource('rainArea2line_source');
}
}
//添加污水分区
function addSewageArea() {
//一级
mapbox.addGeolayer('wsArea1', wsAreaone, true);
mapbox.addPolylineLayer('wsArea1line', wsAreaoneLine, true);
mapbox._map.setPaintProperty('wsArea1line_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
mapbox._map.moveLayer('wsArea1line_layer', 'wsArea1_layer');
mapbox.addmapchart('wsAreaname1', wsAreanameone, true);
mapbox._map.moveLayer('wsArea1_layer', 'bulding_layer');
mapbox._map.setLayerZoomRange('wsArea1_layer', 2, 13);
mapbox._map.setLayerZoomRange('wsArea1line_layer', 2, 13);
mapbox._map.setLayerZoomRange('wsAreaname1_layer', 2, 13);
mapbox._map.setPaintProperty('wsAreaname1_layer', 'text-color', 'rgba(196, 107, 12,1)');
//二级
mapbox.addGeolayer('wsArea2', wsAreatwo, true);
mapbox.addPolylineLayer('wsArea2line', wsAreatwoLine, true);
mapbox._map.setPaintProperty('wsArea2line_layer', 'line-color', 'rgba(38, 239, 249,0.32)');
mapbox._map.moveLayer('wsArea2line_layer', 'wsArea2_layer');
mapbox.addmapchart('wsAreaname2', wsAreanametwo, true);
mapbox._map.moveLayer('wsArea2_layer', 'bulding_layer');
mapbox._map.setLayerZoomRange('wsArea2_layer', 13, 24);
mapbox._map.setLayerZoomRange('wsArea2line_layer', 13, 24);
mapbox._map.setLayerZoomRange('wsAreaname2_layer', 13, 24);
mapbox._map.setPaintProperty('wsAreaname2_layer', 'text-color', 'rgba(196, 107, 12,1)');
}
//移除污水分区
function removeSewageArea() {
if (
mapbox._map.getLayer('wsArea1_layer') &&
mapbox._map.getLayer('wsArea1line_layer') &&
mapbox._map.getLayer('wsAreaname1_layer') &&
mapbox._map.getLayer('wsArea2_layer') &&
mapbox._map.getLayer('wsAreaname2_layer') &&
mapbox._map.getLayer('wsArea2line_layer')
) {
mapbox._map.removeLayer('wsArea1_layer').removeSource('wsArea1_source');
mapbox._map.removeLayer('wsArea1line_layer').removeSource('wsArea1line_source');
mapbox._map.removeLayer('wsAreaname1_layer').removeSource('wsAreaname1_source');
mapbox._map.removeLayer('wsArea2_layer').removeSource('wsArea2_source');
mapbox._map.removeLayer('wsArea2line_layer').removeSource('wsArea2line_source');
mapbox._map.removeLayer('wsAreaname2_layer').removeSource('wsAreaname2_source');
}
}
//添加明渠
function addmingquLayer() {
//明渠水流动效
mapbox.addwaterflow('http://server1.wh-nf.cn:6083/water', 'mingqupolygon', mingqupolygon, true);
mapbox._map.moveLayer('mingqupolygon_layer', 'bulding_layer');
//渲染明渠文字
mapbox.addmapchart('mqName', mqNameJSON, true);
mapbox._map.setPaintProperty('mqName_layer', 'text-color', 'rgba(24, 163, 149,1)');
}
//清除明渠
function removemingquLayer() {
clearInterval(window.timerwater);
if (mapbox._map.getLayer('mingqupolygon_layer') && mapbox._map.getLayer('mqName_layer')) {
mapbox._map.removeLayer('mingqupolygon_layer').removeSource('mingqupolygon_source');
mapbox._map.removeLayer('mqName_layer').removeSource('mqName_source');
}
}
//添加暗涵
function addanhanlayer() {
//暗涵流动光效
mapbox.addbrightenanhan('brightenangqu', anquJSON, true);
mapbox._map.moveLayer('brightenangqu_layer', 'bulding_layer');
for (let i = 0; i < 10; i++) {
mapbox._map.moveLayer('brightenangqu' + i, 'bulding_layer');
}
mapbox._map.setPaintProperty('brightenangqu_layer', 'line-color', 'rgba(134, 46, 195,1)');
//渲染暗涵文字
mapbox.addmapchart('ahName', ahNameJSON, true);
mapbox._map.setPaintProperty('ahName_layer', 'text-color', 'rgba(134,46,195,1)');
}
//清除暗涵
function removeanhanlayer() {
clearInterval(window.timeranhan);
if (mapbox._map.getLayer('brightenangqu_layer') && mapbox._map.getLayer('ahName_layer')) {
mapbox._map.removeLayer('brightenangqu_layer');
mapbox._map.removeLayer('ahName_layer').removeSource('ahName_source');
}
for (let i = 0; i < 10; i++) {
if (mapbox._map.getLayer('brightenangqu' + i)) {
mapbox._map.removeLayer('brightenangqu' + i).removeSource('brightenangqu' + i);
}
}
if (mapbox._map.getSource('brightenangqu_source')) {
mapbox._map.removeSource('brightenangqu_source');
}
}
//添加箱涵
function addanhxianglayer() {
//暗涵流动光效
mapbox.addbrightenLine('brightenxianghan', xhjson, true);
mapbox._map.moveLayer('brightenxianghan_layer', 'bulding_layer');
for (let i = 0; i < 10; i++) {
mapbox._map.moveLayer('brightenxianghan' + i, 'bulding_layer');
}
mapbox._map.setPaintProperty('brightenxianghan_layer', 'line-color', 'rgba(30, 196, 201,1)');
//渲染暗涵文字
mapbox.addmapchart('xhName', xhNameJSON, true);
mapbox._map.setPaintProperty('xhName_layer', 'text-color', 'rgba(30, 196, 171,1)');
}
//清除箱涵
function removexianghanlayer() {
clearInterval(window.timerflow);
if (mapbox._map.getLayer('brightenxianghan_layer') && mapbox._map.getLayer('xhName_layer')) {
mapbox._map.removeLayer('brightenxianghan_layer');
mapbox._map.removeLayer('xhName_layer').removeSource('xhName_source');
}
for (let i = 0; i < 10; i++) {
if (mapbox._map.getLayer('brightenxianghan' + i)) {
mapbox._map.removeLayer('brightenxianghan' + i).removeSource('brightenxianghan' + i);
}
}
if (mapbox._map.getSource('brightenxianghan_source')) {
mapbox._map.removeSource('brightenxianghan_source');
}
}
//添加补水路线
function addBushuiLine() {
mapbox.addbrightenbushui('bushui', allData.bushui, true);
mapbox._map.moveLayer('bushui_layer', 'bulding_layer');
for (let i = 0; i < 10; i++) {
mapbox._map.moveLayer('bushui' + i, 'bulding_layer');
}
mapbox._map.setPaintProperty('bushui_layer', 'line-color', 'rgba(0, 225, 104,1)');
//渲染暗涵文字
mapbox.addmapchart('bushuiName', allData.bushuiname, true);
mapbox._map.setPaintProperty('bushuiName_layer', 'text-color', 'rgba(0, 225, 104,1)');
}
//移除补水路线
function removeBushuiLine() {
clearInterval(window.timerbushui);
if (mapbox._map.getLayer('bushui_layer') && mapbox._map.getLayer('bushuiName_layer')) {
mapbox._map.removeLayer('bushui_layer');
mapbox._map.removeLayer('bushuiName_layer').removeSource('bushuiName_source');
}
for (let i = 0; i < 10; i++) {
if (mapbox._map.getLayer('bushui' + i)) {
mapbox._map.removeLayer('bushui' + i).removeSource('bushui' + i);
}
}
if (mapbox._map.getSource('bushui_source')) {
mapbox._map.removeSource('bushui_source');
}
}
//添加补水点
function addBushuiPoint() {
mapbox.loadPointsLayer(bushui, 'bushuipoint', bspoint, '', true);
}
//移除补水点
function removeBushuiPoint() {
if (mapbox._map.getLayer('bushuipoint_layer')) {
mapbox._map.removeLayer('bushuipoint_layer').removeSource('bushuipoint_source');
}
}
//添加清淤路线
function addQingyuLine() {
let colorList = [
'rgba(255, 255, 255,1)',
'rgba(235, 255, 235,0.9)',
'rgba(215,255, 215,0.8)',
'rgba(195, 255, 195,0.7)',
'rgba(175, 255, 175,0.6)',
'rgba(155, 255, 155,0.5)',
'rgba(135, 255, 135,0.4)',
'rgba(115, 255, 115,0.3)',
'rgba(95, 255, 95,0.2)',
'rgba(75, 255, 75,0.1)',
];
mapbox.addAnimateWidthline('qingyuline', allData.qingyu, colorList);
for (let i = 0; i < 10; i++) {
mapbox._map.moveLayer('qingyuline' + i, 'bulding_layer');
}
mapbox.addmapchart('qingyuname', allData.qingyuname, true); //添加清淤name
mapbox._map.setPaintProperty('qingyuname_layer', 'text-color', 'rgba(196, 107, 12,1)');
}
//移除清淤路线
function removeQingyuLine() {
//移除图层
clearInterval(window.timerspread);
for (let z = 0; z < 10; z++) {
if (mapbox._map.getLayer('qingyuline' + z)) {
mapbox._map.removeLayer('qingyuline' + z);
}
}
if (mapbox._map.getSource('qingyuline_source') && mapbox._map.getSource('qingyuname_source')) {
mapbox._map.removeSource('qingyuline_source');
mapbox._map.removeLayer('qingyuname_layer').removeSource('qingyuname_source');
}
}
//添加拓宽路线
function addTuokuanLine() {
let colorList = [
'rgba(255, 255, 255,1)',
'rgba(235, 155, 235,0.9)',
'rgba(215,135, 215,0.8)',
'rgba(195, 115, 195,0.7)',
'rgba(175, 95, 175,0.6)',
'rgba(155, 75, 155,0.5)',
'rgba(135, 55, 135,0.4)',
'rgba(115, 35, 115,0.3)',
'rgba(95, 15, 95,0.2)',
'rgba(75, 55, 75,0.1)',
];
mapbox.addAnimatetuokuanline('tuokuanline', allData.tuokuan, colorList);
for (let i = 0; i < 10; i++) {
mapbox._map.moveLayer('tuokuanline' + i, 'bulding_layer');
}
mapbox.addmapchart('tuokuaname', allData.tuokuaname, true); //添加清淤name
mapbox._map.setPaintProperty('tuokuaname_layer', 'text-color', 'rgba(134, 46, 195,1)');
}
//移除拓宽路线
function removeTuokuanLine() {
//移除图层
clearInterval(window.timertuokuan);
for (let z = 0; z < 10; z++) {
if (mapbox._map.getLayer('tuokuanline' + z)) {
mapbox._map.removeLayer('tuokuanline' + z);
}
}
if (mapbox._map.getSource('tuokuanline_source') && mapbox._map.getSource('tuokuaname_source')) {
mapbox._map.removeSource('tuokuanline_source');
mapbox._map.removeLayer('tuokuaname_layer').removeSource('tuokuaname_source');
}
}
//添加污水收集路由
function addSewageRoad() {
mapbox.addAnimateParacurve(
'jichangEast',
[114.232251952664, 30.6282251989571],
[114.224961046929, 30.6688376133188],
'#1e1e1e',
'#e5e510'
);
mapbox.addAnimateParacurve(
'jichangWeat1',
[114.197439638586, 30.6215452723643],
[114.224961046929, 30.6688376133188],
'#1e1e1e',
'#e5e510'
);
mapbox.addAnimateParacurve(
'jichangWeat2',
[114.222606449822, 30.627295887292],
[114.224961046929, 30.6688376133188],
'#1e1e1e',
'#e5e510'
);
mapbox.addAnimateParacurve(
'jichangWeat3',
[114.229789375448, 30.6597774540696],
[114.224961046929, 30.6688376133188],
'#1e1e1e',
'#e5e510'
); //阶段1
setTimeout(() => {
mapbox.addAnimateParacurve('jichangWeat4', [114.224961046929, 30.6688376133188], [114.229, 30.658], '#1e1e1e', '#d10000'); //阶段2
}, 2000);
mapbox.addAnimateParacurve(
'huangxiao1',
[114.279463029093, 30.6313298840337],
[114.291159649014, 30.6677937697572],
'#1e1e1e',
'#e5e510'
);
mapbox.addAnimateParacurve(
'huangxiao2',
[114.268088655832, 30.6428962001639],
[114.291159649014, 30.6677937697572],
'#1e1e1e',
'#e5e510'
);
mapbox.addAnimateParacurve(
'huangxiao3',
[114.28484027597, 30.6450852278393],
[114.291159649014, 30.6677937697572],
'#1e1e1e',
'#e5e510'
);
mapbox.addAnimateParacurve(
'huangxiao4',
[114.304897748493, 30.6603356257536],
[114.291159649014, 30.6677937697572],
'#1e1e1e',
'#e5e510'
); //阶段1
setTimeout(() => {
mapbox.addAnimateParacurve(
'huangxiao5',
[114.291159649014, 30.6677937697572],
[114.286368350578, 30.6709689294036],
'#1e1e1e',
'#d10000'
); //阶段二
}, 2000);
}
//清除污水收集理由
function removeSewageRoad() {
if (
mapbox._map.getLayer('jichangEast_layer') &&
mapbox._map.getLayer('jichangWeat1_layer') &&
mapbox._map.getLayer('jichangWeat2_layer') &&
mapbox._map.getLayer('jichangWeat3_layer') &&
mapbox._map.getLayer('jichangWeat4_layer') &&
mapbox._map.getLayer('huangxiao1_layer') &&
mapbox._map.getLayer('huangxiao2_layer') &&
mapbox._map.getLayer('huangxiao3_layer') &&
mapbox._map.getLayer('huangxiao4_layer') &&
mapbox._map.getLayer('huangxiao5_layer')
) {
mapbox._map.removeLayer('jichangEast_layer');
mapbox._map.removeLayer('jichangWeat1_layer');
mapbox._map.removeLayer('jichangWeat2_layer');
mapbox._map.removeLayer('jichangWeat3_layer');
mapbox._map.removeLayer('jichangWeat4_layer');
mapbox._map.removeLayer('huangxiao1_layer');
mapbox._map.removeLayer('huangxiao2_layer');
mapbox._map.removeLayer('huangxiao3_layer');
mapbox._map.removeLayer('huangxiao4_layer');
mapbox._map.removeLayer('huangxiao5_layer');
}
}
// 展开收起
function changeZhan() {
this.ifExpand = !this.ifExpand;
}
//搜索框获取所有站点
async function getAllSelectPoi() {
allData.selectedPois = [];
let res = await getAllSiteEquipmentProjectPoint();
if (res && res.code == 200) {
res.data.forEach((element) => {
allData.selectedPois.push({
label: element.stName,
value: element.stCode,
geometry: element.geometrys,
stationType: element.stationType,
});
});
}
}
//搜索后定位及弹窗
function getPOIinfo(value, options) {
if (!!!options) {
if (!!mapbox._map.getLayer('selectedSta_layer')) {
mapbox._map.removeLayer('selectedSta_layer');
mapbox._map.removeSource('selectedSta_source');
}
allData.showModalSzjcz = false;
allData.showModalSwjcz = false;
if (!!mapbox._popup) {
mapbox._popup.remove();
}
return;
}
//删除上次查询显示出的站点及弹窗
if (!!mapbox._map.getLayer('selectedSta_layer')) {
mapbox._map.removeLayer('selectedSta_layer');
mapbox._map.removeSource('selectedSta_source');
}
allData.showModalSzjcz = false;
allData.showModalSwjcz = false;
if (!!mapbox._popup) {
mapbox._popup.remove();
}
let url;
let geometry = WKT.parse(options.geometry);
let selectedSta = {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry,
properties: options,
},
],
};
//选择站点图标
if (options.stationType == '雨量站') {
url = yuliangImg;
} else if (options.stationType == '水质站(地表水)') {
url = shuizhiIcon;
} else if (options.stationType == '水位站') {
url = yeweiIcon;
} else if (options.stationType == '流量站') {
url = liuliangIcon;
} else if (options.stationType == '污水泵站') {
url = wushuiIcon;
} else if (options.stationType == '污水处理厂') {
url = wscIcon;
} else if (options.stationType == '排涝泵站') {
url = pailaoIcon;
} else if (options.stationType == '分散处理设施') {
url = fensanIcon;
} else if (options.stationType == '闸门') {
url = zhamenIcon;
} else if (options.stationType == 'CSO强化处理设施') {
url = CSOIcon;
} else if (options.stationType == '调蓄池') {
url = tiaoxuIcon;
}
//添加搜索站点，定位视角
mapbox.loadPointsLayer(url, 'selectedSta', selectedSta, 'label', true);
mapbox.flyto(selectedSta.features[0].geometry.coordinates, 15.5, 0.8);
//添加鼠标样式
mapbox.changeTypeOfmouse('selectedSta_layer');
//添加卡片
mapbox._map.on('click', 'selectedSta_layer', (e) => {
e.preventDefault();
const features = mapbox._map.queryRenderedFeatures(e.point);
let layerId = features[0].layer.id;
if (features[0].properties.stationType == '水质站(地表水)') {
allData.stationCode = features[0].properties.value;
if (!!!layerId) return;
allData.showModalSzjcz = true;
} else if (features[0].properties.stationType == '水位站' || features[0].properties.stationType == '流量站') {
allData.YWstationCode = features[0].properties.value;
if (!!!layerId) return;
allData.showModalSwjcz = true;
} else if (features[0].properties.stationType == '雨量站') {
features[0].properties.name = features[0].properties.label;
features[0].properties.code = features[0].properties.value;
bus.emit('pointToDetail', features[0]);
bus.on('pointToDetail', (param) => {
mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties));
});
} else {
getSelectPOIinfo(features[0].properties.value, () => {
features[0].properties = allData.POIinfo;
bus.emit('pointToDetail', features[0]);
bus.on('pointToDetail', (param) => {
mapbox.markerPopup(param, mapbox.createPopup(Popup, param.properties));
});
});
}
});
}
//获取搜索后的闸站、污水厂、泵站等信息
async function getSelectPOIinfo(id, callback) {
let res = await StationPointInfo(`${id}`);
if (res && res.code == 0) {
allData.POIinfo = res.hjProjectConstructionPoint;
if (typeof callback == 'function') {
callback();
}
}
}
onMounted(() => {
setTimeout(() => {
getDefaultLayer();
getMapJSON();
getAllSelectPoi();
});
});
onBeforeUnmount(() => {
bus.off('showDefaultLegend');
});
return {
...toRefs(allData),
changeLegend,
changeLiuyu,
getLayerImg,
getDefaultLayer,
changeZhan,
getMapJSON,
getAllSelectPoi,
getPOIinfo,
getSelectPOIinfo,
};
},
};
</script>
<style lang="less">
.lengendPage {
.selectedPoi {
position: absolute;
width: 230px;
top: 10%;
left: 5px;
}
.zksqImg {
width: 16px;
height: 147px;
background: url('@/assets/newImgs/other/down.png');
border-radius: 10px 10px 0px 0px;
position: absolute;
top: 40%;
left: 238px;
z-index: 115;
cursor: pointer;
}
.goLeft {
left: 2px;
}
.publicLegend {
background: #052f4a;
border: 1px solid #094065;
box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
opacity: 0.9;
border-radius: 10px;
position: absolute;
top: 15%;
left: 5px;
z-index: 110;
height: 700px;
overflow: auto;
.titleB {
height: 35px;
line-height: 35px;
background: #094065;
font-size: 16px;
padding-left: 10px;
}
.part {
display: flex;
height: 40px;
align-items: center;
cursor: pointer;
&:hover {
background: #08596a;
}
.img {
width: 17px;
height: 17px;
margin-left: 15px;
margin-right: 5px;
}
.title {
margin-left: 5px;
font-size: 14px;
height: 30px;
line-height: 30px;
width: 155px;
}
.n-icon {
margin-right: 10px;
margin-top: 2px;
font-weight: bold;
&.active {
color: #00ee6f;
}
}
}
}
}
</style>
