From f3016800deb09b296c93e1d6329aea47ffe27942 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 17 Jun 2021 17:36:15 +0800
Subject: [PATCH] 图层管理相关调整
---
widgets/Layermanagement/Widget.html | 31 +++--
widgets/Layermanagement/Widget.js | 159 ++++++++++++++++++++++++++++---
widgets/Layermanagement/css/style.css | 109 ++++++++++++++++++++-
3 files changed, 265 insertions(+), 34 deletions(-)
diff --git a/widgets/Layermanagement/Widget.html b/widgets/Layermanagement/Widget.html
index a5add6c..5015256 100644
--- a/widgets/Layermanagement/Widget.html
+++ b/widgets/Layermanagement/Widget.html
@@ -1,24 +1,29 @@
<div>
- <div class="layer-tab">
- <button>
- <img src="./images/layer-control.png" alt="">
+ <div class='layer-tab'>
+ <button title='图层管理'>
+ <img src='./images/layer-control.png' alt=''>
</button>
</div>
- <div class="layer-list">
+ <div class='layer-list'>
+ <h3>
+ 图层管理
+ <span class='sign-head-th-xx'><i class='layui-icon'>ဆ</i></span>
+ </h3>
<ul>
- <li>
+ <li class="no-data">
<div>
- 名称
- <button>
- 透明度设置
- </button>
- <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i
- class="layui-icon"></i></button>
- <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i
- class="layui-icon"></i></button>
+ 暂无图层加载
</div>
</li>
</ul>
</div>
+
+ <div class="tree-layer-opcity">
+ <h3>图层透明度控制</h3>
+ <i class="close layui-icon">ဆ</i>
+ <ul>
+
+ </ul>
+ </div>
</div>
\ No newline at end of file
diff --git a/widgets/Layermanagement/Widget.js b/widgets/Layermanagement/Widget.js
index ea685a3..0838db1 100644
--- a/widgets/Layermanagement/Widget.js
+++ b/widgets/Layermanagement/Widget.js
@@ -15,34 +15,163 @@
'libs/layer/layer.js'
],
function (declare,
- lang,
- array,
- html,
- topic,
- BaseWidget,
- aspect,
- string,
- utils,
- layer
+ lang,
+ array,
+ html,
+ topic,
+ BaseWidget,
+ aspect,
+ string,
+ utils,
+ layer
) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-Layermanagement',
name: 'Layermanagement',
+ dataArr: [],
startup: function () {
var that = this;
// 暴露在外的接口
- topic.subscribe("closeZtree", lang.hitch(this, this.closeZtreeBox));
-
+ topic.subscribe("appendItem", lang.hitch(this, this.appendItem));
+ topic.subscribe("removeItem", lang.hitch(this, this.removeItem));
+
+ $(".jimu-widget-Layermanagement .layer-tab button").click(function () {
+ $(".jimu-widget-Layermanagement .layer-list").stop().toggle();
+ })
+
+ $(".jimu-widget-Layermanagement .sign-head-th-xx").click(function () {
+ $(".jimu-widget-Layermanagement .layer-list").stop().hide();
+ })
+
+ $(".jimu-widget-Layermanagement .layer-list ul").on("click", "li .layer-opacity", function () {
+
+ var layerId = $(this).parents('li').attr('itemid');
+ var layerTitle = $(this).parents('li').attr('itemtitle');
+
+ var liC = `<li>
+ <div title="${layerTitle}">
+ ${layerTitle}
+ </div>
+ <div id="${layerId + 'Layer'}">
+
+ </div>
+ </li>`;
+
+ $(".jimu-widget-Layermanagement .tree-layer-opcity ul").empty();
+
+ $(".jimu-widget-Layermanagement .tree-layer-opcity ul").append(liC)
+
+ $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().show();
+
+ layui.use("slider", function () {
+
+ layui.slider.render({
+ elem: '#' + layerId + 'Layer',
+ min: 0,
+ max: 10,
+ value: that[layerId].alpha * 10,
+ step: 1,
+ theme: '#1E9FFF',
+ setTips: function (value) { //自定义提示文本
+ return value / 10;
+ },
+ change: function (value) {
+ that[layerId].alpha = value / 10
+ }
+ });
+
+ })
+
+ })
+
+ $(".jimu-widget-Layermanagement .layer-list ul").on("click", "li .setup", function () {
+
+ var layerId = $(this).parents('li').attr('itemid');
+
+ that.map.scene.imageryLayers.raise(that[layerId]);
+
+ if ($(this).parents('li').prev().length > 0) {
+ $(this).parents('li').prev().before($(this).parents('li'));
+ }
+
+ })
+
+ $(".jimu-widget-Layermanagement .layer-list ul").on("click", "li .setdown", function () {
+
+ var layerId = $(this).parents('li').attr('itemid');
+
+ that.map.scene.imageryLayers.lower(that[layerId]);
+
+ if ($(this).parents('li').next().length > 0) {
+ $(this).parents('li').next().after($(this).parents('li'));
+ }
+
+ })
+
+ $(".jimu-widget-Layermanagement .tree-layer-opcity .close").click(function () {
+ $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().hide();
+ })
+
},
- closeZtreeBox: function (item) {
- if (item != this.name) {
- $('#ztree_container').stop().hide();
+ appendItem: function (item, obj, layer) {
+ var that = this;
+ if (item == this.name) {
+
+ $(".jimu-widget-Layermanagement .layer-list ul .no-data").stop().hide();
+ var flag = true;
+ var liList = $(".jimu-widget-Layermanagement .layer-list ul li");
+ for (var i = 0; i < liList.length; i++) {
+ if ($(liList[i]).attr('itemid') && $(liList[i]).attr('itemid') == obj.id) {
+ flag = false
+ }
+ }
+
+ if (flag == true) {
+ var liItem = $("<li itemid='" + obj.id + "' itemtitle='" + obj.title + "'> <div>" +
+ "<span title='" + obj.title + "'>" +
+ obj.title +
+ "</span>" +
+ "<button type='button' class='layui-btn layui-btn-normal layui-btn-sm control-btn layer-opacity' title='透明度调整'>" +
+ "<img src='./images/工具（用以切换图层的透明度）.png' alt=''>" +
+ "</button>" +
+ "<button type='button' class='layui-btn layui-btn-normal layui-btn-sm control-btn setup' title='向上移动图层'>" +
+ "<img src='./images/向上移动.png' alt=''>" +
+ "</button>" +
+ "<button type='button' class='layui-btn layui-btn-normal layui-btn-sm control-btn setdown' title='向下移动图层'>" +
+ "<img src='./images/向下移动.png' alt=''>" +
+ "</button>" +
+ "</div> </li>");
+
+ that[obj.id] = layer;
+
+ $(".jimu-widget-Layermanagement .layer-list ul").prepend(liItem);
+ }
+
+
+
+ }
+ },
+
+ removeItem: function (item, obj) {
+ if (item == this.name) {
+ var liList = $(".jimu-widget-Layermanagement .layer-list ul li");
+ for (var i = 0; i < liList.length; i++) {
+ if ($(liList[i]).attr('itemid') && $(liList[i]).attr('itemid') == obj.id) {
+ $(liList[i]).remove();
+ }
+ }
+
+ if ($(".jimu-widget-Layermanagement .layer-list ul li").length == 1) {
+ $(".jimu-widget-Layermanagement .layer-list ul .no-data").stop().show();
+ $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().hide();
+ }
+
}
},
onOpen: function () {
-
+
},
onClose: function () {
diff --git a/widgets/Layermanagement/css/style.css b/widgets/Layermanagement/css/style.css
index ff596e2..b426d55 100644
--- a/widgets/Layermanagement/css/style.css
+++ b/widgets/Layermanagement/css/style.css
@@ -1,10 +1,10 @@
.jimu-widget-Layermanagement {
-
+ color: #555;
}
.jimu-widget-Layermanagement .layer-tab {
position: fixed;
- top: 100px;
+ top: 72px;
right: 10px;
}
@@ -22,7 +22,6 @@
position: relative;
border: 1px solid #444;
border-color: #fff;
- color: #edffff;
fill: #edffff;
margin: 1px 2px;
cursor: pointer;
@@ -37,10 +36,108 @@
}
.jimu-widget-Layermanagement .layer-list {
+ display: none;
position: fixed;
- top: 100px;
+ top: 72px;
right: 60px;
width: 320px;
- height: 420px;
+ min-height: 80px;
background: #fff;
-}
\ No newline at end of file
+ border-radius: 5px;
+ box-shadow: 0 0 8px #fff;
+}
+
+.jimu-widget-Layermanagement .layer-list ul {
+ max-height: 360px;
+ overflow-y: auto;
+}
+
+.jimu-widget-Layermanagement .layer-list h3 {
+ position: relative;
+ margin: 0;
+ line-height: 40px;
+ height: 40px;
+ font-size: 16px;
+ font-weight: normal;
+ text-align: center;
+}
+
+.jimu-widget-Layermanagement .layer-list h3 .sign-head-th-xx {
+ position: absolute;
+ right: 0px;
+}
+
+.jimu-widget-Layermanagement .layer-list li {
+ padding: 0 10px;
+}
+
+.jimu-widget-Layermanagement .layer-list li>div {
+ display: flex;
+ align-items: center;
+ height: 36px;
+}
+
+.jimu-widget-Layermanagement .layer-list li>div span {
+ width: calc(100% - 102px);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.jimu-widget-Layermanagement .layer-list .control-btn {
+ padding: 0 !important;
+ width: 24px !important;
+ height: 24px !important;
+ line-height: 24px !important;
+ margin-left: 10px;
+}
+
+.jimu-widget-Layermanagement .layer-list .layui-btn {
+ border: none;
+}
+
+.jimu-widget-Layermanagement .layer-list .control-btn img{
+ margin: auto;
+ width: 16px;
+ height: 16px;
+}
+
+
+.jimu-widget-Layermanagement .tree-layer-opcity {
+ display: none;
+ position: fixed;
+ top: 72px;
+ right: 390px;
+ width: 260px;
+ height: auto;
+ background: #Fff;
+ border-radius: 5px;
+ box-shadow: 0 0 8px #fff;
+ }
+
+ .jimu-widget-Layermanagement .tree-layer-opcity h3 {
+ margin: 0;
+ height: 36px;
+ line-height: 36px;
+ text-align: center;
+ }
+
+
+ .jimu-widget-Layermanagement .tree-layer-opcity .close {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ }
+
+ .jimu-widget-Layermanagement .tree-layer-opcity li>div:first-child {
+ padding: 0 10px;
+ line-height: 28px;
+ overflow: hidden;
+ text-overflow:ellipsis;
+ white-space: nowrap;
+ }
+
+ .jimu-widget-Layermanagement .tree-layer-opcity li>div:last-child {
+ margin: 10px 10px;
+ width: calc(100% - 20px);
+ }
\ No newline at end of file
--
Gitblit v1.9.3