目录树调整添加图层管理等

shuishen

2021-06-17 b9f68eadd170e469314430d7bbdb4246f65451cd

目录树调整添加图层管理等

 widgets/Layermanagement/Widget.html

@@ -1,26 +1,24 @@
<div>
    <div class="layer-management">
        <div class="bar-item menu-switch" id="menu_switch" data-type="7">
            <i></i>
            <span>图层</span>
        </div>
        <div class="ztree-demo-background" id="ztree_container">
            <div class="layer-tag-bar">
                <img src="./images/menu.png" alt=""> <span>图层</span> <i id="close_tag_bar">×</i>
            </div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    <div class="layer-tab">
        <button>
            <img src="./images/layer-control.png" alt="">
        </button>
    </div>
</div>


<!-- {config.json--widgetOnScreen--widgets
    "uri": "widgets/Layermanagement/Widget",
    "position": {
      "right": 82,
      "top": 20,
      "height": "32px",
      "width": "72px",
      "relativeTo": "map"
    }
  }, -->
    <div class="layer-list">
        <ul>
            <li>
                <div>
                    名称
                    <button>
                        透明度设置
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i
                            class="layui-icon">&#xe619;</i></button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i
                            class="layui-icon">&#xe61a;</i></button>
                </div>
            </li>
        </ul>
    </div>
</div>

 widgets/Layermanagement/Widget.js

@@ -28,30 +28,11 @@
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-Layermanagement',
            name: 'Layermanagement',
            layers: {},
            LayerzNodes: [],
            entitys: {},
            // 存放id的数组
            layermanagementId: [],
            startup: function () {
                var that = this;
                // 暴露在外的接口
                topic.subscribe("closeZtree", lang.hitch(this, this.closeZtreeBox));
                this.inherited(arguments);

                $('#menu_switch span').click(function () {
                    if ($('#ztree_container').is(":hidden")) {
                        $('#ztree_container').stop().show();
                    } else {
                        $('#ztree_container').stop().hide();
                    }
                    topic.publish('closeMap', this.name);
                    topic.publish('closeTool', this.name);
                });

                $('#close_tag_bar').click(function () {
                    $('#ztree_container').stop().hide();
                });
               
            },

            closeZtreeBox: function (item) {
@@ -61,131 +42,7 @@
            },

            onOpen: function () {
                var self = this;
                this.map.scene.globe.depthTestAgainstTerrain = false;
                $.ajax({
                    url: 'widgets/Layermanagement/datas.json',
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        setTimeout(function () {
                            var parentOpen = null;
                            var parentCheck = null;
                            for (var i = 0; i < data.data.length; i++) {
                                data.data[i].isOpen == 1 ? parentOpen = false : parentOpen = true;
                                data.data[i].isCheck == 1 ? parentCheck = false : parentCheck = true;
                                self.LayerzNodes.push({
                                    id: data.data[i].id,
                                    pId: data.data[i].parentId,
                                    name: data.data[i].name,
                                    url: data.data[i].url,
                                    open: parentOpen,
                                    nocheck: parentCheck,
                                });
                                // 存储数据得
                                var result = null;
                                // 存储url最后面数字的
                                var layersNumber = null;
                                // 存储 true， false
                                var layerShow = null;
                                // 存储除数字外的URL
                                var layersUrl = null;
                                for (var j = 0; j < data.data[i].children.length; j++) {
                                    result = data.data[i].children[j];
                                    result.isCheck == 1 ? layerShow = false : layerShow = true;
                                    self.LayerzNodes.push({
                                        id: result.id,
                                        pId: result.parentId,
                                        name: result.name,
                                        checked: layerShow,
                                        type: result.type,
                                        icon: result.icon,
                                        rendering: result.rendering,
                                        url: result.url,
                                        showheight: result.showheight
                                    });


                                    // 从服务上 并且是服务端渲染的 的 就去添加图层
                                    if (result.type == 1 && result.rendering == 1) {
                                        layersNumber = result.url.substring(result.url.length - 1);
                                        layersUrl = result.url.substring(0, result.url.length - 2);
                                        var layersObject = {
                                            icon: result.icon,
                                            label: result.name,
                                            show: layerShow,
                                            type: result.type,
                                            url: result.url,
                                            layerID:result.layerID,
                                            showheight: result.showheight
                                        };
                                        if (!isNaN(layersNumber)) {
                                            layersObject.layers = layersNumber;
                                            layersObject.url = layersUrl;
                                        }
                                        self.createLayers(layersObject);
                                    } else if (result.type == 0 && result.rendering == 0) {  // 从 接口上读取的数据 并且是 本地渲染，就去添加entity实体
                                        layerShow && self.createEntity({
                                            url: result.url,
                                            entityName: result.name,
                                            img: result.icon,
                                            delete: !layerShow,
                                            showheight: result.showheight
                                        });
                                    } else if (result.type == 1 && result.rendering == 0) {
                                        layerShow && self.serviceEntity({
                                            url: result.url,
                                            oname: result.name,
                                            img: result.icon,
                                            delete: !layerShow,
                                            showheight: result.showheight
                                        });
                                    }
                                }
                            }

                            // 获取现有图层
                            var imageryLayers = self.map.scene.globe.imageryLayers;

                            for (var i = 0; i < imageryLayers.length; i++) {
                                var layer = imageryLayers.get(i);
                                self.layers[layer.label] = layer;
                                // self.layers[layer.label].show = true;
                            }

                            var setting = {
                                view: {
                                    selectedMulti: false
                                },
                                check: {
                                    enable: true
                                },
                                data: {
                                    simpleData: {
                                        enable: true
                                    }
                                },
                                callback: {
                                    onCheck: onCheck,
                                }
                            };
                            $.fn.zTree.init($("#treeDemo"), setting, self.LayerzNodes);
                            $("#treeDemo li ").on('click', 'a', function () {
                                return false;
                            });

                            function onCheck(e, treeId, treeNode) {
                                if (treeNode.isParent) {
                                    treeNode.children.forEach(function (item, index) {
                                        self.selectiveLoading(item);
                                    });
                                    return;
                                }
                                self.selectiveLoading(treeNode);
                            }
                        }, 2000);
                    }
                });
                
            },

            onClose: function () {
@@ -209,336 +66,6 @@
                //todo
                //do something before this func
                this.inherited(arguments);
            },

            // 选中与否，判断后进行添加或者删除实体
            selectiveLoading: function (treeNodeItem) {

                var self = this;
                if (treeNodeItem.type == 1 && treeNodeItem.rendering == 1) {
                    self.layers[treeNodeItem.name].show = treeNodeItem.checked;
                } else if (treeNodeItem.type == 0 && treeNodeItem.rendering == 0) {
                    self.createEntity({
                        url: treeNodeItem.url,
                        entityName: treeNodeItem.name,
                        img: treeNodeItem.icon,
                        delete: !treeNodeItem.checked,
                        showheight: treeNodeItem.showheight
                    });
                } else if (treeNodeItem.type == 1 && treeNodeItem.rendering == 0) {
                    self.serviceEntity({
                        url: treeNodeItem.url,
                        oname: treeNodeItem.name,
                        img: treeNodeItem.icon,
                        delete: !treeNodeItem.checked,
                        showheight: treeNodeItem.showheight
                    });
                }
            },

            // 读取服务，并且服务端加载，添加图层
            createLayers: function (layerConfig) {
                var layMap = {
                    '1': 'ArcGisMapServerImageryProvider'
                };
                var layers;
                if (false) {

                } else {

                    /*var layers = new Cesium[layMap[layerConfig.type]](layerConfig);
                    var imageryLayers = this.map.imageryLayers;
                    var olayer = imageryLayers.addImageryProvider(layers);*/

                    //创建provider。
                    var provider = new Cesium.SuperMapImageryProvider({
                        url: layerConfig.url,
                        layersID: layerConfig.layerID
                    });

                    //创建影像图层。
                    var olayer = this.map.imageryLayers.addImageryProvider(provider);

                    olayer.show = layerConfig.show;
                    olayer.label = layerConfig.label;
                }
            },

            // 创建entity实体
            createEntity: function (entityConfig) {
                var self = this;
                $.ajax({
                    url: entityConfig.url,
                    type: 'GET',
                    dataType: 'JSON',
                    success: function (data) {
                        /*if (data.data.length < 100) {
                            labelHeight = 260000;
                        } else if (data.data.length >= 100 && data.data.length < 250) {
                            labelHeight = 220000;
                        } else if (data.data.length >= 250 && data.data.length < 500) {
                            labelHeight = 180000;
                        } else if (data.data.length >= 500) {
                            labelHeight = 140000;
                        }*/
                        var site = "siteCode";
                        if (entityConfig.entityName == "山洪隐患点") {
                            var site = "siteId";
                        }
                        data.data.forEach(function (item, index) {
                            var id = item[site] + entityConfig.entityName + item['lgtd'];
                            var angle = "";
                            if (typeof (item.angle) != "undefined") {
                                angle = item.angle;
                            }
                            // 移除entity实体
                            if (entityConfig.delete == true) {
                                self.map.entities.removeById(id);
                                if (self.layermanagementId.indexOf(id) != -1) {
                                    self.layermanagementId.splice(id, 1);
                                }
                                return;
                            }
                            self.layermanagementId.push(id);
                            // 添加entity实体
                            self.map.entities.add({
                                id: id, // 实体ID
                                name: item.siteName, // 实体名称
                                position: Cesium.Cartesian3.fromDegrees(Number(item.lgtd), Number(item.lttd)), // x,y 实体经纬度
                                label: {
                                    show: true,
                                    text: item.siteName, // text 与实体相关的文字
                                    font: "700 14px '黑体'",
                                    fillColor: Cesium.Color.DEEPSKYBLUE,
                                    // backgroundColor: Cesium.Color.DEEPSKYBLUE,
                                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                    outlineWidth: 2,
                                    outlineColor: Cesium.Color.fromBytes(255, 255, 255), // 文字轮廓的颜色
                                    verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
                                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
                                    pixelOffset: new Cesium.Cartesian2(10, -10), // 文字位置
                                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1, entityConfig.showheight),
                                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                                },
                                billboard: {
                                    show: true,
                                    image: entityConfig.img,
                                    // image: entityConfig.img,
                                    width: 20,
                                    height: 20,
                                    clampToGround: true,
                                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                                    rotation: Cesium.Math.toRadians(angle),
                                }
                            });
                            /*self.map.entities.add({
                                id: item[site] + entityConfig.entityName, // 实体ID
                                name: item.siteName, // 实体名称
                                position: Cesium.Cartesian3.fromDegrees(item.lgtd, item.lttd), // x,y 实体经纬度
                                label: {
                                    show: true,
                                    text: item.siteName, // text 与实体相关的文字
                                    font: "700 16px '黑体'",
                                    fillColor: Cesium.Color.DEEPSKYBLUE,
                                    // backgroundColor: Cesium.Color.DEEPSKYBLUE,
                                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                                    outlineWidth: 3,
                                    outlineColor: Cesium.Color.fromBytes(255, 255, 255), // 文字轮廓的颜色
                                    verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
                                    horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
                                    pixelOffset: new Cesium.Cartesian2(10, -10), // 文字位置
                                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1, entityConfig.showheight),
                                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                                },
                                ellipse: {
                                    show: true,
                                    semiMajorAxis: 200,
                                    semiMinorAxis: 200,
                                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

                                    rotation: Cesium.Math.toRadians(angle),
                                    material: new Cesium.ImageMaterialProperty({
                                        image: entityConfig.img
                                    }),
                                }
                            })*/
                        });
                    }
                });
            },

            // 读取服务，并本地加载
            serviceEntity: function (entityConfig) {
                var self = this;
                $.ajax({
                    url: entityConfig.url + "/query",
                    type: 'get',
                    data: {
                        where: '1=1',
                        returnGeometry: true,
                        outFields: "*",
                        f: "pjson"
                    },
                    dataType: 'JSON',
                    success: function (data) {
                        if (data.geometryType == "esriGeometryPoint") {
                            self.geometryPoints({
                                data: data,
                                img: entityConfig.img,
                                delete: entityConfig.delete,
                                showheight: entityConfig.showheight
                            });
                        } else if (data.geometryType == 'esriGeometryPolyline') {
                            self.geometryPolylines({
                                data: data,
                                img: entityConfig.img,
                                delete: entityConfig.delete,
                                showheight: entityConfig.showheight
                            });
                        } else if (data.geometryType == 'esriGeometryPolygon') {
                            self.geometryPolygon({
                                data: data,
                                img: entityConfig.img,
                                delete: entityConfig.delete,
                                showheight: entityConfig.showheight
                            });
                        }
                    }
                });
            },

            // 读取服务，并且在本地渲染的，加载实体点方法
            geometryPoints: function (entityConfig) {
                var self = this;
                var labelHeight = null;
                if (entityConfig.data.features.length < 100) {
                    labelHeight = 260000;
                } else if (entityConfig.data.features.length >= 100 && entityConfig.data.features.length < 250) {
                    labelHeight = 220000;
                } else if (entityConfig.data.features.length >= 250 && entityConfig.data.features.length < 500) {
                    labelHeight = 180000;
                } else if (entityConfig.data.features.length >= 500) {
                    labelHeight = 140000;
                }
                for (var o = 0; o < entityConfig.data.features.length; o++) {
                    if (entityConfig.delete == true) {
                        self.map.entities.removeById(JSON.stringify(entityConfig.data.features[o].attributes));
                        if (self.layermanagementId.indexOf(JSON.stringify(entityConfig.data.features[o].attributes)) != -1) {
                            self.layermanagementId.splice(self.layermanagementId.indexOf(JSON.stringify(entityConfig.data.features[o].attributes)), 1);
                        }
                        continue;
                    }

                    self.layermanagementId.push(JSON.stringify(entityConfig.data.features[o].attributes));

                    self.map.entities.add({
                        id: JSON.stringify(entityConfig.data.features[o].attributes), // 实体ID
                        name: entityConfig.data.features[o].attributes[entityConfig.data.displayFieldName], // 实体名称
                        position: Cesium.Cartesian3.fromDegrees(entityConfig.data.features[o].geometry.x, entityConfig.data.features[o].geometry.y), // x,y 实体经纬度
                        show: true,
                        //字体标签样式
                        label: {
                            show: true,
                            text: entityConfig.data.features[o].attributes[entityConfig.data.displayFieldName], // text 与实体相关的文字
                            font: "700 14px '黑体'",
                            fillColor: Cesium.Color.DEEPSKYBLUE,
                            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                            outlineWidth: 2,
                            outlineColor: Cesium.Color.fromBytes(255, 255, 255), // 文字轮廓的颜色
                            verticalOrigin: Cesium.VerticalOrigin.CENTER,//垂直位置
                            horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
                            pixelOffset: new Cesium.Cartesian2(14, -10), // 文字位置
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1, entityConfig.showheight),
                            disableDepthTestDistance: Number.POSITIVE_INFINITY
                        },
                        billboard: {
                            show: true,
                            image: entityConfig.img,
                            width: 20,
                            height: 20,
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                            disableDepthTestDistance: Number.POSITIVE_INFINITY
                        }
                    });
                }
            },

            // 读取服务，并且在本地渲染的，加载实体线段方法
            geometryPolylines: function (entityConfig) {
                var self = this;
                var position = [];
                for (var o = 0; o < entityConfig.data.features.length; o++) {
                    for (var i = 0; i < entityConfig.data.features[o].geometry.paths[0].length; i++) {
                        position.push(entityConfig.data.features[o].geometry.paths[0][i][0], entityConfig.data.features[o].geometry.paths[0][i][1]);
                    }
                    if (entityConfig.delete == true) {
                        self.map.entities.removeById(JSON.stringify(entityConfig.data.features[o].attributes));
                        if (self.layermanagementId.indexOf(JSON.stringify(entityConfig.data.features[o].attributes)) != -1) {
                            self.layermanagementId.splice(self.layermanagementId.indexOf(JSON.stringify(entityConfig.data.features[o].attributes)), 1);
                        }
                        continue;
                    }
                    self.layermanagementId.push(JSON.stringify(entityConfig.data.features[o].attributes));
                    // 绘制线段的
                    self.map.entities.add({
                        id: JSON.stringify(entityConfig.data.features[o].attributes),
                        show: true,
                        polyline: {
                            positions: Cesium.Cartesian3.fromDegreesArray(position),
                            width: 20,
                            material: new Cesium.ImageMaterialProperty({

                                // 明天需要修改，备注。。！！！！
                                image: entityConfig.img,
                                // image: 'images/1111.png',
                                repeat: new Cesium.Cartesian2(position.length / 8, 1),
                                // transparent: true,
                            }),
                            // granularity: Cesium.Math.RADIANS_PER_DEGREE,
                            // arcType: Cesium.ArcType.RHUMB,
                            // classificationType: Cesium.ClassificationType.TERRAIN,
                            clampToGround: true,
                        },
                    });
                    position = [];
                }

            },

            // 读取服务，并且在本地渲染的，加载实体多边形方法
            geometryPolygon: function (entityConfig) {
                var self = this;
                var position = [];
                for (var o = 0; o < entityConfig.data.features.length; o++) {
                    for (var i = 0; i < entityConfig.data.features[o].geometry.rings[0].length; i++) {
                        position.push(entityConfig.data.features[o].geometry.rings[0][i][0], entityConfig.data.features[o].geometry.rings[0][i][1]);
                    }
                    if (entityConfig.delete == true) {
                        self.map.entities.removeById(JSON.stringify(entityConfig.data.features[o].attributes));
                        if (self.layermanagementId.indexOf(JSON.stringify(entityConfig.data.features[o].attributes)) != -1) {
                            self.layermanagementId.splice(self.layermanagementId.indexOf(JSON.stringify(entityConfig.data.features[o].attributes)), 1);
                        }
                        continue;
                    }
                    self.layermanagementId.push(JSON.stringify(entityConfig.data.features[o].attributes));
                    // 绘制多边形的
                    self.map.entities.add({
                        id: JSON.stringify(entityConfig.data.features[o].attributes),
                        show: true,
                        polygon: {
                            hierarchy: {positions: Cesium.Cartesian3.fromDegreesArray(position)},
                            material: new Cesium.ImageMaterialProperty({
                                image: entityConfig.img
                            }),
                            clampToGround: true,
                        },
                    });
                    position = [];
                }
            }
        });
    });

 widgets/Layermanagement/css/style.css

@@ -1,121 +1,46 @@
.jimu-widget-Layermanagement {
    position: relative;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    width: 100%; /* 240px */
    background: rgba(44, 46, 46, 0.7);
    color: #fff;
    border-right: 1px solid #000;
    text-align: center;
    cursor: pointer;
    z-index: 10 !important;
    
}

.layer-management {
    width: 100%;
}

.layer-management .menu-switch {
    width: 72px;
    height: 32px;
    line-height: 32px;
}

.layer-management .menu-switch i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../../../images/menu.png) no-repeat;
    background-size: 16px;
    vertical-align: middle;
}

.layer-management .menu-switch span:hover {
    text-decoration: underline;
}

.layer-management .ztree-demo-background {
    display: none;
.jimu-widget-Layermanagement .layer-tab {
    position: fixed;
    top: 98px;
    top: 100px;
    right: 10px;
    /* bottom: 25px; */
    height: 64%;
    width: 240px;
    background: rgba(31, 39, 48, .7);
    border: 1px solid rgb(69, 154, 251);
    border-radius: 4px;
    color: #fff;
}

.layer-management .ztree-demo-background .ztree {
    position: absolute;
    top: 47px;
    bottom: 10px;
    overflow: auto;
    width: 100%;
    height: auto;
}

.layer-management .ztree-demo-background .layer-tag-bar {
    width: 100%;
    height: 46px;
    line-height: 46px;
    border-bottom: 1px solid rgb(69, 154, 251);
}

.layer-management .ztree-demo-background .layer-tag-bar img {
    float: left;
    margin-top: 8px;
    margin-left: 8px;
    vertical-align: middle;
    height: 32px;
.jimu-widget-Layermanagement .layer-tab button {
    background: #fff;
    box-shadow: 0 0 8px #fff;
    width: 32px;
}

.layer-management .ztree-demo-background .layer-tag-bar span {
    float: left;
    font-size: 18px;
    margin-left: 6px;

}

.layer-management .ztree-demo-background .layer-tag-bar i {
    float: right;
    height: 100%;
    width: 46px;
    font-size: 46px;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    height: 32px;
    border-radius: 14%;
    padding: 0;
    vertical-align: middle;
    z-index: 0;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    border: 1px solid #444;
    border-color: #fff;
    color: #edffff;
    fill: #edffff;
    margin: 1px 2px;
    cursor: pointer;
}

.layer-management a {
    color: #fff !important;
}

.layer-management .ztree li span {
    color: rgb(228, 228, 228);
}

#treeDemo a.curSelectedNode {
    background-color: transparent !important;
    border: none;
}

#treeDemo li ul li a span.button.ico_docu {
    background-size: 16px !important;
    display: none;
}

#layermanagement {
    height: 100%;
    overflow: hidden;
    user-select: none;
}

.jimu-widget-Layermanagement .layer-tab button:focus {

#layermanagement iframe {
    height: 95% !important;
    outline: none !important;

}

.jimu-widget-Layermanagement .layer-list {
    position: fixed;
    top: 100px;
    right: 60px;
    width: 320px;
    height: 420px;
    background: #fff;
}

 widgets/Layermanagement/datas.json

File was deleted

 widgets/Layermanagement/popup/css/style.css

File was deleted

 widgets/Layermanagement/popup/img/close.png

Binary files differ

 widgets/Layermanagement/popup/img/data.png

Binary files differ

 widgets/Layermanagement/popup/img/rote.jpg

Binary files differ

 widgets/Layermanagement/popup/img/sel.png

Binary files differ

 widgets/Layermanagement/popup/js/end.js

File was deleted

 widgets/Layermanagement/popup/js/rain.js

File was deleted

 widgets/Layermanagement/popup/js/river.js

File was deleted

 widgets/Layermanagement/popup/js/start.js

File was deleted

 widgets/Layermanagement/popup/js/weather.js

File was deleted

 widgets/Layermanagement/popup/rain.html

File was deleted

 widgets/Layermanagement/popup/river.html

File was deleted

 widgets/Layermanagement/popup/weather.html

File was deleted

 widgets/LeftNavigationBar/Widget.js

@@ -577,10 +577,13 @@
                                                            });
                                                        });
                                                    }
                                                    console.log(that[obj.data.id])
                                                }
                                            })
                                        }

								

                                    }

                                } else {

 widgets/ShowPosition/Widget.html

@@ -3,7 +3,7 @@
        <!--<p>@ &nbsp;2018-2020 &nbsp; &nbsp; 技术支持： &nbsp;江西汇图科技有限公司 &nbsp;</p>-->

    </div>
     <div style="display: none;">
     <div>
        当前视角（
        经度：<span id="jd"></span>°&nbsp;&nbsp;
        纬度：<span id="wd"></span>°&nbsp;&nbsp;

 widgets/ShowPosition/Widget.js

@@ -10,7 +10,7 @@
        'dojo/topic',
        'jimu/BaseWidget'
    ],
    function(declare,
    function (declare,
        lang,
        array,
        html,
@@ -20,53 +20,56 @@
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-ShowPosition',
            name: 'ShowPosition',
            startup: function() {
            startup: function () {
                this.inherited(arguments);
                //显示帧速(FPS)
                //this.map.scene.debugShowFramesPerSecond = true;
				

                // Mouse over the globe to see the cartographic position
                var handler = new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas);
                handler.setInputAction(lang.hitch(this, function(movement) {
                    /*if(this.map.scene.globe.depthTestAgainstTerrain==false){
                        var ray=this.map.camera.getPickRay(movement.endPosition);  
                        var cartesian=this.map.scene.globe.pick(ray,this.map.scene);  
                        var cartographic=Cesium.Cartographic.fromCartesian(cartesian);  
                        var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值  
                        var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值  //height结果与cartographic.height相差无几，注意：cartographic.height可以为0，也就是说，可以根据经纬度计算出高程。  
                        var height=this.map.scene.globe.getHeight(cartographic);  //height的值为地形高度。  
                        //鼠标位置经纬度
                        $("#positionSpan").html("鼠标（经度："+lng.toFixed(6)+"°&nbsp;&nbsp;纬度："+lat.toFixed(6)+"°&nbsp;&nbsp;高度："+height.toFixed(2)+"m）；&nbsp;&nbsp;&nbsp;&nbsp;");
                    }
                    else{
                        var cartesian = this.map.camera.pickEllipsoid(movement.position, this.map.scene.globe.ellipsoid);
                        var posit = this.map.scene.pickPosition(movement.position);
                        var cartographic = Cesium.Cartographic.fromCartesian(posit);
                        var currentClickLon = Cesium.Math.toDegrees(cartographic.longitude);
                        var currentClickLat = Cesium.Math.toDegrees(cartographic.latitude);
                        var currentClickHei = cartographic.height;
                        //鼠标位置经纬度
                        $("#positionSpan").html("鼠标（经度："+lng.toFixed(6)+"°&nbsp;&nbsp;纬度："+lat.toFixed(6)+"°&nbsp;&nbsp;高度："+height.toFixed(2)+"m）；&nbsp;&nbsp;&nbsp;&nbsp;");
                    }*/
					
                    var ray=this.map.camera.getPickRay(movement.endPosition);  
                    var cartesian=this.map.scene.globe.pick(ray,this.map.scene);  
                    var cartographic=Cesium.Cartographic.fromCartesian(cartesian);  
                    var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值  
                    var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值  //height结果与cartographic.height相差无几，注意：cartographic.height可以为0，也就是说，可以根据经纬度计算出高程。  
                    var height=this.map.scene.globe.getHeight(cartographic);  //height的值为地形高度。  
                    //鼠标位置经纬度
                    $("#positionSpan").html("经度："+lng.toFixed(6)+"&nbsp;&nbsp;纬度："+lat.toFixed(6)+"&nbsp;&nbsp;高程："+height.toFixed(2)+"m&nbsp;&nbsp;&nbsp;&nbsp;");
					
                }), Cesium.ScreenSpaceEventType.MOUSE_MOVE);
				
				
                 //相机改变事件 
                this.map.camera.changed.addEventListener(lang.hitch(this, function() {
                    var cartographic=Cesium.Cartographic.fromCartesian(this.map.camera._positionWC);//使用this.map.camera.position获取相机坐标，在飞行时候会导致实时显示坐标不对
                    var lat=Cesium.Math.toDegrees(cartographic.latitude);
                    var lng=Cesium.Math.toDegrees(cartographic.longitude);
                    var height=cartographic.height;
                // var handler = new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas);
                // handler.setInputAction(lang.hitch(this, function(movement) {
                //     // if(this.map.scene.globe.depthTestAgainstTerrain==false){
                //     //     var ray=this.map.camera.getPickRay(movement.endPosition);  
                //     //     var cartesian=this.map.scene.globe.pick(ray,this.map.scene);  
                //     //     var cartographic=Cesium.Cartographic.fromCartesian(cartesian);  
                //     //     var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值  
                //     //     var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值  //height结果与cartographic.height相差无几，注意：cartographic.height可以为0，也就是说，可以根据经纬度计算出高程。  
                //     //     var height=this.map.scene.globe.getHeight(cartographic);  //height的值为地形高度。  
                //     //     //鼠标位置经纬度
                //     //     $("#positionSpan").html("鼠标（经度："+lng.toFixed(6)+"°&nbsp;&nbsp;纬度："+lat.toFixed(6)+"°&nbsp;&nbsp;高度："+height.toFixed(2)+"m）；&nbsp;&nbsp;&nbsp;&nbsp;");
                //     // }
                //     // else{
                //     //     var cartesian = this.map.camera.pickEllipsoid(movement.position, this.map.scene.globe.ellipsoid);
                //     //     var posit = this.map.scene.pickPosition(movement.position);
                //     //     var cartographic = Cesium.Cartographic.fromCartesian(posit);
                //     //     var currentClickLon = Cesium.Math.toDegrees(cartographic.longitude);
                //     //     var currentClickLat = Cesium.Math.toDegrees(cartographic.latitude);
                //     //     var currentClickHei = cartographic.height;
                //     //     //鼠标位置经纬度
                //     //     $("#positionSpan").html("鼠标（经度："+lng.toFixed(6)+"°&nbsp;&nbsp;纬度："+lat.toFixed(6)+"°&nbsp;&nbsp;高度："+height.toFixed(2)+"m）；&nbsp;&nbsp;&nbsp;&nbsp;");
                //     // }

                //     var ray=this.map.camera.getPickRay(movement.endPosition);  
                //     var cartesian=this.map.scene.globe.pick(ray,this.map.scene);  
                //     var cartographic=Cesium.Cartographic.fromCartesian(cartesian);  
                //     var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值  
                //     var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值  //height结果与cartographic.height相差无几，注意：cartographic.height可以为0，也就是说，可以根据经纬度计算出高程。  
                //     var height=this.map.scene.globe.getHeight(cartographic);  //height的值为地形高度。  



                //     //鼠标位置经纬度
                //     // $("#positionSpan").html("经度："+lng.toFixed(6)+"&nbsp;&nbsp;纬度："+lat.toFixed(6)+"&nbsp;&nbsp;高程："+height.toFixed(2)+"m&nbsp;&nbsp;&nbsp;&nbsp;");

                // }), Cesium.ScreenSpaceEventType.MOUSE_MOVE);


                //相机改变事件 
                this.map.camera.changed.addEventListener(lang.hitch(this, function () {
                    var cartographic = Cesium.Cartographic.fromCartesian(this.map.camera._positionWC); //使用this.map.camera.position获取相机坐标，在飞行时候会导致实时显示坐标不对
                    var lat = Cesium.Math.toDegrees(cartographic.latitude);
                    var lng = Cesium.Math.toDegrees(cartographic.longitude);
                    var height = cartographic.height;
                    //var cartographic=Cesium.Cartographic.fromCartesian(this.map.camera.position);
                    //相机位置经纬度
                    $("#jd").html(lng.toFixed(6));
@@ -75,42 +78,54 @@
                    $("#phj").html(Cesium.Math.toDegrees(this.map.camera.heading).toFixed(2));
                    $("#fyj").html(Cesium.Math.toDegrees(this.map.camera.pitch).toFixed(2));
                    $("#fgj").html(Cesium.Math.toDegrees(this.map.camera.roll).toFixed(2));
                }));				
				
//                handler.setInputAction(lang.hitch(this, function(movement) {
//					
//                    var ray=this.map.camera.getPickRay(movement.position);  
//                    var cartesian=this.map.scene.globe.pick(ray,this.map.scene);  
//                    var cartographic=Cesium.Cartographic.fromCartesian(cartesian);  
//                    var lng=Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);;//经度值  
//                    var lat=Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);;//纬度值  //height结果与cartographic.height相差无几，注意：cartographic.height可以为0，也就是说，可以根据经纬度计算出高程。  
//					
//                    $("#positionDiv").append("["+lng+","+lat+"],");
//                }), Cesium.ScreenSpaceEventType.LEFT_CLICK);
				
                }));

                //                handler.setInputAction(lang.hitch(this, function(movement) {
                //					
                //                    var ray=this.map.camera.getPickRay(movement.position);  
                //                    var cartesian=this.map.scene.globe.pick(ray,this.map.scene);  
                //                    var cartographic=Cesium.Cartographic.fromCartesian(cartesian);  
                //                    var lng=Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);;//经度值  
                //                    var lat=Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);;//纬度值  //height结果与cartographic.height相差无几，注意：cartographic.height可以为0，也就是说，可以根据经纬度计算出高程。  
                //					
                //                    $("#positionDiv").append("["+lng+","+lat+"],");
                //                }), Cesium.ScreenSpaceEventType.LEFT_CLICK);

            },

            onOpen: function() {
            onOpen: function () {
                //面板打开的时候触发 （when open this panel trigger）
                var cartographic = Cesium.Cartographic.fromCartesian(this.map.camera._positionWC); //使用this.map.camera.position获取相机坐标，在飞行时候会导致实时显示坐标不对
                var lat = Cesium.Math.toDegrees(cartographic.latitude);
                var lng = Cesium.Math.toDegrees(cartographic.longitude);
                var height = cartographic.height;
                //var cartographic=Cesium.Cartographic.fromCartesian(this.map.camera.position);
                //相机位置经纬度
                $("#jd").html(lng.toFixed(6));
                $("#wd").html(lat.toFixed(6));
                $("#gd").html(height.toFixed(2));
                $("#phj").html(Cesium.Math.toDegrees(this.map.camera.heading).toFixed(2));
                $("#fyj").html(Cesium.Math.toDegrees(this.map.camera.pitch).toFixed(2));
                $("#fgj").html(Cesium.Math.toDegrees(this.map.camera.roll).toFixed(2));
            },

            onClose: function() {
            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
            },

            onMinimize: function() {
            onMinimize: function () {
                this.resize();
            },

            onMaximize: function() {
            onMaximize: function () {
                this.resize();
            },

            resize: function() {
            resize: function () {

            },

            destroy: function() {
            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func

 widgets/ShowPosition/css/style.css

@@ -2,7 +2,7 @@
  position: relative;
  font-size: 12px;
  line-height: 25px;
  width: 320px !important;
  width: 840px !important;
  background: rgba(38, 38, 38, 0.75);
  color: #fff;
  z-index: 3 !important;