添加标签

ansel0926

2022-05-18 f0efddd9e32b9c5dc828401c4092be004b4826cf

添加标签

 assets/map/map3D.js

@@ -242,6 +242,34 @@
                            }
                        });
                    }
                    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); 
                            }
                        });
                    }
                    else if(entity._name=='drawPointEntity'){//编辑点
                        document.getElementById("pop_" +entity.id).style.display="block";
                        layer.config({
@@ -887,6 +915,55 @@
            "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){//修改标签：zzf
    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": "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],
    }
    let token = window.localStorage.getItem("token");
    $.ajax({
@@ -1686,8 +1763,6 @@
            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,
@@ -1695,18 +1770,12 @@
            distanceDisplayCondition: window.localStorage.getItem("visualDistance")?new Cesium.DistanceDisplayCondition(0, window.localStorage.getItem("visualDistance")):new Cesium.DistanceDisplayCondition(0, 100000.0)
        },
    });
    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;
    if(drawEntity.content!=null&&drawEntity.content!=""){
        entity.title=drawEntity.content;
    }
    document.getElementById("pop_" +entity.id).style.display="none";
    else{
        entity.title =  "标签" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss");
    }
    addTreeNode({
        "title": entity.title,
        "id": entity.id,

 assets/service/drawService.js

@@ -117,6 +117,23 @@
            "fontstyle":'SimSun',
        }
    }
    else if(type=='text'){
        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,
            "longitude": lng,
            "latitude": lat,
            "height": alt,
            "content":drawEntity.title,
            "color":drawEntity._label._fillColor._value.toCssColorString(),
            "fontsize":30,
            "fontstyle":'SimSun',
        }
    }

    let token = window.localStorage.getItem("token");
    $.ajax({

 libs/Cesiumplus/CesiumDraw.js

@@ -615,8 +615,10 @@
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        font: '20px LiSu',
                        fillColor: Cesium.Color.YELLOW,
                        outlineColor: Cesium.Color.BLACK,
                        outlineWidth: 2,
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        text: labelText,
                        eyeOffset:new Cesium.Cartesian3(0,20,0),
                        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)

 view/project/drawPlot.html

@@ -86,16 +86,16 @@
            </li>
            <li class="hover" onclick="drawplot('label')">
                <div>
                    <img class="mapImg" src="../../assets/images/draw/文字.png">
                    <img class="mapImg" src="../../assets/images/draw/点.png">
                </div>
                <div>文字标记点</div>
            </li>
            <!-- <li class="hover" onclick="drawplot('text')">
            <li class="hover" onclick="drawplot('text')">
                <div>
                    <img class="mapImg" src="../../assets/images/draw/文字.png">
                </div>
                <div>标签</div>
            </li> -->
            </li>
            <!-- <li>
                <input id="text" class="labelInput" type="text" placeholder="输入文字" autocomplete="off" />
            </li> -->

 view/project/editText.html

New file
@@ -0,0 +1,194 @@
<!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: 260px;
            height: 140px;
            margin-left: 25px;
            margin-right: 50px;
            margin-top: 20px;
            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="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>
        </form>
    </div>
    <script>
       var currentTextId
       function child(id,text,fontColor,fontSize,fontfamily) { 
           currentTextId=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: fontColor,
                size:'20px',
                done: function (color) {
                    parent.updateText(2,currentTextId,color);
                },
            });
            fontSize=parseInt(fontSize);
            $("#fontsize").val(fontSize);
            form.on("select(fontsize)", function (data) {
                parent.updateText(3,currentTextId,data.value);
            })
            $("#fontfamily").val(fontfamily);
            form.on("select(fontfamily)", function (data) {
                parent.updateText(4,currentTextId,data.value);
            })
            form.render();
        });
       }
       function labelChange(e) {
           parent.updateText(1,currentTextId,$("#input").val());
       }
    </script>


</body>

</html>