From f0efddd9e32b9c5dc828401c4092be004b4826cf Mon Sep 17 00:00:00 2001 From: ansel0926 <ansel0926@gmail.com> Date: 星期三, 18 五月 2022 12:05:08 +0800 Subject: [PATCH] 添加标签 --- assets/map/map3D.js | 208 +++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 181 insertions(+), 27 deletions(-) diff --git a/assets/map/map3D.js b/assets/map/map3D.js index c606dd2..dce4111 100644 --- a/assets/map/map3D.js +++ b/assets/map/map3D.js @@ -9,6 +9,8 @@ var userId; var userName; +var layerMap=new Map();//瀛樺偍id鍜屽浘灞傜殑index绱㈠紩缁撴瀯 + var entityMouseClickListenerIsEnable = true; var previousTime;//鍦扮悆鏃嬭浆鐨勫弬鏁� @@ -224,9 +226,9 @@ maxmin: false, scrollbar: false, shadeClose: true, - area: ['310px', '450px'], + area: ['320px', '480px'], resize: false, - offset: ['50px',document.body.clientWidth-320], + offset: ['50px',document.body.clientWidth-330], content: 'project/editLabel.html', success: function (layero, index) { var iframe = window['layui-layer-iframe' + index]; @@ -237,6 +239,34 @@ 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); + } + }); + } + if(entity._name=='drawTextEtity'){//缂栬緫鏍囩 + 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/editText.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); } }); } @@ -254,9 +284,9 @@ maxmin: false, scrollbar: false, shadeClose: true, - area: ['310px', '300px'], + area: ['320px', '335px'], resize: false, - offset: ['50px',document.body.clientWidth-320], + offset: ['50px',document.body.clientWidth-330], content: 'project/editPoint.html', success: function (layero, index) { var iframe = window['layui-layer-iframe' + index]; @@ -282,9 +312,9 @@ maxmin: false, scrollbar: false, shadeClose: true, - area: ['310px', '300px'], + area: ['320px', '300px'], resize: false, - offset: ['50px',document.body.clientWidth-320], + offset: ['50px',document.body.clientWidth-330], content: 'project/editLine.html', success: function (layero, index) { var iframe = window['layui-layer-iframe' + index]; @@ -292,7 +322,8 @@ 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); + let attributes = pick.primitive.getGeometryInstanceAttributes(pick.id); + iframe.child(id,title,lineColor,lineSize,attributes); } }); } @@ -309,9 +340,9 @@ maxmin: false, scrollbar: false, shadeClose: true, - area: ['310px', '300px'], + area: ['320px', '300px'], resize: false, - offset: ['50px',document.body.clientWidth-320], + offset: ['50px',document.body.clientWidth-330], content: 'project/editPolygon.html', success: function (layero, index) { var iframe = window['layui-layer-iframe' + index]; @@ -837,6 +868,7 @@ function updateLabel(type,id,val){//淇敼鏂囧瓧锛歾zf let signPointEntity = viewer.entities.getById(id) let popId="pop_"+id; + let saveData; if(type==1){//鏍囩鏂囧瓧 signPointEntity.title=val; signPointEntity._label._text._value = val; @@ -861,15 +893,77 @@ 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({ + 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 updateText(type,id,val){//淇敼鏍囩锛歾zf + let signPointEntity = viewer.entities.getById(id) + if(type==1){//鏍囩鏂囧瓧 + signPointEntity.title=val; + signPointEntity._label._text._value = val; + let treeLabelNode=getNodeById(signPointEntity.id,layerMenu[3].children) + treeLabelNode.title=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; + } let saveData= { "id":signPointEntity._id, - "type": "label", + "type": "text", "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({ @@ -917,13 +1011,24 @@ } else if(type==5){ let urlArr = val.split("/"); - let newUrl=urlArr.splice(3).join("/") - $("#" + popId).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".image")[0].src = val; + let newUrl=urlArr.splice(4).join("/") + $("#" + popId).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".image")[0].src = parent.httpConfig.nginxUrl+newUrl; 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){ @@ -955,8 +1060,7 @@ }); } -function updateLine(type,id,val,pick){//淇敼绾匡細zzf - let attributes = pick.primitive.getGeometryInstanceAttributes( pick.id ); +function updateLine(type,id,val,attributes){//淇敼绾匡細zzf let signPointEntity = viewer.entities.getById(id); let saveData; if(type==1){//绾垮悕绉� @@ -1383,7 +1487,6 @@ } function initDrawEntity(){//zzf:鍒濆鍖栧浘褰� - let token = window.localStorage.getItem("token"); $.ajax({ type: "get", @@ -1408,6 +1511,9 @@ else if(data.rows[i].type=="label"){ drawAjaxLabel(data.rows[i]) } + else if(data.rows[i].type=="text"){ + drawAjaxText(data.rows[i]) + } } } }, @@ -1420,6 +1526,7 @@ function drawAjaxPoint(drawEntity){//鍔犺浇鐐� let cartesian = Cesium.Cartesian3.fromDegrees(drawEntity.longitude, drawEntity.latitude, drawEntity.height); var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + let iconPath=drawEntity.iconPath?parent.httpConfig.nginxUrl+drawEntity.iconPath:"../assets/images/icon/icon1.png"; var entity=viewer.entities.add({ id:drawEntity.id, name:"drawPointEntity", @@ -1427,18 +1534,19 @@ label: { text: drawEntity.content, font: drawEntity.fontsize+'px '+drawEntity.fontstyle, - fillColor: Cesium.Color.fromCssColorString(drawEntity.color), + fillColor: drawEntity.color?Cesium.Color.fromCssColorString(drawEntity.color):Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, style: Cesium.LabelStyle.FILL_AND_OUTLINE, + eyeOffset:new Cesium.Cartesian3(0,20,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) + distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) }, billboard: { - image: "../assets/images/icon/icon1.png", + image: iconPath, width: 40, height: 40, rotation: 0, @@ -1446,7 +1554,7 @@ horizontalOrigin: Cesium.HorizontalOrigin.CENTER, disableDepthTestDistance: Number.POSITIVE_INFINITY, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0) + distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) } }); if(drawEntity.content!=null&&drawEntity.content!=""){ @@ -1464,7 +1572,7 @@ 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; + $("#pop_" + entity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".image")[0].src = parent.httpConfig.nginxUrl+drawEntity.imagePath; } document.getElementById("pop_" +entity.id).style.display="none"; addTreeNode({ @@ -1499,7 +1607,8 @@ clampToGround: true, width: drawEntity.fontsize?drawEntity.fontsize:1, material: drawEntity.color?Cesium.Color.fromCssColorString(drawEntity.color):new Cesium.Color.fromBytes(255,124,0,255), - positions:measureLinePositonsArray + positions:measureLinePositonsArray, + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000.0) }, drawpointArr: drawpointArr, measureLinePositonsArray: measureLinePositonsArray @@ -1549,7 +1658,8 @@ outlineColor: Cesium.Color.WHITE, hierarchy: new Cesium.CallbackProperty(function () { return polygon; - }, false) + }, false), + distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000.0) } }); if(drawEntity.content!=null&&drawEntity.content!=""){ @@ -1575,6 +1685,7 @@ function drawAjaxLabel(drawEntity){//鍔犺浇鏂囧瓧 let cartesian = Cesium.Cartesian3.fromDegrees(drawEntity.longitude, drawEntity.latitude, drawEntity.height); var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + let iconPath=drawEntity.iconPath?parent.httpConfig.nginxUrl+drawEntity.iconPath:"../assets/images/icon/icon1.png"; var entity=viewer.entities.add({ id:drawEntity.id, name:"drawLabelEntity", @@ -1582,18 +1693,20 @@ label: { text: drawEntity.content, font: drawEntity.fontsize+'px '+drawEntity.fontstyle, - fillColor: Cesium.Color.fromCssColorString(drawEntity.color), + fillColor: drawEntity.color?Cesium.Color.fromCssColorString(drawEntity.color):Cesium.Color.WHITE, outlineColor: Cesium.Color.BLACK, outlineWidth: 2, style: Cesium.LabelStyle.FILL_AND_OUTLINE, + //pixelOffset: new Cesium.Cartesian2(0.0, 5.0), + eyeOffset:new Cesium.Cartesian3(0,20,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) + distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) }, billboard: { - image: "../assets/images/icon/icon1.png", + image: iconPath, width: 40, height: 40, rotation: 0, @@ -1601,7 +1714,7 @@ horizontalOrigin: Cesium.HorizontalOrigin.CENTER, disableDepthTestDistance: Number.POSITIVE_INFINITY, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, - distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0) + distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) } }); if(drawEntity.content!=null&&drawEntity.content!=""){ @@ -1634,4 +1747,45 @@ "lat": Cesium.Math.toDegrees(cartographic.latitude) } }, "4"); +} + +function drawAjaxText(drawEntity){//鍔犺浇鏍囩 + let cartesian = Cesium.Cartesian3.fromDegrees(drawEntity.longitude, drawEntity.latitude, drawEntity.height); + var cartographic = Cesium.Cartographic.fromCartesian(cartesian); + var entity=viewer.entities.add({ + id:drawEntity.id, + name:"drawTextEtity", + position:cartesian, + label: { + text: drawEntity.content?drawEntity.content:new Date(drawEntity.createTime).format("yyyyMMddhhmmss"), + font: drawEntity.fontsize+'px '+drawEntity.fontstyle, + fillColor: drawEntity.color?Cesium.Color.fromCssColorString(drawEntity.color):Cesium.Color.WHITE, + 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: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0) + }, + }); + if(drawEntity.content!=null&&drawEntity.content!=""){ + entity.title=drawEntity.content; + } + else{ + 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"); } \ No newline at end of file -- Gitblit v1.9.1