|
|
|
@@ -0,0 +1,976 @@ |
|
|
|
<template> |
|
|
|
<div class="home" style="position: relative"> |
|
|
|
<!-- nav --> |
|
|
|
<div class="nav"></div> |
|
|
|
<!-- 地图 --> |
|
|
|
<div id="map"></div> |
|
|
|
<!-- 占地图例信息 --> |
|
|
|
<ul id="landmark" v-for="(item, index) in landColorList"> |
|
|
|
<div class="landItem"></div> |
|
|
|
</ul> |
|
|
|
<!-- 左侧菜单 --> |
|
|
|
<div id="leftSide"> |
|
|
|
<!-- 大标题 --> |
|
|
|
<div class="mainTitle"></div> |
|
|
|
<!-- 统计图表 --> |
|
|
|
<div class="charts"> |
|
|
|
<!-- 采样点柱状图 --> |
|
|
|
<div class="pointContainer" v-if="ischeckRef == 'point'"> |
|
|
|
<div class="pointBtnlist"> |
|
|
|
<div |
|
|
|
@click="changeParams('cod', currentRiver)" |
|
|
|
class="pointbtn" |
|
|
|
:class="{ btnActive: isParams == 'cod' }" |
|
|
|
> |
|
|
|
COD |
|
|
|
</div> |
|
|
|
<div |
|
|
|
@click="changeParams('tn', currentRiver)" |
|
|
|
class="pointbtn" |
|
|
|
:class="{ btnActive: isParams == 'tn' }" |
|
|
|
> |
|
|
|
TN |
|
|
|
</div> |
|
|
|
<div |
|
|
|
@click="changeParams('nh4_n', currentRiver)" |
|
|
|
class="pointbtn" |
|
|
|
:class="{ btnActive: isParams == 'nh4_n' }" |
|
|
|
> |
|
|
|
NH4_N |
|
|
|
</div> |
|
|
|
<div |
|
|
|
@click="changeParams('tp', currentRiver)" |
|
|
|
class="pointbtn" |
|
|
|
:class="{ btnActive: isParams == 'tp' }" |
|
|
|
> |
|
|
|
TP |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<point-qulity :dataList="dataList" id="pointQulity"></point-qulity> |
|
|
|
</div> |
|
|
|
<!-- 土地利用环状图 --> |
|
|
|
<land-use |
|
|
|
:dataList="landUseList" |
|
|
|
id="landUse" |
|
|
|
v-if="ischeckRef == 'landuse'" |
|
|
|
></land-use> |
|
|
|
<!-- 排口折线图 --> |
|
|
|
</div> |
|
|
|
<!-- 排口、水质、土地利用 --> |
|
|
|
<div class="reference"> |
|
|
|
<div |
|
|
|
class="chooseRef" |
|
|
|
@click="chooseRef('outlet')" |
|
|
|
:class="{ refActive: refrence == 'outlet' }" |
|
|
|
> |
|
|
|
排口 |
|
|
|
<i class="outletimg"></i> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="chooseRef" |
|
|
|
@click="chooseRef('point')" |
|
|
|
:class="{ refActive: refrence == 'point' }" |
|
|
|
> |
|
|
|
采样点水质 |
|
|
|
<i class="pointimg"></i> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
class="chooseRef" |
|
|
|
@click="chooseRef('landuse')" |
|
|
|
:class="{ refActive: refrence == 'landuse' }" |
|
|
|
> |
|
|
|
土地利用 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 弹出框 --> |
|
|
|
<div class="showPopup" ref="popup"> |
|
|
|
<popup-compoents :dataList="popupData"></popup-compoents> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 右侧 --> |
|
|
|
<div id="rightSide"> |
|
|
|
<!-- 实验河道切换 --> |
|
|
|
<div id="selectRiver"> |
|
|
|
<div class="titleTxt">河道切换</div> |
|
|
|
<div class="control" v-for="(item, index) in riverList" :key="index"> |
|
|
|
<div |
|
|
|
class="riverItem" |
|
|
|
@click="selectRiver(item.id, index)" |
|
|
|
:class="{ riverActive: currentRiver == item.id }" |
|
|
|
> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 水质参数反演 --> |
|
|
|
<div id="lists"> |
|
|
|
<div class="titleTxt"> |
|
|
|
<span>{{ fourData.name }}</span> |
|
|
|
水质检测参数 |
|
|
|
</div> |
|
|
|
<div class="control"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in fourData.item" |
|
|
|
:key="index" |
|
|
|
@click="selectLayers(item.value,index)" |
|
|
|
:class="{paramsActive:index==currentParams}" |
|
|
|
> |
|
|
|
{{ item.type }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 色带 --> |
|
|
|
<div id="colorTab"> |
|
|
|
<div class="color"></div> |
|
|
|
<div class="datacolor"> |
|
|
|
<span>{{ colorHL&&colorHL.value.high }}</span> |
|
|
|
<span>{{ colorHL&&colorHL.value.low }}</span> |
|
|
|
</div> |
|
|
|
<div class="colorPoint"> |
|
|
|
<span>{{colorHL.type}}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 地图切换 --> |
|
|
|
<div id="changeMap"> |
|
|
|
<p class="titleTxt">地图切换</p> |
|
|
|
<div class="control"> |
|
|
|
<div class="mapItem"> |
|
|
|
<label for="osm">OSM</label> |
|
|
|
<input type="checkbox" id="osm" :checked="isChecked == 'osm'" /> |
|
|
|
</div> |
|
|
|
<div class="mapItem"> |
|
|
|
<label for="google">google</label> |
|
|
|
<input |
|
|
|
type="checkbox" |
|
|
|
id="google" |
|
|
|
:checked="isChecked == 'google'" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="mapItem"> |
|
|
|
<label for="TDmap">TDmap</label> |
|
|
|
<input type="checkbox" id="TDmap" :checked="isChecked == 'TDmap'" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import pointQulity from "./leftCompoents/pointQulity"; |
|
|
|
import landUse from "./leftCompoents/landUse"; |
|
|
|
import popupCompoents from "./leftCompoents/popupComponents"; |
|
|
|
import "ol/ol.css"; |
|
|
|
import { Map as OMap, View } from "ol"; |
|
|
|
import { |
|
|
|
OSM, |
|
|
|
ImageArcGISRest, |
|
|
|
XYZ, |
|
|
|
TileArcGISRest, |
|
|
|
Vector as VectorSource, |
|
|
|
ImageWMS, |
|
|
|
TileWMS, |
|
|
|
} from "ol/source"; |
|
|
|
import { |
|
|
|
Tile as TileLayer, |
|
|
|
Image as ImageLayer, |
|
|
|
Vector as VectorLayer, |
|
|
|
} from "ol/layer"; |
|
|
|
import { |
|
|
|
transform, |
|
|
|
get as getProjection, |
|
|
|
getTransform, |
|
|
|
addProjection, |
|
|
|
addCoordinateTransforms, |
|
|
|
} from "ol/proj"; |
|
|
|
import TileGrid from "ol/tilegrid/TileGrid"; |
|
|
|
import GeoJSON from "ol/format/GeoJSON"; |
|
|
|
import { Fill, Stroke, Style } from "ol/style"; |
|
|
|
import jsonp from "jsonp"; |
|
|
|
import WMSCapabilities from "ol/format/WMSCapabilities"; |
|
|
|
import axios from "axios"; |
|
|
|
// 弹出框 |
|
|
|
import { Select } from "ol/interaction"; |
|
|
|
import Overlay from "ol/Overlay"; |
|
|
|
import { Point } from "ol/geom"; |
|
|
|
// 重新投影 |
|
|
|
import { applyTransform } from "ol/extent"; |
|
|
|
import proj4 from "proj4"; |
|
|
|
import proj from "ol/proj"; |
|
|
|
import { Projection } from "ol/proj"; |
|
|
|
import * as control from "ol/control"; |
|
|
|
import { register } from "ol/proj/proj4"; |
|
|
|
import LandUse from "./leftCompoents/landUse.vue"; |
|
|
|
import WMSGetFeatureInfo from "ol/format/WMSGetFeatureInfo"; |
|
|
|
axios.defaults.baseURL=process.env.VUE_APP_BASE_URL; |
|
|
|
export default { |
|
|
|
name: "gisdemo-index", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
map: null, |
|
|
|
view: null, |
|
|
|
num: 0, |
|
|
|
source: null, |
|
|
|
sourceDong4: null, |
|
|
|
river: "river2", |
|
|
|
landColorList: [], |
|
|
|
landColor: null, |
|
|
|
center: [116.632997, 30.113954], |
|
|
|
zoom: 12, |
|
|
|
ischeckRef: "point", |
|
|
|
regions: [], |
|
|
|
// 色带取值 |
|
|
|
oneColor: [], |
|
|
|
twoColor: [], |
|
|
|
threeColor: [], |
|
|
|
colorList: {}, |
|
|
|
colorHL: { |
|
|
|
type:'东风河_COD', |
|
|
|
value: { |
|
|
|
high: 9, |
|
|
|
low: 7 |
|
|
|
} |
|
|
|
}, |
|
|
|
dataList: [],// 采样点数据 |
|
|
|
landUseList: [],//土地利用占比数据 |
|
|
|
landuseAll:{},// 三条河土地占比数据 |
|
|
|
isChecked: "google", |
|
|
|
// 弹出框数据 |
|
|
|
popupData: {}, |
|
|
|
isParams: "cod", |
|
|
|
currentRiver: 5, |
|
|
|
// 所有采样点数据 |
|
|
|
allPointdata: [], |
|
|
|
// |
|
|
|
currentParams: 0, |
|
|
|
dotPlace: null, |
|
|
|
refrence: "point", |
|
|
|
isPoint: false, |
|
|
|
fourData: { |
|
|
|
id: 5, |
|
|
|
name: "东风河", |
|
|
|
item: [ |
|
|
|
{ type: "cod", value: 6 }, |
|
|
|
{ type: "tn", value: 7 }, |
|
|
|
{ type: "tp", value: 8 }, |
|
|
|
{ type: "nh4_n", value: 9 }, |
|
|
|
], |
|
|
|
}, |
|
|
|
riverList: [ |
|
|
|
{ |
|
|
|
id: 0, |
|
|
|
name: "解溪河", |
|
|
|
item: [ |
|
|
|
{ type: "cod", value: 1 }, |
|
|
|
{ type: "tn", value: 2 }, |
|
|
|
{ type: "tp", value: 3 }, |
|
|
|
{ type: "nh4_n", value: 4 }, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
name: "东风河", |
|
|
|
item: [ |
|
|
|
{ type: "cod", value: 6 }, |
|
|
|
{ type: "tn", value: 7 }, |
|
|
|
{ type: "tp", value: 8 }, |
|
|
|
{ type: "nh4_n", value: 9 }, |
|
|
|
], |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 10, |
|
|
|
name: "秦淮新河", |
|
|
|
item: [ |
|
|
|
{ type: "cod", value: 11 }, |
|
|
|
{ type: "tn", value: 12 }, |
|
|
|
{ type: "tp", value: 13 }, |
|
|
|
{ type: "nh4_n", value: 14 }, |
|
|
|
], |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
components: { pointQulity, landUse, popupCompoents }, |
|
|
|
created() { |
|
|
|
// 采样点数据 |
|
|
|
let vectorDot = new VectorSource({ |
|
|
|
projection: "EGSP:3857", |
|
|
|
}); |
|
|
|
let paramVaules = {}; |
|
|
|
axios |
|
|
|
.get( |
|
|
|
"/api" + |
|
|
|
"?service=WFS&version=1.0.0&request=GetFeature&typeName=demo%3Asample_all&maxFeatures=50" |
|
|
|
) |
|
|
|
.then((res) => { |
|
|
|
let features = new WMSGetFeatureInfo().readFeatures(res.data); |
|
|
|
features.forEach((feature) => { |
|
|
|
let obj = feature.getProperties(); |
|
|
|
if (paramVaules[obj["river"]]) { |
|
|
|
paramVaules[obj["river"]].cod.push({ |
|
|
|
value: obj.cod, |
|
|
|
key: paramVaules[obj["river"]].cod.length, |
|
|
|
}); |
|
|
|
paramVaules[obj["river"]].tp.push({ |
|
|
|
value: obj.tp, |
|
|
|
key: paramVaules[obj["river"]].tp.length, |
|
|
|
}); |
|
|
|
paramVaules[obj["river"]].tn.push({ |
|
|
|
value: obj.tn, |
|
|
|
key: paramVaules[obj["river"]].tn.length, |
|
|
|
}); |
|
|
|
paramVaules[obj["river"]]["nh4_n"].push({ |
|
|
|
value: obj["nh4_n"], |
|
|
|
key: paramVaules[obj["river"]]["nh4_n"].length, |
|
|
|
}); |
|
|
|
} else { |
|
|
|
paramVaules[obj["river"]] = {}; |
|
|
|
paramVaules[obj["river"]].cod = []; |
|
|
|
paramVaules[obj["river"]].tp = []; |
|
|
|
paramVaules[obj["river"]].tp = []; |
|
|
|
paramVaules[obj["river"]].tn = []; |
|
|
|
paramVaules[obj["river"]]["nh4_n"] = []; |
|
|
|
} |
|
|
|
}); |
|
|
|
vectorDot.addFeatures(features); |
|
|
|
for (var key in paramVaules) { |
|
|
|
this.allPointdata.push(paramVaules[key]); |
|
|
|
} |
|
|
|
this.dataList = this.allPointdata[0].cod; |
|
|
|
}); |
|
|
|
this.dotPlace = new VectorLayer({ |
|
|
|
source: vectorDot, |
|
|
|
}); |
|
|
|
|
|
|
|
// color色带数据 |
|
|
|
let regions = []; |
|
|
|
axios |
|
|
|
.get( |
|
|
|
"http://121.4.38.11:6080/arcgis/rest/services/demo/result_rasters/MapServer/legend?f=pjson" |
|
|
|
) |
|
|
|
.then((res) => { |
|
|
|
let layers = res.data.layers; |
|
|
|
layers.forEach((layer) => { |
|
|
|
let region = { high: 0, low: 0 }; |
|
|
|
let obj={type:layer.layerName,value:region} |
|
|
|
layer.legend.forEach((label) => { |
|
|
|
let stop = label.label; |
|
|
|
let arr = stop.split(":"); |
|
|
|
if (arr.length > 1) { |
|
|
|
arr[1] = parseFloat(arr[1]); |
|
|
|
if (region.high > arr[1]) { |
|
|
|
region.low = arr[1]; |
|
|
|
} else { |
|
|
|
region.high = arr[1]; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
regions.push(obj); |
|
|
|
}); |
|
|
|
this.region = regions |
|
|
|
// 分割每条河的色带值 |
|
|
|
this.oneColor = regions.splice(0,4) |
|
|
|
this.twoColor = regions.splice(0,4) |
|
|
|
this.threeColor = regions.splice(0,4) |
|
|
|
this.colorList = this.twoColor[0] |
|
|
|
}); |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// 颜色 |
|
|
|
// 土地占有面积 |
|
|
|
this.landColor = [ |
|
|
|
["居民小区", "blue"], |
|
|
|
["城市绿化用地", "pink"], |
|
|
|
["道路", "green"], |
|
|
|
["河道边坡生态岸线", "skyblue"], |
|
|
|
["商服用地", "red"], |
|
|
|
["建筑工地", "rgb(168, 112, 0)"], |
|
|
|
['建设用地',"green"], |
|
|
|
["生态绿化用地","red"], |
|
|
|
["生态护岸","black"], |
|
|
|
["农田","yellow"], |
|
|
|
["草地","greed"], |
|
|
|
["灌木林地","pink"], |
|
|
|
["交通用地","black"], |
|
|
|
["居民点","skyblue"], |
|
|
|
["堆料场","yellow"], |
|
|
|
["工矿企业","red"], |
|
|
|
["未利用地","green"], |
|
|
|
["水域","blue"], |
|
|
|
["教育用地","green"], |
|
|
|
["居民地","greed"], |
|
|
|
["拆迁未利用地",'greed'], |
|
|
|
["堆土","yellow"], |
|
|
|
]; |
|
|
|
this.landColorList = this.landColor; |
|
|
|
|
|
|
|
// 土地占有面积 |
|
|
|
let styleFunction = this.landColor.map((item) => { |
|
|
|
let style = new Style({ |
|
|
|
fill: new Fill({ |
|
|
|
color: item[1], |
|
|
|
}), |
|
|
|
}); |
|
|
|
return [item[0], style]; |
|
|
|
}); |
|
|
|
styleFunction = new Map(styleFunction); |
|
|
|
this.landColor = new Map(this.landColor); |
|
|
|
let landData = {}; |
|
|
|
let vector = new VectorSource({}); |
|
|
|
axios |
|
|
|
.get( |
|
|
|
"/api" + |
|
|
|
"?service=WFS&version=1.0.0&request=GetFeature&typeName=demo%3Alanduse_all" |
|
|
|
) |
|
|
|
.then((res) => { |
|
|
|
let features = new WMSGetFeatureInfo().readFeatures(res.data); |
|
|
|
features.forEach((feature) => { |
|
|
|
vector.addFeatures(features); |
|
|
|
let obj = feature.getProperties(); |
|
|
|
obj.color = landColor.get(obj.lc); |
|
|
|
if (landData[obj.objectid]) { |
|
|
|
landData[obj.objectid].push(obj); |
|
|
|
} else { |
|
|
|
landData[obj.objectid] = []; |
|
|
|
} |
|
|
|
}); |
|
|
|
// 土地占比数据 |
|
|
|
this.landuseAll= landData; |
|
|
|
this.landUseList = this.landuseAll[0] // 设置土地占比初始值 |
|
|
|
}); |
|
|
|
|
|
|
|
let place = new VectorLayer({ |
|
|
|
source: vector, |
|
|
|
style: (feature) => { |
|
|
|
let lc = feature.getProperties().lc; |
|
|
|
return styleFunction.get(lc); |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
// 加载切片服务 |
|
|
|
// 东风切片（3条） |
|
|
|
let resolutionsDong = [ |
|
|
|
52.91677250021167, |
|
|
|
26.458386250105836, |
|
|
|
13.229193125052918, |
|
|
|
6.614596562526459, |
|
|
|
3.9687579375158752, |
|
|
|
2.6458386250105836, |
|
|
|
1.3229193125052918, |
|
|
|
0.7937515875031751, |
|
|
|
0.26458386250105836, |
|
|
|
0.13229193125052918, |
|
|
|
0.06614596562526459, |
|
|
|
]; |
|
|
|
let originDong = [-2.00377e7, 3.02411e7]; |
|
|
|
let extentDong = [ |
|
|
|
1.3208182632841771e7, |
|
|
|
3745046.606619288, |
|
|
|
1.3236917029063372e7, |
|
|
|
3763312.538603185, |
|
|
|
]; |
|
|
|
let tileGridDong = new TileGrid({ |
|
|
|
tileSize: 128, |
|
|
|
resolutions: resolutionsDong, |
|
|
|
origin: originDong, |
|
|
|
extent: extentDong, |
|
|
|
}); |
|
|
|
let sourceDong = new XYZ({ |
|
|
|
crossOrigin: "Anonymous", |
|
|
|
tileUrlFunction: function (coordinate) { |
|
|
|
return ( |
|
|
|
"http://121.4.38.11:6080/arcgis/rest/services/demo/photo/MapServer/tile/" + |
|
|
|
coordinate[0] + |
|
|
|
"/" + |
|
|
|
coordinate[2] + |
|
|
|
"/" + |
|
|
|
coordinate[1] |
|
|
|
); |
|
|
|
}, |
|
|
|
tileGrid: tileGridDong, |
|
|
|
}); |
|
|
|
let tileDong1 = new TileLayer({ |
|
|
|
// opacity: 0.8, |
|
|
|
minZoom: 15, |
|
|
|
source: sourceDong, |
|
|
|
}); |
|
|
|
|
|
|
|
// 切换图层、加载栅格图层 |
|
|
|
|
|
|
|
// 东风4参数 |
|
|
|
this.sourceDong4 = new ImageArcGISRest({ |
|
|
|
// params: { layers: "show:0" }, |
|
|
|
ratio: 1, |
|
|
|
url: |
|
|
|
"http://121.4.38.11:6080/arcgis/rest/services/demo/result_rasters/MapServer", |
|
|
|
}); |
|
|
|
let tileDong = new ImageLayer({ |
|
|
|
opacity: 0.8, |
|
|
|
source: this.sourceDong4, |
|
|
|
}); |
|
|
|
|
|
|
|
// 底图 |
|
|
|
let google = new TileLayer({ |
|
|
|
projection: "EPSG:4326", |
|
|
|
title: "谷歌地图服务", |
|
|
|
source: new XYZ({ |
|
|
|
url: "http://mt1.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}", |
|
|
|
}), |
|
|
|
visible: true, |
|
|
|
}); |
|
|
|
let osm = new TileLayer({ |
|
|
|
source: new OSM(), |
|
|
|
opacity: 0.5, |
|
|
|
visible: false, |
|
|
|
}); |
|
|
|
// 天地图 |
|
|
|
let sourceTD = new XYZ({ |
|
|
|
url: |
|
|
|
"http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f82bb2fd8115c7fb576a8b2fcf738523", |
|
|
|
// projection: 'EPSG:4326', |
|
|
|
}); |
|
|
|
let TDlayer = new TileLayer({ |
|
|
|
source: sourceTD, |
|
|
|
visible: false, |
|
|
|
minZoom: 8, |
|
|
|
maxZoom: 18, |
|
|
|
}); |
|
|
|
|
|
|
|
this.view = new View({ |
|
|
|
minZoom: 11, |
|
|
|
maxZoom: 19, |
|
|
|
zoom: 17, |
|
|
|
center: transform([118.803623, 31.998328], "EPSG:4326", "EPSG:3857"), |
|
|
|
}); |
|
|
|
this.map = new OMap({ |
|
|
|
controls: control |
|
|
|
.defaults({ attribution: false, zoom: false, rotate: false }) |
|
|
|
.extend([]), |
|
|
|
logo: "false", |
|
|
|
target: "map", |
|
|
|
layers: [ |
|
|
|
osm, |
|
|
|
google, |
|
|
|
TDlayer, |
|
|
|
// tile1, |
|
|
|
place, |
|
|
|
tileDong1, |
|
|
|
tileDong, // 四参数 |
|
|
|
this.dotPlace, //采样点 |
|
|
|
], |
|
|
|
view: this.view, |
|
|
|
}); |
|
|
|
|
|
|
|
let changeMap = document.getElementById("changeMap"); |
|
|
|
changeMap.addEventListener("click", (event) => { |
|
|
|
if (event.target.checked) { |
|
|
|
switch (event.target.id) { |
|
|
|
case "osm": |
|
|
|
this.isChecked = "osm"; |
|
|
|
this.map.getLayers().item(0).setVisible(true); |
|
|
|
this.map.getLayers().item(1).setVisible(false); |
|
|
|
this.map.getLayers().item(2).setVisible(false); |
|
|
|
break; |
|
|
|
case "google": |
|
|
|
this.isChecked = "google"; |
|
|
|
this.map.getLayers().item(0).setVisible(false); |
|
|
|
this.map.getLayers().item(1).setVisible(true); |
|
|
|
this.map.getLayers().item(2).setVisible(false); |
|
|
|
break; |
|
|
|
case "TDmap": |
|
|
|
this.isChecked = "TDmap"; |
|
|
|
this.map.getLayers().item(0).setVisible(false); |
|
|
|
this.map.getLayers().item(1).setVisible(false); |
|
|
|
this.map.getLayers().item(2).setVisible(true); |
|
|
|
break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
} else { |
|
|
|
switch (event.target.id) { |
|
|
|
case "osm": |
|
|
|
this.isChecked = "google"; |
|
|
|
this.map.getLayers().item(0).setVisible(false); |
|
|
|
this.map.getLayers().item(1).setVisible(true); |
|
|
|
this.map.getLayers().item(2).setVisible(false); |
|
|
|
break; |
|
|
|
case "google": |
|
|
|
this.isChecked = "google"; |
|
|
|
this.map.getLayers().item(1).setVisible(true); |
|
|
|
this.map.getLayers().item(0).setVisible(false); |
|
|
|
this.map.getLayers().item(2).setVisible(false); |
|
|
|
break; |
|
|
|
case "TDmap": |
|
|
|
this.isChecked = "google"; |
|
|
|
this.map.getLayers().item(2).setVisible(false); |
|
|
|
this.map.getLayers().item(1).setVisible(true); |
|
|
|
this.map.getLayers().item(0).setVisible(false); |
|
|
|
break; |
|
|
|
default: |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
// 弹出框 |
|
|
|
let overlay = new Overlay({ |
|
|
|
element: this.$refs.popup, |
|
|
|
autoPan: true, |
|
|
|
positioning: "bottom-center", |
|
|
|
}); |
|
|
|
let select = new Select(); |
|
|
|
this.map.addInteraction(select); |
|
|
|
let selectedFeatures = select.getFeatures(); |
|
|
|
select.on("select", (e) => { |
|
|
|
if (e.selected.length > 0) { |
|
|
|
let properties = e.selected[0].getProperties(); |
|
|
|
|
|
|
|
if (properties.geom instanceof Point) { |
|
|
|
this.popupData = properties |
|
|
|
let coordinate = e.mapBrowserEvent.coordinate; |
|
|
|
overlay.setPosition(coordinate); |
|
|
|
overlay.setOffset([140,-10]) |
|
|
|
this.map.addOverlay(overlay); |
|
|
|
}else{ |
|
|
|
this.map.removeOverlay(overlay); |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.map.removeOverlay(overlay); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
chooseRef(value) { |
|
|
|
this.ischeckRef = value; |
|
|
|
this.refrence = value; |
|
|
|
this.dataList = this.allPointdata[0].cod; |
|
|
|
}, |
|
|
|
selectLayers(value,index) { |
|
|
|
this.sourceDong4.updateParams({ layers: "show:" + value }); |
|
|
|
this.colorHL = this.colorList[index]; |
|
|
|
this.currentParams = index |
|
|
|
}, |
|
|
|
selectRiver(value, index) { |
|
|
|
// 初始化this.colorList 东风河 |
|
|
|
this.colorHL = {} |
|
|
|
console.log(this.colorList); |
|
|
|
this.landUseList = this.landuseAll[index+1] |
|
|
|
this.currentRiver = value; |
|
|
|
this.sourceDong4.updateParams({ layers: "show:" + value }); |
|
|
|
this.fourData = this.riverList[index]; |
|
|
|
if(index == 0) { |
|
|
|
this.colorList = this.oneColor |
|
|
|
} |
|
|
|
if(index == 1) { |
|
|
|
this.colorList = this.twoColor |
|
|
|
} |
|
|
|
if(index == 2) { |
|
|
|
this.colorList = this.threeColor |
|
|
|
} |
|
|
|
if (value == 0) { |
|
|
|
this.river = "river1"; |
|
|
|
this.view.animate({zoom:12},{center:transform([118.89544, 31.884104], "EPSG:4326", "EPSG:3857")},{zoom:15}) |
|
|
|
} |
|
|
|
if (value == 5) { |
|
|
|
this.river = "river2"; |
|
|
|
this.view.animate({zoom:12},{center:transform([118.803623, 31.998328], "EPSG:4326", "EPSG:3857")},{zoom:17}) |
|
|
|
} |
|
|
|
if (value == 10) { |
|
|
|
this.river = "river3"; |
|
|
|
this.view.animate({zoom:12},{center:transform([118.668429, 31.965454], "EPSG:4326", "EPSG:3857")},{zoom:15}) |
|
|
|
} |
|
|
|
}, |
|
|
|
setProjection(code, name, proj4def, bbox) { |
|
|
|
var newProjCode = "EPSG:" + code; |
|
|
|
proj4.defs(newProjCode, proj4def); |
|
|
|
register(proj4); |
|
|
|
var newProj = getProjection(newProjCode); |
|
|
|
var fromLonLat = getTransform("EPSG:4326", newProj); |
|
|
|
|
|
|
|
var worldExtent = [bbox[1], bbox[2], bbox[3], bbox[0]]; |
|
|
|
newProj.setWorldExtent(worldExtent); |
|
|
|
if (bbox[1] > bbox[3]) { |
|
|
|
worldExtent = [bbox[1], bbox[2], bbox[3] + 360, bbox[0]]; |
|
|
|
} |
|
|
|
var extent = applyTransform(worldExtent, fromLonLat, undefined, 8); |
|
|
|
newProj.setExtent(extent); |
|
|
|
addProjection(newProj); |
|
|
|
addCoordinateTransforms( |
|
|
|
"EPSG:4326", |
|
|
|
"EPSG:32650", |
|
|
|
function (coordinate) { |
|
|
|
return proj4("EPSG:4326", "EPSG:32650", coordinate); |
|
|
|
}, |
|
|
|
function (coordinate) { |
|
|
|
return proj4("EPSG:32650", "EPSG:4326", coordinate); |
|
|
|
} |
|
|
|
); |
|
|
|
}, |
|
|
|
|
|
|
|
// 切换参数 |
|
|
|
changeParams(value, currentRiver) { |
|
|
|
this.isParams = value; |
|
|
|
this.dataList = this.allPointdata[currentRiver][value]; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
html, |
|
|
|
body { |
|
|
|
height: 100%; |
|
|
|
margin: 0; |
|
|
|
padding: 0; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
.home, |
|
|
|
#map { |
|
|
|
height: 100%; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.nav { |
|
|
|
z-index: 99; |
|
|
|
width: 100%; |
|
|
|
height: 70px; |
|
|
|
background-image: url("../assets/img/gisdemo/nav.png"); |
|
|
|
background-size: cover; |
|
|
|
position: fixed; |
|
|
|
top: 0px; |
|
|
|
} |
|
|
|
#leftSide { |
|
|
|
width: 320px; |
|
|
|
height: 90%; |
|
|
|
background-color: #333333c5; |
|
|
|
position: absolute; |
|
|
|
top: 70px; |
|
|
|
left: 0px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
.mainTitle { |
|
|
|
width: 120px; |
|
|
|
height: 24px; |
|
|
|
margin-top: 10px; |
|
|
|
background-image: url("../assets/img/gisdemo/quality.png"); |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
/* 统计图表 */ |
|
|
|
.charts { |
|
|
|
width: 280px; |
|
|
|
height: 320px; |
|
|
|
padding: 20px; |
|
|
|
margin-top: 10px; |
|
|
|
background-color: #18161694; |
|
|
|
} |
|
|
|
.pointContainer { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
.pointContainer .pointBtnlist { |
|
|
|
width: 100%; |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
#pointQulity { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.pointbtn { |
|
|
|
width: 40px; |
|
|
|
height: 22px; |
|
|
|
line-height: 20px; |
|
|
|
text-align: center; |
|
|
|
border: 1px solid #2b7b8a; |
|
|
|
} |
|
|
|
/* 采样点、排口 */ |
|
|
|
.reference { |
|
|
|
width: 320px; |
|
|
|
height: 150px; |
|
|
|
margin-top: 10px; |
|
|
|
background-color: #18161694; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-evenly; |
|
|
|
align-items: center; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
.chooseRef { |
|
|
|
outline: none; |
|
|
|
border: none; |
|
|
|
width: 150px; |
|
|
|
height: 35px; |
|
|
|
background-image: url("../assets/img/gisdemo/button.png"); |
|
|
|
background-size: contain; |
|
|
|
text-align: center; |
|
|
|
line-height: 35px; |
|
|
|
} |
|
|
|
.showPopup { |
|
|
|
width: 178px; |
|
|
|
height: 120px; |
|
|
|
} |
|
|
|
#rightSide { |
|
|
|
width: 200px; |
|
|
|
height: 92%; |
|
|
|
padding: 10px; |
|
|
|
background-color: #18161694; |
|
|
|
position: absolute; |
|
|
|
bottom: 0px; |
|
|
|
right: 0px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
#lists { |
|
|
|
width: 180px; |
|
|
|
height: 150px; |
|
|
|
padding: 10px; |
|
|
|
background-color: #18161694; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
#lists .control { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-content: flex-start; |
|
|
|
} |
|
|
|
#lists > .control div { |
|
|
|
outline: none; |
|
|
|
width: 46px; |
|
|
|
height: 20px; |
|
|
|
margin-top: 10px; |
|
|
|
border: 2px solid #2b7b8a; |
|
|
|
color: #fff; |
|
|
|
font-size: 12px; |
|
|
|
line-height: 20px; |
|
|
|
} |
|
|
|
#changeMap { |
|
|
|
width: 180px; |
|
|
|
height: 50px; |
|
|
|
padding: 10px; |
|
|
|
background-color: #18161694; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
#changeMap .control { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
.mapItem { |
|
|
|
width: 100%; |
|
|
|
margin: 10px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
color: #999999; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
.control input { |
|
|
|
outline: none; |
|
|
|
display: none; |
|
|
|
border: none; |
|
|
|
border-radius: 50%; |
|
|
|
background-color: rgba(51, 51, 51, 0.623); |
|
|
|
} |
|
|
|
#selectRiver { |
|
|
|
width: 180px; |
|
|
|
height: 200x; |
|
|
|
padding: 10px; |
|
|
|
background-color: #18161694; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
#selectRiver .control { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
#selectRiver .riverItem { |
|
|
|
outline: none; |
|
|
|
width: 120px; |
|
|
|
height: 32px; |
|
|
|
margin-top: 10px; |
|
|
|
border: none; |
|
|
|
border-radius: 4px; |
|
|
|
background-color: rgba(51, 51, 51, 0.623); |
|
|
|
color: #fff; |
|
|
|
font-size: 12px; |
|
|
|
background-image: url("../assets/img/gisdemo/river.png"); |
|
|
|
background-size: contain; |
|
|
|
line-height: 32px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
#colorTab { |
|
|
|
width: 180px; |
|
|
|
height: 120px; |
|
|
|
padding: 10px; |
|
|
|
background-color: #18161694; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: flex-start; |
|
|
|
color: #fff; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
#colorTab .color { |
|
|
|
width: 20px; |
|
|
|
height: 120px; |
|
|
|
margin-right: 10px; |
|
|
|
background-image: url("../assets/img/gisdemo/color.jpg"); |
|
|
|
background-size: contain; |
|
|
|
} |
|
|
|
#colorTab .datacolor { |
|
|
|
width: 80px; |
|
|
|
height: 120px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
.titleTxt { |
|
|
|
color: #fff; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
.btnActive { |
|
|
|
background-color: #2b7b8a; |
|
|
|
} |
|
|
|
.riverActive { |
|
|
|
background-image: url("../assets/img/gisdemo/river-h.png"); |
|
|
|
background-size: contain; |
|
|
|
} |
|
|
|
.refActive { |
|
|
|
background-image: url("../assets/img/gisdemo/button-h.png"); |
|
|
|
background-size: cover; |
|
|
|
} |
|
|
|
.paramsActive { |
|
|
|
background-color: #2b7b8a; |
|
|
|
} |
|
|
|
</style> |
YF-yuan
3 years ago
