|
|
|
@@ -4,12 +4,12 @@ |
|
|
|
<div class="nav"></div> |
|
|
|
<!-- 地图 --> |
|
|
|
<div id="map"></div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 占地图例信息 --> |
|
|
|
<ul id="landmark" v-if="isPlace"> |
|
|
|
<li class="landItem" v-for="(item, index) in landuseList" :key="index"> |
|
|
|
<span class="landName">{{item.lc}}</span> |
|
|
|
<span class="landcolor" :style="{background: item.color}"></span> |
|
|
|
<span class="landName">{{ item.lc }}</span> |
|
|
|
<span class="landcolor" :style="{ background: item.color }"></span> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
|
|
|
|
@@ -17,10 +17,9 @@ |
|
|
|
<div class="chart" v-if="isPoint || isPlace"> |
|
|
|
<div class="chartBox"> |
|
|
|
<div class="cancelChart" @click="cancelChart"> |
|
|
|
<img class="closeBtn" src="../assets/img/gisdemo/close.png" alt=""> |
|
|
|
<img class="closeBtn" src="../assets/img/gisdemo/close.png" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="chartContent"> |
|
|
|
|
|
|
|
<div class="pointChart" v-if="isPoint"> |
|
|
|
<div class="placeTitle">采样点数据分析</div> |
|
|
|
<div class="chooseParams"> |
|
|
|
@@ -35,44 +34,48 @@ |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
<div class="utilslist"> |
|
|
|
<p class="utils" v-if="isParams=='tp'">(μg/L)</p> |
|
|
|
<p class="utils" v-if="isParams == 'tp'">(μg/L)</p> |
|
|
|
<p class="utils" v-else>(mg/L)</p> |
|
|
|
</div> |
|
|
|
<point-qulity :dataList="pointParamsData"></point-qulity> |
|
|
|
<p class="pointId">(点号)</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="placeChart" v-if="isPlace"> |
|
|
|
<div class="placeTitle">土地利用数据分析</div> |
|
|
|
<land-use :dataList="landuseList" :color="landColor"></land-use> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 弹出框 --> |
|
|
|
<div class="showPopupPoint" ref="popup" > |
|
|
|
<popup-compoents :dataList="popupData" @closePopup='closePointPopup'></popup-compoents> |
|
|
|
<div class="showPopupPoint" ref="popup"> |
|
|
|
<popup-compoents |
|
|
|
:dataList="popupData" |
|
|
|
@closePopup="closePointPopup" |
|
|
|
></popup-compoents> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="showPopupPlace" ref="placePopup"> |
|
|
|
<place-component :dataList="popupPlace" @closePlace='closePlacePopup'></place-component> |
|
|
|
<place-component |
|
|
|
:dataList="popupPlace" |
|
|
|
@closePlace="closePlacePopup" |
|
|
|
></place-component> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="showPopupOutlet" ref="outletPopup"> |
|
|
|
<outlet-components :dataList="popupOutlet" :checked='checkedRiver' @closeOutlet='closeOutletPopup'></outlet-components> |
|
|
|
<outlet-components |
|
|
|
:dataList="popupOutlet" |
|
|
|
:checked="checkedRiver" |
|
|
|
@closeOutlet="closeOutletPopup" |
|
|
|
></outlet-components> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 右侧控制栏 --> |
|
|
|
<div id="rightSide"> |
|
|
|
<!-- 标题 --> |
|
|
|
<div class="controlTitle"> |
|
|
|
图层管理 |
|
|
|
</div> |
|
|
|
<div class="controlTitle">图层管理</div> |
|
|
|
<!-- 河道切换 --> |
|
|
|
<el-row class="tac"> |
|
|
|
<el-col :span="12"> |
|
|
|
@@ -90,23 +93,37 @@ |
|
|
|
<template slot="title"> |
|
|
|
<span>{{ item.name }}</span> |
|
|
|
</template> |
|
|
|
<el-menu-item-group> |
|
|
|
<template slot="title">反演结果</template> |
|
|
|
<el-menu-item v-for="($item, $index) in item.item" |
|
|
|
:key="$index" :index="index + $index+1+''" @click="selectParams($item.type, $item.value, index, $index)" :class="{paramsActive:checkedParamsActive==$item.type}">{{$item.name}}: {{ $item.cf }}</el-menu-item> |
|
|
|
</el-menu-item-group> |
|
|
|
<el-menu-item-group> |
|
|
|
<template slot="title">风险源</template> |
|
|
|
<el-menu-item v-for="($item, $index) in refList" |
|
|
|
:key="$index" :index="index + '-5'"> |
|
|
|
<input |
|
|
|
:id="'tip'+index+'-2'+$index" |
|
|
|
type="checkbox" |
|
|
|
@change="selectRef( $event, $index, index)" |
|
|
|
v-model="checked[index][$index]"> |
|
|
|
<label class="refcheck" :for="'tip'+index+'-2'+$index">{{ $item }}</label> |
|
|
|
</el-menu-item> |
|
|
|
</el-menu-item-group> |
|
|
|
<el-menu-item-group> |
|
|
|
<template slot="title">反演结果</template> |
|
|
|
<el-menu-item |
|
|
|
v-for="($item, $index) in item.item" |
|
|
|
:key="$index" |
|
|
|
:index="index + $index + 1 + ''" |
|
|
|
@click="selectParams($item.type, $item.value, index, $index)" |
|
|
|
:class="{ paramsActive: checkedParamsActive == $item.type }" |
|
|
|
>{{ $item.name }}: {{ $item.cf }}</el-menu-item |
|
|
|
> |
|
|
|
</el-menu-item-group> |
|
|
|
<el-menu-item-group> |
|
|
|
<template slot="title">风险源</template> |
|
|
|
<el-menu-item |
|
|
|
v-for="($item, $index) in refList" |
|
|
|
:key="$index" |
|
|
|
:index="index + '-5'" |
|
|
|
> |
|
|
|
<input |
|
|
|
:id="'tip' + index + '-2' + $index" |
|
|
|
type="checkbox" |
|
|
|
@change="selectRef($event, $index, index)" |
|
|
|
v-model="checked[index][$index]" |
|
|
|
/> |
|
|
|
<label |
|
|
|
class="refcheck" |
|
|
|
:for="'tip' + index + '-2' + $index" |
|
|
|
>{{ $item }}</label |
|
|
|
> |
|
|
|
</el-menu-item> |
|
|
|
</el-menu-item-group> |
|
|
|
</el-submenu> |
|
|
|
</el-menu> |
|
|
|
</el-col> |
|
|
|
@@ -114,22 +131,21 @@ |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="markBox"> |
|
|
|
<!-- 色带 --> |
|
|
|
<!-- 色带 --> |
|
|
|
<div class="colorMark" v-if="showColor"> |
|
|
|
<div class="colorMain"> |
|
|
|
<p class="colorImg" alt=""></p> |
|
|
|
<p class="colorValue"> |
|
|
|
<span>{{colorHL&&colorHL.value.low}}</span> |
|
|
|
<span v-if="checkedParams=='tp'">单位：μg/L</span> |
|
|
|
<span>{{ colorHL && colorHL.value.low }}</span> |
|
|
|
<span v-if="checkedParams == 'tp'">单位：μg/L</span> |
|
|
|
<span v-else>单位：mg/L</span> |
|
|
|
<!-- <span v-if="checkedParams=='tp'">{{colorHL&&colorHL.value.high*200}}</span> --> |
|
|
|
<span v-if="checkedParams=='tp'">500</span> |
|
|
|
<span v-else>{{colorHL&&colorHL.value.high}}</span> |
|
|
|
|
|
|
|
<span v-if="checkedParams == 'tp'">500</span> |
|
|
|
<span v-else>{{ colorHL && colorHL.value.high }}</span> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 排口、采样点 标志信息 --> |
|
|
|
<!-- 排口、采样点 标志信息 --> |
|
|
|
<ul class="mark"> |
|
|
|
<li class="markItem" v-if="isPoint"> |
|
|
|
<span>采样点</span> |
|
|
|
@@ -141,20 +157,27 @@ |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 地图切换 --> |
|
|
|
<div id="changeMap"> |
|
|
|
<div class="mapItem"> |
|
|
|
<label class="mapText" for="osm" :class="{ mapActive: isChecked == 'osm' }">OSM</label> |
|
|
|
<input type="checkbox" id="osm" :checked="isChecked == 'osm'" /> |
|
|
|
</div> |
|
|
|
<div class="mapItem google"> |
|
|
|
<label class="mapText" for="google" :class="{ mapActive: isChecked == 'google' }" |
|
|
|
>Google</label |
|
|
|
> |
|
|
|
<input type="checkbox" id="google" :checked="isChecked == 'google'" /> |
|
|
|
</div> |
|
|
|
<div class="mapItem"> |
|
|
|
<label |
|
|
|
class="mapText" |
|
|
|
for="osm" |
|
|
|
:class="{ mapActive: isChecked == 'osm' }" |
|
|
|
>OSM</label |
|
|
|
> |
|
|
|
<input type="checkbox" id="osm" :checked="isChecked == 'osm'" /> |
|
|
|
</div> |
|
|
|
<div class="mapItem google"> |
|
|
|
<label |
|
|
|
class="mapText" |
|
|
|
for="google" |
|
|
|
:class="{ mapActive: isChecked == 'google' }" |
|
|
|
>Google</label |
|
|
|
> |
|
|
|
<input type="checkbox" id="google" :checked="isChecked == 'google'" /> |
|
|
|
</div> |
|
|
|
<div class="mapItem"> |
|
|
|
<label class="unaMap" for="UAV" :class="{ mapActive: isUAV }" |
|
|
|
>无人机影像图</label |
|
|
|
@@ -170,7 +193,7 @@ import pointQulity from "./leftCompoents/pointQulity"; |
|
|
|
import landUse from "./leftCompoents/landUse"; |
|
|
|
import popupCompoents from "./leftCompoents/popupComponents"; |
|
|
|
import placeComponent from "./leftCompoents/placeComponent"; |
|
|
|
import outletComponents from './leftCompoents/outletComponents' |
|
|
|
import outletComponents from "./leftCompoents/outletComponents"; |
|
|
|
import "ol/ol.css"; |
|
|
|
import { Map as OMap, View } from "ol"; |
|
|
|
import { |
|
|
|
@@ -238,8 +261,8 @@ export default { |
|
|
|
// 控制数据初始 |
|
|
|
showColor: false, // 控制色带显示影藏 |
|
|
|
checkedRiver: 0, // 当前河道 |
|
|
|
checkedParams: 'cod', // 当前参数 |
|
|
|
checkedParamsActive: '', // 当前选中参数高亮显示 |
|
|
|
checkedParams: "cod", // 当前参数 |
|
|
|
checkedParamsActive: "", // 当前选中参数高亮显示 |
|
|
|
checkedRef: false, // 当前主题，是否被选中 |
|
|
|
checkedPointParams: 0, // 当前采样点参数 |
|
|
|
isChecked: "google", // |
|
|
|
@@ -247,61 +270,54 @@ export default { |
|
|
|
isPlace: false, // 是否点击土地 |
|
|
|
isOutlet: false, // 是否为排口 |
|
|
|
isUAV: false, //是否叠加无人机 |
|
|
|
isParams:'cod', // 统计图参数 |
|
|
|
isParams: "cod", // 统计图参数 |
|
|
|
// 总菜单 |
|
|
|
riverList: [ |
|
|
|
riverList: [ |
|
|
|
{ |
|
|
|
id: 0, |
|
|
|
name: "解溪河", |
|
|
|
item: [ |
|
|
|
{ type: "cod", value: 1, name: '高锰酸盐指数', cf: 'COD_Mn' }, |
|
|
|
{ type: "tn", value: 2 , name: '总氮', cf: 'TN' }, |
|
|
|
{ type: "tp", value: 3 , name: '总磷', cf: 'TP' }, |
|
|
|
{ type: "nh4_n", value: 4, name: '氨氮', cf: 'NH4_N' }, |
|
|
|
{ type: "cod", value: 1, name: "高锰酸盐指数", cf: "COD_Mn" }, |
|
|
|
{ type: "tn", value: 2, name: "总氮", cf: "TN" }, |
|
|
|
{ type: "tp", value: 3, name: "总磷", cf: "TP" }, |
|
|
|
{ type: "nh4_n", value: 4, name: "氨氮", cf: "NH4_N" }, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
name: "东风河", |
|
|
|
item: [ |
|
|
|
{ type: "cod", value: 6, name: '高锰酸盐指数', cf: 'COD_Mn' }, |
|
|
|
{ type: "tn", value: 7 , name: '总氮', cf: 'TN' }, |
|
|
|
{ type: "tp", value: 8 , name: '总磷', cf: 'TP' }, |
|
|
|
{ type: "nh4_n", value: 9, name: '氨氮', cf: 'NH4_N' }, |
|
|
|
{ type: "cod", value: 6, name: "高锰酸盐指数", cf: "COD_Mn" }, |
|
|
|
{ type: "tn", value: 7, name: "总氮", cf: "TN" }, |
|
|
|
{ type: "tp", value: 8, name: "总磷", cf: "TP" }, |
|
|
|
{ type: "nh4_n", value: 9, name: "氨氮", cf: "NH4_N" }, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 10, |
|
|
|
name: "秦淮新河", |
|
|
|
item: [ |
|
|
|
{ type: "cod", value: 11, name: '高锰酸盐指数', cf: 'COD_Mn' }, |
|
|
|
{ type: "tn", value: 12 , name: '总氮', cf: 'TN' }, |
|
|
|
{ type: "tp", value: 13 , name: '总磷', cf: 'TP' }, |
|
|
|
{ type: "nh4_n", value: 14, name: '氨氮', cf: 'NH4_N' }, |
|
|
|
{ type: "cod", value: 11, name: "高锰酸盐指数", cf: "COD_Mn" }, |
|
|
|
{ type: "tn", value: 12, name: "总氮", cf: "TN" }, |
|
|
|
{ type: "tp", value: 13, name: "总磷", cf: "TP" }, |
|
|
|
{ type: "nh4_n", value: 14, name: "氨氮", cf: "NH4_N" }, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
// 主题菜单 |
|
|
|
refList: ["排口", "采样点", "土地利用"], |
|
|
|
// 采样点参数 |
|
|
|
paramsList: [{value: "cod", name:'COD_Mn'},{value: "nh4_n", name:'NH4_N'},{value: "tn", name:'TN'},{value: "tp", name:'TP'}], |
|
|
|
paramsList: [ |
|
|
|
{ value: "cod", name: "COD_Mn" }, |
|
|
|
{ value: "nh4_n", name: "NH4_N" }, |
|
|
|
{ value: "tn", name: "TN" }, |
|
|
|
{ value: "tp", name: "TP" }, |
|
|
|
], |
|
|
|
// 主题选中数据 |
|
|
|
checked: [ |
|
|
|
[ |
|
|
|
false, |
|
|
|
false, |
|
|
|
false |
|
|
|
], |
|
|
|
[ |
|
|
|
false, |
|
|
|
false, |
|
|
|
false |
|
|
|
], |
|
|
|
[ |
|
|
|
false, |
|
|
|
false, |
|
|
|
false |
|
|
|
], |
|
|
|
[false, false, false], |
|
|
|
[false, false, false], |
|
|
|
[false, false, false], |
|
|
|
], |
|
|
|
// 地图数据初始 |
|
|
|
map: null, |
|
|
|
@@ -323,15 +339,19 @@ export default { |
|
|
|
outletActiveIcon: null, // 选中排口样式 |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: { pointQulity, landUse, popupCompoents, placeComponent, outletComponents }, |
|
|
|
components: { |
|
|
|
pointQulity, |
|
|
|
landUse, |
|
|
|
popupCompoents, |
|
|
|
placeComponent, |
|
|
|
outletComponents, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
isPoint(newValue) { |
|
|
|
isPoint(newValue) {}, |
|
|
|
checked: { |
|
|
|
deep: true, |
|
|
|
handler() {}, |
|
|
|
}, |
|
|
|
checked:{ |
|
|
|
deep:true, |
|
|
|
handler(){ |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// 采样点数据 |
|
|
|
@@ -351,19 +371,19 @@ export default { |
|
|
|
if (paramVaules[obj["river"]]) { |
|
|
|
paramVaules[obj["river"]].cod.push({ |
|
|
|
value: parseFloat(obj.cod), |
|
|
|
key: ~~paramVaules[obj["river"]].cod.length + 1+"", |
|
|
|
key: ~~paramVaules[obj["river"]].cod.length + 1 + "", |
|
|
|
}); |
|
|
|
paramVaules[obj["river"]].tp.push({ |
|
|
|
value: parseFloat(obj.tp), |
|
|
|
key: ~~paramVaules[obj["river"]].tp.length + 1+"", |
|
|
|
key: ~~paramVaules[obj["river"]].tp.length + 1 + "", |
|
|
|
}); |
|
|
|
paramVaules[obj["river"]].tn.push({ |
|
|
|
value: parseFloat(obj.tn), |
|
|
|
key: ~~paramVaules[obj["river"]].tn.length + 1+"", |
|
|
|
key: ~~paramVaules[obj["river"]].tn.length + 1 + "", |
|
|
|
}); |
|
|
|
paramVaules[obj["river"]]["nh4_n"].push({ |
|
|
|
value: parseFloat(obj["nh4_n"]), |
|
|
|
key: ~~paramVaules[obj["river"]]["nh4_n"].length + 1+"", |
|
|
|
key: ~~paramVaules[obj["river"]]["nh4_n"].length + 1 + "", |
|
|
|
}); |
|
|
|
} else { |
|
|
|
paramVaules[obj["river"]] = {}; |
|
|
|
@@ -411,15 +431,15 @@ export default { |
|
|
|
this.pointActiveIcon = new Style({ |
|
|
|
image: new Icon({ |
|
|
|
anchor: [0.5, 0.5], |
|
|
|
src: require('@/assets/img/gisdemo/point-h.png') |
|
|
|
}) |
|
|
|
}) |
|
|
|
src: require("@/assets/img/gisdemo/point-h.png"), |
|
|
|
}), |
|
|
|
}); |
|
|
|
this.outletActiveIcon = new Style({ |
|
|
|
image: new Icon({ |
|
|
|
anchor: [0.5, 0.5], |
|
|
|
src: require('@/assets/img/gisdemo/outlet-h.png') |
|
|
|
}) |
|
|
|
}) |
|
|
|
src: require("@/assets/img/gisdemo/outlet-h.png"), |
|
|
|
}), |
|
|
|
}); |
|
|
|
this.dotPlace = new VectorLayer({ |
|
|
|
source: vectorDot, |
|
|
|
style: icon, |
|
|
|
@@ -429,7 +449,7 @@ export default { |
|
|
|
let regions = []; |
|
|
|
axios |
|
|
|
.get( |
|
|
|
"http://121.4.38.11:6080/arcgis/rest/services/demo/result_rasters/MapServer/legend?f=pjson" |
|
|
|
"http://e9r5x7df.dongtaiyuming.net/arcgis/rest/services/demo/results/MapServer/legend?f=pjson" |
|
|
|
) |
|
|
|
.then((res) => { |
|
|
|
let layers = res.data.layers; |
|
|
|
@@ -506,7 +526,7 @@ export default { |
|
|
|
["居民地", "#1E6510"], |
|
|
|
["拆迁未利用地", "#7FFFFF"], |
|
|
|
["堆土", "#571919 "], |
|
|
|
['林地', 'brown'] |
|
|
|
["林地", "brown"], |
|
|
|
]; |
|
|
|
this.landColorList = this.landColor; // 土地占有面积 |
|
|
|
|
|
|
|
@@ -525,12 +545,11 @@ export default { |
|
|
|
axios |
|
|
|
.get( |
|
|
|
"/api" + |
|
|
|
"?service=WFS&version=1.0.0&request=GetFeature&typeName=demo%3Alanduse_all" |
|
|
|
"?service=WFS&version=1.0.0&request=GetFeature&typeName=demo%3Alanduse" |
|
|
|
) |
|
|
|
.then((res) => { |
|
|
|
let features = new WMSGetFeatureInfo().readFeatures(res.data); |
|
|
|
features.forEach((feature) => { |
|
|
|
|
|
|
|
vector.addFeatures(features); |
|
|
|
let obj = feature.getProperties(); |
|
|
|
obj.color = this.landColor.get(obj.lc); |
|
|
|
@@ -586,7 +605,7 @@ export default { |
|
|
|
crossOrigin: "Anonymous", |
|
|
|
tileUrlFunction: function (coordinate) { |
|
|
|
return ( |
|
|
|
"http://121.4.38.11:6080/arcgis/rest/services/demo/photo/MapServer/tile/" + |
|
|
|
"http://e9r5x7df.dongtaiyuming.net/arcgis/rest/services/demo/photos/MapServer/tile/" + |
|
|
|
coordinate[0] + |
|
|
|
"/" + |
|
|
|
coordinate[2] + |
|
|
|
@@ -610,7 +629,7 @@ export default { |
|
|
|
// params: { layers: "show:0" }, |
|
|
|
ratio: 1, |
|
|
|
url: |
|
|
|
"http://121.4.38.11:6080/arcgis/rest/services/demo/result_rasters/MapServer", |
|
|
|
"http://e9r5x7df.dongtaiyuming.net/arcgis/rest/services/demo/results/MapServer", |
|
|
|
}); |
|
|
|
this.tileDong = new ImageLayer({ |
|
|
|
opacity: 0.8, |
|
|
|
@@ -642,9 +661,11 @@ export default { |
|
|
|
this.map = new OMap({ |
|
|
|
controls: control |
|
|
|
.defaults({ attribution: false, zoom: false, rotate: false }) |
|
|
|
.extend([new FullScreen({ |
|
|
|
source:'home' |
|
|
|
})]), |
|
|
|
.extend([ |
|
|
|
new FullScreen({ |
|
|
|
source: "home", |
|
|
|
}), |
|
|
|
]), |
|
|
|
logo: "false", |
|
|
|
target: "map", |
|
|
|
layers: [ |
|
|
|
@@ -720,27 +741,28 @@ export default { |
|
|
|
element: this.$refs.outletPopup, |
|
|
|
autoPan: true, |
|
|
|
positioning: "bottom-center", |
|
|
|
}) |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
this.select = new Select({ |
|
|
|
style:(feature)=>{ |
|
|
|
style: (feature) => { |
|
|
|
let properties = feature.getProperties(); |
|
|
|
if (properties.geom instanceof Point) { |
|
|
|
if(properties.river) { // 表示为采样点数据 |
|
|
|
return this.pointActiveIcon |
|
|
|
} else { // 表示为排口数据 |
|
|
|
return this.outletActiveIcon |
|
|
|
|
|
|
|
if (properties.river) { |
|
|
|
// 表示为采样点数据 |
|
|
|
return this.pointActiveIcon; |
|
|
|
} else { |
|
|
|
// 表示为排口数据 |
|
|
|
return this.outletActiveIcon; |
|
|
|
} |
|
|
|
} else { |
|
|
|
return new Style({ |
|
|
|
stroke:new Stroke({ |
|
|
|
stroke: new Stroke({ |
|
|
|
color: "cyan", |
|
|
|
width: 5 |
|
|
|
}) |
|
|
|
}) |
|
|
|
width: 5, |
|
|
|
}), |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}); |
|
|
|
this.map.addInteraction(this.select); |
|
|
|
this.select.on("select", (e) => { |
|
|
|
@@ -748,22 +770,22 @@ export default { |
|
|
|
let properties = e.selected[0].getProperties(); |
|
|
|
if (properties.geom instanceof Point) { |
|
|
|
this.map.removeOverlay(this.overlayPlace); |
|
|
|
if(properties.river) { // 表示为采样点数据 |
|
|
|
if (properties.river) { |
|
|
|
// 表示为采样点数据 |
|
|
|
this.popupData = properties; |
|
|
|
console.log(properties); |
|
|
|
let coordinate = e.mapBrowserEvent.coordinate; |
|
|
|
this.overlay.setPosition(coordinate); |
|
|
|
this.overlay.setOffset([140, -10]); |
|
|
|
this.map.removeOverlay(this.overlayOutlet) |
|
|
|
this.map.removeOverlay(this.overlayOutlet); |
|
|
|
this.map.addOverlay(this.overlay); |
|
|
|
} else { // 表示为排口数据 |
|
|
|
this.popupOutlet = properties |
|
|
|
} else { |
|
|
|
// 表示为排口数据 |
|
|
|
this.popupOutlet = properties; |
|
|
|
let coordinate = e.mapBrowserEvent.coordinate; |
|
|
|
this.overlayOutlet.setPosition(coordinate); |
|
|
|
this.overlayOutlet.setOffset([140, -10]); |
|
|
|
this.map.removeOverlay(this.overlay) |
|
|
|
this.map.removeOverlay(this.overlay); |
|
|
|
this.map.addOverlay(this.overlayOutlet); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@@ -775,35 +797,33 @@ export default { |
|
|
|
this.map.removeOverlay(this.overlay); |
|
|
|
this.map.removeOverlay(this.overlayOutlet); |
|
|
|
this.map.addOverlay(this.overlayPlace); |
|
|
|
} |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.map.removeOverlay(this.overlay); |
|
|
|
this.map.removeOverlay(this.overlayPlace); |
|
|
|
this.map.removeOverlay(this.overlayOutlet) |
|
|
|
this.map.removeOverlay(this.overlayOutlet); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
// 点击非地图区域控制弹框消失 |
|
|
|
let meunTab = document.getElementById('rightSide') |
|
|
|
let mapTab = document.getElementById('changeMap') |
|
|
|
meunTab.addEventListener('click',() => { |
|
|
|
let meunTab = document.getElementById("rightSide"); |
|
|
|
let mapTab = document.getElementById("changeMap"); |
|
|
|
meunTab.addEventListener("click", () => { |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlay) |
|
|
|
this.map.removeOverlay(this.overlay); |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlayPlace) |
|
|
|
this.map.removeOverlay(this.overlayPlace); |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlayOutlet) |
|
|
|
}) |
|
|
|
mapTab.addEventListener('click',()=>{ |
|
|
|
this.map.removeOverlay(this.overlayOutlet); |
|
|
|
}); |
|
|
|
mapTab.addEventListener("click", () => { |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlay) |
|
|
|
this.map.removeOverlay(this.overlay); |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlayPlace) |
|
|
|
this.map.removeOverlay(this.overlayPlace); |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlayOutlet) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
this.map.removeOverlay(this.overlayOutlet); |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 菜单按钮 |
|
|
|
@@ -812,11 +832,11 @@ export default { |
|
|
|
// 显示图层以及处理相应的数据 |
|
|
|
// 1-1 排口显示 |
|
|
|
if ($index == 0) { |
|
|
|
if($event.target.checked) { |
|
|
|
this.isOutlet = true |
|
|
|
if ($event.target.checked) { |
|
|
|
this.isOutlet = true; |
|
|
|
this.adrainageLayer.setVisible(true); |
|
|
|
} else { |
|
|
|
this.isOutlet = false |
|
|
|
this.isOutlet = false; |
|
|
|
this.adrainageLayer.setVisible(false); |
|
|
|
} |
|
|
|
} |
|
|
|
@@ -827,16 +847,16 @@ export default { |
|
|
|
} else if (index == 1) { |
|
|
|
index = 0; |
|
|
|
} else if (index == 2) { |
|
|
|
index = 1 |
|
|
|
index = 1; |
|
|
|
} |
|
|
|
if($event.target.checked) { |
|
|
|
if ($event.target.checked) { |
|
|
|
// 设置初始采样点统计图数据 |
|
|
|
this.pointList = this.allPointList[index]; |
|
|
|
this.pointParamsData = this.pointList.cod; |
|
|
|
this.pointParamsData = this.pointList.cod; |
|
|
|
// 设置采样点图层以及采样点数据显示 |
|
|
|
this.dotPlace.setVisible(true); |
|
|
|
this.isPoint = true; |
|
|
|
// 设置排水口以及土地数据不显示 |
|
|
|
// 设置排水口以及土地数据不显示 |
|
|
|
} else { |
|
|
|
this.dotPlace.setVisible(false); |
|
|
|
this.isPoint = false; |
|
|
|
@@ -847,30 +867,28 @@ export default { |
|
|
|
if (index == 0) { |
|
|
|
index = 3; |
|
|
|
} |
|
|
|
if($event.target.checked) { |
|
|
|
if ($event.target.checked) { |
|
|
|
// 1-3-1 设置面积占比数据 |
|
|
|
let arr = this.allLanduseList[index]; |
|
|
|
|
|
|
|
let data=[]; |
|
|
|
arr.forEach(item=>{ |
|
|
|
for(var i=0;i<data.length;i++){ |
|
|
|
|
|
|
|
if(item.lc==data[i].lc){ |
|
|
|
data[i].area+=parseFloat(item.area) |
|
|
|
data[i].ratio+=parseFloat(item.ratio) |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
if(i==data.length){ |
|
|
|
data[data.length]={ |
|
|
|
area:parseFloat(item.area), |
|
|
|
ratio:parseFloat(item.ratio), |
|
|
|
color:item.color, |
|
|
|
lc:item.lc |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
this.landuseList = data |
|
|
|
let data = []; |
|
|
|
arr.forEach((item) => { |
|
|
|
for (var i = 0; i < data.length; i++) { |
|
|
|
if (item.lc == data[i].lc) { |
|
|
|
data[i].area += parseFloat(item.area); |
|
|
|
data[i].ratio += parseFloat(item.ratio); |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
if (i == data.length) { |
|
|
|
data[data.length] = { |
|
|
|
area: parseFloat(item.area), |
|
|
|
ratio: parseFloat(item.ratio), |
|
|
|
color: item.color, |
|
|
|
lc: item.lc, |
|
|
|
}; |
|
|
|
} |
|
|
|
}); |
|
|
|
this.landuseList = data; |
|
|
|
// 1-3-2 设置土地统计图显示，排口以及采样点统计图关闭 |
|
|
|
this.isPlace = true; |
|
|
|
// this.isPoint = false; |
|
|
|
@@ -883,9 +901,8 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
// 2.默认选中第一个参数 |
|
|
|
this.checkedPointParams = 0 |
|
|
|
this.isParams = 'cod' |
|
|
|
|
|
|
|
this.checkedPointParams = 0; |
|
|
|
this.isParams = "cod"; |
|
|
|
}, |
|
|
|
|
|
|
|
// 选择反演参数 |
|
|
|
@@ -896,7 +913,7 @@ export default { |
|
|
|
// 2.显示色带以及相应的值 |
|
|
|
this.showColor = true; |
|
|
|
this.checkedParams = type; |
|
|
|
this.checkedParamsActive = type |
|
|
|
this.checkedParamsActive = type; |
|
|
|
let l = 4 * this.checkedRiver; |
|
|
|
for (let i = l; i < l + 4; i++) { |
|
|
|
this.colorList.push(this.allcolorList[i]); |
|
|
|
@@ -906,19 +923,19 @@ export default { |
|
|
|
|
|
|
|
// 选择河道 |
|
|
|
selectRiver(index) { |
|
|
|
this.isParams = 'cod' |
|
|
|
this.checkedParamsActive = '' |
|
|
|
this.checkedPointParams = 0 |
|
|
|
this.isParams = "cod"; |
|
|
|
this.checkedParamsActive = ""; |
|
|
|
this.checkedPointParams = 0; |
|
|
|
// 初始化this.colorList 东风河 |
|
|
|
// 1.根据所选河道变换对应的位置以及缩放信息 |
|
|
|
// 设置当前河道值为index |
|
|
|
this.checkedRiver = parseInt(index.slice(0,1)); |
|
|
|
this.checkedRiver = parseInt(index.slice(0, 1)); |
|
|
|
if (index == 0) { |
|
|
|
this.view.animate( |
|
|
|
{zoom:15}, |
|
|
|
{ zoom: 15 }, |
|
|
|
{ |
|
|
|
center: transform([118.89544, 31.884104], "EPSG:4326", "EPSG:3857"), |
|
|
|
}, |
|
|
|
} |
|
|
|
); |
|
|
|
} |
|
|
|
if (index == 1) { |
|
|
|
@@ -942,7 +959,7 @@ export default { |
|
|
|
"EPSG:4326", |
|
|
|
"EPSG:3857" |
|
|
|
), |
|
|
|
}, |
|
|
|
} |
|
|
|
); |
|
|
|
} |
|
|
|
// 2.初始化参数反演图层不显示 |
|
|
|
@@ -959,14 +976,13 @@ export default { |
|
|
|
// 7.关闭统计数据图表 |
|
|
|
this.isPoint = false; |
|
|
|
this.isPlace = false; |
|
|
|
this.isOutlet = false |
|
|
|
this.isOutlet = false; |
|
|
|
// 8.关闭弹出框 |
|
|
|
this.map.removeOverlay(this.overlay); |
|
|
|
this.map.removeOverlay(this.overlayPlace); |
|
|
|
this.map.removeOverlay(this.overlayOutlet); |
|
|
|
// 9.取消所有菜单勾选 |
|
|
|
this.checked = this.checked.map(arr => [false,false,false]) |
|
|
|
|
|
|
|
this.checked = this.checked.map((arr) => [false, false, false]); |
|
|
|
}, |
|
|
|
// 关闭河道菜单 |
|
|
|
handleClose(key, keyPath) { |
|
|
|
@@ -1007,23 +1023,24 @@ export default { |
|
|
|
}, |
|
|
|
// 选择采样点参数 |
|
|
|
choosePointItem(item, index) { |
|
|
|
this.isParams = item |
|
|
|
this.isParams = item; |
|
|
|
this.checkedPointParams = index; |
|
|
|
this.pointParamsData = this.pointList[item]; |
|
|
|
}, |
|
|
|
// 自定义事件关闭弹出框 |
|
|
|
closePointPopup() { // 关闭采样点弹出框 |
|
|
|
closePointPopup() { |
|
|
|
// 关闭采样点弹出框 |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlay) |
|
|
|
this.map.removeOverlay(this.overlay); |
|
|
|
}, |
|
|
|
closePlacePopup() { |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlayPlace) |
|
|
|
this.map.removeOverlay(this.overlayPlace); |
|
|
|
}, |
|
|
|
closeOutletPopup() { |
|
|
|
this.select.getFeatures().clear(); |
|
|
|
this.map.removeOverlay(this.overlayOutlet) |
|
|
|
} |
|
|
|
this.map.removeOverlay(this.overlayOutlet); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
@@ -1048,16 +1065,17 @@ body { |
|
|
|
z-index: 99; |
|
|
|
width: 100%; |
|
|
|
height: 0.7rem; |
|
|
|
background-image: url('../assets/img/gisdemo/top.png'); |
|
|
|
background-image: url("../assets/img/gisdemo/top.png"); |
|
|
|
background-size: cover; |
|
|
|
position: absolute; |
|
|
|
top: 0px; |
|
|
|
} |
|
|
|
/* 全屏 */ |
|
|
|
/deep/.ol-full-screen, .ol-control { |
|
|
|
position: absolute; |
|
|
|
right: .5em; |
|
|
|
top: 5em |
|
|
|
/deep/.ol-full-screen, |
|
|
|
.ol-control { |
|
|
|
position: absolute; |
|
|
|
right: 0.5em; |
|
|
|
top: 5em; |
|
|
|
} |
|
|
|
/* 标志信息 */ |
|
|
|
.mark { |
|
|
|
@@ -1177,7 +1195,7 @@ body { |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
.el-menu-item.is-active { |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
.el-submenu { |
|
|
|
text-align: start; |
|
|
|
@@ -1201,7 +1219,7 @@ body { |
|
|
|
.chartBtn { |
|
|
|
width: 0.8rem; |
|
|
|
height: 0.22rem; |
|
|
|
background-image: url('../assets/img/gisdemo/head-date.png'); |
|
|
|
background-image: url("../assets/img/gisdemo/head-date.png"); |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.chartBox { |
|
|
|
@@ -1250,7 +1268,6 @@ body { |
|
|
|
color: #000; |
|
|
|
font-size: 0.12rem; |
|
|
|
line-height: 0.23rem; |
|
|
|
|
|
|
|
} |
|
|
|
.utils { |
|
|
|
font-size: 0.12rem; |
|
|
|
@@ -1371,7 +1388,7 @@ body { |
|
|
|
|
|
|
|
/* 高亮显示 */ |
|
|
|
.btnActive { |
|
|
|
background-color: #0091FF; |
|
|
|
background-color: #0091ff; |
|
|
|
} |
|
|
|
.riverActive { |
|
|
|
background-image: url("../assets/img/gisdemo/river-h.png"); |
|
|
|
@@ -1383,18 +1400,17 @@ body { |
|
|
|
} |
|
|
|
.paramsActive { |
|
|
|
color: #fff !important; |
|
|
|
background-color: #0091FF !important; |
|
|
|
background-color: #0091ff !important; |
|
|
|
} |
|
|
|
.mapActive { |
|
|
|
color: #fff; |
|
|
|
font-size: 0.12rem; |
|
|
|
background-color: #0091FF; |
|
|
|
background-color: #0091ff; |
|
|
|
} |
|
|
|
.pointParamsActive { |
|
|
|
height: 0.23rem; |
|
|
|
color: #fff; |
|
|
|
font-size: 0.12rem; |
|
|
|
background: #0091FF; |
|
|
|
background: #0091ff; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
