From 0ee58233d6e1ab07bc13701f12b60be8dcf9aff7 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 09 Jun 2021 18:00:37 +0800
Subject: [PATCH] 目录树添加模型，和透明度调整的相关结构及逻辑样式
---
config.json | 8
widgets/LeftNavigationBar/Widget.js | 261 ++++++++++++++++++++++++++++++++++++++----
widgets/LeftNavigationBar/css/style.css | 39 ++++++
widgets/LeftNavigationBar/Widget.html | 13 -
index.html | 2
5 files changed, 280 insertions(+), 43 deletions(-)
diff --git a/config.json b/config.json
index bf191bb..74a6cc3 100644
--- a/config.json
+++ b/config.json
@@ -306,10 +306,10 @@
}],
"mapOptions": {
"positionInfo": {
- "xmin": 115.547800,
- "ymin": 28.820504,
- "xmax": 115.926573,
- "ymax": 28.671158
+ "xmin": 114.079032,
+ "ymin": 30.223379,
+ "xmax": 118.791967,
+ "ymax": 28.127233
},
"animation": false,
"baseLayerPicker": true,
diff --git a/index.html b/index.html
index 1238bfd..4663aa0 100644
--- a/index.html
+++ b/index.html
@@ -103,7 +103,7 @@
}
.cesium-baseLayerPicker-dropDown {
- width: 220px !important;
+ width: 308px !important;
}
#main-loading {
diff --git a/widgets/LeftNavigationBar/Widget.html b/widgets/LeftNavigationBar/Widget.html
index 37af490..573ecb3 100644
--- a/widgets/LeftNavigationBar/Widget.html
+++ b/widgets/LeftNavigationBar/Widget.html
@@ -18,15 +18,10 @@
</div>
<div class="tree-layer-opcity">
+ <h3>图层透明度控制</h3>
+ <i class="close layui-icon">ဆ</i>
<ul>
- <li>
- <div>
-
- </div>
- <div>
-
- </div>
- </li>
- </ul>
+
+ </ul>
</div>
</div>
\ No newline at end of file
diff --git a/widgets/LeftNavigationBar/Widget.js b/widgets/LeftNavigationBar/Widget.js
index cc80571..737ff9e 100644
--- a/widgets/LeftNavigationBar/Widget.js
+++ b/widgets/LeftNavigationBar/Widget.js
@@ -101,12 +101,17 @@
}
})
+
+ $(".jimu-widget-LeftNavigationBar .tree-layer-opcity .close").click(function () {
+ $(".jimu-widget-LeftNavigationBar .tree-layer-opcity").stop().hide();
+ })
},
closeToolBox: function (item) {},
onOpen: function () {
//面板打开的时候触发 （when open this panel trigger）
+
},
onClose: function () {
@@ -134,7 +139,7 @@
}
}).then((res) => {
if (res.data.code == '200') {
- // console.log(res, 'open', 898998)
+ console.log(res, 'open', 898998)
that.changeData(res.data.data); //重写数据
}
})
@@ -154,8 +159,19 @@
field: String(i),
src: d[k].serviceUrl,
id: d[k].id,
- serviceName: d[k].serviceName
+ serviceName: d[k].serviceName,
+ alpha: 1
}
+
+ if (d[k].serviceUrl.indexOf('.openrealspace') != -1) {
+ a.model = true
+ }
+
+ if (d[k].name == '三维倾斜数据') {
+ a.model = true
+ }
+
+
b.push(a);
i++;
if (d[k].children.length != 0) {
@@ -195,6 +211,8 @@
layer = layui.layer,
util = layui.util,
$ = layui.$;
+ var slider = layui.slider;
+
tree.render({
elem: '#left-tree-list' //默认是点击节点可进行收缩
,
@@ -232,29 +250,77 @@
if (obj.checked == true) {
- obj.data.children.forEach(item => {
- $.ajax({
- url: item.src + '/maps.json',
- type: 'get',
- dataType: 'JSON',
- success: function (res) {
+ if (obj.data.model) {
+ obj.data.children.forEach(item => {
+ var host = that.returnStr(item.src).host;
+ var scene = that.map.scene;
+ var partOfUrl = that.returnStr(item.src).partOfUrl;
+ //添加S3M图层服务
+ that[item.id] = scene.open(host + partOfUrl);
+ //定位到场景
+ Cesium.loadJson(host + partOfUrl + '/scenes.json').then(function (scenes) {
+ // var sname = scenes[0].name;
+ // Cesium.loadJson(host + partOfUrl + '/scenes/' + sname + '.json').then(function (jsonData) {
+ // var cameraPosition = jsonData.camera;
+ // var tilt = Cesium.Math.toRadians(cameraPosition.tilt - 90);
+ // Cesium.when(promise, function (layer) {
+ // //设置相机位置、视角，便于观察场景
+ // scene.camera.setView({
+ // destination: new Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude, cameraPosition.altitude),
+ // orientation: {
+ // heading: cameraPosition.heading,
+ // pitch: tilt,
+ // roll: 0
+ // }
+ // });
+ // if (!scene.pickPositionSupported) {
+ // alert('不支持深度纹理,无法拾取位置！');
+ // }
+ // }, function (e) {
+ // if (widget._showRenderLoopErrors) {
+ // var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
+ // widget.showErrorPanel(title, undefined, e);
+ // }
+ // });
+ // });
+ });
+ });
+ } else {
+ obj.data.children.forEach(item => {
+ $.ajax({
+ url: item.src + '/maps.json',
+ type: 'get',
+ dataType: 'JSON',
+ success: function (res) {
- that[item.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
- url: res[0].path,
- }));
+ that[item.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+ url: res[0].path,
+ }));
+ that[obj.data.id].alpha = item.alpha
+ }
+ })
+ });
- }
- })
- });
+ }
+
+
} else {
- obj.data.children.forEach(item => {
- if (that[item.id]) that.map.imageryLayers.remove(that[item.id]);
- });
+ if (obj.data.model) {
+ obj.data.children.forEach(item => {
+ Cesium.when(that[item.id], function (layer) {
+ that.map.scene.layers.remove(layer[0].name)
+ })
+ });
+ } else {
+ obj.data.children.forEach(item => {
+ if (that[item.id]) that.map.imageryLayers.remove(that[item.id]);
+ });
+ }
}
@@ -266,26 +332,72 @@
if (obj.checked == true) {
- $.ajax({
- url: obj.data.src + '/maps.json',
- type: 'get',
- dataType: 'JSON',
- success: function (res) {
- console.log(res, 123)
+ if (obj.data.model) {
+ var host = that.returnStr(obj.data.src).host;
+ var scene = that.map.scene;
+ var partOfUrl = that.returnStr(obj.data.src).partOfUrl;
+ //添加S3M图层服务
+ that[obj.data.id] = scene.open(host + partOfUrl);
+ //定位到场景
+ Cesium.loadJson(host + partOfUrl + '/scenes.json').then(function (scenes) {
+ // var sname = scenes[0].name;
+ // Cesium.loadJson(host + partOfUrl + '/scenes/' + sname + '.json').then(function (jsonData) {
+ // var cameraPosition = jsonData.camera;
+ // var tilt = Cesium.Math.toRadians(cameraPosition.tilt - 90);
+ // Cesium.when(promise, function (layer) {
+ // //设置相机位置、视角，便于观察场景
+ // scene.camera.setView({
+ // destination: new Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude, cameraPosition.altitude),
+ // orientation: {
+ // heading: cameraPosition.heading,
+ // pitch: tilt,
+ // roll: 0
+ // }
+ // });
+ // if (!scene.pickPositionSupported) {
+ // alert('不支持深度纹理,无法拾取位置！');
+ // }
+ // }, function (e) {
+ // if (widget._showRenderLoopErrors) {
+ // var title = '加载SCP失败，请检查网络连接状态或者url地址是否正确？';
+ // widget.showErrorPanel(title, undefined, e);
+ // }
+ // });
+ // });
+ });
- that[obj.data.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
- url: res[0].path,
- }));
+ } else {
- }
- })
+ $.ajax({
+ url: obj.data.src + '/maps.json',
+ type: 'get',
+ dataType: 'JSON',
+ success: function (res) {
+ console.log(res, 123)
+ that[obj.data.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
+ url: res[0].path,
+ }));
+ that[obj.data.id].alpha = obj.data.alpha
+ }
+ })
+
+ }
} else {
+ if (obj.data.model) {
+ Cesium.when(that[obj.data.id], function (layer) {
+ that.map.scene.layers.remove(layer[0].name)
+ })
- that.map.imageryLayers.remove(that[obj.data.id]);
+ } else {
+ that.map.imageryLayers.remove(that[obj.data.id]);
+
+ }
+
+
}
@@ -300,11 +412,94 @@
var depId = data.id;
var parentId = data.parentId;
if (type == 'add') {
+
+ $(".jimu-widget-LeftNavigationBar .tree-layer-opcity ul").empty();
+
+
+
console.log(type, data, elem, depId, parentId)
+
+ if (data.children) {
+
+ data.children.forEach(item => {
+ var liC = `<li>
+ <div title="${item.title}">
+ ${item.title}
+ </div>
+ <div id="${item.id + 'Layer'}">
+
+ </div>
+ </li>`;
+
+ $(".jimu-widget-LeftNavigationBar .tree-layer-opcity ul").append(liC)
+
+ $(".jimu-widget-LeftNavigationBar .tree-layer-opcity").stop().show();
+ slider.render({
+ elem: '#' + item.id + 'Layer',
+ min: 0,
+ max: 10,
+ value: item.alpha * 10,
+ step: 1,
+ theme: '#1E9FFF',
+ showstep: true,
+ change: function (value) {
+ item.alpha = value / 10
+ if (that[item.id]) {
+ that[item.id].alpha = item.alpha
+ }
+ }
+ });
+ })
+
+ } else {
+ var liC = `<li>
+ <div title="${data.title}">
+ ${data.title}
+ </div>
+ <div id="${data.id + 'Layer'}">
+
+ </div>
+ </li>`;
+
+ $(".jimu-widget-LeftNavigationBar .tree-layer-opcity ul").append(liC)
+
+ $(".jimu-widget-LeftNavigationBar .tree-layer-opcity").stop().show();
+ slider.render({
+ elem: '#' + data.id + 'Layer',
+ min: 0,
+ max: 10,
+ value: data.alpha * 10,
+ step: 1,
+ theme: '#1E9FFF',
+ showstep: true,
+ change: function (value) {
+ data.alpha = value / 10
+ if (that[data.id]) {
+ that[data.id].alpha = data.alpha
+ }
+ }
+ });
+
+
+ }
+
+
}
}
});
+
+ console.log($("#left-tree-list > .layui-tree > div"))
+ var jqDom = $("#left-tree-list > .layui-tree > div");
+
+ for (var i = 0; i < jqDom.length; i++) {
+ if ($(jqDom[i]).text().indexOf("三维倾斜数据") != -1) {
+ $(jqDom[i]).find('.layui-btn-group').remove()
+
+ }
+ }
+
+
//按钮事件
util.event('lay-demo', {
@@ -329,6 +524,14 @@
});
})
},
+ returnStr: function (url) {
+ var startIndex = url.indexOf("/iserver");
+ var endIndex = url.indexOf("/scenes");
+ return {
+ host: url.substring(0, startIndex),
+ partOfUrl: url.substring(startIndex, endIndex)
+ }
+ },
changeImg: true,
father: [],
data: [{
diff --git a/widgets/LeftNavigationBar/css/style.css b/widgets/LeftNavigationBar/css/style.css
index c840463..e881a05 100644
--- a/widgets/LeftNavigationBar/css/style.css
+++ b/widgets/LeftNavigationBar/css/style.css
@@ -182,4 +182,43 @@
.jimu-widget-LeftNavigationBar .layui-btn-group .layui-icon:before {
content: "";
+}
+
+.jimu-widget-LeftNavigationBar .tree-layer-opcity {
+ display: none;
+ position: absolute;
+ top: 240px;
+ left: 280px;
+ width: 260px;
+ height: auto;
+ background: #Fff;
+ border-radius: 5px;
+ box-shadow: 0 0 8px #fff;
+}
+
+.jimu-widget-LeftNavigationBar .tree-layer-opcity h3 {
+ margin: 0;
+ height: 36px;
+ line-height: 36px;
+ text-align: center;
+}
+
+
+.jimu-widget-LeftNavigationBar .tree-layer-opcity .close {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+}
+
+.jimu-widget-LeftNavigationBar .tree-layer-opcity li>div:first-child {
+ padding: 0 10px;
+ line-height: 28px;
+ overflow: hidden;
+ text-overflow:ellipsis;
+ white-space: nowrap;
+}
+
+.jimu-widget-LeftNavigationBar .tree-layer-opcity li>div:last-child {
+ margin: 10px 10px;
+ width: calc(100% - 20px);
}
\ No newline at end of file
--
Gitblit v1.9.3