<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>
<!-- 内涝点详情弹窗页面 -->
<n-modal v-model:show="showModalNld" :show-icon="false" :mask-closable="false" preset="card" title="站点详情" style="width: 950px">
<NldModal :valueModalNld="valueModalNld" />
</n-modal>
<!-- 湖泊详情弹窗页面 -->
<n-modal v-model:show="showModalHP" :show-icon="false" :mask-closable="false" preset="card" :title="HuPotitle" style="width: 580px">
<HuPoModal :valueModalhp="valueModalhp" />
</n-modal>
<!-- 港渠详情弹窗页面 -->
<n-modal v-model:show="showModalGQ" :show-icon="false" :mask-closable="false" preset="card" :title="GQotitle" style="width: 580px">
<GangQuModal :valueModalgq="valueModalgq" />
</n-modal>
<!-- 厂站详情弹窗页面 -->
<!-- <n-modal v-model:show="showModalBZ" :show-icon="false" :mask-closable="false" preset="card" :title="BZtitle" style="width: 680px">
<BengZModal :valueModalbz="valueModalbz" />
</n-modal> -->
</div>
</template>
<script>
import NewFiberMapUtils from '@/utils/gis/NewfiberMap.js';
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,
jsdListHjly,
lakelistdata,
canllistdata,
pumplistdata,
} from '@/services';
import Popup from './Popup.vue';
import ShuizhiModal from './modal/shuizhiModal.vue'; //水质监测弹窗
import ShuiweiModal from './modal/shuiweiModal.vue'; //水位监测弹窗
import HuPoModal from './modal/HuPoModal.vue'; //湖泊监测弹窗
import GangQuModal from './modal/GangQuModal.vue'; //湖泊监测弹窗
import NldModal from './modal/nldModal/index.vue';
import Area from '@/assets/json/政区cesium.json';
import AreaLine from '@/assets/json/政区Linecesium.json';
import Areaname from '@/assets/json/政区name.json';
import LiuyuArea from '@/assets/json/LiuyuAreaCesium.json'; //合改
import LiuyuAreaLine from '@/assets/json/LiuyuAreaLineCesium.json';
import Liuyuname from '@/assets/json/Liuyuname.json';
import rainAreaone from '@/assets/json/雨水一级Cesium.json';
import rainAreaoneLine from '@/assets/json/雨水一级lineCesium.json';
import rainAreanameone from '@/assets/json/雨水一级name.json';
import rainAreatwo from '@/assets/json/雨水二级Cesium.json';
import rainAreatwoLine from '@/assets/json/雨水二级lineCesium.json';
import rainAreanametwo from '@/assets/json/雨水二级name.json';
import wsAreaone from '@/assets/json/污水一级Cesium.json';
import wsAreaoneLine from '@/assets/json/污水一级lineCesium.json';
import wsAreanameone from '@/assets/json/污水一级name.json';
import wsAreatwo from '@/assets/json/污水二级Cesium.json';
import wsAreatwoLine from '@/assets/json/污水二级lineCesium.json';
import wsAreanametwo from '@/assets/json/污水二级name.json';
import anquJSON from '@/assets/json/anhan_cesium.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/xianghan_cesium.json';
import xhNameJSON from '@/assets/json/箱涵name.json';
import bspoint from '@/assets/json/补水点.json';
import shengtai from '@/assets/json/shengtai_cesium.json';
import fensanIcon from '@/assets/newImgs/layerIcon/fsclss_gis.png';
import pailaoIcon from '@/assets/newImgs/layerIcon/plbz_gis.png';
import wscIcon from '@/assets/newImgs/layerIcon/wsclc_gis.png';
import wushuiIcon from '@/assets/newImgs/layerIcon/wsbz_gis.png';
import zhamenIcon from '@/assets/newImgs/layerIcon/zhamen_gis.png';
import tiaoxuIcon from '@/assets/newImgs/layerIcon/txc_gis.png';
import yeweiIcon from '@/assets/newImgs/layerIcon/waterLevel_gis.png';
import liuliangIcon from '@/assets/newImgs/layerIcon/flow_gis.png';
import shuizhiIcon from '@/assets/newImgs/layerIcon/waterQuality_gis.png';
import CSOIcon from '@/assets/newImgs/layerIcon/qhclss_gis.png';
import bushui from '@/assets/newImgs/layerIcon/补水工程s.png';
import yuliangImg from '@/assets/newImgs/layerIcon/rainStation_gis.png';
import anhan_Line from '@/assets/newImgs/layerIcon/anhan_Line.png';
import xianghan_Line from '@/assets/newImgs/layerIcon/xianghan_Line.png';
import shengtai_Line from '@/assets/newImgs/layerIcon/shengtai_Line.png';
import dynamicWater from '@/assets/newImgs/layerIcon/dynamicWater.png';
import waterLoging from '@/assets/newImgs/layerIcon/waterLoging_icon.png';
import riversging from '@/assets/newImgs/layerIcon/Riversging_icon.png';
import GangquLoging from '@/assets/newImgs/layerIcon/GangquLoging.png_icon.png';
import Stationging from '@/assets/newImgs/layerIcon/Stationging_icon.png';
import WKT from 'terraformer-wkt-parser';
export default {
name: 'lengendPage',
components: {
Checkmark,
Popup,
ShuizhiModal,
ShuiweiModal,
NldModal,
HuPoModal,
GangQuModal,
},
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,
showModalBZ: false,
showModalGQ: false,
showModalHP: false,
showModalNld: false,
HuPotitle: '站点详情',
GQotitle: '站点详情',
BZtitle: '站点详情',
valueModalNld: {},
valueModalhp: {},
valueModalgq: {},
valueModal: {},
valueModalbz: {},
});
// 初始化默认选中的图层判断显示
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() {
newfiberMap.flyTo({
lon: 114.264596,
lat: 30.500028,
heading: 2.281299097855777,
zoom: 5358.12942752382,
pitch: -25.2508969308367,
roll: 0.005453465256790101,
});
}
//定位黄孝河
function toHuangxiao() {
newfiberMap.flyTo({
lon: 114.262596,
lat: 30.625028,
heading: 45.281299097855777,
zoom: 3358.12942752382,
pitch: -30.2508969308367,
roll: 0.005453465256790101,
});
}
//定位机场河
function toJichang() {
newfiberMap.flyTo({
lon: 114.295596,
lat: 30.62028,
heading: -60.281299097855777,
zoom: 3358.12942752382,
pitch: -30.2508969308367,
roll: 0.005453465256790101,
});
}
//液位、流量
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 = newfiberMap.getgeojson(arry15);
newfiberMap.addGeojsonPoint({
id: 'layer15',
data: liuliangjson,
icon: liuliangIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(215, 142, 0,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(liuliangIcon, 'layer15', liuliangjson, 'stName', false); // 加载流量监测站点位
let yeweijson = newfiberMap.getgeojson(arry14);
newfiberMap.addGeojsonPoint({
id: 'layer14',
data: yeweijson,
icon: yeweiIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(32, 133, 130,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(yeweiIcon, 'layer14', yeweijson, 'stName', false); // 加载液位监测站点位
let shuizhijson = newfiberMap.getgeojson(arry16);
newfiberMap.addGeojsonPoint({
id: 'layer16',
data: shuizhijson,
icon: shuizhiIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(32, 133, 130,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//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 = newfiberMap.getWKTtoGeojson(arry0);
newfiberMap.addGeojsonPoint({
id: 'layer0',
data: pailao1,
icon: pailaoIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(161, 119, 34,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(pailaoIcon, 'layer0', pailao1, 'name', false); //排涝泵站一
let wushuibeng1 = newfiberMap.getWKTtoGeojson(arry5);
newfiberMap.addGeojsonPoint({
id: 'layer5',
data: wushuibeng1,
icon: wushuiIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(175, 50, 50,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(wushuiIcon, 'layer5', wushuibeng1, 'name', false); //污水泵站一
let fensan = newfiberMap.getWKTtoGeojson(arry10);
newfiberMap.addGeojsonPoint({
id: 'layer10',
data: fensan,
icon: fensanIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(6, 179, 85,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(fensanIcon, 'layer10', fensan, 'name', false); //分散设施
let zhamen1 = newfiberMap.getWKTtoGeojson(arry3);
newfiberMap.addGeojsonPoint({
id: 'layer3',
data: zhamen1,
icon: zhamenIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(6, 179, 85,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(zhamenIcon, 'layer3', zhamen1, 'name', false); //闸门一
let pailao2 = newfiberMap.getWKTtoGeojson(arry1);
newfiberMap.addGeojsonPoint({
id: 'layer1',
data: pailao2,
icon: pailaoIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(167, 126, 38,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(pailaoIcon, 'layer1', pailao2, 'name', false); //排涝泵站二
let zhamen2 = newfiberMap.getWKTtoGeojson(arry4);
newfiberMap.addGeojsonPoint({
id: 'layer4',
data: zhamen2,
icon: zhamenIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(6, 179, 85,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(zhamenIcon, 'layer4', zhamen2, 'name', false); //闸门二
let wushuibeng2 = newfiberMap.getWKTtoGeojson(arry6);
newfiberMap.addGeojsonPoint({
id: 'layer6',
data: wushuibeng2,
icon: wushuiIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(175, 50, 50,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(wushuiIcon, 'layer6', wushuibeng2, 'name', false); //污水泵二
let tiaoxuchi = newfiberMap.getWKTtoGeojson(arry11);
newfiberMap.addGeojsonPoint({
id: 'layer11',
data: tiaoxuchi,
icon: tiaoxuIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(35, 147, 145,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(tiaoxuIcon, 'layer11', tiaoxuchi, 'name', false); //调蓄池
let tiaoxuchi3 = newfiberMap.getWKTtoGeojson(arry7);
newfiberMap.addGeojsonPoint({
id: 'layer7',
data: tiaoxuchi3,
icon: tiaoxuIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(35, 147, 145,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(tiaoxuIcon, 'layer7', tiaoxuchi3, 'name', false); //调蓄池三
let pailao3 = newfiberMap.getWKTtoGeojson(arry2);
newfiberMap.addGeojsonPoint({
id: 'layer2',
data: pailao3,
icon: pailaoIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(167, 126, 38,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(pailaoIcon, 'layer2', pailao3, 'name', false); //排涝泵站三
let wushuichang = newfiberMap.getWKTtoGeojson(arry8);
newfiberMap.addGeojsonPoint({
id: 'layer8',
data: wushuichang,
icon: wscIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(169, 57, 57,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(wscIcon, 'layer8', wushuichang, 'name', false); //污水厂
let wushuichang2 = newfiberMap.getWKTtoGeojson(arry9);
newfiberMap.addGeojsonPoint({
id: 'layer9',
data: wushuichang2,
icon: wscIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(169, 57, 57,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(wscIcon, 'layer9', wushuichang2, 'name', false); //污水厂二
let CSO = newfiberMap.getWKTtoGeojson(arry12);
newfiberMap.addGeojsonPoint({
id: 'layer12',
data: CSO,
icon: CSOIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(152, 16, 192,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(CSOIcon, 'layer12', CSO, 'name', false); //CSO
let CSO3 = newfiberMap.getWKTtoGeojson(arry13);
newfiberMap.addGeojsonPoint({
id: 'layer13',
data: CSO,
icon: CSOIcon,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(152, 16, 192,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//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 = newfiberMap.getWKTtoGeojson(arryqy.concat(arryqy_1).concat(arryqy_2));
allData.bushui = newfiberMap.getWKTtoGeojson(arrybs);
allData.qingyuname = newfiberMap.getWKTtoGeojson(arryqyname.concat(arryqyname_1).concat(arryqyname_2));
allData.bushuiname = newfiberMap.getWKTtoGeojson(arrybsname);
allData.tuokuan = newfiberMap.getWKTtoGeojson(arrytk);
allData.tuokuaname = newfiberMap.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
// );
allData.legendList
.find((item) => item.title === '监测测站')
.children.forEach(async (item) => {
item.pointData = await item.loader();
console.log(item);
return;
item.pointData.forEach((ele) => {
console.log(ele);
newfiberMap.addGeojsonPoint({
id: item.layername,
data: waterlogingGeojson,
icon: waterLoging,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(156, 42, 42,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
});
});
console.log(allData.legendList);
};
//添加内涝点图层
const addWaterLogingLayer = async () => {
let waterLogingData = await jsdListHjly({ currentPage: 1, pageSize: 10, searchFilters: [] });
if (waterLogingData) {
let data = waterLogingData.result;
data.forEach((item) => {
item.name = item.STNM;
item.SWVal = item.Z || '--';
item.stationType = 'waterLoging';
});
let waterlogingGeojson = getWaterlogingGeojson(data);
newfiberMap.addGeojsonPoint({
id: 'waterLoging',
data: waterlogingGeojson,
icon: waterLoging,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(156, 42, 42,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
}
};
//获取内涝点geojson
const getWaterlogingGeojson = (dataList) => {
return turf.featureCollection(
dataList.map((data) => {
if (data.LNG & data.LAT) {
return turf.point([Number(data.LNG), Number(data.LAT)], data);
}
if (data.LGTD & data.LTTD) {
return turf.point([Number(data.LGTD), Number(data.LTTD)], data);
}
})
);
};
//添加湖泊监测点
const addRiversgingLayer = async () => {
let riversgingData = await lakelistdata({ currentPage: 1, pageSize: 10, searchFilters: [] });
if (riversgingData) {
let data = riversgingData.result;
data.forEach((item) => {
item.name = item.STNM;
//item.SWVal = item.Z || '--';
item.stationType = 'riversging';
});
let riversgingGeojson = getWaterlogingGeojson(data);
newfiberMap.addGeojsonPoint({
id: 'Riversging',
data: riversgingGeojson,
icon: riversging,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(44, 99, 162,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
}
};
//添加港渠监测点
const addGangqugLayer = async () => {
let gangquData = await canllistdata({ currentPage: 1, pageSize: 10, searchFilters: [] });
if (gangquData) {
let data = gangquData;
if (!data.length) return;
data.forEach((item) => {
item.name = item.STNM;
//item.SWVal = item.Z || '--';
item.stationType = 'gangquLoging';
});
let gangQuGeojson = getWaterlogingGeojson(data);
newfiberMap.addGeojsonPoint({
id: 'GangquLoging',
data: gangQuGeojson,
icon: GangquLoging,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(24, 126, 123,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
}
};
//添加厂站监测点
const addStationgingLayer = async () => {
let StationgingData = await pumplistdata({ currentPage: 1, pageSize: 10, searchFilters: [] });
if (StationgingData) {
let data = StationgingData;
data.forEach((item) => {
item.name = item.STNM;
//item.SWVal = item.Z || '--';
item.stationType = 'Stationging';
});
let StationgingGeojson = getWaterlogingGeojson(data);
newfiberMap.addGeojsonPoint({
id: 'Stationging',
data: StationgingGeojson,
icon: Stationging,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(41, 97, 162,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: false,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
}
};
// 图例点击
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();
}
if (item.layername == 'waterLoging') {
newfiberMap.setVisibility(item.layername, true);
}
if (item.layername == 'Riversging') {
newfiberMap.setVisibility(item.layername, true);
}
if (item.layername == 'GangquLoging') {
newfiberMap.setVisibility(item.layername, true);
}
if (item.layername == 'Stationging') {
newfiberMap.setVisibility(item.layername, true);
}
if (item.layername == 'sanArea') {
let selectedBuilding = newfiberMap.map.scene.primitives._primitives.filter((i) => !!i._url && i._url.includes('tileset'));
if (!selectedBuilding.length) {
newfiberMap.loadCesium3DTileSet({
id: 'CQLTXC',
url: '/3dtiles/与数公基平台对接3dtiles/东渠钢坝闸/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'CQLBZ',
url: '/3dtiles/与数公基平台对接3dtiles/常青花园调蓄池/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'XQGBZ',
url: '/3dtiles/与数公基平台对接3dtiles/西渠钢坝闸/tileset.json',
callback: onReady1,
});
newfiberMap.loadCesium3DTileSet({
id: 'TLQBZ',
url: '/3dtiles/与数公基平台对接3dtiles/常青路泵站/tileset.json',
callback: onReady0,
});
// 铁路桥泵站，目前地址为172.16.238.79，待更改！！
newfiberMap.loadCesium3DTileSet({
id: 'TLQBZ',
url: 'http://172.16.238.79/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E9%93%81%E8%B7%AF%E6%A1%A5%E6%B3%B5%E7%AB%99/tileset.json',
callback: onReady2,
});
newfiberMap.loadCesium3DTileSet({
id: 'HXHCSO',
url: '/3dtiles/与数公基平台对接3dtiles/黄孝河CSO/tileset.json',
callback: onReady3,
});
newfiberMap.loadCesium3DTileSet({
id: 'HXHQHCLSS',
url: '/3dtiles/与数公基平台对接3dtiles/黄孝河强化处理设施/tileset.json',
callback: onReady4,
});
newfiberMap.loadCesium3DTileSet({
id: 'HXHGBZ',
url: '/3dtiles/与数公基平台对接3dtiles/黄孝河钢坝闸/tileset.json',
});
newfiberMap.loadCesium3DTileSet({
id: 'HXHGBZOUT',
url: '/3dtiles/与数公基平台对接3dtiles/黄孝河钢坝闸——out/tileset.json',
});
newfiberMap.loadCesium3DTileSetBuilding({
id: 'jianzhu5',
url: '/models-rest/rest/models/preview/CIM3-5/tileset.json',
});
newfiberMap.loadCesium3DTileSetBuilding({
id: 'jianzhu7',
url: '/models-rest/rest/models/preview/CIM3-7/tileset.json',
});
newfiberMap.loadCesium3DTileSetBuilding({
id: 'jianzhu8',
url: '/models-rest/rest/models/preview/CIM3-8/tileset.json',
});
} else {
selectedBuilding.forEach((item) => {
item.show = true;
});
}
}
for (let i = 0; i < 18; i++) {
if (item.layername == 'layer' + i) {
if (i != 17) {
newfiberMap.setVisibility(item.layername, true);
} else {
newfiberMap.addGeoserverWMS({
url: 'http://139.196.225.242:7002/geoserver/hj2work/wms',
layerId: 'hj2work:pipe_main_all',
id: 'layer17',
});
}
}
}
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();
}
if (item.layername == 'waterLoging') {
newfiberMap.setVisibility(item.layername, false);
}
if (item.layername == 'Riversging') {
newfiberMap.setVisibility(item.layername, false);
}
if (item.layername == 'GangquLoging') {
newfiberMap.setVisibility(item.layername, false);
}
if (item.layername == 'Stationging') {
newfiberMap.setVisibility(item.layername, false);
}
if (item.layername == 'sanArea') {
let selectedBuilding = newfiberMap.map.scene.primitives._primitives.filter((i) => !!i._url && i._url.includes('tileset'));
console.log('selectedBuilding---', selectedBuilding);
selectedBuilding.forEach((item) => {
item.show = false;
});
}
for (let i = 0; i < 18; i++) {
if (item.layername == 'layer' + i) {
let closePopup = false;
bus.emit('closePopup', closePopup);
newfiberMap.setVisibility(item.layername, false);
}
}
if (item.layername == 'hedaotuokuan') {
removeTuokuanLine();
}
if (item.layername == 'wushuiroad') {
removeSewageRoad();
}
if (item.layername == 'bushuipoint') {
removeBushuiPoint();
}
}
};
//添加政区图
function addArealayer() {
newfiberMap.addGeojsonPolygon({
id: 'Area',
data: Area,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 6,
strokeColor: '#1c95ab',
groundHeight: 0,
});
Areaname.features.forEach((feature) => {
let AreanameEntity = {
newFiberId: 'Areaname',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#00dd66'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //一个属性，指定从相机到该距离时禁用深度测试的距离
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
},
};
newfiberMap.map.entities.add(AreanameEntity);
});
newfiberMap.addGeojsonLine({
id: 'Arealine',
data: AreaLine,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 3,
});
// 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() {
newfiberMap.removeLayer('Area');
newfiberMap.removeLayer('Areaname');
newfiberMap.removeLayer('Arealine');
// 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() {
newfiberMap.addGeojsonPolygon({
id: 'LiuyuArea',
data: LiuyuArea,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 6,
strokeColor: '#1c95ab',
groundHeight: 0,
});
Liuyuname.features.forEach((feature) => {
let LiuyunameEntity = {
newFiberId: 'LiuyuAreaname',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#8a5011'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //一个属性，指定从相机到该距离时禁用深度测试的距离
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地设置
},
};
newfiberMap.map.entities.add(LiuyunameEntity);
});
newfiberMap.addGeojsonLine({
id: 'LiuyuArealine',
data: LiuyuAreaLine,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 3,
});
// 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() {
newfiberMap.removeLayer('LiuyuArea');
newfiberMap.removeLayer('LiuyuAreaname');
newfiberMap.removeLayer('LiuyuArealine');
// 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() {
//一级
newfiberMap.addGeojsonPolygon({
id: 'rainArea1',
data: rainAreaone,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 6,
strokeColor: '#1c95ab',
groundHeight: 0,
distanceDisplayCondition: [30000, 1000000],
});
rainAreanameone.features.forEach((feature) => {
let rainAreanameoneEntity = {
newFiberId: 'rainAreaname1',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#970251'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(30000, 1000000),
},
};
newfiberMap.map.entities.add(rainAreanameoneEntity);
});
newfiberMap.addGeojsonLine({
id: 'rainArea1line',
data: rainAreaoneLine,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 3,
distanceDisplayCondition: [30000, 1000000],
});
// 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)');
//二级
newfiberMap.addGeojsonPolygon({
id: 'rainArea2',
data: rainAreatwo,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 6,
strokeColor: '#1c95ab',
groundHeight: 0,
distanceDisplayCondition: [0, 30000],
});
rainAreanametwo.features.forEach((feature) => {
let rainAreanametwoEntity = {
newFiberId: 'rainAreaname2',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#970251'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 30000),
},
};
newfiberMap.map.entities.add(rainAreanametwoEntity);
});
newfiberMap.addGeojsonLine({
id: 'rainArea2line',
data: rainAreatwoLine,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 3,
distanceDisplayCondition: [0, 30000],
});
// 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() {
newfiberMap.removeLayer('rainArea1');
newfiberMap.removeLayer('rainAreaname1');
newfiberMap.removeLayer('rainArea1line');
newfiberMap.removeLayer('rainArea2');
newfiberMap.removeLayer('rainAreaname2');
newfiberMap.removeLayer('rainArea2line');
// 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() {
//一级
newfiberMap.addGeojsonPolygon({
id: 'wsArea1',
data: wsAreaone,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 6,
strokeColor: '#1c95ab',
groundHeight: 0,
distanceDisplayCondition: [30000, 1000000],
});
wsAreanameone.features.forEach((feature) => {
let wsAreanameoneEntity = {
newFiberId: 'wsAreaname1',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#8b4e0e'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(30000, 1000000),
},
};
newfiberMap.map.entities.add(wsAreanameoneEntity);
});
newfiberMap.addGeojsonLine({
id: 'wsArea1line',
data: wsAreaoneLine,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 3,
distanceDisplayCondition: [30000, 1000000],
});
// 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)');
//二级
newfiberMap.addGeojsonPolygon({
id: 'wsArea2',
data: wsAreatwo,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 6,
strokeColor: '#1c95ab',
groundHeight: 0,
distanceDisplayCondition: [0, 30000],
});
wsAreanametwo.features.forEach((feature) => {
let wsAreanametwoEntity = {
newFiberId: 'wsAreaname2',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#8b4e0e'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 30000),
},
};
newfiberMap.map.entities.add(wsAreanametwoEntity);
});
newfiberMap.addGeojsonLine({
id: 'wsArea2line',
data: wsAreatwoLine,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: null,
width: 3,
distanceDisplayCondition: [0, 30000],
});
// 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() {
newfiberMap.removeLayer('wsArea1');
newfiberMap.removeLayer('wsAreaname1');
newfiberMap.removeLayer('wsArea1line');
newfiberMap.removeLayer('wsArea2');
newfiberMap.removeLayer('wsAreaname2');
newfiberMap.removeLayer('wsArea2line');
// 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() {
// //明渠水流动效
newfiberMap.dynamicWaterToMap(mingqupolygon, dynamicWater);
mqNameJSON.features.forEach((feature) => {
let mqNameEntity = {
newFiberId: 'mqName',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#11796f'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 30000),
},
};
newfiberMap.map.entities.add(mqNameEntity);
});
// 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() {
newfiberMap.removeLayer('mqName');
let deleteLayer = newfiberMap.map.scene.primitives._primitives.filter(
(primitive) => primitive._instanceIds && primitive._instanceIds.indexOf('dynamicWater') != -1
);
if (!deleteLayer.length) return;
deleteLayer.forEach((layer) => {
newfiberMap.map.scene.primitives.remove(layer);
});
// 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() {
// //暗涵流动光效
newfiberMap.addGeojsonLine({
id: 'brightenangqu',
data: anquJSON,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: new Cesium.Spriteline1MaterialProperty(1000, anhan_Line),
width: 5,
});
ahNameJSON.features.forEach((feature) => {
let ahNameEntity = {
newFiberId: 'ahName',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#642494'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
},
};
newfiberMap.map.entities.add(ahNameEntity);
});
// 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() {
newfiberMap.removeLayer('brightenangqu');
newfiberMap.removeLayer('ahName');
// 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() {
// //箱涵流动光效
newfiberMap.addGeojsonLine({
id: 'brightenxianghan',
data: xhjson,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: new Cesium.Spriteline1MaterialProperty(1000, xianghan_Line),
width: 5,
});
xhNameJSON.features.forEach((feature) => {
let xhNameEntity = {
newFiberId: 'xhName',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#189d8a'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
},
};
newfiberMap.map.entities.add(xhNameEntity);
});
// 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() {
newfiberMap.removeLayer('brightenxianghan');
newfiberMap.removeLayer('xhName');
// 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() {
newfiberMap.addGeojsonLine({
id: 'bushui',
data: shengtai,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: new Cesium.Spriteline1MaterialProperty(2000, shengtai_Line),
width: 3,
});
allData.bushuiname.features.forEach((feature) => {
let bushuinameEntity = {
newFiberId: 'bushuiName',
position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], 0),
label: {
text: feature.properties.name, //文字描述
font: 20 + ' ' + 'Source Han Sans CN', //字体样式
fillColor: Cesium.Color.fromCssColorString('#00d564'), //字体颜色
showBackground: false, //是否显示背景颜色
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //label样式
outlineColor: Cesium.Color.fromCssColorString('#000909'),
outlineWidth: 6, //外轮廓宽度
pixelOffset: new Cesium.Cartesian2(0, 0), //偏移
//eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
show: true,
disableDepthTestDistance: 1000000,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
},
};
newfiberMap.map.entities.add(bushuinameEntity);
});
// 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() {
newfiberMap.removeLayer('bushui');
newfiberMap.removeLayer('bushuiName');
// 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() {
newfiberMap.addGeojsonPoint({
id: 'bushuipoint',
data: bspoint,
icon: bushui,
text: '',
fontSize: '18',
font: 'Source Han Sans CN',
height: 20,
width: 20,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(169, 57, 57,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: true,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
//mapbox.loadPointsLayer(bushui, 'bushuipoint', bspoint, '', true);
}
//移除补水点
function removeBushuiPoint() {
newfiberMap.removeLayer('bushuipoint');
// if (mapbox._map.getLayer('bushuipoint_layer')) {
// mapbox._map.removeLayer('bushuipoint_layer').removeSource('bushuipoint_source');
// }
}
//添加清淤路线
function addQingyuLine() {
newfiberMap.addGeojsonPoint({
id: 'qingyuname',
data: allData.qingyuname,
text: '',
fontSize: '19',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -20],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(154, 85, 11,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: true,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
newfiberMap.addGeojsonLine({
id: 'qingyuline',
data: allData.qingyu,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.fromCssColorString('rgba(136, 254, 136,1)'),
}),
width: 15,
});
}
//移除清淤路线
function removeQingyuLine() {
newfiberMap.removeLayer('qingyuline');
newfiberMap.removeLayer('qingyuname');
}
//添加拓宽路线
function addTuokuanLine() {
newfiberMap.addGeojsonPoint({
id: 'tuokuaname',
data: allData.tuokuaname,
text: '',
fontSize: '19',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -20],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(112, 40, 167,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: true,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
newfiberMap.addGeojsonLine({
id: 'tuokuanline',
data: allData.tuokuan,
text: '',
fontSize: '',
font: 'Source Han Sans CN',
labelOffset: [0, 20],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: '#ffffff',
outlineColor: '',
outlineWidth: 1,
style: Cesium.LabelStyle.FILL, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.1,
color: Cesium.Color.fromCssColorString('rgba(151, 71, 151,1)'),
}),
width: 15,
});
}
//移除拓宽路线
function removeTuokuanLine() {
newfiberMap.removeLayer('tuokuanline');
newfiberMap.removeLayer('tuokuaname');
}
//添加污水收集路由
function addSewageRoad() {
//阶段1 机场河
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.232251952664, 30.6282251989571],
endPosition: [114.224961046929, 30.6688376133188],
height: 500,
color: '#e5e510',
with: 5,
});
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.197439638586, 30.6215452723643],
endPosition: [114.224961046929, 30.6688376133188],
height: 500,
color: '#e5e510',
with: 5,
});
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.222606449822, 30.627295887292],
endPosition: [114.224961046929, 30.6688376133188],
height: 500,
color: '#e5e510',
with: 5,
});
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.229789375448, 30.6597774540696],
endPosition: [114.224961046929, 30.6688376133188],
height: 500,
color: '#e5e510',
with: 5,
});
setTimeout(() => {
//阶段2 机场河
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.224961046929, 30.6688376133188],
endPosition: [114.229, 30.658],
height: 500,
color: '#d10000',
with: 5,
});
}, 2000);
//阶段1 黄孝河
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.279463029093, 30.6313298840337],
endPosition: [114.291159649014, 30.6677937697572],
height: 500,
color: '#e5e510',
with: 5,
});
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.268088655832, 30.6428962001639],
endPosition: [114.291159649014, 30.6677937697572],
height: 500,
color: '#e5e510',
with: 5,
});
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.28484027597, 30.6450852278393],
endPosition: [114.291159649014, 30.6677937697572],
height: 500,
color: '#e5e510',
with: 5,
});
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.304897748493, 30.6603356257536],
endPosition: [114.291159649014, 30.6677937697572],
height: 500,
color: '#e5e510',
with: 5,
});
setTimeout(() => {
//阶段二 黄孝河
newfiberMap.parabolaFlowInit({
id: 'wushuiRoad',
startPosition: [114.291159649014, 30.6677937697572],
endPosition: [114.286368350578, 30.6709689294036],
height: 500,
color: '#d10000',
with: 5,
});
}, 2000);
}
//清除污水收集理由
function removeSewageRoad() {
newfiberMap.removeLayer('wushuiRoad');
// 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');
// }
newfiberMap.removeLayer('selectedSta');
allData.showModalSzjcz = false;
allData.showModalSwjcz = false;
let closePopup = false;
bus.emit('closePopup', closePopup);
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();
// }
newfiberMap.removeLayer('selectedSta');
allData.showModalSzjcz = false;
allData.showModalSwjcz = false;
let closePopup = false;
bus.emit('closePopup', closePopup);
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;
}
// //添加搜索站点，定位视角
newfiberMap.addGeojsonPoint({
id: 'selectedSta',
data: selectedSta,
icon: url,
text: 'label',
fontSize: '18',
font: 'Source Han Sans CN',
height: 124,
width: 64,
labelOffset: [0, -140],
imgOffset: [0, 0],
showBackground: false,
backgroundColor: '#ff0000',
fillColor: 'rgba(66, 144, 234,1)',
outlineColor: 'rgba(0, 0, 0, 0.8)',
outlineWidth: 6,
show: true,
style: Cesium.LabelStyle.FILL_AND_OUTLINE, //Cesium.LabelStyle.FILL_AND_OUTLINE Cesium.LabelStyle.OUTLINE
});
newfiberMap.flyTo({
lon: selectedSta.features[0].geometry.coordinates[0] + 0.05,
lat: selectedSta.features[0].geometry.coordinates[1] - 0.15,
heading: 2.281299097855777,
zoom: 8358.12942752382,
pitch: -25.2508969308367,
roll: 0.005453465256790101,
});
}
//获取搜索后的闸站、污水厂、泵站等信息
async function getSelectPOIinfo(id, callback) {
let res = await StationPointInfo(`${id}`);
if (res && res.code == 0) {
allData.POIinfo = res.hjProjectConstructionPoint;
if (typeof callback == 'function') {
callback();
}
}
}
function transCoordinate(tileset, ltd, lat, hei) {
let position = Cesium.Cartesian3.fromDegrees(ltd, lat, hei);
let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
// 旋转
const rx = 0,
ry = 0,
rz = 0;
var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rx));
var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(ry));
var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rz));
var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
//旋转、平移矩阵相乘
Cesium.Matrix4.multiply(m, rotationX, m);
Cesium.Matrix4.multiply(m, rotationY, m);
Cesium.Matrix4.multiply(m, rotationZ, m);
tileset && (tileset.root.transform = m);
}
function onReady0(tileset, viewer) {
transCoordinate(tileset, 114.229731, 30.669991, -20.0);
// debugger;
// viewer.zoomTo(tileset);
}
function onReady1(tileset, viewer) {
transCoordinate(114.22546, 30.647908, -20.0);
// debugger;
}
function onReady2(tileset, viewer) {
transCoordinate(tileset, 114.280809, 30.633398, -20.0);
// debugger;
}
function onReady3(tileset, viewer) {
transCoordinate(tileset, 114.30179, 30.662891, -20.0);
// debugger;
}
function onReady4(tileset, viewer) {
transCoordinate(tileset, 114.300507, 30.673361, -20.0);
// debugger;
// 缩放视图以查看 Tileset
}
onMounted(() => {
// setTimeout(() => {
let interval = setInterval(() => {
if (!window.newfiberMap) return;
clearInterval(interval);
getDefaultLayer();
getMapJSON();
addWaterLogingLayer();
addRiversgingLayer();
addGangqugLayer();
addStationgingLayer();
getAllSelectPoi();
newfiberMap.mapClickEvent((position, point, feature) => {
let properties = feature.properties.getValue();
if (
feature.newFiberId.includes('layer') ||
feature.newFiberId == 'yuliangJC' ||
feature.newFiberId == 'waterLoging' ||
feature.newFiberId == 'Riversging' ||
feature.newFiberId == 'GangquLoging' ||
feature.newFiberId == 'Stationging'
) {
let clickPointPosition = Cesium.Cartographic.fromCartesian(feature.position.getValue());
let clickPointCoordinates = [
Cesium.Math.toDegrees(clickPointPosition.longitude),
Cesium.Math.toDegrees(clickPointPosition.latitude),
0,
];
if (feature.newFiberId == 'layer16') {
allData.stationCode = properties.stCode;
allData.showModalSzjcz = true;
} else if (feature.newFiberId == 'layer14' || feature.newFiberId == 'layer15') {
allData.YWstationCode = properties.stCode;
allData.showModalSwjcz = true;
} else if (feature.newFiberId == 'waterLoging') {
allData.showModalNld = true;
allData.valueModalNld = properties;
} else if (feature.newFiberId == 'Riversging') {
allData.showModalHP = true;
allData.valueModalhp = properties;
allData.HuPotitle = properties.name + '详情';
} else if (feature.newFiberId == 'GangquLoging') {
allData.showModalGQ = true;
allData.valueModalgq = properties;
allData.GQotitle = properties.name + '详情';
} else if (feature.newFiberId == 'Stationging') {
bus.emit('showModalBZ', properties);
} else {
if (feature.newFiberId != 'Stationging') {
newfiberMap.flyTo({
lon: clickPointCoordinates[0] + 0.05,
lat: clickPointCoordinates[1] - 0.15,
heading: 2.281299097855777,
zoom: 8358.12942752382,
pitch: -25.2508969308367,
roll: 0.005453465256790101,
});
bus.emit('popupInfo', properties);
nextTick(() => {
newfiberMap.createPopup({
element: 'czgqBox',
position: clickPointCoordinates,
});
});
}
}
}
//站点搜索的弹窗
if (feature.newFiberId == 'selectedSta') {
let clickPointPosition = Cesium.Cartographic.fromCartesian(feature.position.getValue());
let clickPointCoordinates = [
Cesium.Math.toDegrees(clickPointPosition.longitude),
Cesium.Math.toDegrees(clickPointPosition.latitude),
0,
];
if (properties.stationType.includes('水质站')) {
allData.stationCode = properties.value;
allData.showModalSzjcz = true;
} else if (properties.stationType.includes('水位站') || properties.stationType.includes('流量站')) {
allData.YWstationCode = properties.value;
allData.showModalSwjcz = true;
} else {
if (properties.stationType == '雨量站') {
properties.name = properties.label;
properties.code = properties.value;
newfiberMap.flyTo({
lon: clickPointCoordinates[0] + 0.05,
lat: clickPointCoordinates[1] - 0.15,
heading: 2.281299097855777,
zoom: 8358.12942752382,
pitch: -25.2508969308367,
roll: 0.005453465256790101,
});
bus.emit('popupInfo', properties);
nextTick(() => {
newfiberMap.createPopup({
element: 'czgqBox',
position: clickPointCoordinates,
});
});
} else {
getSelectPOIinfo(properties.value, () => {
properties = allData.POIinfo;
newfiberMap.flyTo({
lon: clickPointCoordinates[0] + 0.05,
lat: clickPointCoordinates[1] - 0.15,
heading: 2.281299097855777,
zoom: 8358.12942752382,
pitch: -25.2508969308367,
roll: 0.005453465256790101,
});
bus.emit('popupInfo', properties);
nextTick(() => {
newfiberMap.createPopup({
element: 'czgqBox',
position: clickPointCoordinates,
});
});
});
}
}
}
});
}, 100);
// });
});
onBeforeUnmount(() => {
bus.off('showDefaultLegend');
});
return {
...toRefs(allData),
changeLegend,
changeLiuyu,
getLayerImg,
getDefaultLayer,
changeZhan,
getMapJSON,
addWaterLogingLayer,
addRiversgingLayer,
addGangqugLayer,
addStationgingLayer,
getAllSelectPoi,
getPOIinfo,
getSelectPOIinfo,
transCoordinate,
onReady0,
onReady1,
onReady2,
onReady3,
onReady4,
};
},
};
</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>
