From e6c25766b95dfd792009423a5972cd43cbd7c3ce Mon Sep 17 00:00:00 2001 From: ansel0926 <ansel0926@gmail.com> Date: 星期一, 16 五月 2022 11:42:15 +0800 Subject: [PATCH] 提交 --- assets/map/map3D.js | 456 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 402 insertions(+), 54 deletions(-) diff --git a/assets/map/map3D.js b/assets/map/map3D.js index fa6c49b..7d997e6 100644 --- a/assets/map/map3D.js +++ b/assets/map/map3D.js @@ -148,9 +148,13 @@ viewer.clock.onTick.removeEventListener(onTickCallback); var pick = viewer.scene.pick(movement.position); CesiumPop.removeDiv(); + if(labelLayer!=null){//鍏抽棴鏂囧瓧缂栬緫寮圭獥 layer.close(labelLayer); } + $(".medium-item").children().filter(".bx-popup-ctn").each(function () {//闅愯棌pop + this.style.display="none" + }) if (pick != undefined && pick instanceof Cesium.Cesium3DTileFeature) { var propertyNames = pick.getPropertyNames(); var length = propertyNames.length; @@ -206,11 +210,11 @@ var cartesian = viewer.scene.pickPosition(movement.position); //娣诲姞鏂囧瓧鏍囩浜嬩欢锛歾zf if(entity!=undefined && entity instanceof Object &&entity.title!=undefined){ - if(entity._name=='drawLabelEtity'){ + if(entity._name=='drawLabelEntity'){//缂栬緫鏂囧瓧 + document.getElementById("pop_" +entity.id).style.display="block"; layer.config({ - extend: 'myskin/style.css' //鍚屾牱闇�瑕佸厛鍔犺浇鏂扮毊鑲� + extend: 'myskin/style.css' }); - labelLayer=layer.open({ type: 2, title: '<i class="iconfont icon-huitu i-item" style="font-size: 18px; color: white;"></i> ' + "缂栬緫鏂囧瓧", @@ -219,14 +223,102 @@ shade: 0, maxmin: false, scrollbar: false, - shadeClose: true, //鐐瑰嚮閬僵鍏抽棴灞� - area: ['320px', '300px'], + shadeClose: true, + area: ['320px', '480px'], resize: false, - offset: ['50px',document.body.clientWidth-340], + offset: ['50px',document.body.clientWidth-330], content: 'project/editLabel.html', success: function (layero, index) { - var iframe = window['layui-layer-iframe' + index];//鎷垮埌iframe鍏冪礌 - iframe.child(entity._id,pickPrimitive._text,pickPrimitive._fillColor.toCssHexString(),pickPrimitive._fontSize,pickPrimitive._fontFamily);//鍚戞iframe灞傛柟娉� 浼犻�掑弬鏁� + var iframe = window['layui-layer-iframe' + index]; + let id=entity._id; + let title=entity.title; + let fontColor=entity._label._fillColor._value.toCssHexString(); + let fontSize=entity._label._font._value.split(" ")[0].replace("px",""); + let fontFamily=entity._label._font._value.split(" ")[1]; + let content=$("#pop_" +entity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".textarea")[0].innerHTML; + iframe.child(id,title,fontColor,fontSize,fontFamily,content); + } + }); + } + else if(entity._name=='drawPointEntity'){//缂栬緫鐐� + document.getElementById("pop_" +entity.id).style.display="block"; + 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> ' + "缂栬緫鐐�", + maxmin: true, + skin: 'layer-ext-myskin', + shade: 0, + maxmin: false, + scrollbar: false, + shadeClose: true, + area: ['320px', '335px'], + resize: false, + offset: ['50px',document.body.clientWidth-330], + content: 'project/editPoint.html', + success: function (layero, index) { + var iframe = window['layui-layer-iframe' + index]; + let id=entity._id; + let title=entity.title; + let fontColor=entity._label._fillColor._value.toCssHexString(); + let fontSize=entity._label._font._value.split(" ")[0].replace("px",""); + let fontFamily=entity._label._font._value.split(" ")[1]; + iframe.child(id,title,fontColor,fontSize,fontFamily); + } + }); + } + else if(entity._name=='measureLineGroundEntity'){//缂栬緫绾� + 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> ' + "缂栬緫绾�", + maxmin: true, + skin: 'layer-ext-myskin', + shade: 0, + maxmin: false, + scrollbar: false, + shadeClose: true, + area: ['320px', '300px'], + resize: false, + offset: ['50px',document.body.clientWidth-330], + content: 'project/editLine.html', + success: function (layero, index) { + var iframe = window['layui-layer-iframe' + index]; + let id=entity._id; + let title=entity.title; + let lineColor=entity._polyline._material._color._value.toCssHexString(); + let lineSize=entity._polyline._width._value; + iframe.child(id,title,lineColor,lineSize,pick); + } + }); + } + else if(entity._name=='measurePolyGonGroundEntity'){//缂栬緫闈� + 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> ' + "缂栬緫闈�", + maxmin: true, + skin: 'layer-ext-myskin', + shade: 0, + maxmin: false, + scrollbar: false, + shadeClose: true, + area: ['320px', '300px'], + resize: false, + offset: ['50px',document.body.clientWidth-330], + content: 'project/editPolygon.html', + success: function (layero, index) { + var iframe = window['layui-layer-iframe' + index]; + let id=entity._id; + let title=entity.title; + let polygonColor=entity._polygon._material._color._value.toCssHexString(); + iframe.child(id,title,polygonColor); } }); } @@ -744,45 +836,54 @@ function updateLabel(type,id,val){//淇敼鏂囧瓧锛歾zf let signPointEntity = viewer.entities.getById(id) - if(type==1){ + let popId="pop_"+id; + let saveData; + if(type==1){//鏍囩鏂囧瓧 signPointEntity.title=val; signPointEntity._label._text._value = val; let treeLabelNode=getNodeById(signPointEntity.id,layerMenu[3].children) treeLabelNode.title=val; + $("#" + popId).children(".bx-popup-header-ctn")[0].innerText=val; } - else if(type==2){ + else if(type==2){//鏍囩棰滆壊 if(val==''){ val=signPointEntity._label._fillColor._value; } signPointEntity._label._fillColor._value = Cesium.Color.fromCssColorString(val); } - else if(type==3){ + else if(type==3){//鏍囩瀛椾綋澶у皬 let font=signPointEntity._label._font._value.split(" "); signPointEntity._label._font._value = val+"px "+font[1]; } - else if(type==4){ + else if(type==4){//鏍囩瀛椾綋 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], + else if(type==5){//鏂囨湰鍐呭 + $("#pop_" +signPointEntity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".textarea")[0].innerHTML=val; + } + else if(type==6){ + let urlArr = val.split("/"); + let newUrl=urlArr.splice(4).join("/") + signPointEntity._billboard._image._value=parent.httpConfig.nginxUrl+newUrl; + saveData= { + "id":signPointEntity._id, + "type": "label", + "content":signPointEntity.title, + "iconPath":newUrl, + } + } + let popContent=$("#pop_" +signPointEntity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".textarea")[0].innerHTML; + if(type==1||type==2||type==3||type==4||type==5){ + saveData= { + "id":signPointEntity._id, + "type": "label", + "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], + "popContent":popContent + } } let token = window.localStorage.getItem("token"); $.ajax({ @@ -802,6 +903,179 @@ } }); } + +function updatePoint(type,id,val){//淇敼鐐癸細zzf + let signPointEntity = viewer.entities.getById(id); + let popId="pop_"+id; + let saveData; + if(type==1){//鏍囩鏂囧瓧 + signPointEntity.title=val; + signPointEntity._label._text._value = val; + let treeLabelNode=getNodeById(signPointEntity.id,layerMenu[3].children) + treeLabelNode.title=val; + $("#" + popId).children(".bx-popup-header-ctn")[0].innerText=val; + } + else if(type==2){//鏍囩棰滆壊 + if(val==''){ + val=signPointEntity._label._fillColor._value; + } + signPointEntity._label._fillColor._value = Cesium.Color.fromCssColorString(val); + } + else if(type==3){//鏍囩瀛椾綋澶у皬 + let font=signPointEntity._label._font._value.split(" "); + signPointEntity._label._font._value = val+"px "+font[1]; + } + else if(type==4){//鏍囩瀛椾綋 + let font=signPointEntity._label._font._value.split(" "); + signPointEntity._label._font._value = font[0]+" "+val; + } + else if(type==5){ + let urlArr = val.split("/"); + let newUrl=urlArr.splice(4).join("/") + $("#" + popId).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".image")[0].src = val; + saveData= { + "id":signPointEntity._id, + "type": "point", + "content":signPointEntity.title, + "imagePath":newUrl, + } + } + else if(type==6){ + let urlArr = val.split("/"); + let newUrl=urlArr.splice(4).join("/") + signPointEntity._billboard._image._value=parent.httpConfig.nginxUrl+newUrl;; + saveData= { + "id":signPointEntity._id, + "type": "point", + "content":signPointEntity.title, + "iconPath":newUrl, + } + } + if(type==1||type==2||type==3||type==4){ + saveData= { + "id":signPointEntity._id, + "type": "point", + "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 updateLine(type,id,val,pick){//淇敼绾匡細zzf + let attributes = pick.primitive.getGeometryInstanceAttributes( pick.id ); + let signPointEntity = viewer.entities.getById(id); + let saveData; + if(type==1){//绾垮悕绉� + signPointEntity.title=val; + let treeLabelNode=getNodeById(signPointEntity.id,layerMenu[3].children) + treeLabelNode.title=val; + saveData= { + "id":signPointEntity._id, + "type": "polyline", + "content":val, + } + } + else if(type==2){//绾块鑹� + if(val==''){ + val=signPointEntity._polyline._material._color._value; + } + signPointEntity._polyline._material._color._value = Cesium.Color.fromCssColorString(val); + attributes.color= Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.fromCssColorString(val)); + saveData= { + "id":signPointEntity._id, + "type": "polyline", + "color":val, + } + } + else if(type==3){//绾跨矖缁� + signPointEntity._polyline._width._value = val; + attributes.width=val + saveData= { + "id":signPointEntity._id, + "type": "polyline", + "fontsize":val, + } + } + 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 updatePolygon(type,id,val){//淇敼闈細zzf + let signPointEntity = viewer.entities.getById(id); + let saveData; + if(type==1){//闈㈠悕绉� + signPointEntity.title=val; + let treeLabelNode=getNodeById(signPointEntity.id,layerMenu[3].children) + treeLabelNode.title=val; + saveData= { + "id":signPointEntity._id, + "type": "polygon", + "content":val, + } + } + else if(type==2){//闈㈤鑹� + if(val==''){ + val=signPointEntity._polygon._material._color._value; + } + signPointEntity._polygon._material._color._value = Cesium.Color.fromCssColorString(val); + saveData= { + "id":signPointEntity._id, + "type": "polygon", + "color":val, + } + } + 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() { var waterFace = [121.52380572667727, 40.857604886322704, -30.580650037676627 + 400.0, @@ -1134,6 +1408,7 @@ } function initDrawEntity(){//zzf:鍒濆鍖栧浘褰� + let token = window.localStorage.getItem("token"); $.ajax({ type: "get", @@ -1168,21 +1443,56 @@ } function drawAjaxPoint(drawEntity){//鍔犺浇鐐� - let cartesian=new Cesium.Cartesian3(parseFloat(drawEntity.longitude),parseFloat(drawEntity.latitude),parseFloat(drawEntity.height)) + let cartesian = Cesium.Cartesian3.fromDegrees(drawEntity.longitude, drawEntity.latitude, drawEntity.height); var cartographic = Cesium.Cartographic.fromCartesian(cartesian); - var entity = viewer.entities.add({ + let iconPath=drawEntity.iconPath?parent.httpConfig.nginxUrl+drawEntity.iconPath:"../assets/images/icon/icon1.png"; + var entity=viewer.entities.add({ id:drawEntity.id, - name: 'drawPointEntity', - position: cartesian, - point: { - color: Cesium.Color.RED, - pixelSize: 10, - outlineColor: Cesium.Color.WHITE, + name:"drawPointEntity", + position:cartesian, + label: { + text: drawEntity.content, + font: drawEntity.fontsize+'px '+drawEntity.fontstyle, + fillColor: Cesium.Color.fromCssColorString(drawEntity.color), + outlineColor: Cesium.Color.BLACK, outlineWidth: 2, - disableDepthTestDistance: Number.POSITIVE_INFINITY + 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) + }, + billboard: { + image: iconPath, + width: 40, + height: 40, + rotation: 0, + 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 = "鐐�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + if(drawEntity.content!=null&&drawEntity.content!=""){ + entity.title=drawEntity.content; + } + else{ + entity.title = "鐐�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + } + let popup = new Popup({ + viewer:viewer, + geometry:cartesian, + entity:entity, + id: "pop_" + entity.id, + type:'image', + content:drawEntity.popContent?drawEntity.popContent:null, + }) + if( drawEntity.imagePath!=null&& drawEntity.imagePath!=""){ + $("#pop_" + entity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".image")[0].src = parent.httpConfig.webApiUrl+drawEntity.imagePath; + } + document.getElementById("pop_" +entity.id).style.display="none"; addTreeNode({ "title": entity.title, "id": entity.id, @@ -1204,7 +1514,7 @@ 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])) + let cartesian = Cesium.Cartesian3.fromDegrees(longitudeList[i], latitudeList[i], heightList[i]); measureLinePositonsArray.push(cartesian); } var drawpointArr = []; @@ -1213,14 +1523,19 @@ name: 'measureLineGroundEntity', polyline: { clampToGround: true, - width: 1, - material: new Cesium.Color.fromBytes(255,124,0,255), + width: drawEntity.fontsize?drawEntity.fontsize:1, + material: drawEntity.color?Cesium.Color.fromCssColorString(drawEntity.color):new Cesium.Color.fromBytes(255,124,0,255), positions:measureLinePositonsArray }, drawpointArr: drawpointArr, measureLinePositonsArray: measureLinePositonsArray }); - measureLineGroundEntity.title = "鎶樼嚎" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + if(drawEntity.content!=null&&drawEntity.content!=""){ + measureLineGroundEntity.title=drawEntity.content; + } + else{ + measureLineGroundEntity.title = "鎶樼嚎" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + } addTreeNode({ "title": measureLineGroundEntity.title, "id": measureLineGroundEntity.id, @@ -1242,7 +1557,7 @@ 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])) + let cartesian = Cesium.Cartesian3.fromDegrees(longitudeList[i],latitudeList[i], heightList[i]); polyPositions.push(cartesian); } var polygon = new Cesium.PolygonHierarchy(); @@ -1254,7 +1569,7 @@ id:drawEntity.id, name: 'measurePolyGonGroundEntity', polygon: { - material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.3)), + material: drawEntity.color?Cesium.Color.fromCssColorString(drawEntity.color):new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.3)), classificationType: Cesium.ClassificationType.BOTH, outline: true, outlineColor: Cesium.Color.WHITE, @@ -1263,7 +1578,12 @@ }, false) } }); - measurePolyGonGroundEntity.title = "闈�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + if(drawEntity.content!=null&&drawEntity.content!=""){ + measurePolyGonGroundEntity.title=drawEntity.content; + } + else{ + measurePolyGonGroundEntity.title = "闈�" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + } addTreeNode({ "title": measurePolyGonGroundEntity.title, "id": measurePolyGonGroundEntity.id, @@ -1279,13 +1599,13 @@ } function drawAjaxLabel(drawEntity){//鍔犺浇鏂囧瓧 - let cartesian=new Cesium.Cartesian3(parseFloat(drawEntity.longitude),parseFloat(drawEntity.latitude),parseFloat(drawEntity.height)) + let cartesian = Cesium.Cartesian3.fromDegrees(drawEntity.longitude, drawEntity.latitude, drawEntity.height); var cartographic = Cesium.Cartographic.fromCartesian(cartesian); - cartographic = Cesium.Cartographic.fromCartesian(cartesian); - var entity = viewer.entities.add({ + let iconPath=drawEntity.iconPath?parent.httpConfig.nginxUrl+drawEntity.iconPath:"../assets/images/icon/icon1.png"; + var entity=viewer.entities.add({ id:drawEntity.id, - name: 'drawLabelEtity', - position: cartesian.clone(), + name:"drawLabelEntity", + position:cartesian, label: { text: drawEntity.content, font: drawEntity.fontsize+'px '+drawEntity.fontstyle, @@ -1298,9 +1618,37 @@ disableDepthTestDistance: Number.POSITIVE_INFINITY, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0) + }, + billboard: { + image: iconPath, + width: 40, + height: 40, + rotation: 0, + 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, + if(drawEntity.content!=null&&drawEntity.content!=""){ + entity.title=drawEntity.content; + } + else{ + entity.title = "鏂囧瓧" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss"); + } + let popup = new Popup({ + viewer:viewer, + geometry:cartesian, + entity:entity, + id: "pop_" + entity.id, + type:'label', + content:drawEntity.popContent?drawEntity.popContent:null, + }) + if( drawEntity.popContent!=null&& drawEntity.popContent!=""){ + $("#pop_" + entity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".textarea")[0].innerHTML = drawEntity.popContent; + } + document.getElementById("pop_" +entity.id).style.display="none"; addTreeNode({ "title": entity.title, "id": entity.id, -- Gitblit v1.9.1