提交

ansel0926

2022-05-14 337c94f6e0a0759b9f627db4cdd4cb88dc65d896

提交

 assets/css/popup.css

New file
@@ -0,0 +1,51 @@
.bx-popup-ctn{
    position: absolute;
    z-index: 999;
    background: transparent;
    opacity: 0.5;
    border-radius: 4px;
    border-style:solid;
    border-color: rgb(0,133,203);
}
.bx-popup-tip-container {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
}
.bx-popup-tip {
    width: 17px;
    background: rgb(0,133,203,0.5);
    height: 17px;
    padding: 1px;
    margin: -10px auto 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.bx-popup-header-ctn{
    background: rgb(0,133,203);
    color: #fff;
    font-size: 15px;
    padding: 4px;
}
.bx-popup-content-ctn{
    padding:15px ;
    width: 200px;
    height: 150px;
    background: rgb(0,133,203,0.5);
}
.leaflet-popup-close-button{
    user-select: auto;
    position: absolute;
    padding: 4px;
    right: 0;
    top: 0;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
}

 assets/js/ajax.js

@@ -14,5 +14,3 @@

initmap3D(initMapOptions);




 assets/map/map3D.js

@@ -113,6 +113,8 @@
    //添加海洋流动效果
    // addSeaFlow();

    //初始化绘制图形
    initDrawEntity();
}

var mouseMoveHandler
@@ -146,6 +148,9 @@
            viewer.clock.onTick.removeEventListener(onTickCallback);
            var pick = viewer.scene.pick(movement.position);
            CesiumPop.removeDiv();
            if(labelLayer!=null){//关闭文字编辑弹窗
                layer.close(labelLayer);
            }
            if (pick != undefined && pick instanceof Cesium.Cesium3DTileFeature) {
                var propertyNames = pick.getPropertyNames();
                var length = propertyNames.length;
@@ -198,12 +203,14 @@
            else if (pick != undefined && pick instanceof Object) {
                var pickPrimitive = pick.primitive;
                var entity = pick.id;
                var cartesian = viewer.scene.pickPosition(movement.position);
                //添加文字标签事件：zzf
                if(entity!=undefined && entity instanceof Object &&entity.title!=undefined){
                    if(entity._name=='drawLabelEtity'){
                        if(labelLayer!=null){
                            layer.close(labelLayer);
                        }
                        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>  ' + "编辑文字",
@@ -224,12 +231,12 @@
                        });
                    }
                }
                var cartesian = viewer.scene.pickPosition(movement.position);
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                var lat = Cesium.Math.toDegrees(cartographic.latitude);
                var lng = Cesium.Math.toDegrees(cartographic.longitude);
                var alt1 = cartographic.height;
                if (pickPrimitive instanceof Cesium.PointPrimitive || pickPrimitive instanceof Cesium.GroundPolylinePrimitive || pickPrimitive instanceof Cesium.GroundPrimitive) {
                // var cartesian = viewer.scene.pickPosition(movement.position);
                // var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                // var lat = Cesium.Math.toDegrees(cartographic.latitude);
                // var lng = Cesium.Math.toDegrees(cartographic.longitude);
                // var alt1 = cartographic.height;
                // if (pickPrimitive instanceof Cesium.PointPrimitive || pickPrimitive instanceof Cesium.GroundPolylinePrimitive || pickPrimitive instanceof Cesium.GroundPrimitive) {
                    // CesiumPop.bindPopGlobeEventHandler(viewer);
                    // var content = '<div class="mapPop font2">'
                    //     + '<div style="margin-top:10px;margin-left:15px;">'
@@ -255,7 +262,7 @@
                    //     "primitive": pick.primitive
                    // }
                    // CesiumPop.addDivPop(options);
                }
                // }
            }
        

@@ -757,7 +764,43 @@
        let font=signPointEntity._label._font._value.split(" ");
        signPointEntity._label._font._value = font[0]+" "+val;
    }

    // let mydata = "{id:'" + signPointEntity._id + "',";
    // mydata = mydata + "type:label,";
    // mydata = mydata + "longitude:" + signPointEntity._position._value.x + ",";
    // mydata = mydata + "latitude:" + signPointEntity._position._value.y + ",";
    // mydata = mydata + "height:" + signPointEntity._position._value.z + ",";
    // mydata = mydata + "content:" + signPointEntity.title + ",";
    // mydata = mydata + "color:'" + signPointEntity._label._fillColor._value.toCssColorString() + "',";
    // mydata = mydata + "fontsize:'" + signPointEntity._label._font._value[0].replace("px","") + "',";
    // mydata = mydata + "fontstyle:'" + signPointEntity._label._font._value[1] + "'}";
    let saveData= {
        "id":signPointEntity._id,
        "type": "label",
        "longitude": signPointEntity._position._value.x,
        "latitude": signPointEntity._position._value.y,
        "height": signPointEntity._position._value.z,
        "content":signPointEntity.title,
        "color":signPointEntity._label._fillColor._value.toCssColorString(),
        "fontsize":signPointEntity._label._font._value.split(" ")[0].replace("px",""),
        "fontstyle":signPointEntity._label._font._value.split(" ")[1],
    }
    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() {
@@ -1088,4 +1131,186 @@
        })
    });
    viewer.scene.primitives.add(waterPrimitive);*/
}

function initDrawEntity(){//zzf:初始化图形
    let token = window.localStorage.getItem("token");
    $.ajax({
        type: "get",
        async: false,
        url: parent.httpConfig.webApiUrl + "landstamp/front/getDrawEntity",
        contentType: "application/json;charset=utf-8",
        beforeSend:function(request){
            request.setRequestHeader("token",token);
        },
        success: function (data) {
            if(data.rows!=null){
                for(let i=0;i<data.rows.length;i++){
                    if(data.rows[i].type=="point"){
                        drawAjaxPoint(data.rows[i])
                    }
                    else if(data.rows[i].type=="polyline"){
                        drawAjaxPolyline(data.rows[i])
                    }
                    else if(data.rows[i].type=="polygon"){
                        drawAjaxPolygon(data.rows[i])
                    }
                    else if(data.rows[i].type=="label"){
                        drawAjaxLabel(data.rows[i])
                    }
                }
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("ajax请求失败！");
        }
    });
}

function drawAjaxPoint(drawEntity){//加载点
    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({
        id:drawEntity.id,
        name: 'drawPointEntity',
        position: cartesian,
        point: {
            color: Cesium.Color.RED,
            pixelSize: 10,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2,
            disableDepthTestDistance: Number.POSITIVE_INFINITY
        }
    });
    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");
}

function drawAjaxPolyline(drawEntity){//加载线
    var measureLinePositonsArray = [];//存储已量测的线段的折点
    let longitudeList=drawEntity.longitude.split(",");
    let latitudeList=drawEntity.latitude.split(",");
    let heightList=drawEntity.height.split(",");
    //点坐标
    for(let i=0;i<longitudeList.length;i++){
        let cartesian=new Cesium.Cartesian3(parseFloat(longitudeList[i]),parseFloat(latitudeList[i]),parseFloat(heightList[i]))
        measureLinePositonsArray.push(cartesian);
    }
    var drawpointArr = []; 
    var measureLineGroundEntity = viewer.entities.add({
        id:drawEntity.id,
        name: 'measureLineGroundEntity',
        polyline: {
            clampToGround: true,
            width: 1,
            material: new Cesium.Color.fromBytes(255,124,0,255),
            positions:measureLinePositonsArray
        },
        drawpointArr: drawpointArr,
        measureLinePositonsArray: measureLinePositonsArray
    });
    measureLineGroundEntity.title = "折线" + new Date(drawEntity.createTime).format("yyyyMMddhhmmss");
    addTreeNode({
        "title": measureLineGroundEntity.title,
        "id": measureLineGroundEntity.id,
        "field": "Entity",
        "checked": true,
        "spread": true,
        "children": [],
        "ext": {
            // "lng": Cesium.Math.toDegrees(cartographic.longitude),
            // "lat": Cesium.Math.toDegrees(cartographic.latitude)
        }
    }, "4");
}

function drawAjaxPolygon(drawEntity){//加载面
    var polyPositions = [];//存储多边形的点
    let longitudeList=drawEntity.longitude.split(",");
    let latitudeList=drawEntity.latitude.split(",");
    let heightList=drawEntity.height.split(",");
    //点坐标
    for(let i=0;i<longitudeList.length;i++){
        let cartesian=new Cesium.Cartesian3(parseFloat(longitudeList[i]),parseFloat(latitudeList[i]),parseFloat(heightList[i]))
        polyPositions.push(cartesian);
    }
    var polygon = new Cesium.PolygonHierarchy();
    polygon.positions=polyPositions;
    var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
    polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
    let cartographic = Cesium.Cartographic.fromCartesian(polyCenter, viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
    var measurePolyGonGroundEntity = viewer.entities.add({
        id:drawEntity.id,
        name: 'measurePolyGonGroundEntity',
        polygon: {
            material: new Cesium.ColorMaterialProperty(Cesium.Color.RED.withAlpha(0.3)),
            classificationType: Cesium.ClassificationType.BOTH,
            outline: true,
            outlineColor: Cesium.Color.WHITE,
            hierarchy: new Cesium.CallbackProperty(function () {
                return polygon;
            }, false)
        }
    });
    measurePolyGonGroundEntity.title = "面" +  new Date(drawEntity.createTime).format("yyyyMMddhhmmss");
    addTreeNode({
        "title": measurePolyGonGroundEntity.title,
        "id": measurePolyGonGroundEntity.id,
        "field": "Entity",
        "checked": true,
        "spread": true,
        "children": [],
        "ext": {
            "lng": Cesium.Math.toDegrees(cartographic.longitude),
            "lat": Cesium.Math.toDegrees(cartographic.latitude)
        }
    }, "4");
}

function drawAjaxLabel(drawEntity){//加载文字
    let cartesian=new Cesium.Cartesian3(parseFloat(drawEntity.longitude),parseFloat(drawEntity.latitude),parseFloat(drawEntity.height))
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    var entity = viewer.entities.add({
        id:drawEntity.id,
        name: 'drawLabelEtity',
        position: cartesian.clone(),
        label: {
            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,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000000000000.0)
        }
    });
    entity.title=drawEntity.content,
    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");
}

 assets/service/drawService.js

@@ -49,4 +49,63 @@
        'viewer': viewer, //全局Cesium对象
    };
    CesiumDraw.clearDraw(options);
}

function saveDrawEntity(type,drawEntity,id){//zzf:保存绘制的图形
    let saveData;
    if(type=='point'){
        saveData= {
            "id":id,
            "type": type,
            "longitude": drawEntity._position._value.x,
            "latitude": drawEntity._position._value.y,
            "height": drawEntity._position._value.z,
        }
    }
    else if(type=='polyline'||type=='polygon'){
        let longitudeList=[],latitudeList=[],heightList=[]
        for(let i=0;i<drawEntity.length;i++){
            longitudeList.push(drawEntity[i]._position._value.x)
            latitudeList.push(drawEntity[i]._position._value.y)
            heightList.push(drawEntity[i]._position._value.z)
        }
        saveData= {
            "id":id,
            "type": type,
            "longitude": longitudeList.toString(),
            "latitude":latitudeList.toString(),
            "height": heightList.toString(),
        }
    }
    else if(type=='label'){
        saveData= {
            "id":id,
            "type": type,
            "longitude": drawEntity._position._value.x,
            "latitude": drawEntity._position._value.y,
            "height": drawEntity._position._value.z,
            "content":drawEntity.title,
            "color":drawEntity._label._fillColor._value.toCssColorString(),
            "fontsize":30,
            "fontstyle":'SimSun',
        }
    }

    let token = window.localStorage.getItem("token");
    $.ajax({
        type: "get",
        async: false,
        url: parent.httpConfig.webApiUrl + "landstamp/front/addDrawEntity",
        data: saveData,
        contentType: "application/json;charset=utf-8",
        beforeSend:function(request){
            request.setRequestHeader("token",token);
        },
        success: function (data) {
            console.log(data)
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log("ajax请求失败！");
        }
    });
}

 assets/utils/popup.js

New file
@@ -0,0 +1,66 @@
 // 创建弹窗对象的方法
 var Popup = function(info){
    this.constructor(info);
}
Popup.prototype.id=0;
Popup.prototype.dom=[];
Popup.prototype.constructor = function(info){
    var _this = this;
    _this.viewer = info.viewer;//弹窗创建的viewer
    _this.geometry = info.geometry;//弹窗挂载的位置
    _this.id = info.id;
    _this.entity=info.entity;
    _this.ctn = $("<div class='bx-popup-ctn' id =  '"+_this.id+"'>");
    
    var entity={"id":_this.id,"dom":_this.ctn};
    Popup.prototype.dom.push(entity);

    $(_this.viewer.container).append( _this.ctn);
    //测试弹窗内容
    var testConfig = {
        header:_this.entity._name,
        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));
    
    _this.render(_this.geometry);
    _this.eventListener = _this.viewer.clock.onTick.addEventListener(function(clock) {
        _this.render(_this.geometry);
    })
}
// 实时刷新
Popup.prototype.render = function(geometry){
    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);
    }
}
// 动态生成内容
Popup.prototype.createHtml = function(header,content,id){
        var html = '<div class="bx-popup-header-ctn">'+
        header+
        '</div>'+
        '<div class="bx-popup-content-ctn" >'+
        '<div class="bx-popup-content">'+    
        content+
        '</div>'+
        '</div>'+
        '<div class="bx-popup-tip-container" >'+
        '<div class="bx-popup-tip" >'+
        '</div>'+
    '</div>'+
    '<a class="leaflet-popup-close-button" onClick="Popup.prototype.close(\''+id+'\')">X</a>';
    return html;
}
// 关闭弹窗按钮
Popup.prototype.close=function(id){
    var _this = this;
    for(let i=0;i<_this.dom.length;i++){
        if(_this.dom[i].id==id){
            _this.dom[i].dom.hide();
            // _this.dom.splice(i,1)
        }
    }
}

 libs/Cesiumplus/CesiumDraw.js

@@ -262,6 +262,7 @@
                    //     })
                    // }
                    addTreeNode(node, "4");
                    saveDrawEntity("polygon",drawpointArr,measurePolyGonGroundEntity.id);
                }
                for (let i in drawpointArr) {
                    viewer.entities.remove(drawpointArr[i]);
@@ -320,7 +321,6 @@
            measureLineGroundEntity.polyline.positions = new Cesium.CallbackProperty(function () {
                return measureLinePositonsArray;
            }, false)

            var drawpointArr = measureLineGroundEntity.drawpointArr;
            //节点添加标签
            function addPin(carPoi) {
@@ -455,6 +455,7 @@
                        // }

                        addTreeNode(node, "4");
                        saveDrawEntity("polyline",drawpointArr,measureLineGroundEntity.id);
                    }
                    for (let i in drawpointArr) {
                        viewer.entities.remove(drawpointArr[i]);
@@ -510,6 +511,7 @@
                        "lat": Cesium.Math.toDegrees(cartographic.latitude)
                    }
                }, "4");
                saveDrawEntity("point",entity,entity.id);
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }

@@ -574,6 +576,7 @@
                        "lat": Cesium.Math.toDegrees(cartographic.latitude)
                    }
                }, "4");
                saveDrawEntity("label",entity,entity.id);
                drawHandler = drawHandler && drawHandler.destroy();
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
@@ -592,4 +595,5 @@
    } else {
        console.log("CesiumDraw already defined.");
    }
})(window);
})(window);


 view/index.html

@@ -27,7 +27,6 @@
    <script type="text/javascript" src="../assets/js/localStorage.js"></script>
    <script type="text/javascript" src="../assets/utils/ry-ui.js"></script>
    <script type="text/javascript" src="../assets/js/common.js"></script>

    <!--引入cesuim Js-->
    <script src="../libs/Cesium1.75/Cesium.js"></script>
    <script>
@@ -54,6 +53,8 @@
    <script src="../libs/Cesiumplus/CesiumMeasure.js"></script>
    <script src="../libs/Cesiumplus/CesiumViewshed.js"></script>
    <script src="../libs/Cesiumplus/arrow/plotUtil.js"></script>
    <link href="../assets/css/popup.css" rel="stylesheet">
    <script src="../assets/utils/popup.js"></script>
    <script src="../libs/Cesiumplus/CesuimDataView.js"></script>
    <!-- <script src="../libs/Cesiumplus/CesiumShpWrite.js"></script> -->
    <!--加载shp 的插件-->

 view/project/layerAnalysis.html

@@ -56,6 +56,10 @@
            border-radius: 6px;
            background-color: #999;
        }
        .layui-tree-btnGroup .layui-icon{
            display: inline-block;
            color:white
        }
    </style>

    <script>
@@ -64,9 +68,10 @@
        layui.use(['tree'], function () {
            var tree = layui.tree
            isloading = true;
            tree.render({
            var modelTree=tree.render({
                elem: '#model-tree-list'
                , data: layerMenu
                , edit:["del"]
                , showCheckbox: true  //是否显示复选框
                , id: 'model-tree-list'
                , isJump: false //是否允许点击节点时弹出新窗口跳转
@@ -256,6 +261,7 @@
                            let result = modelType == 'Primitive' ? parent.delprimitiveModel(modelId) : parent.delentityModel(modelId);
                        }
                        parent.delNodeById(modelId, layerMenu);
                        delDrawEntity(modelId);
                    }
                }
            });
@@ -312,6 +318,37 @@
                    changeParentChecked(ischeck, parentOfData);
                }
            }
            //zzf:隐藏除绘图菜单以外的删除按钮
            $(modelTree.config.elem[0].children[0].childNodes).each(function(){
                let parentDiv=$(this)[0].childNodes[0];
                $(parentDiv).find("div .layui-icon-delete").remove();    
                if($(this)[0].dataset.id!="4"){
                    let childrenDiv=$(this)[0].childNodes[1];
                    $(childrenDiv).find("div .layui-icon-delete").remove();        
                }
            })
            function delDrawEntity(modelId){
                let updateData= {
                    "ids":modelId,
                }
                let token = window.localStorage.getItem("token");
                $.ajax({
                    type: "post",
                    async: false,
                    url: parent.httpConfig.webApiUrl + "landstamp/front/removeDrawEntity",
                    data: updateData,
                    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请求失败！");
                    }
                });
            }
        });
    </script>