From 8f85627f215bd0ee61db7a35ca9a83eaca1e892c Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期三, 10 一月 2024 15:42:34 +0800
Subject: [PATCH] 代码更新
---
src/assets/img/right/tongji.png | 0
src/components/left/layerTree/messageInfo.vue | 98 ++++++++++---
src/components/left/layerTree/Layer.vue | 9 +
src/store/index.js | 5
src/components/left/layerTree/mapIfeam.vue | 112 ++++++++++++++++
src/components/index.vue | 5
src/components/menu/menulist.vue | 10 +
src/api/api.js | 15 +
src/assets/js/Layer/mapViewer.js | 16 +
src/assets/js/Layer/mapGeo.js | 58 +++++--
src/assets/img/right/gewang.png | 0
src/assets/js/Layer/mapInfo.js | 4
src/assets/js/Layer/drawGrid.js | 87 +++++++++--
13 files changed, 345 insertions(+), 74 deletions(-)
diff --git a/src/api/api.js b/src/api/api.js
index b597367..e54e5a9 100644
--- a/src/api/api.js
+++ b/src/api/api.js
@@ -53,19 +53,28 @@
export function Img_DeleteByIds(params) {
//璇锋眰鍦板潃
- return service.get("Img/DeleteByIds?ids=" + params);
+ return service.get("/Img/DeleteByIds?ids=" + params);
}
export function Grid_SelectById(params) {
//璇锋眰鍦板潃
- return service.get("Grid/SelectById?id=" + params);
+ return service.get("/Grid/SelectById?id=" + params);
}
export function Grid_Insert(params) {
//璇锋眰鍦板潃
- return service.post("Grid/Insert", params);
+ return service.post("/Grid/Insert", params);
}
+export function Grid_UpdateById(params) {
+ //璇锋眰鍦板潃
+ return service.post("/Grid/UpdateById", params);
+}
+export function Grid_DeleteByIds(params) {
+ //璇锋眰鍦板潃
+ return service.get("/Grid/DeleteByIds?ids=" + params);
+}
+
//浜姙鐧诲綍
// export function loginById(params) {
// return request.post('/sign/loginById', params);
diff --git a/src/assets/img/right/gewang.png b/src/assets/img/right/gewang.png
new file mode 100644
index 0000000..0156e77
--- /dev/null
+++ b/src/assets/img/right/gewang.png
Binary files differ
diff --git a/src/assets/img/right/tongji.png b/src/assets/img/right/tongji.png
new file mode 100644
index 0000000..b516e5e
--- /dev/null
+++ b/src/assets/img/right/tongji.png
Binary files differ
diff --git a/src/assets/js/Layer/drawGrid.js b/src/assets/js/Layer/drawGrid.js
index eb27f5a..40fb77e 100644
--- a/src/assets/js/Layer/drawGrid.js
+++ b/src/assets/js/Layer/drawGrid.js
@@ -140,11 +140,11 @@
var start_hest = turf.destination(start_west, hStep * i, hAngle, op).geometry.coordinates;
var end_hest = turf.destination(end_west, hStep * i, hAngle, op).geometry.coordinates;
var val = [
- [start_west[0], start_west[1],18],
- [end_west[0], end_west[1],18],
- [end_hest[0], end_hest[1],18],
- [start_hest[0], start_hest[1],18],
- [start_west[0], start_west[1],18]
+ [start_west[0], start_west[1], 18],
+ [end_west[0], end_west[1], 18],
+ [end_hest[0], end_hest[1], 18],
+ [start_hest[0], start_hest[1], 18],
+ [start_west[0], start_west[1], 18]
]
this.setInsertGridData(val, (i * j))
}
@@ -154,15 +154,62 @@
store.state.isshowGrid = false;
- this.drawPoint(res);
+ // this.drawPoint(res);
+ this.drawRects(res)
+ },
+
+ drawRects: function (res) {
+ this.cc = 0;
+ var rect = viewer.entities.getById(this.id);
+ if (!rect) return;
+ var points = rect.polygon.hierarchy.getValue().positions;
+ viewer.entities.removeAll(); // viewer.entities.remove(rect);
+
+ var r0 = Cesium.Cartographic.fromCartesian(points[0]);
+ var r1 = Cesium.Cartographic.fromCartesian(points[1]);
+ var r2 = Cesium.Cartographic.fromCartesian(points[2]);
+
+ var p0 = turf.point([(r0.longitude * 180) / Math.PI, (r0.latitude * 180) / Math.PI]);
+ var p1 = turf.point([(r1.longitude * 180) / Math.PI, (r1.latitude * 180) / Math.PI]);
+ var p2 = turf.point([(r2.longitude * 180) / Math.PI, (r2.latitude * 180) / Math.PI]);
+
+ // 鍋氭垚 3 * 4 鐨勭綉鏍�
+ // var wCount = 3, hCount = 4;
+ var wCount = res.col, hCount = res.row;
+ this.flag = parseInt(wCount) * parseInt(hCount);
+ var op = { units: "meters", };
+ var wStep = turf.distance(p0, p1, op) / wCount;
+ var hStep = turf.distance(p1, p2, op) / hCount;
+ var wAngle = turf.bearing(p0, p1);
+ var hAngle = turf.bearing(p1, p2);
+ this.removeRect();
+ for (var i = 0; i < wCount; i++) {
+ var ds = turf.destination(p0, wStep * i, wAngle, op);
+ for (var j = 0; j < hCount; j++) {
+ var d1 = turf.destination(ds.geometry.coordinates, hStep * j, hAngle, op);
+ var d2 = turf.destination(d1.geometry.coordinates, wStep, wAngle, op);
+ var d3 = turf.destination(d2.geometry.coordinates, hStep, hAngle, op);
+ var d4 = turf.destination(d1.geometry.coordinates, hStep, hAngle, op);
+
+ // var arr = [d1.geometry.coordinates, d2.geometry.coordinates, d3.geometry.coordinates, d4.geometry.coordinates];
+ var arr = [
+ [d1.geometry.coordinates[0], d1.geometry.coordinates[1], 18],
+ [d2.geometry.coordinates[0], d2.geometry.coordinates[1], 18],
+ [d3.geometry.coordinates[0], d3.geometry.coordinates[1], 18],
+ [d4.geometry.coordinates[0], d4.geometry.coordinates[1], 18],
+ [d1.geometry.coordinates[0], d1.geometry.coordinates[1], 18]
+ ]
+ this.setInsertGridData(arr, ((i + 1) * (j + 1)));
+ }
+ }
},
async setInsertGridData(res, num) {
var obj =
{
"type": "Feature",
"properties":
- { "ID": num, "NAME": "Area8", "REMARK": "" },
+ { "ID": num, "NAME": "Area" + num, "REMARK": "", "TYPE": 'DrawGrid' },
"geometry":
{
"type": "Polygon",
@@ -171,24 +218,24 @@
]
}
}
-
const data = await Grid_Insert({ json: JSON.stringify(obj) })
if (data.status == 200) {
this.ids.push(data.data)
+ if (this.ids.length == this.flag) {
+ var obj = {
+ id: new Date().getTime(),
+ sourceType: 'DrawGrid',
+ name: "鏂板缓鏍肩綉",
+ style: {
+ ids: this.ids,
+ sourceType: 'DrawGrid',
+ }
+ }
+ Bus.$emit("addOtherData", "瀵硅薄", obj);
+ }
}
- if (this.flag == num) {
- var obj = {
- id: new Date().getTime(),
- sourceType: 'DrawGrid',
- name: "鏂板缓鏍肩綉",
- style: {
- ids: this.ids,
- sourceType: 'DrawGrid',
- }
- }
- Bus.$emit("addOtherData", "瀵硅薄", obj);
- }
+
}
};
export default drawGrid
diff --git a/src/assets/js/Layer/mapGeo.js b/src/assets/js/Layer/mapGeo.js
index 4bc616e..72700d9 100644
--- a/src/assets/js/Layer/mapGeo.js
+++ b/src/assets/js/Layer/mapGeo.js
@@ -1,9 +1,10 @@
var source = []
-import { Grid_SelectById } from '@/api/api'
+import { Grid_SelectById ,Grid_DeleteByIds} from '@/api/api'
const mapGeo = {
source1: null,
type: null,
feature: [],
+ gridId: null,
init(res) {
if (this.type && this.type === res) {
return this.type = null
@@ -32,32 +33,53 @@
},
addGridLayer(res) {
var ids = res.style.ids;
- var length = ids.length ;
-
+ var length = ids.length;
+ if (res.id == this.gridId) {
+ this.gridId = null;
+ return
+ }
+ this.gridId = res.id;
this.feature = [];
for (var i = 0; i < length; i++) {
- this.getGridids(ids[i], length-1, i);
+ this.getGridids(ids[i], length);
}
+ },
+ delGridLayer(res) {
+ if(!res)return
+ Viewer.dataSources.remove(Viewer.dataSources.getByName(res.id)[0])
+ },
+ removeGridData(res) {
+ this.delGridLayer(res);
+ var ids = res.style.ids;
+ for (var i = 0; i < ids.length; i++) {
+ this.delGridIds(ids[i]);
+ }
+ },
+ async delGridIds(res) {
+ console.log(res)
+ const data = await Grid_DeleteByIds(res);
},
async getGridids(id, length, index) {
const data = await Grid_SelectById(id)
if (data.status == 200) {
- this.feature.push(data.data.features[0])
- }
- console.log(index,length)
- if (index == length) {
- var feature = {
- "type": "FeatureCollection",
- "name": "wangge",
- "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
- "features": this.feature,
+ var val_data = data.data.features[0];
+ val_data.properties["gid"] = id;
+ this.feature.push(val_data)
+ if (this.feature.length == length) {
+ var feature = {
+ "type": "FeatureCollection",
+ "name": "wangge",
+ "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+ "features": this.feature,
+ }
+
+ this.addGridMenuGeoJson(feature)
}
- console.log(feature);
- this.addGridMenuGeoJson(feature)
}
+
+
},
- addGridMenuGeoJson(res){
- console.log(res);
+ addGridMenuGeoJson(res) {
var data = Cesium.GeoJsonDataSource.load(res, //瑕佸姞杞界殑 url銆丟eoJSON 瀵硅薄鎴� TopoJSON 瀵硅薄銆�
{
stroke: Cesium.Color.ORANGE, //鎶樼嚎鍜屽杈瑰舰杞粨鐨勯粯璁ら鑹层��
@@ -66,7 +88,7 @@
}
)
data.then((dataSource) => {
- dataSource.name = "鏍肩綉"
+ dataSource.name = this.gridId;
Viewer.dataSources.add(
dataSource
);
diff --git a/src/assets/js/Layer/mapInfo.js b/src/assets/js/Layer/mapInfo.js
index 0650459..6ed6046 100644
--- a/src/assets/js/Layer/mapInfo.js
+++ b/src/assets/js/Layer/mapInfo.js
@@ -20,7 +20,9 @@
this.mssageInfo = null;
store.state.isShowImgUpDate = false;
store.state.isShowImgUrl= null;
- this.propertyNames=null
+ this.propertyNames=null;
+ store.state.isireamUrl = null;
+ store.state.isShowMenuCount = false;
},
setGeoJsonInfo(res) {
diff --git a/src/assets/js/Layer/mapViewer.js b/src/assets/js/Layer/mapViewer.js
index d743909..7a5500c 100644
--- a/src/assets/js/Layer/mapViewer.js
+++ b/src/assets/js/Layer/mapViewer.js
@@ -37,14 +37,22 @@
store.state.isShowMeasureCoord = true;
}
if (Cesium.defined(nPickFeature)) {
- console.log(nPickFeature);
- if (nPickFeature.id && nPickFeature.id.id == 'Rectangle')
- return
+ mapInfo.setRestLayer();
+ if (nPickFeature.id && nPickFeature.id.id == 'Rectangle')
+ return
+
if (nPickFeature.id && nPickFeature.id.properties) {
mapInfo.setGeoJsonInfo(nPickFeature.id.properties)
+
} else if (nPickFeature && nPickFeature.getProperty("name")) {
- if (nPickFeature.getProperty("name") == "DLJQT0007") {
+ var name = nPickFeature.getProperty("name");
+ if (name == "DLJQT0007") {
store.state.isShowVideo = true;
+ } else if (name == "sensor001") {
+
+ } else if (name == "DLLMJ0001") {
+ store.state.isireamUrl = "/Data/html/hd3dmap.html?id=3493&type=8";
+ store.state.isShowMenuCount = true;
}
}
}
diff --git a/src/components/index.vue b/src/components/index.vue
index 06d940a..418cca2 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -60,6 +60,7 @@
<meu-grid v-if="$store.state.isshowGrid"></meu-grid>
<batch-grid-menu v-if="$store.state.isshowBatchGrid"></batch-grid-menu>
<map-video v-if="$store.state.isShowVideo"></map-video>
+ <map-ifeam v-if="$store.state.isShowMenuCount"></map-ifeam>
</div>
</template>
@@ -85,6 +86,7 @@
import batchGridMenu from "@/components/left/layerTree/batchGridMenu.vue";
import mapVideo from "@/components//left/layerTree/mapVideo.vue";
import BatchGridMenu from './left/layerTree/batchGridMenu.vue';
+import mapIfeam from "./left/layerTree/mapIfeam.vue";
export default {
name: "index",
components: {
@@ -107,7 +109,8 @@
meuGrid,
batchGridMenu,
mapVideo,
- BatchGridMenu
+ BatchGridMenu,
+ mapIfeam
},
data() {
return {
diff --git a/src/components/left/layerTree/Layer.vue b/src/components/left/layerTree/Layer.vue
index 1d3ee7f..f2d6bb7 100644
--- a/src/components/left/layerTree/Layer.vue
+++ b/src/components/left/layerTree/Layer.vue
@@ -630,6 +630,12 @@
} else {
mapOL.removeLayerData(treeNode);
}
+ }else if(treeNode.sourceType == "DrawGrid"){
+ if (isCheck) {
+ mapGeo.addGridLayer(treeNode);
+ } else {
+ mapGeo.delGridLayer(treeNode);
+ }
}
// 鍙兘鍚屾椂鍔犺浇涓�涓湴褰�
if (
@@ -1001,6 +1007,9 @@
if (this.selectNode.sourceType === "imgUp") {
this.removeimgUpData(this.selectNode)
}
+ if (this.selectNode.sourceType === "DrawGrid") {
+ mapGeo.removeGridData(this.selectNode)
+ }
this.remove(this.selectNode);
this.$refs.tree && this.$refs.tree.setCurrentKey(null);
this.selectNode = undefined;
diff --git a/src/components/left/layerTree/mapIfeam.vue b/src/components/left/layerTree/mapIfeam.vue
new file mode 100644
index 0000000..240c7ff
--- /dev/null
+++ b/src/components/left/layerTree/mapIfeam.vue
@@ -0,0 +1,112 @@
+<template>
+ <div id="mapInfo" class="modelBox">
+ <div>
+ <div class="modleTitle ">
+ <div>璇︽儏</div>
+ <div class="modelClose" @click="$store.state.isShowMenuCount = false"> X</div>
+ </div>
+ </div>
+ <div class="modelContent ">
+ <div>
+ <iframe :src="src" width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>
+ </div>
+ </div>
+
+
+ </div>
+</template>
+
+<script>
+
+export default {
+ name: "maoIfeam",
+ components: {
+
+ },
+
+ data() {
+ return {
+ src: null,
+ srcList: null,
+ };
+ },
+ mounted() {
+ this.setLayerStart();
+ },
+ destroyed() {
+
+ },
+
+ methods: {
+
+ setLayerStart() {
+ this.src = layerData.config.BASE_URL + this.$store.state.isireamUrl;
+ },
+
+ setUrl(res) {
+ this.url = res;
+
+
+ }
+
+ }
+};
+</script>
+
+<style scoped lang="less">
+.modelBox {
+ width: 45%;
+ height: 70%;
+ border: 1px solid white;
+ top: 15%;
+ left: 25%;
+
+ background-color: rgba(0, 0, 0, 0.6); // #0048fd69 !important
+ z-index: 9999;
+ position: absolute;
+
+
+ .modleTitle {
+ height: 42px;
+ width: 90%;
+ background: #0048fd69 !important;
+ border-bottom: 1px solid white;
+ color: white;
+ font-weight: 700px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0% 5%;
+
+ .modelClose {
+ height: 16px;
+ width: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(128, 128, 128, 0.6);
+ font-size: 14x;
+
+ }
+ }
+
+ .modelContent {
+ width: calc(100% - 20px);
+ height: calc(100% - 42px);
+ padding: 10px 10px;
+
+ position: absolute;
+
+ div {
+ width: 100%;
+ height: calc(100% - 20px);
+ }
+
+
+
+
+ }
+
+
+}
+</style>
diff --git a/src/components/left/layerTree/messageInfo.vue b/src/components/left/layerTree/messageInfo.vue
index 06bb843..aeb1c92 100644
--- a/src/components/left/layerTree/messageInfo.vue
+++ b/src/components/left/layerTree/messageInfo.vue
@@ -5,9 +5,10 @@
<div>灞炴�т俊鎭�</div>
<div class="modelmenu">
<div v-show="showMenuGrid">
- <el-link style="color: white;font-size: 14x;">缂栬緫</el-link>
+ <el-link v-show="disabled" @click="disabled = false" style="color: white;font-size: 14x;">缂栬緫</el-link>
+ <el-link v-show="!disabled" @click="setObjSave" style="color: white;font-size: 14x;">淇濆瓨</el-link>
</div>
- <div class="modelClose" @click="$store.state.showMessageInfo = false"> X</div>
+ <div class="modelClose" @click="$store.state.showMessageInfo = false">X</div>
</div>
</div>
@@ -21,7 +22,10 @@
<div>{{ item.name }}</div>
<div v-show="item.name == 'ID'">{{ item.value }}
</div>
- <div v-show="item.name != 'ID'"><el-input style="width: 100%;" v-model="item.value" placeholder=""></el-input>
+ <div v-show="item.name == 'type'">{{ item.value }}
+ </div>
+ <div v-show="item.name != 'ID' && item.name != 'type'"><el-input style="width: 100%; text-align: center;"
+ v-model="item.value" :disabled="disabled"></el-input>
</div>
</div>
</div>
@@ -32,7 +36,7 @@
<script>
import model from '../../../assets/js/Layer/model';
import mapInfo from '../../../assets/js/Layer/mapInfo';
-import {Grid_SelectById} from '@/api/api'
+import { Grid_SelectById, Grid_UpdateById } from '../../../api/api'
export default {
name: "modelEdit",
components: {
@@ -43,6 +47,9 @@
return {
modelOption: null,
showMenuGrid: false,
+ disabled: true,
+ gid: null,
+ obj: null,
};
},
mounted() {
@@ -52,41 +59,78 @@
},
methods: {
-
setLayerStart() {
+ this.obj = null;
var data = mapInfo.mssageInfo;
if (!data) {
this.$store.state.showMessageInfo = false;
return
}
var flag = false;
- var id=null;
- // for(var i in data){
- // if(data[i].name == '绫诲瀷' && data[i].value =='缃戞牸'){
- // flag = true;
- // }
- // if(data[i].name =='ID'){
- // id=data[i].value;
- // }
- // }
- // if(flag){
- // this.getInfoMessage(id)
- // }else{
- // this.setInfoMesgData(data);
- // }
+ for (var i in data) {
+ if (data[i].name == "TYPE" && data[i].value == 'DrawGrid') {
+ flag = true;
+ break;
+ }
+ }
+ if (flag) {
+ for (var i in data) {
+ if (data[i].name == "gid") {
+ this.gid = data[i].value
+ this.getInfoMessage(this.gid);
+ break;
+ }
+ }
- this.setInfoMesgData(data);
+ } else {
+ this.setInfoMesgData(data);
+ }
},
setInfoMesgData(res) {
this.modelOption = res
},
- async getInfoMessage(res){
+ async setObjSave() {
+ var properties = this.obj.features[0].properties;
+ for (var key in properties) {
+ for (var i in this.modelOption) {
+ if (this.modelOption[i].name == key) {
+ properties[key] = this.modelOption[i].value
+ }
+ }
+ }
+ const data = await Grid_UpdateById({
+ id: this.gid,
+ json: JSON.stringify(this.obj.features[0])
+ });
+ if (data.status == 200) {
+ this.$message({
+ message: "淇濆瓨鎴愬姛",
+ type: "success",
+ });
+ this.disabled = true;
+ }
+ },
+ async getInfoMessage(res) {
const data = await Grid_SelectById(res);
- if(data.status == 200){
+ if (data.status == 200) {
+ this.obj = data.data;
+ var properties = this.obj.features[0].properties;
+ console.log(data.data.features[0])
+ var std = [];
+ for (var key in properties) {
+ std.push({
+ name: key,
+ value: properties[key]
+ })
+ }
+ this.showMenuGrid = true
+ this.modelOption = std;
- }
+ }
}
- }
+
+ },
+
};
</script>
@@ -131,6 +175,7 @@
font-size: 14x;
margin-left: 20px;
+
}
}
@@ -157,6 +202,7 @@
// margin-bottom: 5%;
line-height: 50px;
border-right: 1px solid white;
+ border-top: 1px solid white !important;
}
div:first-child {
@@ -167,8 +213,8 @@
}
.contentMessage:first-child {
- border-top: 1px solid white;
- ;
+ border-top: 1px solid white !important;
+
}
}
diff --git a/src/components/menu/menulist.vue b/src/components/menu/menulist.vue
index ad7f48d..536a37f 100644
--- a/src/components/menu/menulist.vue
+++ b/src/components/menu/menulist.vue
@@ -25,12 +25,16 @@
</div>
<div class="menubtn" @click="setMenuGrid()">
- <img class="bhImg" title="鏍肩綉" src="@/assets/img/right/cx-s.png" />
+ <img class="bhImg" title="鏍肩綉" src="@/assets/img/right/gewang.png" />
<span>鏍肩綉</span>
</div>
<div class="menubtn" @click="setMenuQuery()">
<img class="bhImg" title="鏌ヨ" src="@/assets/img/right/queyr.png" />
<span>鏌ヨ</span>
+ </div>
+ <div class="menubtn" @click="setMenuCount()">
+ <img class="bhImg" title="缁熻" src="@/assets/img/right/tongji.png" />
+ <span>缁熻</span>
</div>
<div class="menubtn" @click="setImgUpDate()">
<input id="imgs" type="file" multiple="multiple" v-show="false" @change="setImgUpload" accept=".jpg,.png" />
@@ -271,6 +275,10 @@
setMenuGrid() {
drawGrid.drawRect();
},
+ setMenuCount(){
+ this.$store.state.isireamUrl = "/Data/html/index.html"
+ this.$store.commit("setMenuCount", true)
+ },
setImgUpDate() {
// this.$store.commit("setImgUpdate",true)
diff --git a/src/store/index.js b/src/store/index.js
index 811de59..8656af0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -53,6 +53,8 @@
isShowVideo: false,
isshowBatchGrid: false,
batchGridArr: [],
+ isShowMenuCount:false,
+ isireamUrl:null,
},
mutations: {
selectedLayer(state, b) {
@@ -114,6 +116,9 @@
setMenuQuery(state, b) {
state.isShowMenuQuery = b;
},
+ setMenuCount(state, b) {
+ state.isShowMenuCount = b;
+ },
setImgUpdate(state, b) {
state.isShowImgUpDate = b;
},
--
Gitblit v1.9.3