编辑线、面，文字标记和图片标记点

ansel0926

2022-05-15 ebc4c778854c8d2666b1bbaf3dcba2ba00f08453

编辑线、面，文字标记和图片标记点

 assets/map/map3D.js

@@ -210,9 +210,10 @@
                var cartesian = viewer.scene.pickPosition(movement.position);
                //添加文字标签事件：zzf
                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,
@@ -222,31 +223,27 @@
                            shade: 0,
                            maxmin: false,
                            scrollbar: false,
                            shadeClose: true, //点击遮罩关闭层
                            area: ['320px', '300px'],
                            shadeClose: true, 
                            area: ['310px', '450px'],
                            resize: false,
                            offset: ['50px',document.body.clientWidth-340],
                            offset: ['50px',document.body.clientWidth-320],
                            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'){
                        //console.log(pickPrimitive._position)
                        // let popup = new Popup({
                        //     viewer:viewer,
                        //     geometry:pickPrimitive._position,
                        //     entity:entity,
                        //     id: "pop_" + entity.id
                        // })
                        // 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;
                        // }
                    else if(entity._name=='drawPointEntity'){//编辑点
                        document.getElementById("pop_" +entity.id).style.display="block";
                        layer.config({
                            extend: 'myskin/style.css' //同样需要先加载新皮肤
                            extend: 'myskin/style.css'
                        });
                        labelLayer=layer.open({
                            type: 2,
@@ -256,14 +253,72 @@
                            shade: 0,
                            maxmin: false,
                            scrollbar: false,
                            shadeClose: true, //点击遮罩关闭层
                            area: ['320px', '300px'],
                            shadeClose: true,
                            area: ['310px', '300px'],
                            resize: false,
                            offset: ['50px',document.body.clientWidth-340],
                            offset: ['50px',document.body.clientWidth-320],
                            content: 'project/editPoint.html',
                            success: function (layero, index) {
                                var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                                iframe.child(entity._id,entity.title);//向此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];
                                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: ['310px', '300px'],
                            resize: false,
                            offset: ['50px',document.body.clientWidth-320],
                            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: ['310px', '300px'],
                            resize: false,
                            offset: ['50px',document.body.clientWidth-320],
                            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);   
                            }
                        });
                    }
@@ -781,45 +836,40 @@

function updateLabel(type,id,val){//修改文字：zzf
    let signPointEntity = viewer.entities.getById(id)
    if(type==1){
    let popId="pop_"+id;
    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] + "'}";
    else if(type==5){//文本内容
        $("#pop_" +signPointEntity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".textarea")[0].innerHTML=val;
    }
    let popContent=$("#pop_" +signPointEntity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".textarea")[0].innerHTML;
    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],
        "popContent":popContent
    }
    let token = window.localStorage.getItem("token");
    $.ajax({
@@ -844,40 +894,145 @@
    let signPointEntity = viewer.entities.getById(id);
    let popId="pop_"+id;
    let saveData;
    var cartographic=Cesium.Cartographic.fromCartesian(signPointEntity._position._value);
    var lng=Cesium.Math.toDegrees(cartographic.longitude);
    var lat=Cesium.Math.toDegrees(cartographic.latitude);
    var alt=cartographic.height;
    if(type==1){
    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;
        saveData= {
            "id":signPointEntity._id,
            "type": "point",
            "longitude": lng,
            "latitude": lat,
            "height": alt,
            "content":signPointEntity.title,
        }
    }
    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){//标签字体大小
        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(3).join("/")
        $("#" + popId).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".image")[0].src = val;
        saveData= {
            "id":signPointEntity._id,
            "type": "point",
            "longitude": lng,
            "latitude": lat,
            "height": alt,
            "content":signPointEntity.title,
            "imagePath":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",
@@ -1270,12 +1425,12 @@
        name:"drawPointEntity",
        position:cartesian,
        label: {
            show: true,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            font: 'bold 14px Helvetica',
            fillColor: Cesium.Color.WHITE,
            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,
@@ -1305,14 +1460,11 @@
        geometry:cartesian,
        entity:entity,
        id: "pop_" + entity.id,
        type:drawEntity.popType?drawEntity.popType:'image',
        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;
    }
    if( drawEntity.popContent!=null&& drawEntity.popContent!=""){
        $("#pop_" + entity.id).children(".bx-popup-content-ctn").children(".bx-popup-content").children(".textarea")[0].innerText = drawEntity.popContent;
    }
    document.getElementById("pop_" +entity.id).style.display="none";
    addTreeNode({
@@ -1345,14 +1497,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,
@@ -1386,7 +1543,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,
@@ -1395,7 +1552,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,
@@ -1413,11 +1575,10 @@
function drawAjaxLabel(drawEntity){//加载文字
    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({
    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,
@@ -1430,9 +1591,37 @@
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0)
        },
        billboard: {
            image: "../assets/images/icon/icon1.png",
            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,

 assets/service/drawService.js

@@ -86,6 +86,10 @@
        }
    }
    else if(type=='label'){
        var cartographic=Cesium.Cartographic.fromCartesian(drawEntity._position._value);
        var lng=Cesium.Math.toDegrees(cartographic.longitude);
        var lat=Cesium.Math.toDegrees(cartographic.latitude);
        var alt=cartographic.height;
        saveData= {
            "id":id,
            "type": type,

 assets/utils/popup.js

@@ -27,7 +27,7 @@
            content:'<img class="image" style="width:100%;height:100%;max-width:200px;max-height:150px" src=""></img>'
        }
    }
    else if(_this.type=="text"){
    else if(_this.type=="label"){
        testConfig= {
            header:_this.entity.title,
            //header:"",
@@ -46,8 +46,23 @@
    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);
        let w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        let h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        let x=position.x- _this.ctn.get(0).offsetWidth/2
        let y=position.y- _this.ctn.get(0).offsetHeight - 10;
        if(x<0){
            x=330;
        }else if(x>w){
            x=w;
        }
        if(y<0){
            y=0
        }
        else if(y>h){
            y=h;
        }
        _this.ctn.css("left",x);
        _this.ctn.css("top",y);
    }
}
// 动态生成内容
@@ -61,8 +76,8 @@
        '</div>'+
        '</div>'+
        '<div class="bx-popup-tip-container" >'+
        '<div class="bx-popup-tip" >'+
        '</div>'+
        // '<div class="bx-popup-tip" >'+
        // '</div>'+
    '</div>'+
    '<a class="leaflet-popup-close-button" onClick="Popup.prototype.close(\''+id+'\')">X</a>';
    return html;

 libs/Cesiumplus/CesiumDraw.js

@@ -472,26 +472,6 @@
            drawHandler.setInputAction(function (movement) {
                //获取鼠标点击处的坐标
                drawHandler = drawHandler && drawHandler.destroy();
                // var cartesian = options.viewer.scene.pickPosition(movement.position);
                // var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                // var height = cartographic.height;//模型高度
                // if (Number(height) < 0) {
                //     var ray = options.viewer.camera.getPickRay(movement.position);
                //     cartesian = options.viewer.scene.globe.pick(ray, options.viewer.scene);
                // }
                // cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                // height = cartographic.height;//地形高度
                // var entity = viewer.entities.add({
                //     name: 'drawPointEntity',
                //     position: cartesian.clone(),
                //     point: {
                //         color: options.pointcolor,
                //         pixelSize: 10,
                //         outlineColor: Cesium.Color.WHITE,
                //         outlineWidth: 2,
                //         disableDepthTestDistance: Number.POSITIVE_INFINITY
                //     }
                // });
                let position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
                let pointText="点" + new Date().format("yyyyMMddhhmmss");
                var entity=viewer.entities.add({
@@ -501,7 +481,7 @@
                        show: true,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        font: 'bold 14px Helvetica',
                        font: '10px SimSun',
                        fillColor: Cesium.Color.WHITE,
                        text: pointText,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
@@ -520,6 +500,7 @@
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000000.0)
                    }
                });
                entity.title =  pointText;
                var cartesian = entity._position._value
                let popup = new Popup({
                    viewer:viewer,
@@ -529,7 +510,6 @@
                    type:'image',
                    content:null,
                })
                entity.title =  pointText;
                addTreeNode({
                    "title": entity.title,
                    "id": entity.id,
@@ -546,55 +526,50 @@
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }

        /**
         * options{
         *     viewer:CesiumViewer,
         *     label:{
         *         text:'文字',
         *         font: '24px Helvetica',
         *         fillColor: Cesium.Color.SKYBLUE,
         *         outlineColor: Cesium.Color.BLACK,
         *         outlineWidth: 2,
         *         style: Cesium.LabelStyle.FILL_AND_OUTLINE,
         *         scaleByDistance: new Cesium.NearFarScalar(100, 1.0, 200, 0.4)
         *     }
         * }
         */
        CesiumDraw.drawLabel = function (options) {
            drawHandler = drawHandler && drawHandler.destroy();
            drawHandler = new Cesium.ScreenSpaceEventHandler(options.viewer.scene.canvas);
            drawHandler.setInputAction(function (movement) {
                var cartesian = options.viewer.scene.pickPosition(movement.position);
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                var height = cartographic.height;//模型高度
                if (Number(height) < 0) {
                    var ray = options.viewer.camera.getPickRay(movement.position);
                    cartesian = options.viewer.scene.globe.pick(ray, options.viewer.scene);
                }
				
                cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                height = cartographic.height;//地形高度
                var entity = viewer.entities.add({
                    name: 'drawLabelEtity',
                    position: cartesian.clone(),
                //获取鼠标点击处的坐标
                drawHandler = drawHandler && drawHandler.destroy();
                let position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
                let labelText="文字" + new Date().format("yyyyMMddhhmmss");
                var entity=viewer.entities.add({
                    name:"drawLabelEntity",
                    position:position,
                    label: {
                        text: options.label.text,
                        font: options.label.font,
                        fillColor: options.label.fillColor,
                        outlineColor: options.label.outlineColor,
                        outlineWidth: options.label.outlineWidth,
                        style: options.label.style,
                        //scaleByDistance: options.label.scaleByDistance,
                        //eyeOffset: new Cesium.Cartesian3(0, 0, -10000),
                        show: true,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        font: '30px SimSun',
                        fillColor: Cesium.Color.WHITE,
                        text: labelText,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0)
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000000.0)
                    },
                    billboard: {
                        image: "../assets/images/icon/icon1.png",
                        width: 40,
                        height: 40,
                        rotation: 0,
                        verticalOrigin: Cesium.VerticalOrigin.TOP,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,//广告牌不进行深度检测
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000000.0)
                    }
                });
                //entity.title = "文字" + new Date().format("yyyyMMddhhmmss"),
                entity.title =options.label.text,//修改树结构文字标题：zzf
                entity.title =  labelText;
                var cartesian = entity._position._value
                let popup = new Popup({
                    viewer:viewer,
                    geometry:cartesian,
                    entity:entity,
                    id: "pop_" + entity.id,
                    type:'label',
                    content:null,
                })
                addTreeNode({
                    "title": entity.title,
                    "id": entity.id,
@@ -603,12 +578,11 @@
                    "spread": true,
                    "children": [],
                    "ext": {
                        "lng": Cesium.Math.toDegrees(cartographic.longitude),
                        "lat": Cesium.Math.toDegrees(cartographic.latitude)
                        "lng": Cesium.Math.toDegrees(cartesian.x),
                        "lat": Cesium.Math.toDegrees(cartesian.y)
                    }
                }, "4");
                saveDrawEntity("label",entity,entity.id);
                drawHandler = drawHandler && drawHandler.destroy();
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }


 view/project/drawPlot.html

@@ -90,9 +90,9 @@
                </div>
                <div>文字</div>
            </li>
            <li>
            <!-- <li>
                <input id="text" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" />
            </li>
            </li> -->
        </ul>
    </div>
    <!--是否显示地形-->
@@ -108,8 +108,9 @@
                    break;
                }
                case 'label': {
                    let text = document.getElementById('text').value;
                    parent.drawLabel(text===""?'文字':text);
                    //let text = document.getElementById('text').value;
                    // parent.drawLabel(text===""?'文字':text);
                    parent.drawLabel('文字');
                    break;
                }
                case 'polyline': {

 view/project/editLabel.html

@@ -12,6 +12,13 @@
            margin-left: 30px;
            margin-top: 5px;
        }
        .text2{
            float:left;
            color:white;
            font-size:16px;
            margin-left: 30px;
            margin-top: 20px;
        }
        .labelInput {
            width: 150px;
            height: 30px;
@@ -29,6 +36,24 @@
            border-bottom-left-radius: 2px;
            background-color: rgba(63, 72, 84, 0.7);
            color: white;
        }
        .textarea{
            width: 240px;
            height: 140px;
            margin-left: 25px;
            margin-right: 50px;
            margin-top: 5px;
            font-size: 16px;
            text-indent: 8px;
            outline: 0;
            border: none;
            border-color: #3b403f;
            /* box-shadow: 0 2px 6px #3a3c42; */
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            background-color: rgba(63, 72, 84, 0.7);
            color: white;
            resize:none;
        }
        .my-save-btn{
            margin-top: 80px;
@@ -77,20 +102,20 @@
    <div style="margin-top: 20px;">
        <form class="layui-form" action="">
            <div>
                <span class="text">内容</span>
                <span class="text">标签</span>
                <input id="input" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" oninput="labelChange(event)" onporpertychange="labelChange(event)"/>
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    字体颜色
                    标签颜色
                </div> 
                <div id="colorSelect" style="display:inline-block;margin-top: 5px;">
                </div> 
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    字体大小
                </div> 
                    标签大小
                </div>
                <div style="display:inline-block;margin-top: 5px; width: 150px;">
                    <select id="fontsize" lay-verify="required" class="my-select" lay-filter="fontsize">
                        <option value="10">10</option>
@@ -113,33 +138,39 @@
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    字体
                    标签字体
                </div> 
                <div style="display:inline-block;margin-top: 5px; margin-left:28px;;width: 150px;">
                <div style="display:inline-block;margin-top: 5px;width: 150px;">
                    <select id="fontfamily" lay-verify="required" class="my-select" lay-filter="fontfamily">
                        <option value="SimSun">宋体</option>
                        <option value="SimHei">黑体</option>
                        <option value="Microsoft Yahei">微软雅黑</option>
                        <option value="Microsoft">微软雅黑</option>
                        <option value="KaiTi">楷体</option>
                        <option value="FangSong">仿宋</option>
                        <option value="LiSu">隶书</option>
                        <option value="MingLiU">细明体</option>

                    </select>
                </div> 
            </div>
            <div>
                <span class="text2" >内容</span>
                <textarea id="textarea" class="textarea" placeholder="输入内容" autocomplete="off" oninput="contentChange(event)" onporpertychange="contentChange(event)"></textarea>
            </div>

        <!-- <button class="my-save-btn" onclick="closeframe()">完成</button> -->
        </form>
    </div>
    <script>
       var currentLabelId
       function child(id,text,fontColor,fontSize,fontfamily) { 
       function child(id,text,fontColor,fontSize,fontfamily,content) { 
           currentLabelId=id
           layui.use(['element', 'layer', 'form','colorpicker'], function () {
            var element = layui.element;
            var form = layui.form;
            var colorpicker = layui.colorpicker;
            $("#input").val(text)
            let textarea=document.getElementById("textarea")
            textarea.innerHTML=content;
            colorpicker.render({
                elem: '#colorSelect',
                color: fontColor,
@@ -151,6 +182,7 @@
                //     parent.updateLabel(2,currentLabelId,color);
                // },
            });
            fontSize=parseInt(fontSize);
            $("#fontsize").val(fontSize);
            form.on("select(fontsize)", function (data) {
                parent.updateLabel(3,currentLabelId,data.value);
@@ -165,7 +197,9 @@
       function labelChange(e) {
           parent.updateLabel(1,currentLabelId,$("#input").val());
       }

       function contentChange(e) {
           parent.updateLabel(5,currentLabelId,$("#textarea").val());
       }
    </script>



 view/project/editLine.html

New file
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>编辑折线</title>
    <style>
        .text{
            float:left;
            color:white;
            font-size:16px;
            margin-left: 30px;
            margin-top: 5px;
        }
        .text2{
            float:left;
            color:white;
            font-size:16px;
            margin-left: 30px;
            margin-top: 20px;
        }
        .labelInput {
            width: 150px;
            height: 30px;
            margin-left: 25px;
            margin-right: 50px;
            line-height: 40px;
            font-size: 16px;
            text-indent: 8px;
            outline: 0;
            float: left;
            border: none;
            border-color: #3b403f;
            /* box-shadow: 0 2px 6px #3a3c42; */
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            background-color: rgba(63, 72, 84, 0.7);
            color: white;
        }
        .textarea{
            width: 240px;
            height: 140px;
            margin-left: 25px;
            margin-right: 50px;
            margin-top: 5px;
            line-height: 40px;
            font-size: 16px;
            text-indent: 8px;
            outline: 0;
            border: none;
            border-color: #3b403f;
            /* box-shadow: 0 2px 6px #3a3c42; */
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            background-color: rgba(63, 72, 84, 0.7);
            color: white;
            resize:none;
        }
        .my-save-btn{
            margin-top: 80px;
            margin-left: 100px;
            width: 70px;
            height: 30px;
            color: white;
            background-color: #303247;
            border:1px;
            cursor: pointer;
            border-radius: 2px;
        }
        .my-save-btn:hover{
            background-color:rgb(107, 169, 220); 
        }
        .layui-form-select .layui-input {
            padding-right: 30px;
            height: 30px;
            cursor: pointer;
            background: #20212b;
            color: grey;
            border-color: #3b403f;
        }

        .layui-form-select dl dd.layui-this {
            background-color: grey;
            top: 35px;
            color: #fff;
        }

        /*下拉框高度*/
        .layui-form-select dl {
            top: 33px;
            background: #3b403f !important;
            color: white;
            height: 100px;
        }

    </style>
    <link href="../../libs/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="../../libs/layui/layui.js"></script>
</head>

<body>
    <div style="margin-top: 20px;">
        <form class="layui-form" action="">
            <div>
                <span class="text">名称</span>
                <input id="input" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" oninput="labelChange(event)" onporpertychange="labelChange(event)"/>
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    线颜色
                </div> 
                <div id="colorSelect" style="display:inline-block;margin-top: 5px;">
                </div> 
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    线宽度
                </div>
                <div style="display:inline-block;margin-top: 5px; width: 150px;">
                    <select id="lineSize" lay-verify="required" class="my-select" lay-filter="lineSize">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                    </select>
                </div> 
            </div>
        </form>
    </div>
    <script>
       var currentLineId
       function child(id,text,lineColor,lineSize,pick) { 
           currentLineId=id
           layui.use(['element', 'layer', 'form','colorpicker'], function () {
            var element = layui.element;
            var form = layui.form;
            var colorpicker = layui.colorpicker;
            $("#input").val(text)
            colorpicker.render({
                elem: '#colorSelect',
                color: lineColor,
                size:'20px',
                done: function (color) {
                    parent.updateLine(2,currentLineId,color,pick);
                },
            });
            lineSize=parseInt(lineSize);
            $("#lineSize").val(lineSize);
            form.on("select(lineSize)", function (data) {
                parent.updateLine(3,currentLineId,data.value,pick);
            })
            form.render();
        });
       }
       function labelChange(e) {
           parent.updateLine(1,currentLineId,$("#input").val(),pick);
       }
    </script>


</body>

</html>

 view/project/editPoint.html

@@ -8,14 +8,21 @@
        .text{
            float:left;
            color:white;
            font-size:16px;
            font-size:14px;
            margin-left: 30px;
            margin-top: 5px;
        }
        .text2{
            float:left;
            color:white;
            font-size:14px;
            margin-left: 30px;
            margin-top: 20px;
        }
        .labelInput {
            width: 180px;
            width: 150px;
            height: 30px;
            margin-left: 25px;
            margin-left: 30px;
            margin-right: 50px;
            line-height: 40px;
            font-size: 16px;
@@ -77,12 +84,59 @@
    <div style="margin-top: 20px;">
        <form class="layui-form" action="">
            <div>
                <span class="text">标题</span>
                <span class="text">标签</span>
                <input id="input" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" oninput="labelChange(event)" onporpertychange="labelChange(event)"/>
            </div>
            <div>
                <span class="text" style="margin-top: 10px;">图片</span>
                <button type="button" class="layui-btn layui-bg-black" style="width:180px;height:30px;margin-top:10px;margin-left: 25px;line-height: 30px;float: left;" id="uploadImg">
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    标签颜色
                </div> 
                <div id="colorSelect" style="display:inline-block;margin-top: 5px;">
                </div> 
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    标签大小
                </div>
                <div style="display:inline-block;margin-top: 5px; width: 150px;">
                    <select id="fontsize" lay-verify="required" class="my-select" lay-filter="fontsize">
                        <option value="10">10</option>
                        <option value="20">20</option>
                        <option value="30">30</option>
                        <option value="40">40</option>
                        <option value="50">50</option>
                        <option value="60">60</option>
                        <option value="70">70</option>
                        <option value="80">80</option>
                        <option value="90">90</option>
                        <option value="100">100</option>
                        <option value="110">110</option>
                        <option value="120">120</option>
                        <option value="130">130</option>
                        <option value="140">140</option>
                        <option value="150">150</option>
                    </select>
                </div> 
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    标签字体
                </div> 
                <div style="display:inline-block;margin-top: 5px;width: 150px;">
                    <select id="fontfamily" lay-verify="required" class="my-select" lay-filter="fontfamily">
                        <option value="SimSun">宋体</option>
                        <option value="SimHei">黑体</option>
                        <option value="Microsoft">微软雅黑</option>
                        <option value="KaiTi">楷体</option>
                        <option value="FangSong">仿宋</option>
                        <option value="LiSu">隶书</option>
                        <option value="MingLiU">细明体</option>
                    </select>
                </div> 
            </div>
            <div>
                <span class="text2">图片</span>
                <button type="button" class="layui-btn layui-bg-black" style="width:150px;height:30px;margin-top:15px;margin-left: 30px;line-height: 30px;float: left;" id="uploadImg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
@@ -90,7 +144,7 @@
    </div>
    <script>
       var currentPointId
       function child(id,text) { 
       function child(id,text,fontColor,fontSize,fontfamily) { 
           currentPointId=id
           layui.use(['element', 'layer', 'form','colorpicker','upload'], function () {
            var element = layui.element;
@@ -98,6 +152,23 @@
            var colorpicker = layui.colorpicker;
            var upload=layui.upload;
            $("#input").val(text)
            colorpicker.render({
                elem: '#colorSelect',
                color: fontColor,
                size:'20px',
                done: function (color) {
                    parent.updatePoint(2,currentPointId,color);
                },
            });
            fontSize=parseInt(fontSize);
            $("#fontsize").val(fontSize);
            form.on("select(fontsize)", function (data) {
                parent.updatePoint(3,currentPointId,data.value);
            })
            $("#fontfamily").val(fontfamily);
            form.on("select(fontfamily)", function (data) {
                parent.updatePoint(4,currentPointId,data.value);
            })
            upload.render({
                elem: '#uploadImg', //绑定元素
                accept: 'images',
@@ -105,7 +176,7 @@
                done: function (res) {
                    if (res.code == 0) {
                        let popId="pop_"+id;
                        parent.updatePoint(2,currentPointId, res.url);
                        parent.updatePoint(5,currentPointId, res.url);
                    }
                    layui.use('layer', function () {
                        var layer = layui.layer;

 view/project/editPolygon.html

New file
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>编辑面</title>
    <style>
        .text{
            float:left;
            color:white;
            font-size:16px;
            margin-left: 30px;
            margin-top: 5px;
        }
        .text2{
            float:left;
            color:white;
            font-size:16px;
            margin-left: 30px;
            margin-top: 20px;
        }
        .labelInput {
            width: 150px;
            height: 30px;
            margin-left: 25px;
            margin-right: 50px;
            line-height: 40px;
            font-size: 16px;
            text-indent: 8px;
            outline: 0;
            float: left;
            border: none;
            border-color: #3b403f;
            /* box-shadow: 0 2px 6px #3a3c42; */
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            background-color: rgba(63, 72, 84, 0.7);
            color: white;
        }
        .textarea{
            width: 240px;
            height: 140px;
            margin-left: 25px;
            margin-right: 50px;
            margin-top: 5px;
            line-height: 40px;
            font-size: 16px;
            text-indent: 8px;
            outline: 0;
            border: none;
            border-color: #3b403f;
            /* box-shadow: 0 2px 6px #3a3c42; */
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            background-color: rgba(63, 72, 84, 0.7);
            color: white;
            resize:none;
        }
        .my-save-btn{
            margin-top: 80px;
            margin-left: 100px;
            width: 70px;
            height: 30px;
            color: white;
            background-color: #303247;
            border:1px;
            cursor: pointer;
            border-radius: 2px;
        }
        .my-save-btn:hover{
            background-color:rgb(107, 169, 220); 
        }
        .layui-form-select .layui-input {
            padding-right: 30px;
            height: 30px;
            cursor: pointer;
            background: #20212b;
            color: grey;
            border-color: #3b403f;
        }

        .layui-form-select dl dd.layui-this {
            background-color: grey;
            top: 35px;
            color: #fff;
        }

        /*下拉框高度*/
        .layui-form-select dl {
            top: 33px;
            background: #3b403f !important;
            color: white;
            height: 100px;
        }

    </style>
    <link href="../../libs/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="../../libs/layui/layui.js"></script>
</head>

<body>
    <div style="margin-top: 20px;">
        <form class="layui-form" action="">
            <div>
                <span class="text">名称</span>
                <input id="input" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" oninput="labelChange(event)" onporpertychange="labelChange(event)"/>
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    面颜色
                </div> 
                <div id="colorSelect" style="display:inline-block;margin-top: 5px;">
                </div> 
            </div>
        </form>
    </div>
    <script>
       var currentPolygonId
       function child(id,text,polygonColor) { 
           currentPolygonId=id
           layui.use(['element', 'layer', 'form','colorpicker'], function () {
            var element = layui.element;
            var form = layui.form;
            var colorpicker = layui.colorpicker;
            $("#input").val(text)
            colorpicker.render({
                elem: '#colorSelect',
                color: polygonColor,
                size:'20px',
                done: function (color) {
                    parent.updatePolygon(2,currentPolygonId,color);
                },
            });
            form.render();
        });
       }
       function labelChange(e) {
           parent.updatePolygon(1,currentPolygonId,$("#input").val());
       }
    </script>


</body>

</html>