|
|
@@ -23,12 +23,17 @@
|
|
|
|
|
|
<template>
|
|
|
<div class="jt-layer">
|
|
|
- <el-tree :data="treeData" :default-expanded-keys="expandedKeys" node-key="id" class="tree-line" :expand-on-click-node="false" ref="treeRef" @check-change="handleCheckChange" @node-click="handleClick">
|
|
|
+ <el-tree :data="treeData" :default-expanded-keys="expandedKeys" :default-checked-keys="checkedkeys"
|
|
|
+ node-key="id" class="tree-line" :expand-on-click-node="false" ref="treeRef"
|
|
|
+ @check-change="handleCheckChange" @node-click="handleClick">
|
|
|
<template #default="{ node, data }">
|
|
|
<!-- 复选框 -->
|
|
|
- <el-checkbox v-if="data.ischeck === '1' && store.userport == 'PC'" v-model="node.checked" :indeterminate="node.indeterminate" :disabled="!!node.disabled" @change="handleCheckBoxChange($event, data, node)">
|
|
|
+ <el-checkbox v-if="data.ischeck == '1' && store.userport == 'PC'" v-model="node.checked"
|
|
|
+ :indeterminate="node.indeterminate" :disabled="!!node.disabled"
|
|
|
+ @change="handleCheckBoxChange($event, data, node)">
|
|
|
</el-checkbox>
|
|
|
- <el-switch v-else-if="data.ischeck == 1 && store.userport == 'APP'" width="30rem" size="small" v-model="node.checked" @change="handleCheckBoxChange($event, data, node)" />
|
|
|
+ <el-switch v-else-if="data.ischeck == 1 && store.userport == 'APP'" width="30rem" size="small"
|
|
|
+ v-model="node.checked" @change="handleCheckBoxChange($event, data, node)" />
|
|
|
<span class="custom-tree-node">
|
|
|
<!-- 字体、图标 -->
|
|
|
<!-- <span>
|
|
|
@@ -51,7 +56,8 @@
|
|
|
<!-- 透明度 -->
|
|
|
<template v-if="node.checked && data.opacity >0">
|
|
|
<div style="width: 80rem; padding: 0 20rem; position: absolute; right: 0">
|
|
|
- <el-slider v-model="data.opacity" @input="handleSliderChange($event, data)" :max="1" :min="0.1" :step="0.1" />
|
|
|
+ <el-slider v-model="data.opacity" @input="handleSliderChange($event, data)" :max="1" :min="0.1"
|
|
|
+ :step="0.1" />
|
|
|
</div>
|
|
|
</template>
|
|
|
</template>
|
|
|
@@ -70,6 +76,8 @@
|
|
|
treeData: [],
|
|
|
inittree: [], //初始化图层数组
|
|
|
expandedKeys: [], //对应要展开的节点id
|
|
|
+ currentKey: [], //默认打开节点的id
|
|
|
+ checkedkeys: []
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -158,7 +166,13 @@
|
|
|
|
|
|
break;
|
|
|
case "Cesium3DTileset": //加载3DTileset地图服务--实景
|
|
|
-
|
|
|
+ jt3d._viewer.flyTo(window[_serviceId], {
|
|
|
+ offset: {
|
|
|
+ heading: Cesium.Math.toRadians(20.0), //方向
|
|
|
+ pitch: Cesium.Math.toRadians(-90), //倾斜角度
|
|
|
+ range: 1000
|
|
|
+ }
|
|
|
+ });
|
|
|
break;
|
|
|
case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
|
|
|
|
|
|
@@ -178,6 +192,7 @@
|
|
|
* @param {Object} checked 节点本身是否被选中
|
|
|
*/
|
|
|
async handleCheckChange(data, checked) {
|
|
|
+ console.log('进入图层控制')
|
|
|
let _self = this;
|
|
|
|
|
|
let _serviceId = "service_" + data.layercode + data.layerorder;
|
|
|
@@ -283,10 +298,12 @@
|
|
|
if (parameterset.count) { //重复次数
|
|
|
_options.count = parameterset.count;
|
|
|
}
|
|
|
- if (parameterset.direction) { //direction=vertical 纵，order='-'(由下到上) , '+"(由上到下)
|
|
|
+ if (parameterset
|
|
|
+ .direction) { //direction=vertical 纵，order='-'(由下到上) , '+"(由上到下)
|
|
|
_options.direction = parameterset.direction;
|
|
|
}
|
|
|
- if (parameterset.order) { //direction=horizontal 横，order='-'(顺时针) , '+'(逆时针)
|
|
|
+ if (parameterset
|
|
|
+ .order) { //direction=horizontal 横，order='-'(顺时针) , '+'(逆时针)
|
|
|
_options.order = parameterset.order;
|
|
|
}
|
|
|
}
|
|
|
@@ -592,37 +609,34 @@
|
|
|
}
|
|
|
break;
|
|
|
case "Cesium3DTileset": //加载3DTileset地图服务--实景
|
|
|
+ if (data.datasource == '#') return
|
|
|
let datasource = data.datasource.split("#")
|
|
|
console.log('datasource', datasource)
|
|
|
if (checked) {
|
|
|
//加载实景
|
|
|
- datasource.forEach((res, index) => {
|
|
|
- //设置参数
|
|
|
- let _options = {
|
|
|
- id: _serviceId + index,
|
|
|
- url: res,
|
|
|
+ //设置参数
|
|
|
+ let _options = {
|
|
|
+ id: _serviceId,
|
|
|
+ url: datasource[0],
|
|
|
+ }
|
|
|
+ if (parameterset) {
|
|
|
+ if (parameterset.height) {
|
|
|
+ _options.height = parameterset.height;
|
|
|
}
|
|
|
- if (parameterset) {
|
|
|
- if (parameterset.height) {
|
|
|
- _options.height = parameterset.height;
|
|
|
- }
|
|
|
- if (parameterset.alpha) {
|
|
|
- _options.alpha = parameterset.alpha;
|
|
|
- }
|
|
|
+ if (parameterset.alpha) {
|
|
|
+ _options.alpha = parameterset.alpha;
|
|
|
}
|
|
|
+ }
|
|
|
+ jt3d.layer.addCesium3DTileset(_options, function(serviceId) {
|
|
|
+ console.log('添加')
|
|
|
+ window[_serviceId] = window[serviceId];
|
|
|
+ });
|
|
|
|
|
|
- jt3d.layer.addCesium3DTileset(_options, function(serviceId) {
|
|
|
-
|
|
|
- window[_serviceId + index] = window[serviceId];
|
|
|
|
|
|
- });
|
|
|
- })
|
|
|
} else {
|
|
|
- datasource.forEach((res, index) => {
|
|
|
- jt3d.layer.removeScenePrimitives({
|
|
|
- serviceId: _serviceId + index
|
|
|
- });
|
|
|
- })
|
|
|
+ jt3d.layer.removeScenePrimitives({
|
|
|
+ serviceId: _serviceId
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
@@ -731,23 +745,31 @@
|
|
|
*/
|
|
|
setNodesChecked(datas) {
|
|
|
let _self = this;
|
|
|
+ console.log('datas', datas)
|
|
|
datas.forEach((data, index) => {
|
|
|
- _self.$nextTick(() => {
|
|
|
- var node = _self.$refs.treeRef.getNode(data);
|
|
|
- //node.isLeaf是否是叶子节点
|
|
|
- if (node.isLeaf) {
|
|
|
- let checked = false;
|
|
|
- if (data.isinit === '1') {
|
|
|
- checked = true;
|
|
|
- }
|
|
|
- data.opacity = Number(data.opacity)
|
|
|
- _self.$refs.treeRef.setChecked(node, checked);
|
|
|
+ var node = _self.$refs.treeRef.getNode(data);
|
|
|
+ //node.isLeaf是否是叶子节点
|
|
|
+ if (node.isLeaf) {
|
|
|
+ let checked = false;
|
|
|
+ if (data.isinit === '1') {
|
|
|
+ checked = true;
|
|
|
+ _self.checkedkeys.push(data.id)
|
|
|
+ console.log('默认勾选', _self.checkedkeys)
|
|
|
}
|
|
|
- });
|
|
|
- if (data.children != undefined) {
|
|
|
+ data.opacity = Number(data.opacity)
|
|
|
+ // _self.$refs.treeRef.setChecked(node, checked);
|
|
|
+ // _self.handleCheckChange(data,checked)
|
|
|
+ // _self.childNodesChange(node, checked);
|
|
|
+ // _self.$refs.treeRef.setCurrentKey(data.id)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (data.children) {
|
|
|
_self.setNodesChecked(data.children);
|
|
|
}
|
|
|
});
|
|
|
+ _self.$nextTick(() => {
|
|
|
+ _self.$refs.treeRef.setCheckedKeys(_self.checkedkeys,true)
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
@@ -793,7 +815,7 @@
|
|
|
|
|
|
//获取地图图集id
|
|
|
let roleId = store.roleId
|
|
|
- atlasLayersSqlWhere = "roleid = " + roleId + " and atlasType='图层'"
|
|
|
+ atlasLayersSqlWhere = '"roleId"' + " = " + roleId + " and " + '"atlasType"' + "='图层'"
|
|
|
|
|
|
//Promise回调
|
|
|
function init(data) {
|
|
|
@@ -826,7 +848,7 @@
|
|
|
sqlWhere: atlasLayersSqlWhere, //
|
|
|
orderByField: ''
|
|
|
}).then(res => {
|
|
|
- console.log('所有图层', res.data)
|
|
|
+ console.log('所有图层', res)
|
|
|
//初始图层列表
|
|
|
this.inittree = res.data
|
|
|
init(res.data).then(item => {
|
|
|
@@ -841,32 +863,36 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .el-switch--small .el-switch__core .el-switch__action{
|
|
|
+ .el-switch--small .el-switch__core .el-switch__action {
|
|
|
width: 12rem;
|
|
|
height: 12rem;
|
|
|
}
|
|
|
- .el-switch--small.is-checked .el-switch__core .el-switch__action{
|
|
|
+
|
|
|
+ .el-switch--small.is-checked .el-switch__core .el-switch__action {
|
|
|
margin-left: calc(-1rem - 12rem);
|
|
|
}
|
|
|
- .el-switch__core .el-switch__action{
|
|
|
- top:0;
|
|
|
+
|
|
|
+ .el-switch__core .el-switch__action {
|
|
|
+ top: 0;
|
|
|
}
|
|
|
- .el-slider__button{
|
|
|
+
|
|
|
+ .el-slider__button {
|
|
|
width: 20rem;
|
|
|
height: 20rem;
|
|
|
}
|
|
|
- .el-tree-node__content{
|
|
|
+
|
|
|
+ .el-tree-node__content {
|
|
|
height: 26rem;
|
|
|
}
|
|
|
-
|
|
|
- .el-switch--small .el-switch__core{
|
|
|
+
|
|
|
+ .el-switch--small .el-switch__core {
|
|
|
height: 16rem;
|
|
|
}
|
|
|
-
|
|
|
- .el-switch--small{
|
|
|
+
|
|
|
+ .el-switch--small {
|
|
|
padding: 0 5rem;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.jt-layer {
|
|
|
padding-left: 10rem;
|
|
|
|
DESKTOP-GBVU60Q\dell
