Merge branch 'master' of http://192.168.0.105:10010/r/pyhmap

shuishen

2021-06-17 094dff34cea6a27ff251b23fc30ffafff6d3bcf2

Merge branch 'master' of http://192.168.0.105:10010/r/pyhmap

 config.json

@@ -21,12 +21,15 @@
  "keepAppState": true,
  "logo": "",
  "geometryService": "https://utility.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer",
  "links": [{
    "label": "",
    "url": ""
  }],
  "links": [
    {
      "label": "",
      "url": ""
    }
  ],
  "widgetOnScreen": {
    "widgets": [{
    "widgets": [
      {
        "uri": "widgets/CommonBase/Widget"
      },
      {
@@ -49,8 +52,6 @@
          "relativeTo": "map"
        }
      },


      {
        "uri": "widgets/HomeButton/Widget",
        "position": {
@@ -170,7 +171,8 @@
          "height": "780px",
          "relativeTo": "map"
        }
      }, {
      },
      {
        "name": "我的标记",
        "uri": "widgets/Sign/Widget",
        "position": {
@@ -180,25 +182,32 @@
          "height": "360px",
          "relativeTo": "map"
        }
      }, {
      },
      {
        "name": "分屏对比",
        "uri": "widgets/SplitScreen/Widget"
      }, {
      },
      {
        "name": "搜索栏",
        "uri": "widgets/searchL/Widget"
      }, {
      },
      {
        "name": "视角底部按钮",
        "uri": "widgets/visualAngle/Widget"
      }, {
      },
      {
        "name": "图例",
        "uri": "widgets/legends/Widget"
      }, {
      },
      {
        "name": "左侧信息指示器",
        "uri": "widgets/instructions/Widget"
      }, {
      },
      {
        "name": "左侧导航栏",
        "uri": "widgets/LeftNavigationBar/Widget"
      }, {
      },
      {
        "name": "要素标绘",
        "uri": "widgets/plottingP/Widget",
        "position": {
@@ -208,12 +217,17 @@
          "height": "800px",
          "relativeTo": "map"
        }
      }, {
      },
      {
        "name": "搜索弹窗表格各项弹窗",
        "uri": "widgets/searchTabaPopup/Widget"
      }, {
        "name": "图层管理",
        "uri": "widgets/Layermanagement/Widget"
      },
      {
        "name": "可视化分析",
        "uri": "widgets/visibleArea/Widget"
      }


@@ -235,11 +249,13 @@
      "right": 0,
      "bottom": 0
    },
    "imageryProviderViewModels": [{
    "imageryProviderViewModels": [
      {
        "name": "天地图矢量",
        "tooltip": "天地图矢量",
        "iconUrl": "images/basemaps/tianditushiliang.png",
        "layers": [{
        "layers": [
          {
            "label": "天地图矢量",
            "type": "wmts",
            "url": "http://t0.tianditu.gov.cn/vec_w/wmts?tk=e9533f5acb2ac470b07f406a4d24b4f0",
@@ -265,7 +281,8 @@
        "name": "天地图影像",
        "tooltip": "天地图全球影像地图服务（国家测绘局）",
        "iconUrl": "images/basemaps/tiandituimage.png",
        "layers": [{
        "layers": [
          {
            "label": "天地图影像",
            "type": "wmts",
            "url": "http://t7.tianditu.gov.cn/img_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
@@ -291,31 +308,35 @@
        "name": "腾讯影像",
        "tooltip": "腾讯全球影像服务",
        "iconUrl": "images/basemaps/gaode_img_tx.png",
        "layers": [{
          "label": "天地图影像",
          "type": "wmts",
          "url": "http://t7.tianditu.gov.cn/img_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
          "layer": "img",
          "style": "default",
          "format": "tiles",
          "tileMatrixSetID": "w",
          "maximumLevel": 17
        }, {
          "label": "腾讯地图标注",
          "type": "url",
          "url": "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297",
          "layer": "tdtVecBasicLayer",
          "style": "default",
          "format": "image/png",
          "tileMatrixSetID": "GoogleMapsCompatible",
          "show": false
        }]
        "layers": [
          {
            "label": "天地图影像",
            "type": "wmts",
            "url": "http://t7.tianditu.gov.cn/img_w/wmts?tk=9ae78c51a0a28f06444d541148496e36",
            "layer": "img",
            "style": "default",
            "format": "tiles",
            "tileMatrixSetID": "w",
            "maximumLevel": 17
          },
          {
            "label": "腾讯地图标注",
            "type": "url",
            "url": "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297",
            "layer": "tdtVecBasicLayer",
            "style": "default",
            "format": "image/png",
            "tileMatrixSetID": "GoogleMapsCompatible",
            "show": false
          }
        ]
      },
      {
        "name": "高德电子",
        "tooltip": "高德电子地图",
        "iconUrl": "images/basemaps/gaode_vec_gd.png",
        "layers": [{
        "layers": [
          {
            "label": "高德电子地图",
            "type": "url",
            "url": "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
@@ -341,7 +362,8 @@
        "name": "高德影像",
        "tooltip": "高德全球影像服务",
        "iconUrl": "images/basemaps/gaode_img_gd.png",
        "layers": [{
        "layers": [
          {
            "label": "高德影像地图",
            "type": "url",
            "url": "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
@@ -364,7 +386,8 @@
        ]
      }
    ],
    "terrainProviderViewModels": [{
    "terrainProviderViewModels": [
      {
        "name": "无地形",
        "tooltip": "WGS84标准球体",
        "iconUrl": "images/basemaps/TerrainEllipsoid.png",

 widgets/legends/Widget.html

@@ -16,6 +16,6 @@
        </div>
        <div class="m-init"> <i class="m-init-h"><img src="./images/addL/forgin.png" /></i> 鄱阳湖面积 <i>(3253.52公顷)</i> </div>
        <div class="m-init"> <i class="m-init-h"><img src="./images/addL/fred.png" /></i> 鄱阳湖范围 <i></i> </div>
        <div class="m-init"> <i class="m-init-h"><img src="./images/addL/fblue.png" /></i> 其他 <i></i> </div>
        <div class="m-init"> <i class="m-init-h ccsliu"><img src="./images/addL/fblue.png" /></i> 其他 <i></i> </div>
    </div>
</div>

 widgets/legends/Widget.js

@@ -31,6 +31,9 @@
                // 暴露在外的接口
                topic.subscribe("getLegendsData", lang.hitch(this, this.onGetLegendsData));

                $('.ccsliu').click(() => {
                    $(".jimu-widget-visibleArea").show();
                })
            },
            onGetLegendsData: function (item) {
                var val = item == '  ' ? '' : item;

 widgets/visibleArea/Widget.html

New file
@@ -0,0 +1,88 @@
<div>
    <!-- <div id="visibleArea"> -->
    <!-- <div id='loadingbar' class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div> -->
    <div id="toolbar">
        <button type="button" id="chooseView" class="button black">绘制可视域</button>
        <button type="button" id="clear" class="button black">清除</button>
        <i class="layui-icon closes">
            &#x1006;
        </i>
    </div>

    <div id="wrapper" style="display:none">
        <div id="login" class="animate form">
            <span class="close" aria-hidden="true"><i class="layui-icon">
                    &#x1006;
                </i></span>
            <form id="a">
                <h1>属性编辑</h1>
                <p>
                <div>
                    <label>方向(度)</label>
                    <input type="range" id="direction" min="0" max="360" step="1.0" title="方向"
                        data-bind="value: direction, valueUpdate: 'input'">
                    <input type="text" size="5" data-bind="value: direction">
                </div>
                <div>
                    <label>翻转(度)</label>
                    <input type="range" id="pitch" min="-90" max="90" step="1.0" value="1" title="翻转"
                        data-bind="value: pitch, valueUpdate: 'input'">
                    <input type="text" size="5" data-bind="value: pitch">
                </div>

                <div>
                    <label>距离(米)</label>
                    <input type="range" id="distance" min="1" max="500" step="1.0" value="1" title="距离"
                        data-bind="value: distance, valueUpdate: 'input'">
                    <input type="text" size="5" data-bind="value: distance">
                </div>

                <div>
                    <label>水平视场角(度)</label>
                    <input type="range" id="horizonalFov" min="1" max="120" step="1" value="1" title="水平视场角"
                        data-bind="value: horizontalFov, valueUpdate: 'input'">
                    <input type="text" size="5" data-bind="value: horizontalFov">
                </div>

                <div>
                    <label>垂直视场角(度)</label>
                    <input type="range" id="verticalFov" min="1" max="90" step="1.0" value="1" title="垂直视场角"
                        data-bind="value: verticalFov, valueUpdate: 'input'">
                    <input type="text" size="5" data-bind="value: verticalFov">
                </div>
                </p>
                <!-- <p>
                <div class="square">
                    <label>可见区域颜色</label><input class="colorPicker"
                        data-bind="value: visibleAreaColor,valueUpdate: 'input'" id="colorPicker1" />
                </div>
                <div class="square">
                    <label>不可见区域颜色</label><input class="colorPicker"
                        data-bind="value: invisibleAreaColor,valueUpdate: 'input'" id="colorPicker2" />
                </div>
                </p> -->
                <!-- <p><label>本例中观察者附加高度：1.8 米</label></p> -->
            </form>
        </div>
    </div>
    <!-- </div> -->
</div>

 widgets/visibleArea/Widget.js

New file
@@ -0,0 +1,356 @@
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/array',
    'dojo/_base/html',
    'dojo/topic',
    'jimu/BaseWidget',
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-visibleArea',
            name: 'visibleArea',
            flag: false,
            startup: function () {
                var that = this;
                var viewer = that.map;
                // viewer.imageryLayers.addImageryProvider(new Cesium.BingMapsImageryProvider({
                //     url: 'https://dev.virtualearth.net',
                //     mapStyle: Cesium.BingMapsStyle.AERIAL,
                //     key: 'AkOyUpgDCoz063AWW1WfHnxp5222UBdxLOp1XvRv0tuebQnr2S7UcZkiLgME7gX0'
                // }));
                var scene = viewer.scene;
                scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
                scene.skyAtmosphere.brightnessShift = 0.4; //修改大气的亮度
                // scene.debugShowFramesPerSecond = true;
                scene.hdrEnabled = false;
                scene.sun.show = false;
                // 01设置环境光的强度-新处理CBD场景
                scene.lightSource.ambientLightColor = new Cesium.Color(0.65, 0.65, 0.65, 1);
                // 添加光源
                var position1 = new Cesium.Cartesian3.fromDegrees(116.261209157595, 39.3042238956531,
                    480);
                //光源方向点

                var targetPosition1 = new Cesium.Cartesian3.fromDegrees(116.261209157595,
                    39.3042238956531, 430);
                var dirLightOptions = {
                    targetPosition: targetPosition1,
                    color: new Cesium.Color(1.0, 1.0, 1.0, 1),
                    intensity: 0.55
                };
                directionalLight_1 = new Cesium.DirectionalLight(position1, dirLightOptions);//加载光源
                scene.addLightSource(directionalLight_1);
                var viewPosition;
                $('#loadingbar').remove();
                $("#toolbar").show();
                if (!scene.pickPositionSupported) {
                    alert('不支持深度纹理,可视域分析功能无法使用（无法添加观测）！');
                }
                // 先将此标记置为true，不激活鼠标移动事件中对可视域分析对象的操作
                scene.viewFlag = true;
                var pointHandler = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
                // 创建可视域分析对象
                var viewshed3D = new Cesium.ViewShed3D(scene);
                var colorStr1 = viewshed3D.visibleAreaColor.toCssColorString();
                var colorStr2 = viewshed3D.hiddenAreaColor.toCssColorString();
                var palette = [
                    [
                        "rgb(0, 0, 0)",
                        "rgb(67, 67, 67)",
                        "rgb(102, 102, 102)",
                        "rgb(204, 204, 204)",
                        "rgb(217, 217, 217)",
                        "rgb(255, 255, 255)",
                    ],
                    [
                        "rgb(152, 0, 0)",
                        "rgb(255, 0, 0)",
                        "rgb(255, 153, 0)",
                        "rgb(255, 255, 0)",
                        "rgb(0, 255, 0)",
                        "rgb(0, 255, 255)",
                        "rgb(74, 134, 232)",
                        "rgb(0, 0, 255)",
                        "rgb(153, 0, 255)",
                        "rgb(255, 0, 255)"
                    ],
                    [
                        "rgb(230, 184, 175)",
                        "rgb(244, 204, 204)",
                        "rgb(252, 229, 205)",
                        "rgb(255, 242, 204)",
                        "rgb(217, 234, 211)",
                        "rgb(208, 224, 227)",
                        "rgb(201, 218, 248)",
                        "rgb(207, 226, 243)",
                        "rgb(217, 210, 233)",
                        "rgb(234, 209, 220)",
                        "rgb(221, 126, 107)",
                        "rgb(234, 153, 153)",
                        "rgb(249, 203, 156)",
                        "rgb(255, 229, 153)",
                        "rgb(182, 215, 168)",
                        "rgb(162, 196, 201)",
                        "rgb(164, 194, 244)",
                        "rgb(159, 197, 232)",
                        "rgb(180, 167, 214)",
                        "rgb(213, 166, 189)",
                        "rgb(204, 65, 37)",
                        "rgb(224, 102, 102)",
                        "rgb(246, 178, 107)",
                        "rgb(255, 217, 102)",
                        "rgb(147, 196, 125)",
                        "rgb(118, 165, 175)",
                        "rgb(109, 158, 235)",
                        "rgb(111, 168, 220)",
                        "rgb(142, 124, 195)",
                        "rgb(194, 123, 160)",
                        "rgb(166, 28, 0)",
                        "rgb(204, 0, 0)",
                        "rgb(230, 145, 56)",
                        "rgb(241, 194, 50)",
                        "rgb(106, 168, 79)",
                        "rgb(69, 129, 142)",
                        "rgb(60, 120, 216)",
                        "rgb(61, 133, 198)",
                        "rgb(103, 78, 167)",
                        "rgb(166, 77, 121)",
                        "rgb(91, 15, 0)",
                        "rgb(102, 0, 0)",
                        "rgb(120, 63, 4)",
                        "rgb(127, 96, 0)",
                        "rgb(39, 78, 19)",
                        "rgb(12, 52, 61)",
                        "rgb(28, 69, 135)",
                        "rgb(7, 55, 99)",
                        "rgb(32, 18, 77)",
                        "rgb(76, 17, 48)",
                    ]
                ]
                // console.log($("#colorPicker1"), 46343)
                // $("#colorPicker1").spectrum({
                //     color: colorStr1,
                //     showPalette: true,
                //     showAlpha: true,
                //     localStorageKey: "spectrum.demo",
                //     palette: palette
                // });
                // $('#colorPicker2').spectrum({
                //     color: colorStr2,
                //     showPalette: true,
                //     showAlpha: true,
                //     localStorageKey: "spectrum.demo",
                //     palette: palette
                // });
                $(".close").click(function () {
                    $("#wrapper").hide();
                });
                var widget = viewer.cesiumWidget;
                try {
                    //添加S3M图层
                    var promise = scene.open(URL_CONFIG.SCENE_CBD);
                    Cesium.when(promise, function (layers) {
                        // 图层加载完成,设置相机位置
                        scene.camera.setView({
                            destination: Cesium.Cartesian3.fromDegrees(
                                116.44366835831197, 39.907137217792666,
                                48.237028126511696),
                            orientation: {
                                heading: 1.6310555040487564,
                                pitch: 0.0017367269669030794,
                                roll: 3.007372129104624e-12
                            }
                        });
                        for (var i = 0; i < layers.length; i++) {
                            layers[i].selectEnabled = false;
                        }
                    }, function (e) {
                        if (widget._showRenderLoopErrors) {
                            var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
                            widget.showErrorPanel(title, undefined, e);
                        }
                    });
                } catch (e) {
                    if (widget._showRenderLoopErrors) {
                        var title = '渲染时发生错误，已停止渲染。';
                        widget.showErrorPanel(title, undefined, e);
                    }
                }
                var viewModel = {
                    direction: 1.0,
                    pitch: 1.0,
                    distance: 1.0,
                    verticalFov: 1.0,
                    horizontalFov: 1.0,
                    visibleAreaColor: '#ffffffff',
                    invisibleAreaColor: '#ffffffff'
                };

                Cesium.knockout.track(viewModel);
                var toolbar = document.getElementById('wrapper');
                Cesium.knockout.applyBindings(viewModel, toolbar);
                Cesium.knockout.getObservable(viewModel, 'direction').subscribe(
                    function (newValue) {
                        viewshed3D.direction = parseFloat(newValue);
                    }
                );
                Cesium.knockout.getObservable(viewModel, 'pitch').subscribe(
                    function (newValue) {
                        viewshed3D.pitch = parseFloat(newValue);
                    }
                );
                Cesium.knockout.getObservable(viewModel, 'distance').subscribe(
                    function (newValue) {
                        viewshed3D.distance = parseFloat(newValue);
                    }
                );
                Cesium.knockout.getObservable(viewModel, 'verticalFov').subscribe(
                    function (newValue) {
                        viewshed3D.verticalFov = parseFloat(newValue);

                    }
                );
                Cesium.knockout.getObservable(viewModel, 'horizontalFov').subscribe(
                    function (newValue) {
                        viewshed3D.horizontalFov = parseFloat(newValue);
                    }
                );
                Cesium.knockout.getObservable(viewModel, 'visibleAreaColor').subscribe(
                    function (newValue) {
                        var color = Cesium.Color.fromCssColorString(newValue);
                        viewshed3D.visibleAreaColor = color;
                    }
                );
                Cesium.knockout.getObservable(viewModel, 'invisibleAreaColor').subscribe(
                    function (newValue) {
                        var color = Cesium.Color.fromCssColorString(newValue);
                        viewshed3D.hiddenAreaColor = color;
                    }
                );
                var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                // 鼠标移动时间回调
                handler.setInputAction(function (e) {
                    // 若此标记为false，则激活对可视域分析对象的操作
                    if (!scene.viewFlag) {
                        //获取鼠标屏幕坐标,并将其转化成笛卡尔坐标
                        var position = e.endPosition;
                        var last = scene.pickPosition(position);

                        //计算该点与视口位置点坐标的距离
                        var distance = Cesium.Cartesian3.distance(viewPosition, last);

                        if (distance > 0) {
                            // 将鼠标当前点坐标转化成经纬度
                            var cartographic = Cesium.Cartographic.fromCartesian(last);
                            var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                            var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                            var height = cartographic.height;
                            // 通过该点设置可视域分析对象的距离及方向
                            viewshed3D.setDistDirByPoint([longitude, latitude, height]);
                        }
                    }
                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

                handler.setInputAction(function (e) {
                    //鼠标右键事件回调，不再执行鼠标移动事件中对可视域的操作
                    //判断主体是否激活
                    if ($(".jimu-widget-visibleArea").is(":visible")) {   //可见
                        //执行可见的操作
                        scene.viewFlag = true;
                        $("#wrapper").show();
                        viewModel.direction = viewshed3D.direction;
                        viewModel.pitch = viewshed3D.pitch;
                        viewModel.distance = viewshed3D.distance;
                        viewModel.horizontalFov = viewshed3D.horizontalFov;
                        viewModel.verticalFov = viewshed3D.verticalFov;
                    } else {
                        console.log('没打开')
                    }

                }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

                document.getElementById("chooseView").onclick = function () {
                    if (pointHandler.active) {
                        return;
                    }
                    //先清除之前的可视域分析
                    viewer.entities.removeAll();
                    viewshed3D.distance = 0.1;
                    scene.viewFlag = true;

                    //激活绘制点类
                    pointHandler.activate();
                };
                pointHandler.drawEvt.addEventListener(function (result) {
                    var point = result.object;
                    var position = point.position;
                    viewPosition = position;

                    // 将获取的点的位置转化成经纬度
                    var cartographic = Cesium.Cartographic.fromCartesian(position);
                    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                    var height = cartographic.height + 1.8;
                    point.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

                    if (scene.viewFlag) {
                        // 设置视口位置
                        viewshed3D.viewPosition = [longitude, latitude, height];
                        viewshed3D.build();
                        // 将标记置为false以激活鼠标移动回调里面的设置可视域操作
                        scene.viewFlag = false;
                    }
                });
                $("#clear").on("click", function () {
                    $("#wrapper").hide();
                    viewer.entities.removeAll();
                    viewshed3D.distance = 0.1;
                    scene.viewFlag = true;
                })

                $('.jimu-widget-visibleArea').find(".closes").click(function () {
                    $(".jimu-widget-visibleArea").hide();
                    $("#wrapper").hide();
                    viewer.entities.removeAll();
                    viewshed3D.distance = 0.1;
                    scene.viewFlag = true;
                })
                // console.log(scene)
            },

            onOpen: function () {

            },

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

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

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

            resize: function () {

            },

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

        });
    });

 widgets/visibleArea/css/style.css

New file
@@ -0,0 +1,148 @@
.jimu-widget-visibleArea {
  position: fixed !important;
  top: 100px !important;
  right: 50px !important;
  width: 200px !important;
  height: 50px !important;
  background-color: rgb(218, 218, 218);
  font-size: 14px;
  /* border: 1px solid rgb(69, 154, 251); */
  /* opacity      : .8; */
  color: rgb(0, 0, 0);
  font-size: 16px;
  z-index: 101;
  border-radius: 5px;
  display: none;
  box-shadow: 0 0 8px #fff;
  padding: 0px 10px !important;
}

.jimu-widget-visibleArea input[type=range] {
  width: 180px;
}

.jimu-widget-visibleArea input[type=text] {
  width: 50px;
}

.jimu-widget-visibleArea .square {
  margin-left: 5px;
  width: 120px;
  height: 30px;
  max-width: 150px;
  display: inline-block;
}

.jimu-widget-visibleArea label {
  font-weight: bold;
}

.jimu-widget-visibleArea #toolbar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.jimu-widget-visibleArea #toolbar #chooseView, .jimu-widget-visibleArea #toolbar #clear {
  width: auto;
  padding: 0 8px;
  height: 35px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid transparent;
  box-shadow: 3px 3px 15px -5px #39A5FD;
}

.jimu-widget-visibleArea #toolbar .closes {
  position: absolute;
  top: -20px;
  right: -13px;
  width: 24px;
  height: 24px;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  background: #3E9FFC;
  border-radius: 50%;
  border: 1px solid #3E9FFC;
  cursor: pointer;
}
.jimu-widget-visibleArea #wrapper .close {
  position: absolute;
  top: -20px;
  right: -13px;
  width: 24px;
  height: 24px;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  background: #3E9FFC;
  border-radius: 50%;
  border: 1px solid #3E9FFC;
  cursor: pointer;
}

.jimu-widget-visibleArea #wrapper {
  width: 264px;
  height: 399px;
  position: absolute;
  top: 70px !important;
  left: -30px !important;
  padding: 18px 6% 20px 6%;
  background: rgb(247, 247, 247);
  border-radius: 5px;
  border: 1px solid rgba(147, 184, 189, 0.8);
  box-shadow: 0 0 8px #fff;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.jimu-widget-visibleArea #wrapper h1 {
  /* background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93), rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); */
  /* -webkit-text-fill-color: transparent; */
  font-size: 19px;
  color: rgb(6, 106, 117) !important;
  /* padding: 2px 0 15px 0; */
  font-family: 'FranchiseRegular', 'Arial Narrow', Arial, sans-serif;
  font-weight: bold;
  text-align: center;
  line-height: 40px;
  /* margin: 10px 0; */
  text-rendering: optimizelegibility;
  margin-block-start: 0.67em;
  margin-block-end: 0.67em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  position: relative;
  top: -15px;
}

.jimu-widget-visibleArea #wrapper h1::after {
  content: ' ';
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 10px;
  background: -webkit-linear-gradient(left, rgba(147, 184, 189, 0) 0%, rgba(147, 184, 189, 0.8) 20%, rgba(147, 184, 189, 1) 53%, rgba(147, 184, 189, 0.8) 79%, rgba(147, 184, 189, 0) 100%);
}

.jimu-widget-visibleArea #wrapper label {
  display: block;
  /* width: 260px; */
  color: rgb(64, 92, 96);
  position: relative;
  font-weight: bold;
  font-size: 14px;
  user-select: none;
  /* border: 1px solid salmon; */
}

.jimu-widget-visibleArea #wrapper div {
  padding-bottom: 10px !important;
}

 widgets/visibleArea/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "visibleArea",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "liuyg",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}

 widgets/visibleArea/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "visibleArea"
  })
);

 widgets/visibleArea/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({
    _widgetLabel: "visibleArea"
  }),
  "es": 1,
  "zh-cn": 1
});

 widgets/visibleArea/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "可视化分析"
  })
);