完善了shp的 控制开关，利用checkbox ，取消了点击。 完善了颜色参数

zhanmingkan

2022-05-16 c8a1a20ba1ca73bef0cc3bbac652014367d05d75

完善了shp的 控制开关，利用checkbox ，取消了点击。
完善了颜色参数

 assets/js/indexAI.js

@@ -139,7 +139,7 @@
            maxmin: false,
            scrollbar: false,
            shadeClose: true, //点击遮罩关闭层
            area: ['290px', '340px'],
            area: ['330px', '380px'],
            resize: false,
            offset: [layerPageStyle.offsetX, layerPageStyle.offsetY],
            content: 'project/shpAdd.html',

 assets/map/map3D.js

@@ -9,6 +9,8 @@
var userId;
var userName;

var layerMap=new Map();//存储id和图层的index索引结构

var entityMouseClickListenerIsEnable = true;

var previousTime;//地球旋转的参数

 view/project/layerAnalysis.html

@@ -114,58 +114,7 @@
                                break;
                            }
                            case "shpFeature": {
                                let path = data.path;
                                let shpArray = JSON.parse(path);
                                var shpPromises = [];
                                for (let i = 0; i < shpArray.length; i++) {
                                    shpPromises.push(Cesium.loadBlob(parent.httpConfig.nginxUrl + shpArray[i]));
                                }

                                var layer = null;
                                parent.Cesium.when.all(shpPromises, function (files) {
                                    for (let i = 0; i < shpArray.length; i++) {
                                        files[i].name = shpArray[i];
                                    }

                                    var shpProvider = new parent.VectorTileImageryProvider({
                                        source: files,
                                        zIndex: 99,
                                        removeDuplicate: false,
                                        defaultStyle: {
                                            outlineColor: "rgb(255,0,0)",
                                            fillColor: "rgba(255,0,0,0.6)",
                                            lineWidth: 1,
                                            fill: false,
                                            tileCacheSize: 200,
                                            showMaker: false,
                                            showCenterLabel: true,
                                            fontColor: "rgba(255,0,0,1)",
                                            labelOffsetX: -10,
                                            labelOffsetY: -5,
                                            fontSize: 13,
                                            fontFamily: "黑体",
                                            centerLabelPropertyName: "NAME",
                                            lineCap: "round",
                                            shadowColor: "black",
                                            shadowOffsetX: 1,
                                            shadowOffsetY: -1,
                                            shadowBlur: 1,
                                            lineJoin: "round"
                                        },
                                        maximumLevel: 20,
                                        minimumLevel: 1,
                                        simplify: false
                                    });
                                    shpProvider.readyPromise.then(function () {
                                        layer = parent.viewer.imageryLayers.addImageryProvider(shpProvider);

                                        parent.viewer.flyTo(layer);
                                        parent.Cesium.Camera.DEFAULT_VIEW_RECTANGLE = shpProvider.rectangle;

                                    });

                                });

                                console.log("shpFeature click");                                

                            }
                        }
@@ -211,6 +160,85 @@
                    var ischeck = obj.checked;
                    var objData = obj.data;
                    var type = objData.field;

                    if (type == "shpFeature") {//如果是 shp图层
                        if(ischeck){
                            let data= obj.data.ext;
                            
                            let path = data.path;
                                let shpArray = JSON.parse(path);
                                var shpPromises = [];
                                for (let i = 0; i < shpArray.length; i++) {
                                    shpPromises.push(parent.Cesium.loadBlob(parent.httpConfig.nginxUrl + shpArray[i]));
                                }

                                //判断是否存在
                                let len = parent.viewer.imageryLayers.length;
                                if (parent.layerMap.get(obj.data.id) != null) {
                                    parent.vMsg.warning("图层已经存在无需重复加载");
                                    return;
                                }

                                var layer = null;
                                parent.Cesium.when.all(shpPromises, function (files) {
                                    for (let i = 0; i < shpArray.length; i++) {
                                        files[i].name = shpArray[i];
                                    }
    
                                    var shpProvider = new parent.VectorTileImageryProvider({
                                        source: files,
                                        zIndex: len,
                                        removeDuplicate: false,
                                        defaultStyle: {
                                            outlineColor: data.color,
                                            fillColor: data.color,
                                            lineWidth: 1,
                                            fill: false,
                                            tileCacheSize: 200,
                                            showMaker: false,
                                            showCenterLabel: true,
                                            fontColor: "rgba(255,0,0,1)",
                                            labelOffsetX: -10,
                                            labelOffsetY: -5,
                                            fontSize: 13,
                                            fontFamily: "黑体",
                                            centerLabelPropertyName: "NAME",
                                            lineCap: "round",
                                            shadowColor: "black",
                                            shadowOffsetX: 1,
                                            shadowOffsetY: -1,
                                            shadowBlur: 1,
                                            lineJoin: "round"
                                        },
                                        maximumLevel: 20,
                                        minimumLevel: 1,
                                        simplify: false
                                    });
                                    shpProvider.readyPromise.then(function () {
                                        parent.layerMap.set(obj.data.id, len);
                                        layer = parent.viewer.imageryLayers.addImageryProvider(shpProvider, len);

                                        parent.viewer.flyTo(layer);
                                        parent.Cesium.Camera.DEFAULT_VIEW_RECTANGLE = shpProvider.rectangle;

                                    });

                                });
                        }else{//移除shp                         
                            var id = obj.data.id;
                            var index = parent.layerMap.get(id);
                          
                            parent.viewer.imageryLayers.remove(parent.viewer.imageryLayers.get(index),true);
                            parent.layerMap.delete(id);
                            for(let key of  parent.layerMap.keys()){//数组的游标-1
                                if( parent.layerMap.get(key)>index){
                                    parent.layerMap.set(key, parent.layerMap.get(key)-1);
                                }
                            }
                        }
                      
                    }

                    if (type != 'BaseMap' && type != 'Terrain' && type != 'Plotting') {
                        //changeChecked(ischeck, parent.getNodeById(objData.id));
                        /*

 view/project/shpAdd.html

@@ -13,19 +13,10 @@
            margin-top: 5px;
        }

        .text2 {
            float: left;
            color: white;
            font-size: 14px;
            margin-left: 30px;
            margin-top: 20px;
        }

        .labelInput {
            width: 150px;
        .input {
            width: 100%;
 
            height: 30px;
            margin-left: 25px;
            margin-right: 50px;
            line-height: 40px;
            font-size: 14px;
            text-indent: 8px;
@@ -40,29 +31,10 @@
            color: white;
        }

        .textarea {
            width: 240px;
            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: 20px;
            margin-left: 50px;
            width: 200px;
            width: 250px;
            height: 30px;
            color: white;
            background-color: rgba(35, 68, 117, 0.85);
@@ -97,6 +69,19 @@
            color: white;
            height: 100px;
        }

        .layui-colorpicker {
            width: 20px !important;
            height: 20px !important;
            border: 1px solid #e6e6e6;
            padding: 5px;
            border-radius: 2px;
            line-height: 24px;
            display: inline-block;
            cursor: pointer;
            transition: all .3s;
            -webkit-transition: all .3s;
        }
    </style>
    <link href="../../libs/layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
@@ -105,43 +90,65 @@

<body>
    <div style="margin-top: 20px;">
        <form class="layui-form" action="">
            <div>
                <span class="text">名字</span>
                <input id="name" class="labelInput" type="text" placeholder="输入名称" autocomplete="off" />
            </div>
            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    颜色
        <form class="layui-form">
            <div style="height: 40px;width: 100%;margin-top: 10px;">
                <div
                    style="width: 20%; float:left;text-align: center;color: white;font-size:14px;line-height: 14px;line-height: 30px;">
                    名字:
                </div>
                <div id="colorSelect" style="display:inline-block;margin-top: 5px;margin-left: 20px;">
                <div style="width: 70%; float:left;">
                    <input id="name" class="input" type="text" placeholder="输入名称" autocomplete="off" />
                </div>
            </div>

            <div>
                <div style="display:inline-block;margin-top: 20px;margin-left: 30px;color:white">
                    类型
            <div style="height:40px;width: 100%;margin-top: 10px;">
                <div
                    style="width: 20%; float:left;text-align: center;color: white;font-size:14px;line-height: 14px;line-height: 30px;">
                    颜色:
                </div>
                <div style="display:inline-block;margin-top: 5px;width: 150px;margin-left:  20px;">
                    <select id="type" lay-verify="required" class="my-select" lay-filter="fontfamily">
                <div style="width: 70%; float:left;">
                    <div id="colorSelect" style="display:inline-block;margin-top: 5px;">
                    </div>
                </div>
            </div>

            <div style="height: 40px;width: 100%;margin-top: 10px;">
                <div
                    style="width: 20%; float:left;text-align: center;color: white;font-size:14px;line-height: 14px;line-height: 30px;">
                    类型:
                </div>
                <div style="width: 70%; float:left;">

                    <select id="type" lay-verify="required" lay-filter="fontfamily" style="margin-top: 10px;">
                        <option value="point">点</option>
                        <option value="line">线</option>
                        <option value="polygon">面</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: 25px;line-height: 30px;float: left;"
                    id="uploadIcon">
                    <i class="layui-icon">&#xe67c;</i>上传shp
                </button>
                <input type="hidden" id="path">
            </div>
            <br />

            <button class="my-save-btn" onclick="uploadShp()">上传</button>
            <div style="height: 40px;width: 100%;margin-top: 10px;">
                <div style="width: 20%; float:left;text-align: center;color: white;font-size:14px;line-height: 14px;line-height: 30px;">
                    文件
                </div>
                <div style="width: 70%; float:left;">
                    <button type="button" class="layui-btn layui-bg-black"
                        style="width:150px;height:35px;float: left;" id="uploadIcon">
                        <i class="layui-icon">&#xe67c;</i>上传shp
                    </button>
                    <input type="hidden" id="path">
                    <input type="hidden" id="color" value="#ffde06">
                </div>
            </div>
            <div style="width: 100%;margin-top: 10px; color: white;">
                <div id="tips" style="margin-left: 50px;color: white;font-family: emoji;font-size: 14px;font-style: italic;"></div> 
            </div>
            <div style="height: 40px;width: 100%;margin-top: 10px;">
                <button class="my-save-btn" onclick="uploadShp()">上传</button>
            </div>

        
        </form>
    </div>
    <script>
@@ -153,11 +160,15 @@
            var upload = layui.upload;
            colorpicker.render({
                elem: '#colorSelect',
                color: "red",
                color: "#ffde06",
                size: '20px',
                done: function (color) {

                },
                change: function(color){
                   console.log(color);
                   $("#color").val(color);
                }
            });

            upload.render({
@@ -166,38 +177,29 @@
                url: parent.httpConfig.webApiUrl + "landstamp/front/uploadShp",
                done: function (res) {
                    if (res.code == 0) {
                        console.log(res.msg);
                        $("#path").val(res.msg);
                        $("#path").val(res.url);
                        $("#tips").html("上传文件:"+res.filename);

                    } else {
                        layui.use('layer', function () {
                            var layer = layui.layer;
                            layer.msg(res.msg, { time: 1000 });
                        });
                        parent.vMsg.warning(res.msg);
                    }
                }
            });
            form.render();
        });

        function uploadShp() {
            var name = $("#name").val();
            var color = $("#colorSelect").val();
            var color = $("#color").val();
            var type = $("#type").val();
            var path = $("#path").val();
            if (name == "") {
            
                parent.vMsg.warning("请输入名字");
                return;
            }
            if(path == ""){
                layui.use('layer', function () {
                    var layer = layui.layer;
                    layer.msg("请上传shp文件");
                });
            if (path == "") {
                parent.vMsg.warning("请上传shp文件");
                return;
            }
            console.log(name, color, type, path);
            var obj = {
                "name": name,
                "color": color,
@@ -209,14 +211,20 @@
            $.ajax({
                url: parent.httpConfig.webApiUrl + "landstamp/front/saveShp",
                type: 'POST',
                contentType: "application/json;charset=utf-8",
                dataType: "json",   
                async:false,  
                data: JSON.stringify(obj),
                contentType: "application/json;charset=utf-8",
                beforeSend: function (request) {
                    request.setRequestHeader("token", token);
                },
                success: function (result) {

                    console.log(result);
                    if(result.code ==0){
                        parent.vMsg.warning("上传成功");
                    }else{
                        parent.vMsg.warning("上传失败");
                    }
                }
            });