点标记

ansel0926

2022-05-14 cc021a0544a8c0b2a056cec3168da119515a8e38

点标记

 assets/images/icon/icon1.png

 assets/map/map3D.js

@@ -148,6 +148,7 @@
            viewer.clock.onTick.removeEventListener(onTickCallback);
            var pick = viewer.scene.pick(movement.position);
            CesiumPop.removeDiv();

            if(labelLayer!=null){//关闭文字编辑弹窗
                layer.close(labelLayer);
            }
@@ -210,7 +211,6 @@
                        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>  ' + "编辑文字",
@@ -227,6 +227,30 @@
                            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层方法 传递参数   
                            }
                        });
                    }
                    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', '300px'],
                            resize: false,
                            offset: ['50px',document.body.clientWidth-340],
                            content: 'project/editPoint.html',
                            success: function (layero, index) {
                                var iframe = window['layui-layer-iframe' + index];//拿到iframe元素
                                iframe.child(entity._id,entity.title);//向此iframe层方法 传递参数   
                            }
                        });
                    }
@@ -803,6 +827,57 @@
    });
}

function updatePoint(type,id,val){//修改点：zzf
    let signPointEntity = viewer.entities.getById(id);
    let popId="pop_"+id;
    let saveData;
    if(type==1){
        signPointEntity.title=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": signPointEntity._position._value.x,
            "latitude": signPointEntity._position._value.y,
            "height": signPointEntity._position._value.z,
            "content":signPointEntity.title,
        }
    }
    else if(type==2){
        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": signPointEntity._position._value.x,
            "latitude": signPointEntity._position._value.y,
            "height": signPointEntity._position._value.z,
            "imagePath":newUrl,
        }
    }

    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,
        121.29444660541178, 40.90418429460569, -54.60203546856298 + 400.0,
@@ -1134,6 +1209,7 @@
}

function initDrawEntity(){//zzf:初始化图形

    let token = window.localStorage.getItem("token");
    $.ajax({
        type: "get",
@@ -1168,21 +1244,54 @@
}

function drawAjaxPoint(drawEntity){//加载点
    //
    let cartesian3 = Cesium.Cartesian3.fromDegrees(drawEntity.longitude, drawEntity.latitude, drawEntity.height);
    console.log(drawEntity.content,cartesian3.x,cartesian3.y,cartesian3.z)
    let cartesian=new Cesium.Cartesian3(parseFloat(drawEntity.longitude),parseFloat(drawEntity.latitude),parseFloat(drawEntity.height))
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    var entity = viewer.entities.add({
    var entity=viewer.entities.add({
        id:drawEntity.id,
        name: 'drawPointEntity',
        position: cartesian,
        point: {
            color: Cesium.Color.RED,
            pixelSize: 10,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            disableDepthTestDistance: Number.POSITIVE_INFINITY
        name:"drawPointEntity",
        position:cartesian,
        label: {
            show: true,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            font: 'bold 14px Helvetica',
            fillColor: Cesium.Color.WHITE,
            text: "",
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            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(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
    })
    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,

 assets/utils/popup.js

@@ -18,7 +18,8 @@
    $(_this.viewer.container).append( _this.ctn);
    //测试弹窗内容
    var testConfig = {
        header:_this.entity._name,
        header:_this.entity.title,
        //header:"",
        content:'<img class="image" style="width:100%;height:100%;max-width:200px;max-height:150px" src=""></img>'
    }
    _this.ctn.append(_this.createHtml(testConfig.header,testConfig.content,_this.id));

 libs/Cesiumplus/CesiumDraw.js

@@ -472,32 +472,60 @@
            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 lng = Cesium.Math.toDegrees(cartographic.longitude);
                // var lat = Cesium.Math.toDegrees(cartographic.latitude);
                // var poiResult = lng + "," + lat + "," + height;
                // document.getElementById(options.printId).value = poiResult;
                // var drawPointEntity = options.viewer.entities.getById("drawPointEntity");
                // if(drawPointEntity == undefined){
                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
                // 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);
                var entity=viewer.entities.add({
                    name:"drawPointEntity",
                    position:position,
                    label: {
                        show: true,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        font: 'bold 14px Helvetica',
                        fillColor: Cesium.Color.WHITE,
                        text: "",
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
                        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                        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)
                    }
                });
                var cartesian = entity._position._value
                let popup = new Popup({
                    viewer:viewer,
                    geometry:cartesian,
                    entity:entity,
                    id: "pop_" + entity.id
                })
                entity.title =  "点" + new Date().format("yyyyMMddhhmmss");
                addTreeNode({
                    "title": entity.title,
@@ -507,8 +535,8 @@
                    "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("point",entity,entity.id);

 view/project/editPoint.html

New file
@@ -0,0 +1,128 @@
<!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;
        }
        .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;
        }
        .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>
                <span class="text">图片</span>
                <button type="button" class="layui-btn layui-btn-fluid layui-bg-black" style="height:30px;margin-top:10px;line-height: 30px;float: left;" id="uploadImg">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
        </form>
    </div>
    <script>
       var currentPointId
       function child(id,text) { 
           currentPointId=id
           layui.use(['element', 'layer', 'form','colorpicker','upload'], function () {
            var element = layui.element;
            var form = layui.form;
            var colorpicker = layui.colorpicker;
            var upload=layui.upload;
            $("#input").val(text)
            upload.render({
                elem: '#uploadImg', //绑定元素
                accept: 'images',
                url: parent.httpConfig.webApiUrl + "landstamp/front/upload",
                done: function (res) {
                    if (res.code == 0) {
                        let popId="pop_"+id;
                        parent.updatePoint(2,currentPointId, res.url);
                    }
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        layer.msg(res.msg, { time: 1000 });
                    });
                }
            });
            form.render();
        });
       }
       function labelChange(e) {
           parent.updatePoint(1,currentPointId,$("#input").val());
       }

    </script>


</body>

</html>