From 40aeb40b95003cca071dfd434160e5e4244b7ace Mon Sep 17 00:00:00 2001 From: zhanmingkan <496160012@qq.com> Date: 星期六, 14 五月 2022 14:22:04 +0800 Subject: [PATCH] Merge branch 'master' of ssh://117.78.1.188:29418/DDE-WEB --- assets/utils/popup.js | 66 ++++++++ assets/js/ajax.js | 2 view/project/layerAnalysis.html | 39 ++++ assets/css/popup.css | 51 ++++++ assets/service/drawService.js | 59 +++++++ libs/Cesiumplus/CesiumDraw.js | 8 assets/map/map3D.js | 247 +++++++++++++++++++++++++++++- view/index.html | 3 8 files changed, 458 insertions(+), 17 deletions(-) diff --git a/assets/css/popup.css b/assets/css/popup.css new file mode 100644 index 0000000..d276df3 --- /dev/null +++ b/assets/css/popup.css @@ -0,0 +1,51 @@ +.bx-popup-ctn{ + position: absolute; + z-index: 999; + background: transparent; + opacity: 0.5; + border-radius: 4px; + border-style:solid; + border-color: rgb(0,133,203); +} +.bx-popup-tip-container { + width: 40px; + height: 20px; + position: absolute; + left: 50%; + margin-left: -20px; + overflow: hidden; + pointer-events: none; +} +.bx-popup-tip { + width: 17px; + background: rgb(0,133,203,0.5); + height: 17px; + padding: 1px; + margin: -10px auto 0; + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +.bx-popup-header-ctn{ + background: rgb(0,133,203); + color: #fff; + font-size: 15px; + padding: 4px; +} +.bx-popup-content-ctn{ + padding:15px ; + width: 200px; + height: 150px; + background: rgb(0,133,203,0.5); +} +.leaflet-popup-close-button{ + user-select: auto; + position: absolute; + padding: 4px; + right: 0; + top: 0; + color: #fff; + cursor: pointer; + font-size: 15px; +} \ No newline at end of file diff --git a/assets/js/ajax.js b/assets/js/ajax.js index 9f7fb23..adc14e8 100644 --- a/assets/js/ajax.js +++ b/assets/js/ajax.js @@ -14,5 +14,3 @@ initmap3D(initMapOptions); - - diff --git a/assets/map/map3D.js b/assets/map/map3D.js index b8c2f73..fa6c49b 100644 --- a/assets/map/map3D.js +++ b/assets/map/map3D.js @@ -113,6 +113,8 @@ //娣诲姞娴锋磱娴佸姩鏁堟灉 // addSeaFlow(); + //鍒濆鍖栫粯鍒跺浘褰� + initDrawEntity(); } var mouseMoveHandler @@ -146,6 +148,9 @@ viewer.clock.onTick.removeEventListener(onTickCallback); var pick = viewer.scene.pick(movement.position); CesiumPop.removeDiv(); + if(labelLayer!=null){//鍏抽棴鏂囧瓧缂栬緫寮圭獥 + layer.close(labelLayer); + } if (pick != undefined && pick instanceof Cesium.Cesium3DTileFeature) { var propertyNames = pick.getPropertyNames(); var length = propertyNames.length; @@ -198,12 +203,14 @@ else if (pick != undefined && pick instanceof Object) { var pickPrimitive = pick.primitive; var entity = pick.id; + var cartesian = viewer.scene.pickPosition(movement.position); //娣诲姞鏂囧瓧鏍囩浜嬩欢锛歾zf if(entity!=undefined && entity instanceof Object &&entity.title!=undefined){ if(entity._name=='drawLabelEtity'){ - if(labelLayer!=null){ - layer.close(labelLayer); - } + layer.config({ + extend: 'myskin/style.css' //鍚屾牱闇�瑕佸厛鍔犺浇鏂扮毊鑲� + }); + labelLayer=layer.open({ type: 2, title: '<i class="iconfont icon-huitu i-item" style="font-size: 18px; color: white;"></i> ' + "缂栬緫鏂囧瓧", @@ -224,12 +231,12 @@ }); } } - var cartesian = viewer.scene.pickPosition(movement.position); - var cartographic = Cesium.Cartographic.fromCartesian(cartesian); - var lat = Cesium.Math.toDegrees(cartographic.latitude); - var lng = Cesium.Math.toDegrees(cartographic.longitude); - var alt1 = cartographic.height; - if (pickPrimitive instanceof Cesium.PointPrimitive || pickPrimitive instanceof Cesium.GroundPolylinePrimitive || pickPrimitive instanceof Cesium.GroundPrimitive) { + // var cartesian = viewer.scene.pickPosition(movement.position); + // var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + // var lat = Cesium.Math.toDegrees(cartographic.latitude); + // var lng = Cesium.Math.toDegrees(cartographic.longitude); + // var alt1 = cartographic.height; + // if (pickPrimitive instanceof Cesium.PointPrimitive || pickPrimitive instanceof Cesium.GroundPolylinePrimitive || pickPrimitive instanceof Cesium.GroundPrimitive) { // CesiumPop.bindPopGlobeEventHandler(viewer); // var content = '<div class="mapPop font2">' // + '<div style="margin-top:10px;margin-left:15px;">' @@ -255,7 +262,7 @@ // "primitive": pick.primitive // } // CesiumPop.addDivPop(options); - } + // } } @@ -757,7 +764,43 @@ let font=signPointEntity._label._font._value.split(" "); signPointEntity._label._font._value = font[0]+" "+val; } - + // let mydata = "{id:'" + signPointEntity._id + "',"; + // mydata = mydata + "type:label,"; + // mydata = mydata + "longitude:" + signPointEntity._position._value.x + ","; + // mydata = mydata + "latitude:" + signPointEntity._position._value.y + ","; + // mydata = mydata + "height:" + signPointEntity._position._value.z + ","; + // mydata = mydata + "content:" + signPointEntity.title + ","; + // mydata = mydata + "color:'" + signPointEntity._label._fillColor._value.toCssColorString() + "',"; + // mydata = mydata + "fontsize:'" + signPointEntity._label._font._value[0].replace("px","") + "',"; + // mydata = mydata + "fontstyle:'" + signPointEntity._label._font._value[1] + "'}"; + let saveData= { + "id":signPointEntity._id, + "type": "label", + "longitude": signPointEntity._position._value.x, + "latitude": signPointEntity._position._value.y, + "height": signPointEntity._position._value.z, + "content":signPointEntity.title, + "color":signPointEntity._label._fillColor._value.toCssColorString(), + "fontsize":signPointEntity._label._font._value.split(" ")[0].replace("px",""), + "fontstyle":signPointEntity._label._font._value.split(" ")[1], + } + let token = window.localStorage.getItem("token"); + $.ajax({ + type: "post", + async: false, + url: parent.httpConfig.webApiUrl + "landstamp/front/updateDrawEntity", + data: saveData, + contentType: "application/x-www-form-urlencoded", + beforeSend:function(request){ + request.setRequestHeader("token",token); + }, + success: function (data) { + console.log(data) + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + console.log("ajax璇锋眰澶辫触锛�"); + } + }); } function addSeaFlow() { @@ -1088,4 +1131,186 @@ }) }); viewer.scene.primitives.add(waterPrimitive);*/ +} + +function initDrawEntity(){//zzf:鍒濆鍖栧浘褰� + let token = window.localStorage.getItem("token"); + $.ajax({ + type: "get", + async: false, + url: parent.httpConfig.webApiUrl + "landstamp/front/getDrawEntity", + contentType: "application/json;charset=utf-8", + beforeSend:function(request){ + request.setRequestHeader("token",token); + }, + success: function (data) { + if(data.rows!=null){ + for(let i=0;i<data.rows.length;i++){ + if(data.rows[i].type=="point"){ + drawAjaxPoint(data.rows[i]) + } + else if(data.rows[i].type=="polyline"){ + drawAjaxPolyline(data.rows[i]) + } + else if(data.rows[i].type=="polygon"){ + drawAjaxPolygon(data.rows[i]) + } + else if(data.rows[i].type=="label"){ + drawAjaxLabel(data.rows[i]) + } + } + } + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + console.log("ajax璇锋眰澶辫触锛�"); + } + }); +} + +function drawAjaxPoint(drawEntity){//鍔犺浇鐐� + let cartesian=new Cesium.Cartesian3(parseFloat(drawEntity.longitude),parseFloat(drawEntity.latitude),parseFloat(drawEntity.height)) + var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + var entity = viewer.entities.add({ + id:drawEntity.id, + name: 'drawPointEntity', + position: cartesian, + point: { + color: Cesium.Color.RED, + pixelSize: 10, + outlineColor: Cesium.Color.WHITE, + outlineWidth: 2, + disableDepthTestDistance: Number.POSITIVE_INFINITY + } + }); + entity.title = "鐐�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + addTreeNode({ + "title": entity.title, + "id": entity.id, + "field": "Entity", + "checked": true, + "spread": true, + "children": [], + "ext": { + "lng": Cesium.Math.toDegrees(cartographic.longitude), + "lat": Cesium.Math.toDegrees(cartographic.latitude) + } + }, "4"); +} + +function drawAjaxPolyline(drawEntity){//鍔犺浇绾� + var measureLinePositonsArray = [];//瀛樺偍宸查噺娴嬬殑绾挎鐨勬姌鐐� + let longitudeList=drawEntity.longitude.split(","); + let latitudeList=drawEntity.latitude.split(","); + let heightList=drawEntity.height.split(","); + //鐐瑰潗鏍� + for(let i=0;i<longitudeList.length;i++){ + let cartesian=new Cesium.Cartesian3(parseFloat(longitudeList[i]),parseFloat(latitudeList[i]),parseFloat(heightList[i])) + measureLinePositonsArray.push(cartesian); + } + var drawpointArr = []; + var measureLineGroundEntity = viewer.entities.add({ + id:drawEntity.id, + name: 'measureLineGroundEntity', + polyline: { + clampToGround: true, + width: 1, + material: new Cesium.Color.fromBytes(255,124,0,255), + positions:measureLinePositonsArray + }, + drawpointArr: drawpointArr, + measureLinePositonsArray: measureLinePositonsArray + }); + measureLineGroundEntity.title = "鎶樼嚎" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + addTreeNode({ + "title": measureLineGroundEntity.title, + "id": measureLineGroundEntity.id, + "field": "Entity", + "checked": true, + "spread": true, + "children": [], + "ext": { + // "lng": Cesium.Math.toDegrees(cartographic.longitude), + // "lat": Cesium.Math.toDegrees(cartographic.latitude) + } + }, "4"); +} + +function drawAjaxPolygon(drawEntity){//鍔犺浇闈� + var polyPositions = [];//瀛樺偍澶氳竟褰㈢殑鐐� + let longitudeList=drawEntity.longitude.split(","); + let latitudeList=drawEntity.latitude.split(","); + let heightList=drawEntity.height.split(","); + //鐐瑰潗鏍� + for(let i=0;i<longitudeList.length;i++){ + let cartesian=new Cesium.Cartesian3(parseFloat(longitudeList[i]),parseFloat(latitudeList[i]),parseFloat(heightList[i])) + polyPositions.push(cartesian); + } + var polygon = new Cesium.PolygonHierarchy(); + polygon.positions=polyPositions; + var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center; + polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter); + let cartographic = Cesium.Cartographic.fromCartesian(polyCenter, viewer.scene.globe.ellipsoid, new Cesium.Cartographic()); + var measurePolyGonGroundEntity = viewer.entities.add({ + id:drawEntity.id, + name: 'measurePolyGonGroundEntity', + polygon: { + material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.3)), + classificationType: Cesium.ClassificationType.BOTH, + outline: true, + outlineColor: Cesium.Color.WHITE, + hierarchy: new Cesium.CallbackProperty(function () { + return polygon; + }, false) + } + }); + measurePolyGonGroundEntity.title = "闈�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + addTreeNode({ + "title": measurePolyGonGroundEntity.title, + "id": measurePolyGonGroundEntity.id, + "field": "Entity", + "checked": true, + "spread": true, + "children": [], + "ext": { + "lng": Cesium.Math.toDegrees(cartographic.longitude), + "lat": Cesium.Math.toDegrees(cartographic.latitude) + } + }, "4"); +} + +function drawAjaxLabel(drawEntity){//鍔犺浇鏂囧瓧 + let cartesian=new Cesium.Cartesian3(parseFloat(drawEntity.longitude),parseFloat(drawEntity.latitude),parseFloat(drawEntity.height)) + var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + cartographic = Cesium.Cartographic.fromCartesian(cartesian); + var entity = viewer.entities.add({ + id:drawEntity.id, + name: 'drawLabelEtity', + position: cartesian.clone(), + label: { + text: drawEntity.content, + font: drawEntity.fontsize+'px '+drawEntity.fontstyle, + fillColor: Cesium.Color.fromCssColorString(drawEntity.color), + outlineColor: Cesium.Color.BLACK, + outlineWidth: 2, + style: Cesium.LabelStyle.FILL_AND_OUTLINE, + verticalOrigin: Cesium.VerticalOrigin.BOTTOM, + horizontalOrigin: Cesium.HorizontalOrigin.CENTER, + disableDepthTestDistance: Number.POSITIVE_INFINITY, + heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0) + } + }); + entity.title=drawEntity.content, + addTreeNode({ + "title": entity.title, + "id": entity.id, + "field": "Entity", + "checked": true, + "spread": true, + "children": [], + "ext": { + "lng": Cesium.Math.toDegrees(cartographic.longitude), + "lat": Cesium.Math.toDegrees(cartographic.latitude) + } + }, "4"); } \ No newline at end of file diff --git a/assets/service/drawService.js b/assets/service/drawService.js index 7b8be03..7378e00 100644 --- a/assets/service/drawService.js +++ b/assets/service/drawService.js @@ -49,4 +49,63 @@ 'viewer': viewer, //鍏ㄥ眬Cesium瀵硅薄 }; CesiumDraw.clearDraw(options); +} + +function saveDrawEntity(type,drawEntity,id){//zzf:淇濆瓨缁樺埗鐨勫浘褰� + let saveData; + if(type=='point'){ + saveData= { + "id":id, + "type": type, + "longitude": drawEntity._position._value.x, + "latitude": drawEntity._position._value.y, + "height": drawEntity._position._value.z, + } + } + else if(type=='polyline'||type=='polygon'){ + let longitudeList=[],latitudeList=[],heightList=[] + for(let i=0;i<drawEntity.length;i++){ + longitudeList.push(drawEntity[i]._position._value.x) + latitudeList.push(drawEntity[i]._position._value.y) + heightList.push(drawEntity[i]._position._value.z) + } + saveData= { + "id":id, + "type": type, + "longitude": longitudeList.toString(), + "latitude":latitudeList.toString(), + "height": heightList.toString(), + } + } + else if(type=='label'){ + saveData= { + "id":id, + "type": type, + "longitude": drawEntity._position._value.x, + "latitude": drawEntity._position._value.y, + "height": drawEntity._position._value.z, + "content":drawEntity.title, + "color":drawEntity._label._fillColor._value.toCssColorString(), + "fontsize":30, + "fontstyle":'SimSun', + } + } + + let token = window.localStorage.getItem("token"); + $.ajax({ + type: "get", + async: false, + url: parent.httpConfig.webApiUrl + "landstamp/front/addDrawEntity", + data: saveData, + contentType: "application/json;charset=utf-8", + beforeSend:function(request){ + request.setRequestHeader("token",token); + }, + success: function (data) { + console.log(data) + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + console.log("ajax璇锋眰澶辫触锛�"); + } + }); } \ No newline at end of file diff --git a/assets/utils/popup.js b/assets/utils/popup.js new file mode 100644 index 0000000..3162ba4 --- /dev/null +++ b/assets/utils/popup.js @@ -0,0 +1,66 @@ + // 鍒涘缓寮圭獥瀵硅薄鐨勬柟娉� + var Popup = function(info){ + this.constructor(info); +} +Popup.prototype.id=0; +Popup.prototype.dom=[]; +Popup.prototype.constructor = function(info){ + var _this = this; + _this.viewer = info.viewer;//寮圭獥鍒涘缓鐨剉iewer + _this.geometry = info.geometry;//寮圭獥鎸傝浇鐨勪綅缃� + _this.id = info.id; + _this.entity=info.entity; + _this.ctn = $("<div class='bx-popup-ctn' id = '"+_this.id+"'>"); + + var entity={"id":_this.id,"dom":_this.ctn}; + Popup.prototype.dom.push(entity); + + $(_this.viewer.container).append( _this.ctn); + //娴嬭瘯寮圭獥鍐呭 + var testConfig = { + header:_this.entity._name, + content:'<img class="image" style="width:100%;height:100%;max-width:200px;max-height:150px" src=""></img>' + } + _this.ctn.append(_this.createHtml(testConfig.header,testConfig.content,_this.id)); + + _this.render(_this.geometry); + _this.eventListener = _this.viewer.clock.onTick.addEventListener(function(clock) { + _this.render(_this.geometry); + }) +} +// 瀹炴椂鍒锋柊 +Popup.prototype.render = function(geometry){ + var _this = this; + var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene,geometry) + if(position!=null){ + _this.ctn.css("left",position.x- _this.ctn.get(0).offsetWidth/2); + _this.ctn.css("top",position.y- _this.ctn.get(0).offsetHeight - 10); + } +} +// 鍔ㄦ�佺敓鎴愬唴瀹� +Popup.prototype.createHtml = function(header,content,id){ + var html = '<div class="bx-popup-header-ctn">'+ + header+ + '</div>'+ + '<div class="bx-popup-content-ctn" >'+ + '<div class="bx-popup-content">'+ + content+ + '</div>'+ + '</div>'+ + '<div class="bx-popup-tip-container" >'+ + '<div class="bx-popup-tip" >'+ + '</div>'+ + '</div>'+ + '<a class="leaflet-popup-close-button" onClick="Popup.prototype.close(\''+id+'\')">X</a>'; + return html; +} +// 鍏抽棴寮圭獥鎸夐挳 +Popup.prototype.close=function(id){ + var _this = this; + for(let i=0;i<_this.dom.length;i++){ + if(_this.dom[i].id==id){ + _this.dom[i].dom.hide(); + // _this.dom.splice(i,1) + } + } +} \ No newline at end of file diff --git a/libs/Cesiumplus/CesiumDraw.js b/libs/Cesiumplus/CesiumDraw.js index 948df86..8ef7e66 100644 --- a/libs/Cesiumplus/CesiumDraw.js +++ b/libs/Cesiumplus/CesiumDraw.js @@ -262,6 +262,7 @@ // }) // } addTreeNode(node, "4"); + saveDrawEntity("polygon",drawpointArr,measurePolyGonGroundEntity.id); } for (let i in drawpointArr) { viewer.entities.remove(drawpointArr[i]); @@ -320,7 +321,6 @@ measureLineGroundEntity.polyline.positions = new Cesium.CallbackProperty(function () { return measureLinePositonsArray; }, false) - var drawpointArr = measureLineGroundEntity.drawpointArr; //鑺傜偣娣诲姞鏍囩 function addPin(carPoi) { @@ -455,6 +455,7 @@ // } addTreeNode(node, "4"); + saveDrawEntity("polyline",drawpointArr,measureLineGroundEntity.id); } for (let i in drawpointArr) { viewer.entities.remove(drawpointArr[i]); @@ -510,6 +511,7 @@ "lat": Cesium.Math.toDegrees(cartographic.latitude) } }, "4"); + saveDrawEntity("point",entity,entity.id); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } @@ -574,6 +576,7 @@ "lat": Cesium.Math.toDegrees(cartographic.latitude) } }, "4"); + saveDrawEntity("label",entity,entity.id); drawHandler = drawHandler && drawHandler.destroy(); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } @@ -592,4 +595,5 @@ } else { console.log("CesiumDraw already defined."); } -})(window); \ No newline at end of file +})(window); + diff --git a/view/index.html b/view/index.html index b3bcf84..2caf12b 100644 --- a/view/index.html +++ b/view/index.html @@ -27,7 +27,6 @@ <script type="text/javascript" src="../assets/js/localStorage.js"></script> <script type="text/javascript" src="../assets/utils/ry-ui.js"></script> <script type="text/javascript" src="../assets/js/common.js"></script> - <!--寮曞叆cesuim Js--> <script src="../libs/Cesium1.75/Cesium.js"></script> <script> @@ -54,6 +53,8 @@ <script src="../libs/Cesiumplus/CesiumMeasure.js"></script> <script src="../libs/Cesiumplus/CesiumViewshed.js"></script> <script src="../libs/Cesiumplus/arrow/plotUtil.js"></script> + <link href="../assets/css/popup.css" rel="stylesheet"> + <script src="../assets/utils/popup.js"></script> <script src="../libs/Cesiumplus/CesuimDataView.js"></script> <!-- <script src="../libs/Cesiumplus/CesiumShpWrite.js"></script> --> <!--鍔犺浇shp 鐨勬彃浠�--> diff --git a/view/project/layerAnalysis.html b/view/project/layerAnalysis.html index ad121b3..e73dad7 100644 --- a/view/project/layerAnalysis.html +++ b/view/project/layerAnalysis.html @@ -56,6 +56,10 @@ border-radius: 6px; background-color: #999; } + .layui-tree-btnGroup .layui-icon{ + display: inline-block; + color:white + } </style> <script> @@ -64,9 +68,10 @@ layui.use(['tree'], function () { var tree = layui.tree isloading = true; - tree.render({ + var modelTree=tree.render({ elem: '#model-tree-list' , data: layerMenu + , edit:["del"] , showCheckbox: true //鏄惁鏄剧ず澶嶉�夋 , id: 'model-tree-list' , isJump: false //鏄惁鍏佽鐐瑰嚮鑺傜偣鏃跺脊鍑烘柊绐楀彛璺宠浆 @@ -256,6 +261,7 @@ let result = modelType == 'Primitive' ? parent.delprimitiveModel(modelId) : parent.delentityModel(modelId); } parent.delNodeById(modelId, layerMenu); + delDrawEntity(modelId); } } }); @@ -312,6 +318,37 @@ changeParentChecked(ischeck, parentOfData); } } + //zzf:闅愯棌闄ょ粯鍥捐彍鍗曚互澶栫殑鍒犻櫎鎸夐挳 + $(modelTree.config.elem[0].children[0].childNodes).each(function(){ + let parentDiv=$(this)[0].childNodes[0]; + $(parentDiv).find("div .layui-icon-delete").remove(); + if($(this)[0].dataset.id!="4"){ + let childrenDiv=$(this)[0].childNodes[1]; + $(childrenDiv).find("div .layui-icon-delete").remove(); + } + }) + function delDrawEntity(modelId){ + let updateData= { + "ids":modelId, + } + let token = window.localStorage.getItem("token"); + $.ajax({ + type: "post", + async: false, + url: parent.httpConfig.webApiUrl + "landstamp/front/removeDrawEntity", + data: updateData, + contentType: "application/x-www-form-urlencoded", + beforeSend:function(request){ + request.setRequestHeader("token",token); + }, + success: function (data) { + console.log(data) + }, + error: function (XMLHttpRequest, textStatus, errorThrown) { + console.log("ajax璇锋眰澶辫触锛�"); + } + }); + } }); </script> -- Gitblit v1.9.1