From 9398f14feea7ad8b7d00ce7d2bb2e5362cec59d3 Mon Sep 17 00:00:00 2001 From: surprise <15810472099@163.com> Date: 星期二, 09 一月 2024 15:20:15 +0800 Subject: [PATCH] 代码提交 --- src/components/left/layerTree/messageInfo.vue | 67 +++ src/components/left/layerTree/Layer.vue | 80 +++ vue.config.js | 46 - src/store/index.js | 16 src/components/left/layerTree/ImgUp.vue | 113 ++++++ static/CimSDK/Workers/image/test03-01.png | 0 static/data/layerData.js | 3 src/components/map/viewer.vue | 14 src/components/index.vue | 13 src/components/menu/menulist.vue | 143 +++---- src/api/api.js | 22 + src/assets/js/Layer/mapViewer.js | 8 src/assets/js/Layer/menuGrid.js | 155 ++++++++ src/assets/js/Layer/mapGeo.js | 35 + src/assets/img/right/upload.png | 0 src/components/left/layerTree/meuGrid.vue | 143 +++++++ src/assets/js/Layer/mapInfo.js | 23 + src/components/left/leftmenu.vue | 14 src/components/left/layerTree/mapVideo.vue | 116 ++++++ src/assets/img/right/queyr.png | 0 src/assets/js/Layer/model.js | 32 + static/layers.json | 19 + 22 files changed, 885 insertions(+), 177 deletions(-) diff --git a/src/api/api.js b/src/api/api.js index d106ac5..0dcde0c 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -39,6 +39,28 @@ return service.get("https://apis.kuandeng.net/v1/search/mp/getMpByLocation?locations=" + params.lon + "," + params.lat + "&dataVersion=JSJK_210000"); } +export function Img_Upload(params) { + //璇锋眰鍦板潃 + return service.post("/Img/Upload", params); +} + + +export function Img_SelectByPage(params) { + //璇锋眰鍦板潃 + return service.get("/Img/SelectByPage", { params: params }); +} + + +export function Img_DeleteByIds(params) { + //璇锋眰鍦板潃 + return service.get("Img/DeleteByIds?ids=" + params); +} + + +export function Grid_SelectById(params) { + //璇锋眰鍦板潃 + return service.get("Grid/SelectById?id=" + params); +} //浜姙鐧诲綍 diff --git a/src/assets/img/right/queyr.png b/src/assets/img/right/queyr.png new file mode 100644 index 0000000..c60e2b1 --- /dev/null +++ b/src/assets/img/right/queyr.png Binary files differ diff --git a/src/assets/img/right/upload.png b/src/assets/img/right/upload.png new file mode 100644 index 0000000..0bb8413 --- /dev/null +++ b/src/assets/img/right/upload.png Binary files differ diff --git a/src/assets/js/Layer/mapGeo.js b/src/assets/js/Layer/mapGeo.js index 83da005..59a2856 100644 --- a/src/assets/js/Layer/mapGeo.js +++ b/src/assets/js/Layer/mapGeo.js @@ -1,7 +1,12 @@ var source = [] const mapGeo = { source1: null, + type: null, init(res) { + if (this.type && this.type === res) { + return this.type = null + } + this.type = res; switch (res.type) { case "WangGe": this.addWangGeGeoJson(res); @@ -17,11 +22,33 @@ break; case "zhaiHai": this.addzhaiHaiGeoJson(res) - + break; + case "ZhongPo": + this.addZhongPoGeoJson(res) break; } }, + + addZhongPoGeoJson(res) { + var url = layerData.config.Model_URL + res.urls; + var data = Cesium.GeoJsonDataSource.load(url, //瑕佸姞杞界殑 url銆丟eoJSON 瀵硅薄鎴� TopoJSON 瀵硅薄銆� + { + stroke: Cesium.Color.ORANGE, //鎶樼嚎鍜屽杈瑰舰杞粨鐨勯粯璁ら鑹层�� + fill: Cesium.Color.WHITE.withAlpha(0.2), //澶氳竟褰㈠唴閮ㄧ殑榛樿棰滆壊銆� + strokeWidth: 3, //鎶樼嚎鍜屽杈瑰舰杞粨鐨勯粯璁ゅ搴︺�� + } + ) + data.then((dataSource) => { + dataSource.name = res.type + Viewer.dataSources.add( + dataSource + ); + }) + }, delGeoSource(res) { + if (this.type && this.type == res) { + this.type = null + } if (res.type == "zhaiHai") { Viewer.dataSources.remove(Viewer.dataSources.getByName("zhaiHai2")[0]) Viewer.dataSources.remove(Viewer.dataSources.getByName("zhaiHai1")[0]) @@ -129,11 +156,11 @@ }) }, addZhuangHaoGeoJson(res) { - + var url = layerData.config.Model_URL + res.urls; var img = layerData.config.Model_URL + '/Data/img/img1.png'; - Cesium.GeoJsonDataSource.load(url).then((dataSource) => { - + Cesium.GeoJsonDataSource.load(url).then((dataSource) => { + dataSource.name = res.type Viewer.dataSources.add( dataSource diff --git a/src/assets/js/Layer/mapInfo.js b/src/assets/js/Layer/mapInfo.js index c0ad663..0650459 100644 --- a/src/assets/js/Layer/mapInfo.js +++ b/src/assets/js/Layer/mapInfo.js @@ -4,6 +4,7 @@ '妗╁彿_Point', ], mssageInfo: null, + propertyNames:null, Init(html) { if (!html) return; @@ -16,16 +17,28 @@ store.state.showZhaiHaiImg = null; store.state.isshowZhaiHai = false; store.state.showMessageInfo = false; - this.mssageInfo = null + this.mssageInfo = null; + store.state.isShowImgUpDate = false; + store.state.isShowImgUrl= null; + this.propertyNames=null + }, setGeoJsonInfo(res) { if (res.projectId && res.frameNo) { - this.setRestLayer(); - + this.setRestLayer(); store.state.showZhaiHaiImg = res; store.state.isshowZhaiHai = true; - } else { + }else if(res.sourceType && res.sourceType._value == "imgUp"){ + this.setRestLayer(); + + setTimeout(() => { + store.state.isShowImgUrl= res._path._value; + store.state.isShowImgUpDate = true; + }, 100); + + }else { var val_name = res._propertyNames; + this.propertyNames =res._propertyNames; var val = []; for (var i = 0; i < val_name.length; i++) { var obj = { @@ -34,7 +47,7 @@ } val.push(obj) } - if (val.length == 0) return + this.showMapInfo(val); } }, diff --git a/src/assets/js/Layer/mapViewer.js b/src/assets/js/Layer/mapViewer.js index 65405c5..85b57f6 100644 --- a/src/assets/js/Layer/mapViewer.js +++ b/src/assets/js/Layer/mapViewer.js @@ -37,14 +37,16 @@ store.state.isShowMeasureCoord= true; } if (Cesium.defined(nPickFeature)) { + if(nPickFeature.id && nPickFeature.id.properties){ - + console.log(nPickFeature) mapInfo.setGeoJsonInfo(nPickFeature.id.properties) + }else if(nPickFeature && nPickFeature.getProperty("name") == "DLJQT0007"){ + store.state.isShowVideo= true; } - } if(store.state.isQueryFalag){ - console.log(coordinate) + store.state.isQyeryCoord = coordinate; } diff --git a/src/assets/js/Layer/menuGrid.js b/src/assets/js/Layer/menuGrid.js index 130be82..2bfa1de 100644 --- a/src/assets/js/Layer/menuGrid.js +++ b/src/assets/js/Layer/menuGrid.js @@ -1,13 +1,160 @@ +import parse from "qs/lib/parse"; +import store from "../../../store"; +import * as turf from '@turf/turf'; const menuGrid = { + geom: [], init() { - console.log(123) + var that = this; var grid = sgworld.Creator.createSimpleGraphic( - "rectangle", + "point", { // clampToGround: false - }, entity => { - + }, (entity) => { + var val = that.setCartesianToEightFour(entity.position.getValue()) + that.geom.push([parseFloat(val.lng), parseFloat(val.lat)]) + sgworld.Creator.SimpleGraphic.remove(entity.id); + if (this.geom.length < 2) { + that.init(); + } else { + store.state.isshowGrid = true; + } }) }, + setTurfGrid(res, geom) { + + var box = [parseFloat(geom[0][0]), parseFloat(geom[0][1]), parseFloat(geom[1][0]), parseFloat(geom[1][1])] + this.geom = []; + var options = { units: "meters" }; + var squareGrid = turf.squareGrid(box, res.cellSide, options); + var features = []; + for (var i = 0; i < squareGrid.features.length; i++) { + var coord = squareGrid.features[i].geometry.coordinates[0]; + var coordinates = []; + for (var j in coord) { + coordinates.push([coord[j][0], coord[j][1], 18]) + } + features.push({ + "type": "Feature", "properties": { + "NAME": '鏂板缓鏍肩綉' + (i + 1), + "bak": '' + }, + "geometry": { + "type": "Polygon", "coordinates": [ + coordinates + ] + } + }) + } + var obj = { + "type": "FeatureCollection", + "name": "鏂板缓鏍肩綉", + "crs": { + "type": "name", + "properties": { + "name": "urn:ogc:def:crs:OGC:1.3:CRS84" + } + }, + "features": features + } + this.adddDataSource(obj) + }, + + adddDataSource(res) { + var data = Cesium.GeoJsonDataSource.load(res, //瑕佸姞杞界殑 url銆丟eoJSON 瀵硅薄鎴� TopoJSON 瀵硅薄銆� + { + stroke: Cesium.Color.RED, //鎶樼嚎鍜屽杈瑰舰杞粨鐨勯粯璁ら鑹层�� + fill: Cesium.Color.WHITE.withAlpha(0.2), //澶氳竟褰㈠唴閮ㄧ殑榛樿棰滆壊銆� + strokeWidth: 3, //鎶樼嚎鍜屽杈瑰舰杞粨鐨勯粯璁ゅ搴︺�� + } + ) + data.then((dataSource) => { + Viewer.dataSources.add( + dataSource + ); + }) + }, + + setOtherGrid(res, geom) { + var maxlon, minlon, maxlat, minlat; + console.log(geom) + if (parseFloat(geom[0][0]) > parseFloat(geom[1][0])) { + maxlon = parseFloat(geom[0][0]); + minlon = parseFloat(geom[1][0]); + } else { + maxlon = parseFloat(geom[1][0]); + minlon = parseFloat(geom[0][0]); + } + if (parseFloat(geom[0][1]) > parseFloat(geom[1][1])) { + maxlat = geom[0][1]; + minlat = geom[1][1]; + } else { + maxlat = geom[1][1]; + minlat = geom[0][1]; + } + var row = 3; + var col = 3; + var lon_dis = (parseFloat(maxlon) - parseFloat(minlon)) / 3; + var lat_dis = (parseFloat(maxlat) - parseFloat(minlat)) / 3; + console.log(lon_dis, minlon) + for (var i = 0; i < col; i++) { + for (var j = 0; j < row; j++) { + var startlon = parseFloat(minlon + (j * lon_dis)) + var startlat = parseFloat(minlat + (i * lat_dis)) + var endlon = parseFloat(minlon + ((j + 1) * lon_dis)) + var endlat = parseFloat(minlat + ((i + 1) * lat_dis)) + var positions = [ + parseFloat(startlon), parseFloat(startlat), parseFloat(endlon), parseFloat(startlat), + parseFloat(endlon), parseFloat(endlat), parseFloat(startlon), parseFloat(endlat), parseFloat(startlon), parseFloat(startlat) + ] + + + Viewer.entities.add({ + name: "polygon_height", + polygon: { + show: true, + hierarchy: new Cesium.Cartesian3.fromDegreesArray(positions), + height: 18, + material: Cesium.Color.CYAN.withAlpha(0.5), + outline: true, + outlineColor: Cesium.Color.BLACK, + } + }) + + + + } + } + }, + + + setGridRowCol(res) { + store.state.isshowGrid = false; + var geom = this.geom; + // this.setTurfGrid(res,geom) + this.setOtherGrid(res, geom); + + }, + toFixed(res) { + return parseFloat(res).toFixed(6) + }, + setdistance(start, end) { + var from = turf.point(start); + var to = turf.point(end); + var distance = turf.distance(from, to, { + units: 'meters' + }); + return distance + }, + + + setCartesianToEightFour(res) { + var std = {}; + let ellipsoid = window.Viewer.scene.globe.ellipsoid; + let cartographic = ellipsoid.cartesianToCartographic(res); + std.lat = Cesium.Math.toDegrees(cartographic.latitude); + std.lng = Cesium.Math.toDegrees(cartographic.longitude); + std.alt = cartographic.height; + return std; + } } export default menuGrid; \ No newline at end of file diff --git a/src/assets/js/Layer/model.js b/src/assets/js/Layer/model.js index b1bd8c6..a980725 100644 --- a/src/assets/js/Layer/model.js +++ b/src/assets/js/Layer/model.js @@ -1,3 +1,4 @@ +import { updateUserPwd } from "../../../api/api"; import store from "../../../store"; import Bus from "@tools/Bus"; const model = { @@ -70,12 +71,13 @@ this.getModelLayer(); var modelMatrix = this.getModelMatrix(res.style); var url = layerData.config.Model_URL + res.style.url; - + var model = this.modelLayer.add(Cesium.Model.fromGltf({ id: res.id, url: url, scale: res.scale, - minimumPixelSize: 64, + minimumPixelSize : 200, + maximumScale : 200000, modelMatrix: modelMatrix })); @@ -182,5 +184,31 @@ Viewer.scene.primitives.add(this.modelLayer); } }, + addImgUpLayer(res) { + var url = layerData.config.Model_URL + '/Data/img/mark1.png' + var citizensBankPark = viewer.entities.add({ + name: res.name, + id: res.id, + position: Cesium.Cartesian3.fromDegrees(res.x, res.y, res.z), + billboard: { //鍥炬爣 + image: url, + width: 32, + height: 44, + pixelOffset: new Cesium.Cartesian3(0, -40, 0), + }, + properties: res, + }); + + }, + delImgUpLayer(res) { + var entity = Viewer.entities._entities._array; + for (var i = 0; i < entity.length; i++) { + var model = entity[i] + if (model.id === res.id) { + Viewer.entities.remove(model) + } + } + + }, } export default model; \ No newline at end of file diff --git a/src/components/index.vue b/src/components/index.vue index 5bb3dfd..b99c80e 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -55,7 +55,10 @@ <img id="myImage" class="image" src=""> </div> <message-info v-if="$store.state.showMessageInfo"></message-info> - <zhai-hai-info v-if="$store.state.isshowZhaiHai"></zhai-hai-info> + <zhai-hai-info v-if="$store.state.isshowZhaiHai"></zhai-hai-info> + <img-up v-if="$store.state.isShowImgUpDate"></img-up> + <meu-grid v-if="$store.state.isshowGrid"></meu-grid> + <map-video v-if="$store.state.isShowVideo"></map-video> </div> </template> @@ -76,6 +79,9 @@ import messageInfo from "@/components/left/layerTree/messageInfo.vue"; import measureCoord from "@/components/left/layerTree/measureCoord.vue"; import zhaiHaiInfo from "./left/layerTree/zhaiHaiInfo.vue"; +import ImgUp from "@/components/left/layerTree/ImgUp.vue"; +import meuGrid from "@/components/left/layerTree/meuGrid.vue"; +import mapVideo from "@/components//left/layerTree/mapVideo.vue"; export default { name: "index", components: { @@ -93,7 +99,10 @@ signalling, messageInfo, measureCoord, - zhaiHaiInfo + zhaiHaiInfo, + ImgUp, + meuGrid, + mapVideo }, data() { return { diff --git a/src/components/left/layerTree/ImgUp.vue b/src/components/left/layerTree/ImgUp.vue new file mode 100644 index 0000000..8812f32 --- /dev/null +++ b/src/components/left/layerTree/ImgUp.vue @@ -0,0 +1,113 @@ +<template> + <div id="mapInfo" class="modelBox" v-drag> + <div> + <div class="modleTitle "> + <div>鍥剧墖鏌ョ湅</div> + <div class="modelClose" @click="$store.state.isShowImgUpDate = false"> X</div> + </div> + </div> + <div class="modelContent "> + <img style="width: 100%; height: calc(100% - 20px)" :src="url" /> + + </div> + + + </div> +</template> + +<script> + + + + +export default { + name: "zhaiHaiInfo", + components: { + + }, + + data() { + return { + url: null, + srcList: null, + }; + }, + mounted() { + this.setLayerStart(); + }, + destroyed() { + + }, + + methods: { + + setLayerStart() { + var url =layerData.config.Model_URL+"/"+ this.$store.state.isShowImgUrl; + this.setUrl(url); + }, + + setUrl(res) { + console.log(res) + this.url = res; + + + } + + } +}; +</script> + +<style scoped lang="less"> +.modelBox { + width: 20%; + height: 25%; + border: 1px solid white; + top: 25%; + left: 30%; + + 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; + + /deep/.el-form-item__label { + color: white; + } + + + + + } + + +} +</style> diff --git a/src/components/left/layerTree/Layer.vue b/src/components/left/layerTree/Layer.vue index 9cb47da..e958b23 100644 --- a/src/components/left/layerTree/Layer.vue +++ b/src/components/left/layerTree/Layer.vue @@ -97,7 +97,7 @@ import AddOnlineMap from "./AddOnlineMap.vue"; import GetScene from "./GetScene.vue"; import SaveScene from "./SaveScene.vue"; -import { Op_SelectByPage, Op_Insert, Op_UpdateById } from '../../../api/api.js' +import { Op_SelectByPage, Op_Insert, Op_UpdateById, Img_SelectByPage, Img_DeleteByIds } from '../../../api/api.js' import model from "../../../assets/js/Layer/model"; import mapOL from "../../../assets/js/Layer/mapOL"; // 宸ョ▼鏍戝伐鍏� @@ -154,6 +154,16 @@ }; }, mounted() { + + Bus.$on("reastLayer", (type) => { + this.setTreeData([]); + this.initData({}); + model.deleteAll(); + setTimeout(() => { + + this.histotyPlotting(); + }, 100); + }); // 鑾峰彇鏈湴閰嶇疆鏂囦欢 if (this.$route.query.hasOwnProperty("layer")) { axios @@ -196,12 +206,13 @@ Bus.$emit("checkTab", "index/add/treeLayer", false); }, closeLayer() { - this.$store.state.isShowLayer= false + this.$store.state.isShowLayer = false // this.$parent.hideLayer(); }, // 瀹氫箟涓浆绔欎簨浠� initBusEvent() { - Bus.$off("addLayer"); + + Bus.$on("addLayer", (type) => { this.selectNode = this.$refs.tree && this.$refs.tree.getCurrentNode(); this.openThisTypePop(type); @@ -394,7 +405,9 @@ this.setTreeData([]); this.initData({}); model.deleteAll(); + var finalPlotting = []; const data = await Op_SelectByPage({ pageSize: 1000000, pageIndex: 1, name: '' }); + const data1 = await Img_SelectByPage({ pageSize: 1000000, pageIndex: 1, name: '' }); if (data.status == 200 && data.data.length > 0) { var val_data = data.data; for (var i in val_data) { @@ -405,7 +418,7 @@ let plottingArr = []; plottingArr.push(val[0]); const newArr = arrGroup(plottingArr, (item) => item.name); - let finalPlotting = []; + newArr.map((a) => { let newObj = {}; a.map((b) => { @@ -417,16 +430,33 @@ }); finalPlotting.push(newObj); }); - let json = { - name: "姹熻嫃浜ゆ帶鏅烘収楂橀��", - id: 1, - open: true, - children: finalPlotting, - }; - this.initData(json); + } } } + + if (data1.status == 200) { + var img_data = data1.data; + if (img_data && img_data.length > 0) { + for (var i = 0; i < img_data.length; i++) { + var item = img_data[i] + item.sourceType = 'imgUp' + item.sid = item.id; + item.id = new Date().getTime() + i; + item.checked = true; + finalPlotting[0].children.push(item) + } + } + + } + var json = { + name: "姹熻嫃浜ゆ帶鏅烘収楂橀��", + id: 1, + open: true, + children: finalPlotting + }; + + this.initData(json); // const downloading = this.$loading({ // lock: true, // text: "浼氳淇濋殰鍘嗗彶鏁版嵁鍔犺浇涓紝璇风◢鍚�", @@ -555,7 +585,7 @@ if (addData && node._children) { node._children.forEach((item) => { _treeTool.addData(item); - console.log(item) + this.setAddGLBLayer(item); }); } else { @@ -823,6 +853,8 @@ model.addModelLayer(res); } else if (res.sourceType == "SimpleGraphic" && res.checked) { mapOL.addLayerData(res); + } else if (res.sourceType == "imgUp" && res.checked) { + model.addImgUpLayer(res); } }, // 娣诲姞婕旂ず鍔ㄧ敾 @@ -941,6 +973,9 @@ // 鍙抽敭鑿滃崟鍏冪礌 rightClick(e, data, node, comp) { this.isClickParent = !!data.children; + if (data.sourceType == 'imgUp') { + this.isClickParent = true; + } this.selectNode = data; this.rightClickMenuStyle = { top: e.pageY + "px", left: e.pageX + "px" }; this.rightClickMenuDisplay = true; @@ -957,16 +992,15 @@ if (this.selectNode.sourceType === "GLB") { model.setDelGLBModel(this.selectNode) } - if (this.selectNode.sourceType === "SimpleGraphic") { - + if (this.selectNode.sourceType === "SimpleGraphic") { mapOL.removeLayerData(this.selectNode) } - + if (this.selectNode.sourceType === "imgUp") { + this.removeimgUpData(this.selectNode) + } this.remove(this.selectNode); this.$refs.tree && this.$refs.tree.setCurrentKey(null); this.selectNode = undefined; - - }, // 鍙抽敭缂栬緫鎸夐挳缂栬緫鏍戣妭鐐� editTreeNode() { @@ -993,6 +1027,18 @@ } } }, + async removeimgUpData(res) { + const data = await Img_DeleteByIds(res.sid); + if (data.status == 200) { + + } + }, + + + + + + // 娣诲姞鐩綍 addFold() { let newChild = { diff --git a/src/components/left/layerTree/mapVideo.vue b/src/components/left/layerTree/mapVideo.vue new file mode 100644 index 0000000..fc962cf --- /dev/null +++ b/src/components/left/layerTree/mapVideo.vue @@ -0,0 +1,116 @@ +<template> + <div id="mapInfo" class="modelBox"> + <div> + <div class="modleTitle "> + <div>璇︽儏</div> + <div class="modelClose" @click="$store.state.isShowVideo = false"> X</div> + </div> + </div> + <div class="modelContent "> + + <div > + <video :src="src" autoplay controls width="100%" height="100%"></video> + </div> + </div> + + + </div> +</template> + +<script> + + + + +export default { + name: "zhaiHaiInfo", + components: { + + }, + + data() { + return { + src: null, + srcList: null, + }; + }, + mounted() { + this.setLayerStart(); + }, + destroyed() { + + }, + + methods: { + + setLayerStart() { + this.src = layerData.config.vidoe_URL; + + }, + + setUrl(res) { + this.url = res; + + + } + + } +}; +</script> + +<style scoped lang="less"> +.modelBox { + width: 40%; + height: 45%; + border: 1px solid white; + top: 25%; + left: 30%; + + 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 a733a99..11fe5e2 100644 --- a/src/components/left/layerTree/messageInfo.vue +++ b/src/components/left/layerTree/messageInfo.vue @@ -3,16 +3,28 @@ <div> <div class="modleTitle "> <div>灞炴�т俊鎭�</div> - <div class="modelClose" @click="$store.state.showMessageInfo = false"> X</div> + <div class="modelmenu"> + <div v-show="showMenuGrid"> + <el-link style="color: white;font-size: 14x;">缂栬緫</el-link> + </div> + <div class="modelClose" @click="$store.state.showMessageInfo = false"> X</div> + </div> + </div> </div> <div class="modelContent"> - <div class="contentMessage" v-for="(item, index) in modelOption" :key="index"> + <div v-show="!showMenuGrid" class="contentMessage" v-for="(item, index) in modelOption" :key="index"> <div>{{ item.name }}</div> <div>{{ item.value }}</div> </div> + <div v-show="showMenuGrid" class="contentMessage" v-for="(item, index) in modelOption" :key="index"> + <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> + </div> </div> - </div> </template> @@ -20,8 +32,7 @@ <script> import model from '../../../assets/js/Layer/model'; import mapInfo from '../../../assets/js/Layer/mapInfo'; - - +import {Grid_SelectById} from '@/api/api' export default { name: "modelEdit", components: { @@ -30,8 +41,8 @@ data() { return { - modelOption: null - + modelOption: null, + showMenuGrid: false, }; }, mounted() { @@ -43,9 +54,34 @@ methods: { setLayerStart() { - this.modelOption = mapInfo.mssageInfo; + 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); + } }, - + setInfoMesgData(res) { + this.modelOption = res + }, + async getInfoMessage(res){ + const data = await Grid_SelectById(res); + console.log(data) + } } }; </script> @@ -75,6 +111,12 @@ align-items: center; padding: 0% 5%; + .modelmenu { + display: flex; + align-items: center; + + } + .modelClose { height: 16px; width: 16px; @@ -83,6 +125,7 @@ justify-content: center; background: rgba(128, 128, 128, 0.6); font-size: 14x; + margin-left: 20px; } } @@ -96,6 +139,7 @@ overflow-y: auto; overflow-x: hidden; + .contentMessage { width: 100%; color: white; @@ -124,6 +168,11 @@ } } + /deep/.el-input__inner { + background: transparent !important; + border: transparent !important; + color: white !important; + } } </style> diff --git a/src/components/left/layerTree/meuGrid.vue b/src/components/left/layerTree/meuGrid.vue new file mode 100644 index 0000000..4e0af29 --- /dev/null +++ b/src/components/left/layerTree/meuGrid.vue @@ -0,0 +1,143 @@ +<template> + <div id="mapInfo" class="modelBox" v-drag> + <div> + <div class="modleTitle "> + <div>鏍肩綉</div> + <div class="modelClose" @click="$store.state.isshowGrid = false"> X</div> + </div> + </div> + <div class="modelContent"> + + <el-form :model="modelOption" style="width: 100%;"> + <el-form-item label="缃戞牸澶у皬(鍗曚綅绫�)"> + <el-input-number v-model="cellSide "></el-input-number> + </el-form-item> + <el-form-item > + <el-button @click="setMenuRowsCols" size="mall">鎻愪氦</el-button> + </el-form-item> + </el-form> + </div> + + + + </div> +</template> + +<script> +import menuGrid from '../../../assets/js/Layer/menuGrid'; + + + + + +export default { + name: "modelEdit", + components: { + + }, + + data() { + return { + modelOption: { + + }, + + cellSide: 3, + }; + }, + mounted() { + this.setLayerStart(); + }, + destroyed() { + + }, + methods: { + + setLayerStart() { + this.modelOption = mapInfo.mssageInfo; + }, + setMenuRowsCols(){ + menuGrid.setGridRowCol({cellSide:this.cellSide}); + } + } +}; +</script> + +<style scoped lang="less"> +.modelBox { + width: 370px; + height: 22%; + border: 1px solid white; + top: 30%; + left: calc(50% - 180px); + + 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: 88%; + height: calc(95% - 62px); + margin: 5%; + // display: flex; + // justify-content: space-between; + + overflow-y: auto; + overflow-x: hidden; + + .contentMessage { + width: 100%; + color: white; + display: flex; + border: 1px solid white; + border-top: transparent; + + div { + width: calc(50% - 2px); + text-align: center; + // margin-bottom: 5%; + line-height: 50px; + border-right: 1px solid white; + } + + div:first-child { + border-right: 1px solid white; + + } + + } + + .contentMessage:first-child { + border-top: 1px solid white; + ; + } + } + + +} +</style> diff --git a/src/components/left/leftmenu.vue b/src/components/left/leftmenu.vue index 2270aa1..1e3af49 100644 --- a/src/components/left/leftmenu.vue +++ b/src/components/left/leftmenu.vue @@ -825,7 +825,7 @@ // 鎵撳嬀閫変腑 let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1; this.setVisiable(treeNode, isCheck); - this.setGeoJSOnCheck(treeNode,isCheck); + this.setGeoJSOnCheck(treeNode, isCheck); //閫変腑涔嬪悗浼犵粰vuex let selectedLayers = this.$refs.tree.getCheckedNodes(); let filterSelectLayers = selectedLayers; @@ -853,9 +853,11 @@ return params; // } }, - setGeoJSOnCheck(treeNode, checked){ - if(!checked){ + setGeoJSOnCheck(treeNode, checked) { + if (!checked) { mapGeo.delGeoSource(treeNode); + } else { + mapGeo.init(treeNode); } }, setVisiable(treeNode, checked) { @@ -1710,7 +1712,7 @@ break; case 'GEOJSON': mapGeo.init(treeNode); - + break; case "wmse": // layer = sgworld.Creator.CreateWMSImageFeatureLayer( @@ -2410,6 +2412,10 @@ "0", true ); + layer._primitive.cullingDistance = 100 + layer._primitive.cameraHeightRange = new Cesium.Cartesian3(0, 1000) + + break; case "s3m": layer = sgworld.Creator.createS3MLayer( diff --git a/src/components/map/viewer.vue b/src/components/map/viewer.vue index b6ee453..404c08f 100644 --- a/src/components/map/viewer.vue +++ b/src/components/map/viewer.vue @@ -97,10 +97,12 @@ this.$nextTick(function () { let that = this; //*********鍖椾含sdk************ + + // Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NzE3ZGI5NC00MzAwLTRmMzEtOTA5NS0zNzQ3YmJhOTg5MWMiLCJpZCI6NDE4NDYsImlhdCI6MTYxMjU4MDEyN30.XQkH4SpF-q3ykVvnBi_HVyJwSxTM-58SxlRG387T6TY"; window.sgworld = new SmartEarth.EarthCtrl( "sdkContainer", { - StaticFileBaseUrl: "../../../static/CimSDK/", + StaticFileBaseUrl: "../../../static/CimSDK/", // StaticFileBaseUrl: "../../../SW/static/CimSDK/", // StaticFileBaseUrl: "../../../JSJKZHGS/static/CimSDK/", }, @@ -128,6 +130,8 @@ window.Viewer = sgworld._Viewer; window.viewer = sgworld._Viewer; sgworld._Viewer.scene.moon.show = false; + // Viewer.terrainProvider=Cesium.createWorldTerrain() + window.sgwfs = new SmartEarth.WFSTool(sgworld._Viewer, Cesium); Viewer.shadows = false; //娣卞害妫�娴� @@ -206,7 +210,7 @@ mapViewer.addClick(); - + }); let size = this.detectZoom(); this.scale = (100 / size).toFixed(2); @@ -395,7 +399,7 @@ // ); var layer = Viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({ url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", - + })) layer.name = "ARCGIS" }, @@ -409,7 +413,7 @@ tileMatrixSetID: "GoogleMapsCompatible", })) layer.name = "澶╁湴鍥�"; - layer.show= false; + layer.show = false; var layer1 = Viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ url: layerData.config.tdtZj + layerData.config.tdtToken, layer: "tdtAnnoLayer", @@ -419,7 +423,7 @@ tileMatrixSetID: "GoogleMapsCompatible", })) layer1.name = "澶╁湴鍥�" - layer1.show= false; + layer1.show = false; }, //鍒濆鍖栧脊绐椾簨浠� diff --git a/src/components/menu/menulist.vue b/src/components/menu/menulist.vue index 9b58d12..70c345c 100644 --- a/src/components/menu/menulist.vue +++ b/src/components/menu/menulist.vue @@ -1,23 +1,10 @@ <template> <div> - <div - @click="showMenuList" - :class="{ menulist: !panelActive, menulist_active: panelActive }" - class="menuliststyle" - > - <img - class="menuchangebtn" - v-show="!panelActive" - title="鑿滃崟" - :src="switchMenuImage" - /> + <div @click="showMenuList" :class="{ menulist: !panelActive, menulist_active: panelActive }" class="menuliststyle"> + <img class="menuchangebtn" v-show="!panelActive" title="鑿滃崟" :src="switchMenuImage" /> <div class="menubtnlist" v-show="panelActive"> <div class="menubtn" @click="showSceneCard()"> - <img - class="bhImg" - title="鍦烘櫙鏁版嵁" - src="@/assets/img/left/specialeffect4.png" - /> + <img class="bhImg" title="鍦烘櫙鏁版嵁" src="@/assets/img/left/specialeffect4.png" /> <span>鍦烘櫙</span> </div> <div class="menubtn" @click="setMenuTool(1)"> @@ -32,73 +19,46 @@ <img class="bhImg" title="婕父" src="@/assets/img/right/my11.png" /> <span>婕父</span> </div> - <div class="menubtn" @click="showModelCard()"> - <img - class="bhImg" - title="涓撻" - src="@/assets/img/left/specialanalyse4.png" - /> + <div class="menubtn" @click="showModelCard()"> + <img class="bhImg" title="涓撻" src="@/assets/img/left/specialanalyse4.png" /> <span>妯″瀷</span> - </div> - + </div> + + <!-- <div class="menubtn" @click="setMenuGrid()"> + <img class="bhImg" title="鏍肩綉" src="@/assets/img/right/cx-s.png" /> + <span>鏍肩綉</span> + </div> --> <div class="menubtn" @click="setMenuQuery()"> - <img class="bhImg" title="鏌ヨ" src="@/assets/img/right/cx-s.png" /> + <img class="bhImg" title="鏌ヨ" src="@/assets/img/right/queyr.png" /> <span>鏌ヨ</span> + </div> + <div class="menubtn" @click="setImgUpDate()"> + <input id="imgs" type="file" multiple="multiple" v-show="false" @change="setImgUpload" accept=".jpg,.png" /> + <img class="bhImg" title="涓婁紶" src="@/assets/img/right/upload.png" /> + <span>涓婁紶</span> </div> <div class="menubtn" @click="setMenuTool(5)"> <img class="bhImg" title="鍒嗘瀽" src="@/assets/img/right/cx-s.png" /> <span>鍒嗘瀽</span> </div> <div class="menubtn" @click="setMenuTool(6)"> - <img - class="bhImg" - title="鐗规晥" - src="@/assets/img/left/leftnav2.png" - /> + <img class="bhImg" title="鐗规晥" src="@/assets/img/left/leftnav2.png" /> <span>鐗规晥</span> </div> <div class="menubtn" @click="showSettingCard()"> - <img - class="bhImg" - title="璁剧疆" - src="@/assets/img/left/specialeffect4.png" - /> + <img class="bhImg" title="璁剧疆" src="@/assets/img/left/specialeffect4.png" /> <span>璁剧疆</span> </div> - + </div> </div> <div class="menutools"> - <plotting - class="menutool" - :class="{ menutoolhide: !(!panelActive && selectIndex == 1) }" - ref="plotting" - /> - <measure - class="menutool" - :class="{ menutoolhide: !(!panelActive && selectIndex == 2) }" - ref="measure" - /> - <roam - class="menutool" - :class="{ menutoolhide: !(!panelActive && selectIndex == 3) }" - ref="roam" - /> - <special - class="menutool" - :class="{ menutoolhide: !(!panelActive && selectIndex == 4) }" - ref="special" - /> - <analysis - class="menutool" - :class="{ menutoolhide: !(!panelActive && selectIndex == 5) }" - ref="analysis" - /> - <effects - class="menutool" - :class="{ menutoolhide: !(!panelActive && selectIndex == 6) }" - ref="effects" - /> + <plotting class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 1) }" ref="plotting" /> + <measure class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 2) }" ref="measure" /> + <roam class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 3) }" ref="roam" /> + <special class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 4) }" ref="special" /> + <analysis class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 5) }" ref="analysis" /> + <effects class="menutool" :class="{ menutoolhide: !(!panelActive && selectIndex == 6) }" ref="effects" /> </div> </div> </template> @@ -123,8 +83,7 @@ width: 0px !important; } -.menutools { -} +.menutools {} .menuchangebtn { position: absolute; @@ -153,7 +112,7 @@ margin: 5px; cursor: pointer; /* border: 1px solid #999; */ - background-image: url("~@/assets/img/new/menuBg.png"); + background-image: url("~@/assets/img/new/menuBg.png"); background-size: contain; border-radius: 5px; overflow: hidden; @@ -209,16 +168,16 @@ border-radius: 30px; cursor: pointer; } + .menulist:hover { background-image: url("~@/assets/img/new/rightCircle-y.png"); } + .menulist_active { - border-image-source: radial-gradient( - 59% 79%, - transparent 0px, - transparent 100%, - cyan 100% - ); + border-image-source: radial-gradient(59% 79%, + transparent 0px, + transparent 100%, + cyan 100%); border-image-slice: 1; border-width: 1px; border-style: solid; @@ -227,7 +186,7 @@ background-size: 100% 100%; background-repeat: no-repeat; width: 360px; - height: 200px; + height: 180px; /* border-radius: 5px 5px 5px 30px; */ } </style> @@ -250,6 +209,8 @@ import fx from "@/assets/img/right/cx-s.png"; import tx from "@/assets/img/left/leftnav2.png"; import menuGrid from '@/assets/js/Layer/menuGrid' +import { Img_Upload } from '@/api/api.js' +import Bus from "../tools/Bus"; export default { name: "menulist", components: { @@ -297,18 +258,38 @@ showSettingCard() { this.$store.commit("showSetBox", true); }, - showModelCard(){ + showModelCard() { this.$store.commit("showModelBox", true); }, - showSceneCard(){ + showSceneCard() { this.$store.commit("showSceneBox", ""); }, - setMenuQuery(){ - this.$store.commit("setMenuQuery",true) + setMenuQuery() { + this.$store.commit("setMenuQuery", true) }, - setGridQuery(){ + setMenuGrid() { menuGrid.init(); }, + setImgUpDate() { + // this.$store.commit("setImgUpdate",true) + + $("#imgs").click(); + }, + async setImgUpload() { + var formData = new FormData(); + var fs = document.getElementById("imgs"); + for (var i = 0, c = fs.files.length; i < c; i++) { + formData.append(fs.files[i].name, fs.files[i]); // name, file + } + const data = await Img_Upload(formData) + if (data.status == 200) { + this.$message({ + message: "鍥剧墖涓婁紶鎴愬姛", + type: "success", + }); + Bus.$emit("reastLayer",true); + } + }, closeAllHighLight(type) { // !(type == "plotting") && this.$refs.plotting.clearHighLight(); // !(type == "roam") && this.$refs.roam.clearActive(); diff --git a/src/store/index.js b/src/store/index.js index a9bfbde..3d13ead 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -43,11 +43,14 @@ isMeasureFlag: false, measureCoordObj: null, isShowMeasureCoord: false, - isShowMenuQuery:false, - isQueryFalag:false, - isQyeryCoord:null, - showZhaiHaiImg:null, - isshowZhaiHai:false, + isShowMenuQuery: false, + isQueryFalag: false, + isQyeryCoord: null, + showZhaiHaiImg: null, + isshowZhaiHai: false, + isShowImgUpDate: false, + isshowGrid:false, + isShowVideo:false, }, mutations: { selectedLayer(state, b) { @@ -109,6 +112,9 @@ setMenuQuery(state, b) { state.isShowMenuQuery = b; }, + setImgUpdate(state, b) { + state.isShowImgUpDate = b; + }, // 瀹氫箟宸ョ▼鏍戞暟鎹� setTreeData(state, data = []) { ergodicNode(data); diff --git a/static/CimSDK/Workers/image/test03-01.png b/static/CimSDK/Workers/image/test03-01.png new file mode 100644 index 0000000..c241360 --- /dev/null +++ b/static/CimSDK/Workers/image/test03-01.png Binary files differ diff --git a/static/data/layerData.js b/static/data/layerData.js index a645bc8..d03623d 100644 --- a/static/data/layerData.js +++ b/static/data/layerData.js @@ -12,7 +12,8 @@ tdtZj: "http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=", tdtToken: "94a34772eb88317fcbf8428e10448561", olTdtSl: 'http://t0.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=', - olTdtBZ: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + olTdtBZ: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=', + vidoe_URL:"http://192.168.20.83/JiangSu/Data/video/m1.mp4", }, modelData: [ { diff --git a/static/layers.json b/static/layers.json index ec928bb..5dd5eed 100644 --- a/static/layers.json +++ b/static/layers.json @@ -39,6 +39,16 @@ "zIndex": 4, "checked": false, "rename": false + }, { + "id": "A349C2B3", + "sourceType": "GEOJSON", + "type": "ZhongPo", + "name": "绾靛潯", + "urls": "/Data/json/ZhongPo.geojson", + "alpha": 1, + "zIndex": 4, + "checked": false, + "rename": false }, { "id": "A349C2B4", @@ -114,6 +124,15 @@ "rename": false, "zIndex": 2, "effectsMaxHeight": 0 + },{ + "id": "482040AD4", + "sourceType": "b3dm", + "name": "鍘嬪姏娴嬭瘯妯″瀷", + "urls": "http://192.168.20.83:8866/gisserver/c3dserver/BIM/tileset.json", + "checked": false, + "rename": false, + "zIndex": 2, + "effectsMaxHeight": 0 } ], "rename": false, diff --git a/vue.config.js b/vue.config.js index 720a4d2..893c1a6 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,43 +1,19 @@ -/* - * @Author: 鐜嬫棴 1377869194@qq.com - * @Date: 2023-05-08 13:52:20 - * @LastEditors: 鐜嬫棴 1377869194@qq.com - * @LastEditTime: 2023-05-08 14:17:30 - * @FilePath: \LFWEB_NEW\vue.config.js - * @Description: 杩欐槸榛樿璁剧疆,璇疯缃甡customMade`, 鎵撳紑koroFileHeader鏌ョ湅閰嶇疆 杩涜璁剧疆: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE - */ -const path = require("path") -const resolve = dir => path.join(__dirname, dir) module.exports = { lintOnSave: false, publicPath: "./", + outputDir: process.env.outputDir, devServer: { - host: 'localhost',//鏈湴鍦板潃 - port: '8080',//绔彛鍙� - hot: true,//鐑洿鏂拌嚜鍔ㄥ埛鏂� - open: true,//鑷姩鎵撳紑 - overlay: { //褰撳嚭鐜扮紪璇戦敊璇垨璀﹀憡鏃讹紝鍦ㄦ祻瑙堝櫒涓樉绀哄叏灞忚鐩栥�傚彧鏄剧ず閿欒淇℃伅涓嶆彁绀鸿鍛婃儏鍐甸檺鍒舵槸 - warning: false, - error: true - }, + //proxy: "http://192.168.20.70:8001/" + // // 閰嶇疆璺ㄥ煙-璇锋眰鍚庣鐨勪唬鐞嗘帴鍙� proxy: { - "/aaaa": { - target: 'http:localhost/aaaa',//浠g悊鍦板潃 鍑℃槸浣跨敤/api - changeOrigin: true,//鍏佽璺ㄥ煙璇锋眰 - secure: false, - pathRewrite: { //閲嶅啓璺緞 鏇挎崲璇锋眰鍦板潃涓殑鎸囧畾璺緞 - ['^/aaaa']: '' //灏嗚姹傚湴鍧�涓殑api鏇挎崲涓虹┖ - } - } - } - }, - - configureWebpack: { - resolve: { - alias: { - "@": resolve("src"), + "/JiangSu": { + target: "http://localhost:8080/JiangSu", //瀵瑰簲鑷繁鐨勬帴鍙� + changeOrigin: true, + ws: true, + pathRewrite: { + "^/JiangSu": "", + }, }, }, }, - -} +}; -- Gitblit v1.9.3