gitadmin
/
gisdemo_web_discard_20240715
ウォッチ 2
スター 1
フォーク 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki アクティビティ
ソースを参照

修改部分bug

Version1.0
YF-yuan 3年前
親
7230468053
コミット
d5a179d614
11個のファイルの変更、94行の追加、54行の削除
ユニファイド表示
差分オプション
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード
  1. +1
    -1
      public/index.html
  2. バイナリ
      src/assets/img/gisdemo/outletImg.jpg
  3. バイナリ
      src/assets/img/gisdemo/outletImg.png
  4. バイナリ
      src/assets/img/gisdemo/outletImg2.png
  5. バイナリ
      src/assets/img/gisdemo/point-h.png
  6. バイナリ
      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 ファイルの表示

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

バイナリ
src/assets/img/gisdemo/outletImg.jpg ファイルの表示

変更前 変更後
幅: 447  |  高さ: 335  |  サイズ: 24KB

バイナリ
src/assets/img/gisdemo/outletImg.png ファイルの表示

変更前 変更後
幅: 260  |  高さ: 150  |  サイズ: 83KB

バイナリ
src/assets/img/gisdemo/outletImg2.png ファイルの表示

変更前 変更後
幅: 260  |  高さ: 150  |  サイズ: 86KB

バイナリ
src/assets/img/gisdemo/point-h.png ファイルの表示

変更前 変更後
幅: 30  |  高さ: 30  |  サイズ: 1.3KB

バイナリ
src/assets/img/gisdemo/定位.png ファイルの表示

変更前 変更後
幅: 30  |  高さ: 30  |  サイズ: 1.4KB

+ 81
- 41
src/views/Home.vue ファイルの表示



<!-- 统计弹框 --> <!-- 统计弹框 -->
<div class="chart" v-if="isPoint || isPlace"> <div class="chart" v-if="isPoint || isPlace">
<div class="chartBtn"></div>
<div class="chartBox"> <div class="chartBox">
<div class="cancelChart" @click="cancelChart"> <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 class="chartContent"> <div class="chartContent">
<div class="pointChart" v-if="isPoint"> <div class="pointChart" v-if="isPoint">
<div class="placeTitle">采样点水质信息统计</div>
<div class="placeTitle">采样点数据分析</div>
<div class="chooseParams"> <div class="chooseParams">
<p <p
class="parmasItem" class="parmasItem"


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


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


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




<!-- 地图切换 --> <!-- 地图切换 -->
<div id="changeMap"> <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"> <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 >无人机影像图</label
> >
<input type="checkbox" id="TDmap" :checked="isChecked == 'TDmap'" />
<input type="checkbox" id="UAV" :checked="isUAV" />
</div> </div>
</div> </div>
</div> </div>
isPoint: false, // 是否点击采样点 isPoint: false, // 是否点击采样点
isPlace: false, // 是否点击土地 isPlace: false, // 是否点击土地
isOutlet: false, // 是否为排口 isOutlet: false, // 是否为排口
isUAV: false,
// 总菜单 // 总菜单
riverList: [ riverList: [
{ {
id: 0, id: 0,
name: "解溪河", name: "解溪河",
item: [ 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: "tn", value: 2 , name: '总氮', cf: 'TN' },
{ type: "tp", value: 3 , name: '总磷', cf: 'TP' }, { type: "tp", value: 3 , name: '总磷', cf: 'TP' },
{ type: "nh4_n", value: 4, name: '氨氮', cf: 'NH4_N' }, { type: "nh4_n", value: 4, name: '氨氮', cf: 'NH4_N' },
id: 5, id: 5,
name: "东风河", name: "东风河",
item: [ 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: "tn", value: 7 , name: '总氮', cf: 'TN' },
{ type: "tp", value: 8 , name: '总磷', cf: 'TP' }, { type: "tp", value: 8 , name: '总磷', cf: 'TP' },
{ type: "nh4_n", value: 9, name: '氨氮', cf: 'NH4_N' }, { type: "nh4_n", value: 9, name: '氨氮', cf: 'NH4_N' },
id: 10, id: 10,
name: "秦淮新河", name: "秦淮新河",
item: [ 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: "tn", value: 12 , name: '总氮', cf: 'TN' },
{ type: "tp", value: 13 , name: '总磷', cf: 'TP' }, { type: "tp", value: 13 , name: '总磷', cf: 'TP' },
{ type: "nh4_n", value: 14, name: '氨氮', cf: 'NH4_N' }, { type: "nh4_n", value: 14, name: '氨氮', cf: 'NH4_N' },
rotateWithView: true, 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({ this.dotPlace = new VectorLayer({
source: vectorDot, source: vectorDot,
style: icon, style: icon,
view: this.view, view: this.view,
}); });


// 切换底图
// 切换底图 与无人机影像的叠加
let changeMap = document.getElementById("changeMap"); let changeMap = document.getElementById("changeMap");
changeMap.addEventListener("click", (event) => { changeMap.addEventListener("click", (event) => {
if (event.target.checked) { if (event.target.checked) {
this.isChecked = "osm"; this.isChecked = "osm";
this.map.getLayers().item(0).setVisible(true); this.map.getLayers().item(0).setVisible(true);
this.map.getLayers().item(1).setVisible(false); this.map.getLayers().item(1).setVisible(false);
this.map.getLayers().item(3).setVisible(false);
break; break;
case "google": case "google":
this.isChecked = "google"; this.isChecked = "google";
this.map.getLayers().item(0).setVisible(false); this.map.getLayers().item(0).setVisible(false);
this.map.getLayers().item(1).setVisible(true); this.map.getLayers().item(1).setVisible(true);
this.map.getLayers().item(3).setVisible(false);
break; 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); this.map.getLayers().item(3).setVisible(true);
break; break;
default: default:
this.isChecked = "google"; this.isChecked = "google";
this.map.getLayers().item(0).setVisible(false); this.map.getLayers().item(0).setVisible(false);
this.map.getLayers().item(1).setVisible(true); this.map.getLayers().item(1).setVisible(true);
this.map.getLayers().item(3).setVisible(false);
break; break;
case "google": case "google":
this.isChecked = "google"; this.isChecked = "google";
this.map.getLayers().item(1).setVisible(true); this.map.getLayers().item(1).setVisible(true);
this.map.getLayers().item(0).setVisible(false); this.map.getLayers().item(0).setVisible(false);
this.map.getLayers().item(3).setVisible(false);
break; break;
case "TDmap":
this.isChecked = "google";
case "UAV":
this.isUAV = false;
this.map.getLayers().item(3).setVisible(false); this.map.getLayers().item(3).setVisible(false);
this.map.getLayers().item(1).setVisible(true);
this.map.getLayers().item(0).setVisible(false);
break; break;
default: default:
break; break;
positioning: "bottom-center", 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.map.addInteraction(this.select);
this.select.on("select", (e) => { this.select.on("select", (e) => {
if (e.selected.length > 0) { if (e.selected.length > 0) {
this.map.removeOverlay(this.overlayOutlet) this.map.removeOverlay(this.overlayOutlet)
this.map.addOverlay(this.overlay); this.map.addOverlay(this.overlay);
} else { // 表示为排口数据 } else { // 表示为排口数据
console.log(properties);
this.popupOutlet = properties this.popupOutlet = properties
let coordinate = e.mapBrowserEvent.coordinate; let coordinate = e.mapBrowserEvent.coordinate;
this.overlayOutlet.setPosition(coordinate); this.overlayOutlet.setPosition(coordinate);
// 选择采样点参数 // 选择采样点参数
choosePointItem(item, index) { choosePointItem(item, index) {
this.checkedPointParams = index; this.checkedPointParams = index;
console.log(item);
this.pointParamsData = this.pointList[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() { // 关闭采样点弹出框 closePointPopup() { // 关闭采样点弹出框
} }
/* 菜单 */ /* 菜单 */
#rightSide { #rightSide {
width: 160px;
width: 180px;
position: absolute; position: absolute;
top: 100px; top: 100px;
right: 10px; right: 10px;
} }
.controlTitle { .controlTitle {
width: 160px;
width: 180px;
height: 40px; height: 40px;
padding-left: 20px; padding-left: 20px;
font-size: 16px; font-size: 16px;
text-align: start; text-align: start;
} }
.el-menu { .el-menu {
width: 160px;
width: 180px;
overflow: hidden; overflow: hidden;
} }
/deep/ .el-menu-item-group { /deep/ .el-menu-item-group {
} }


/deep/ .el-menu-item { /deep/ .el-menu-item {
padding-left: 30px !important;
padding-left: 20px !important;
font-size: 12px; font-size: 12px;
position: relative; position: relative;
} }
/deep/ .el-menu-item-group .el-submenu__title {
font-weight: 400;
font-size: 12px;
padding-left: 40px !important;
}
/deep/ .el-submenu__title { /deep/ .el-submenu__title {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding: 20px !important; padding: 20px !important;
display: flex; display: flex;
align-items: center; 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 { .el-menu-item.is-active {
color: #333; color: #333;
text-align: start; text-align: start;
} }
.refcheck { .refcheck {
height: 100%;
width: 100%;
margin-left: 8px; margin-left: 8px;
} }
/* 数据统计弹框 */ /* 数据统计弹框 */
padding: 10px; padding: 10px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }
.showPopup {
.showPopupPlace {
width: 250px; width: 250px;
height: 240px;
padding: 10px;
background-color: rgb(255, 255, 255);
}
.showPopupOutlet {
width: 220px;
padding: 10px; padding: 10px;
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }
background-color: #ffffff; background-color: #ffffff;
cursor: pointer; cursor: pointer;
} }
.google {
margin-left: -30px;
}
#changeMap input { #changeMap input {
display: none; display: none;
} }

+ 7
- 7
src/views/leftCompoents/landUse.vue ファイルの表示

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

+ 3
- 3
src/views/leftCompoents/outletComponents.vue ファイルの表示

</p> </p>
<ul class="paramsList"> <ul class="paramsList">
<li class="value"> <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> <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> </li>
</ul> </ul>
</div> </div>

+ 1
- 1
src/views/leftCompoents/placeComponent.vue ファイルの表示

#placeComponent { #placeComponent {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px;
padding: 10px;
background-size: contain; background-size: contain;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

+ 1
- 1
src/views/leftCompoents/popupComponents.vue ファイルの表示

<span class="upImg" v-show="dataList.tn > 1"></span> <span class="upImg" v-show="dataList.tn > 1"></span>
</li> </li>
<li class="value"> <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> <span class="upImg" v-show="dataList.tp > 0.2"></span>
</li> </li>
<li class="value"> <li class="value">

書き込み プレビュー
読み込み中…
キャンセル
保存