gitadmin
/
gisdemo_web_discard_20240715
Watch 2
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

修改部分bug

Version1.0
YF-yuan 3 years ago
parent
7230468053
commit
d5a179d614
11 changed files with 94 additions and 54 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      public/index.html
  2. BIN
      src/assets/img/gisdemo/outletImg.jpg
  3. BIN
      src/assets/img/gisdemo/outletImg.png
  4. BIN
      src/assets/img/gisdemo/outletImg2.png
  5. BIN
      src/assets/img/gisdemo/point-h.png
  6. BIN
      src/assets/img/gisdemo/定位.png
  7. +81
    -41
      src/views/Home.vue
  8. +7
    -7
      src/views/leftCompoents/landUse.vue
  9. +3
    -3
      src/views/leftCompoents/outletComponents.vue
  10. +1
    -1
      src/views/leftCompoents/placeComponent.vue
  11. +1
    -1
      src/views/leftCompoents/popupComponents.vue

+ 1
- 1
public/index.html View File

@@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<title>水生态环境检测平台</title>
</head>
<body>
<noscript>

BIN
src/assets/img/gisdemo/outletImg.jpg View File

Before After
Width: 447  |  Height: 335  |  Size: 24KB

BIN
src/assets/img/gisdemo/outletImg.png View File

Before After
Width: 260  |  Height: 150  |  Size: 83KB

BIN
src/assets/img/gisdemo/outletImg2.png View File

Before After
Width: 260  |  Height: 150  |  Size: 86KB

BIN
src/assets/img/gisdemo/point-h.png View File

Before After
Width: 30  |  Height: 30  |  Size: 1.3KB

BIN
src/assets/img/gisdemo/定位.png View File

Before After
Width: 30  |  Height: 30  |  Size: 1.4KB

+ 81
- 41
src/views/Home.vue View File

@@ -15,7 +15,6 @@

<!-- 统计弹框 -->
<div class="chart" v-if="isPoint || isPlace">
<div class="chartBtn"></div>
<div class="chartBox">
<div class="cancelChart" @click="cancelChart">
<img class="closeBtn" src="../assets/img/gisdemo/close.png" alt="">
@@ -23,7 +22,7 @@
<div class="chartContent">
<div class="pointChart" v-if="isPoint">
<div class="placeTitle">采样点水质信息统计</div>
<div class="placeTitle">采样点数据分析</div>
<div class="chooseParams">
<p
class="parmasItem"
@@ -41,7 +40,7 @@

<div class="placeChart" v-if="isPlace">
<div class="placeTitle">土地利用面积占比</div>
<div class="placeTitle">土地利用数据分析</div>
<land-use :dataList="landuseList" :color="landColor"></land-use>
</div>
</div>
@@ -53,11 +52,11 @@
<popup-compoents :dataList="popupData" @closePopup='closePointPopup'></popup-compoents>
</div>

<div class="showPopup" ref="placePopup">
<div class="showPopupPlace" ref="placePopup">
<place-component :dataList="popupPlace" @closePlace='closePlacePopup'></place-component>
</div>

<div class="showPopup" ref="outletPopup">
<div class="showPopupOutlet" ref="outletPopup">
<outlet-components :dataList="popupOutlet" @closeOutlet='closeOutletPopup'></outlet-components>
</div>

@@ -139,21 +138,21 @@

<!-- 地图切换 -->
<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">
<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="TDmap" :class="{ mapActive: isChecked == 'TDmap' }"
<label class="mapText" for="UAV" :class="{ mapActive: isUAV }"
>无人机影像图</label
>
<input type="checkbox" id="TDmap" :checked="isChecked == 'TDmap'" />
<input type="checkbox" id="UAV" :checked="isUAV" />
</div>
</div>
</div>
@@ -239,13 +238,14 @@ export default {
isPoint: false, // 是否点击采样点
isPlace: false, // 是否点击土地
isOutlet: false, // 是否为排口
isUAV: false,
// 总菜单
riverList: [
{
id: 0,
name: "解溪河",
item: [
{ type: "cod", value: 1, name: '高猛酸盐指数', cf: 'COD_Mn' },
{ 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' },
@@ -255,7 +255,7 @@ export default {
id: 5,
name: "东风河",
item: [
{ type: "cod", value: 6, name: '高猛酸盐指数', cf: 'COD_Mn' },
{ 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' },
@@ -265,7 +265,7 @@ export default {
id: 10,
name: "秦淮新河",
item: [
{ type: "cod", value: 11, name: '高猛酸盐指数', cf: 'COD_Mn' },
{ 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' },
@@ -394,6 +394,18 @@ export default {
rotateWithView: true,
}),
});
let pointActiveIcon = new Style({
image: new Icon({
anchor: [0.5, 0.5],
src: require('@/assets/img/gisdemo/point-h.png')
})
})
let outletActiveIcon = new Style({
image: new Icon({
anchor: [0.5, 0.5],
src: require('@/assets/img/gisdemo/outlet-h.png')
})
})
this.dotPlace = new VectorLayer({
source: vectorDot,
style: icon,
@@ -636,7 +648,7 @@ export default {
view: this.view,
});

// 切换底图
// 切换底图 与无人机影像的叠加
let changeMap = document.getElementById("changeMap");
changeMap.addEventListener("click", (event) => {
if (event.target.checked) {
@@ -645,18 +657,14 @@ export default {
this.isChecked = "osm";
this.map.getLayers().item(0).setVisible(true);
this.map.getLayers().item(1).setVisible(false);
this.map.getLayers().item(3).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(3).setVisible(false);
break;
case "TDmap":
this.isChecked = "TDmap";
// this.map.getLayers().item(0).setVisible(false);
// this.map.getLayers().item(1).setVisible(true);
case "UAV":
this.isUAV = true;
this.map.getLayers().item(3).setVisible(true);
break;
default:
@@ -668,19 +676,15 @@ export default {
this.isChecked = "google";
this.map.getLayers().item(0).setVisible(false);
this.map.getLayers().item(1).setVisible(true);
this.map.getLayers().item(3).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(3).setVisible(false);
break;
case "TDmap":
this.isChecked = "google";
case "UAV":
this.isUAV = false;
this.map.getLayers().item(3).setVisible(false);
this.map.getLayers().item(1).setVisible(true);
this.map.getLayers().item(0).setVisible(false);
break;
default:
break;
@@ -706,7 +710,14 @@ export default {
positioning: "bottom-center",
})
this.select = new Select();
this.select = new Select({
style:(feature)=>{
console.log(feature.geometryChangeKey_.target)
if(feature.geometryChangeKey_.target.Point) {

}
}
});
this.map.addInteraction(this.select);
this.select.on("select", (e) => {
if (e.selected.length > 0) {
@@ -721,6 +732,7 @@ export default {
this.map.removeOverlay(this.overlayOutlet)
this.map.addOverlay(this.overlay);
} else { // 表示为排口数据
console.log(properties);
this.popupOutlet = properties
let coordinate = e.mapBrowserEvent.coordinate;
this.overlayOutlet.setPosition(coordinate);
@@ -947,7 +959,15 @@ export default {
// 选择采样点参数
choosePointItem(item, index) {
this.checkedPointParams = index;
console.log(item);
this.pointParamsData = this.pointList[item];
if(item=='tp') {
console.log(this.pointParamsData);
this.pointParamsData = this.pointParamsData.forEach(item=> {
(item.value/1000).toFixed(2)
})
}
console.log(this.pointParamsData);
},
// 自定义事件关闭弹出框
closePointPopup() { // 关闭采样点弹出框
@@ -1061,13 +1081,13 @@ body {
}
/* 菜单 */
#rightSide {
width: 160px;
width: 180px;
position: absolute;
top: 100px;
right: 10px;
}
.controlTitle {
width: 160px;
width: 180px;
height: 40px;
padding-left: 20px;
font-size: 16px;
@@ -1080,7 +1100,7 @@ body {
text-align: start;
}
.el-menu {
width: 160px;
width: 180px;
overflow: hidden;
}
/deep/ .el-menu-item-group {
@@ -1091,16 +1111,29 @@ body {
}

/deep/ .el-menu-item {
padding-left: 30px !important;
padding-left: 20px !important;
font-size: 12px;
position: relative;
}
/deep/ .el-menu-item-group .el-submenu__title {
font-weight: 400;
font-size: 12px;
padding-left: 40px !important;
}
/deep/ .el-submenu__title {
height: 40px;
line-height: 40px;
padding: 20px !important;
display: flex;
align-items: center;
font-weight: 600;
}
.el-menu-item:focus, .el-menu-item:hover {
outline: 0;
background-color: #e0e8f0;
}
/deep/.el-menu-item-group .el-menu-item-group__title {
padding: 0 !important;
}
.el-menu-item.is-active {
color: #333;
@@ -1109,7 +1142,7 @@ body {
text-align: start;
}
.refcheck {
height: 100%;
width: 100%;
margin-left: 8px;
}
/* 数据统计弹框 */
@@ -1204,9 +1237,13 @@ body {
padding: 10px;
background-color: rgb(255, 255, 255);
}
.showPopup {
.showPopupPlace {
width: 250px;
height: 240px;
padding: 10px;
background-color: rgb(255, 255, 255);
}
.showPopupOutlet {
width: 220px;
padding: 10px;
background-color: rgb(255, 255, 255);
}
@@ -1231,6 +1268,9 @@ body {
background-color: #ffffff;
cursor: pointer;
}
.google {
margin-left: -30px;
}
#changeMap input {
display: none;
}

+ 7
- 7
src/views/leftCompoents/landUse.vue View File

@@ -50,7 +50,7 @@ chart.scale('ratio', {
  },
});
chart.coordinate('theta', {
  radius: 0.55,
  radius: 0.6,
  innerRadius: 0.7,
});
chart.tooltip({
@@ -64,19 +64,19 @@ chart
  .annotation() // 注释
  .text({
    position: ['50%', '50%'],
    content: '土地占有面积',
    content: '土地利用占比',
    style: {
      fontSize: 14,
      fontSize: 12,
      fill: '#333',
      textAlign: 'center',
    },
    offsetY: -10,
    offsetY: -5,
  })
  .text({
    position: ['50%', '50%'],
    content: '单位：',
    style: {
      fontSize: 14,
      fontSize: 10,
      fill: '#333',
      textAlign: 'center',
    },
@@ -87,12 +87,12 @@ chart
    position: ['50%', '50%'],
    content: '公顷',
    style: {
      fontSize: 14,
      fontSize: 10,
      fill: '#333',
      textAlign: 'center',
    },
    offsetY: 20,
    offsetX: 20,
    offsetX: 15,
  });
chart
  .interval()

+ 3
- 3
src/views/leftCompoents/outletComponents.vue View File

@@ -6,10 +6,10 @@
</p>
<ul class="paramsList">
<li class="value">
<span>经度：{{dataList.lon}}</span>
<span>纬度：{{dataList.lat}}</span>
<span>经度：{{dataList.lon=='0.0'?'118.808797':dataList.lon}}</span>
<span>纬度：{{dataList.lat=='0.0'?'31.996371':dataList.lat}}</span>
<span class="imgtitle">现场照片</span>
<img class="outletImg" src="../../assets/img/gisdemo/outletImg.jpg" alt="">
<img class="outletImg" src="../../assets/img/gisdemo/outletImg.png" alt="">
</li>
</ul>
</div>

+ 1
- 1
src/views/leftCompoents/placeComponent.vue View File

@@ -42,7 +42,7 @@ export default {
#placeComponent {
width: 100%;
height: 100%;
padding: 20px;
padding: 10px;
background-size: contain;
display: flex;
flex-direction: column;

+ 1
- 1
src/views/leftCompoents/popupComponents.vue View File

@@ -15,7 +15,7 @@
<span class="upImg" v-show="dataList.tn > 1"></span>
</li>
<li class="value">
<span>TP：{{(dataList.tp)/1000}} mg/L</span>
<span>TP：{{((dataList.tp)/1000).toFixed(2)}} mg/L</span>
<span class="upImg" v-show="dataList.tp > 0.2"></span>
</li>
<li class="value">

Write Preview
Loading…
Cancel
Save