|
|
@@ -16,13 +16,13 @@
|
|
|
|
|
|
<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" ref="treeRef">
|
|
|
<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>
|
|
|
- <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">
|
|
|
+ <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" @click="handleClick(data)">
|
|
|
<!-- 字体、图标 -->
|
|
|
<!-- <span>
|
|
|
<img src="@/assets/images/logo16x16.ico" />
|
|
|
@@ -55,6 +55,7 @@
|
|
|
treeData: [],
|
|
|
inittree: [], //初始化图层数组
|
|
|
expandedKeys: [], //对应要展开的节点id
|
|
|
+ checkedkeys: [] //默认打开节点的id
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -142,7 +143,15 @@
|
|
|
|
|
|
break;
|
|
|
case "Cesium3DTileset": //加载3DTileset地图服务--实景
|
|
|
-
|
|
|
+ if (window[_serviceId]) {
|
|
|
+ jt3dLeft._viewer.flyTo(window[_serviceId], {
|
|
|
+ offset: {
|
|
|
+ heading: Cesium.Math.toRadians(20.0), //方向
|
|
|
+ pitch: Cesium.Math.toRadians(-90), //倾斜角度
|
|
|
+ range: 1000
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
break;
|
|
|
case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
|
|
|
|
|
|
@@ -152,16 +161,82 @@
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+ },
|
|
|
|
|
|
+ /**
|
|
|
+ * el-slider 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
|
|
|
+ * 地图服务的透明度调整
|
|
|
+ */
|
|
|
+ handleSliderChange($event, data) {
|
|
|
+ let _serviceId = "serviceLeft_" + data.layercode + data.layerorder;
|
|
|
+ if (data.loadtype === "Cesium3DTileset") {
|
|
|
+ //设置实景透明度
|
|
|
+ jt3dLeft.layer.set3DTileStyle({
|
|
|
+ serviceId: _serviceId,
|
|
|
+ alpha: $event,
|
|
|
+ });
|
|
|
+ } else if (data.loadtype === "CrImageServerLayer") {
|
|
|
+ let floatLayer = window[_serviceId];
|
|
|
+ floatLayer.setOpacity($event)
|
|
|
+ } else if (data.loadtype === "PolygonImageMaterial") {
|
|
|
+ //设置透明度
|
|
|
+ jt3dLeft.layer.setPolygonImageMaterial({
|
|
|
+ serviceId: _serviceId,
|
|
|
+ alpha: $event,
|
|
|
+ });
|
|
|
+ } else if (data.loadtype === "entitiesGltf") {
|
|
|
+ //设置透明度
|
|
|
+ jt3dLeft.layer.setModelStyle({
|
|
|
+ serviceId: _serviceId,
|
|
|
+ alpha: $event,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ jt3dLeft.layer.setLayersStyle({
|
|
|
+ serviceId: _serviceId,
|
|
|
+ alpha: $event,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * el-checkbox 当绑定值变化时触发的事件
|
|
|
+ * @param {Object} checked 复选框状态
|
|
|
+ * @param {Object} data 对应于节点点击的节点对象
|
|
|
+ * @param {Object} node TreeNode 的 node 属性
|
|
|
+ */
|
|
|
+ handleCheckBoxChange(checked, data, node) {
|
|
|
+
|
|
|
+ let _node = this.$refs.treeRef.getNode(data);
|
|
|
+ if (_node.isLeaf) {
|
|
|
+ this.setLayerControl(data, checked);
|
|
|
+ this.$refs.treeRef.setChecked(_node, checked); //是否设置子节点，默认为false，利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。利用tree的API就实现了正确的回显效果
|
|
|
+ }
|
|
|
+
|
|
|
+ //控制子节点
|
|
|
+ this.childNodesChange(node, checked);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 控制子节点
|
|
|
+ * @param {Object} node
|
|
|
+ * @param {Object} checked
|
|
|
+ */
|
|
|
+ childNodesChange(node, checked) {
|
|
|
+ let _self = this;
|
|
|
+ node.childNodes.forEach(item => {
|
|
|
+ _self.setLayerControl(item.data, checked);
|
|
|
+ _self.$refs.treeRef.setChecked(item, checked);
|
|
|
+ _self.childNodesChange(item, checked);
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
/**
|
|
|
- * el-tree 当复选框被点击的时候触发
|
|
|
* 控制地图服务的显示及隐藏
|
|
|
* @param {Object} data 传递给 data 属性的数组中该节点所对应的对象
|
|
|
* @param {Object} checked 节点本身是否被选中
|
|
|
*/
|
|
|
- async handleCheckChange(data, checked) {
|
|
|
+ async setLayerControl(data, checked) {
|
|
|
+ console.log('操作', '图层控制')
|
|
|
+
|
|
|
let _self = this;
|
|
|
|
|
|
let _serviceId = "serviceLeft_" + data.layercode + data.layerorder;
|
|
|
@@ -207,6 +282,8 @@
|
|
|
switch (data.loadtype) {
|
|
|
case "GeoJsonPoint": //GeoJsonPoint
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
id: _serviceId,
|
|
|
@@ -214,7 +291,6 @@
|
|
|
}
|
|
|
|
|
|
if (parameterset) {
|
|
|
-
|
|
|
if (parameterset.billboard instanceof Object) {
|
|
|
let billboard = parameterset.billboard;
|
|
|
_options.billboard = billboard;
|
|
|
@@ -226,17 +302,23 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
jt3dLeft.layer.addBillboardByGeoJson(_options, function(serviceId) {
|
|
|
|
|
|
});
|
|
|
+
|
|
|
} else {
|
|
|
jt3dLeft.layer.removeDataSources({
|
|
|
serviceId: _serviceId,
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
break;
|
|
|
case "GeoJsonPolyline": //GeoJsonPolyline
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
id: _serviceId,
|
|
|
@@ -266,10 +348,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;
|
|
|
}
|
|
|
}
|
|
|
@@ -280,11 +364,15 @@
|
|
|
} else {
|
|
|
jt3dLeft.layer.removeDataSources({
|
|
|
serviceId: _serviceId,
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
break;
|
|
|
case "entitiesGltf": //gltf/glb
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
id: _serviceId,
|
|
|
@@ -333,11 +421,15 @@
|
|
|
} else {
|
|
|
jt3dLeft.layer.removeEntity({
|
|
|
serviceId: _serviceId,
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
break;
|
|
|
case "PolygonImageMaterial": //图片材质
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
if (parameterset) {
|
|
|
if (parameterset.points) {
|
|
|
jt3dLeft.layer.addPolygonImageMaterial({
|
|
|
@@ -357,13 +449,17 @@
|
|
|
} else {
|
|
|
jt3dLeft.layer.removeEntity({
|
|
|
serviceId: _serviceId,
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
break;
|
|
|
case "CrImageServerLayer": //贴地所有地形、模型的规划图、网格地图
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
let floatLayer = new this.jt3dSDK.CrImageServerLayer({
|
|
|
- viewer: jt3dLeft._viewer,
|
|
|
+ viewer: window["viewer"],
|
|
|
url: data.datasource,
|
|
|
opacity: _opacity,
|
|
|
show: true
|
|
|
@@ -373,10 +469,13 @@
|
|
|
// window[_serviceId].show();
|
|
|
} else {
|
|
|
window[_serviceId].hide();
|
|
|
+ data.isinit = '0';
|
|
|
}
|
|
|
break;
|
|
|
case "DEM": //地形服务（DEM）
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
url: data.datasource,
|
|
|
@@ -386,14 +485,17 @@
|
|
|
_options.terrainExaggeration = parameterset.terrainExaggeration;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
jt3dLeft.layer.addTerrain(_options);
|
|
|
} else {
|
|
|
- jt3dLeft.layer.removeTerrain();
|
|
|
+ jt3dLeft.layer.removeTerrain().then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
+ });
|
|
|
}
|
|
|
break;
|
|
|
case "UrlTemplateImageryProvider": //加载URL模板服务
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
id: _serviceId,
|
|
|
@@ -417,24 +519,19 @@
|
|
|
|
|
|
//重置图层顺序
|
|
|
_self.setLayerNumber(serviceId)
|
|
|
- if (layertype === '标注') {
|
|
|
- var imageryLayers = jt3dLeft._viewer.imageryLayers;
|
|
|
- imageryLayers.raiseToTop(window[serviceId]);
|
|
|
- }
|
|
|
-
|
|
|
});
|
|
|
} else {
|
|
|
- let removeLayer = jt3dLeft.layer.removeImageryProvider({
|
|
|
+ jt3dLeft.layer.removeImageryProvider({
|
|
|
serviceId: _serviceId
|
|
|
- });
|
|
|
- removeLayer.then(function() {
|
|
|
- console.log('成功移除')
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
case "WebMapTileServiceImageryProvider": // WMTS地图服务
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
@@ -455,9 +552,6 @@
|
|
|
if (parameterset.tileMatrixSetID) { //用于WMTS请求的TileMatrixSet的标识符
|
|
|
_options.tileMatrixSetID = parameterset.tileMatrixSetID;
|
|
|
|
|
|
- if (parameterset.tileMatrixLabels) { //TileMatrix中用于WMTS请求的标识符列表，每个TileMatrix级别一个标识符。
|
|
|
- _options.tileMatrixLabels = parameterset.tileMatrixLabels;
|
|
|
- }
|
|
|
if (parameterset.minimumLevel) { //最小层级
|
|
|
_options.minimumLevel = parameterset.minimumLevel;
|
|
|
}
|
|
|
@@ -469,10 +563,6 @@
|
|
|
|
|
|
//重置图层顺序
|
|
|
_self.setLayerNumber(serviceId)
|
|
|
- if (layertype === '标注') {
|
|
|
- var imageryLayers = jt3dLeft._viewer.imageryLayers;
|
|
|
- imageryLayers.raiseToTop(window[serviceId]);
|
|
|
- }
|
|
|
});
|
|
|
|
|
|
} else {
|
|
|
@@ -489,14 +579,19 @@
|
|
|
} else {
|
|
|
ElMessage("请检测图层表parameterset字段是否设置layers,style,tileMatrixSetID");
|
|
|
}
|
|
|
+
|
|
|
} else {
|
|
|
jt3dLeft.layer.removeImageryProvider({
|
|
|
serviceId: _serviceId
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
break;
|
|
|
case "WebMapServiceImageryProvider": //WMS地图服务
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
id: _serviceId,
|
|
|
@@ -519,10 +614,6 @@
|
|
|
|
|
|
//重置图层顺序
|
|
|
_self.setLayerNumber(serviceId)
|
|
|
- if (layertype === '标注') {
|
|
|
- var imageryLayers = jt3dLeft._viewer.imageryLayers;
|
|
|
- imageryLayers.raiseToTop(window[serviceId]);
|
|
|
- }
|
|
|
});
|
|
|
} else {
|
|
|
ElMessage("请检测图层表parameterset字段是否设置layers");
|
|
|
@@ -530,15 +621,18 @@
|
|
|
} else {
|
|
|
ElMessage("请检测图层表parameterset字段是否设置layers");
|
|
|
}
|
|
|
-
|
|
|
} else {
|
|
|
jt3dLeft.layer.removeImageryProvider({
|
|
|
serviceId: _serviceId
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
break;
|
|
|
case "ArcGisMapServerImageryProvider": // ArcGIS Online和Server的相关服务
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
id: _serviceId,
|
|
|
@@ -556,19 +650,19 @@
|
|
|
|
|
|
//重置图层顺序
|
|
|
_self.setLayerNumber(serviceId)
|
|
|
- if (layertype === '标注') {
|
|
|
- var imageryLayers = jt3dLeft._viewer.imageryLayers;
|
|
|
- imageryLayers.raiseToTop(window[serviceId]);
|
|
|
- }
|
|
|
})
|
|
|
} else {
|
|
|
jt3dLeft.layer.removeImageryProvider({
|
|
|
serviceId: _serviceId
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
break;
|
|
|
case "TileMapServiceImageryProvider": // 2.5维度地图
|
|
|
if (checked) {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
id: _serviceId,
|
|
|
@@ -588,28 +682,27 @@
|
|
|
|
|
|
//重置图层顺序
|
|
|
_self.setLayerNumber(serviceId)
|
|
|
- if (layertype === '标注') {
|
|
|
- var imageryLayers = jt3dLeft._viewer.imageryLayers;
|
|
|
- imageryLayers.raiseToTop(window[serviceId]);
|
|
|
- }
|
|
|
-
|
|
|
});
|
|
|
} else {
|
|
|
jt3dLeft.layer.removeImageryProvider({
|
|
|
serviceId: _serviceId
|
|
|
+ }).then(res => {
|
|
|
+ data.isinit = '0';
|
|
|
});
|
|
|
}
|
|
|
break;
|
|
|
case "Cesium3DTileset": //加载3DTileset地图服务--实景
|
|
|
- let datasource = data.datasource.split("#")
|
|
|
- console.log('datasource', datasource)
|
|
|
+
|
|
|
if (checked) {
|
|
|
- //加载实景
|
|
|
- datasource.forEach((res, index) => {
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
+ if (window[_serviceId]) {
|
|
|
+ window[_serviceId].show = true;
|
|
|
+ } else {
|
|
|
//设置参数
|
|
|
let _options = {
|
|
|
- id: _serviceId + index,
|
|
|
- url: res,
|
|
|
+ id: _serviceId,
|
|
|
+ url: data.datasource,
|
|
|
}
|
|
|
if (parameterset) {
|
|
|
if (parameterset.height) {
|
|
|
@@ -619,43 +712,60 @@
|
|
|
_options.alpha = parameterset.alpha;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ //加载实景
|
|
|
jt3dLeft.layer.addCesium3DTileset(_options, function(serviceId) {
|
|
|
-
|
|
|
- window[_serviceId + index] = window[serviceId];
|
|
|
-
|
|
|
+ window[_serviceId].show = true;
|
|
|
});
|
|
|
- })
|
|
|
+ }
|
|
|
} else {
|
|
|
- datasource.forEach((res, index) => {
|
|
|
- jt3dLeft.layer.removeScenePrimitives({
|
|
|
- serviceId: _serviceId + index
|
|
|
- });
|
|
|
- })
|
|
|
+ if (window[_serviceId]) {
|
|
|
+ //3DTileset数据量比较大，会报很多cesium错误
|
|
|
+ // jt3dLeft.layer.removeScenePrimitives({
|
|
|
+ // serviceId: _serviceId
|
|
|
+ // }).then(res => {
|
|
|
+ // data.isinit = '0';
|
|
|
+ // });
|
|
|
+
|
|
|
+ window[_serviceId].show = false;
|
|
|
+ data.isinit = '0';
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
break;
|
|
|
case "Cesium3DTileset_BM": //加载3DTileset地图服务--白膜
|
|
|
if (checked) {
|
|
|
- //设置参数
|
|
|
- let _options = {
|
|
|
- id: _serviceId,
|
|
|
- url: data.datasource,
|
|
|
- }
|
|
|
- if (parameterset) {
|
|
|
- if (parameterset.color) {
|
|
|
- _options.color = parameterset.color;
|
|
|
+ data.isinit = '1';
|
|
|
+
|
|
|
+ if (window[_serviceId]) {
|
|
|
+ window[_serviceId].show = true;
|
|
|
+ } else {
|
|
|
+ //设置参数
|
|
|
+ let _options = {
|
|
|
+ id: _serviceId,
|
|
|
+ url: data.datasource,
|
|
|
+ }
|
|
|
+ if (parameterset) {
|
|
|
+ if (parameterset.color) {
|
|
|
+ _options.color = parameterset.color;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- //加载白膜
|
|
|
- jt3dLeft.layer.addCesium3DTilesetBm(_options, function(serviceId) {
|
|
|
- jt3dLeft.layer.set3DTileBMStyle(_options);
|
|
|
- });
|
|
|
+ //加载白膜
|
|
|
+ jt3dLeft.layer.addCesium3DTilesetBm(_options, function(serviceId) {
|
|
|
+ window[_serviceId].show = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
} else {
|
|
|
- jt3dLeft.layer.removeScenePrimitives({
|
|
|
- serviceId: _serviceId
|
|
|
- });
|
|
|
+ if (window[_serviceId]) {
|
|
|
+ // jt3dLeft.layer.removeScenePrimitives({
|
|
|
+ // serviceId: _serviceId
|
|
|
+ // }).then(res => {
|
|
|
+ // data.isinit = '0';
|
|
|
+ // });
|
|
|
+
|
|
|
+ window[_serviceId].show = false;
|
|
|
+ data.isinit = '0';
|
|
|
+ }
|
|
|
}
|
|
|
break;
|
|
|
default:
|
|
|
@@ -664,105 +774,12 @@
|
|
|
})
|
|
|
},
|
|
|
|
|
|
- /**
|
|
|
- * el-slider 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
|
|
|
- * 地图服务的透明度调整
|
|
|
- */
|
|
|
- handleSliderChange($event, data) {
|
|
|
- let _serviceId = "serviceLeft_" + data.layercode + data.layerorder;
|
|
|
- if (data.loadtype === "Cesium3DTileset") {
|
|
|
- let datasource = data.datasource.split("#")
|
|
|
- datasource.forEach((res, index) => {
|
|
|
- //设置实景透明度
|
|
|
- jt3d.layer.set3DTileStyle({
|
|
|
- serviceId: _serviceId + index,
|
|
|
- alpha: $event,
|
|
|
- });
|
|
|
- })
|
|
|
- } else if (data.loadtype === "CrImageServerLayer") {
|
|
|
- let floatLayer = window[_serviceId];
|
|
|
- floatLayer.setOpacity($event)
|
|
|
- } else if (data.loadtype === "PolygonImageMaterial") {
|
|
|
- //设置透明度
|
|
|
- jt3dLeft.layer.setPolygonImageMaterial({
|
|
|
- serviceId: _serviceId,
|
|
|
- alpha: $event,
|
|
|
- });
|
|
|
- } else if (data.loadtype === "entitiesGltf") {
|
|
|
- //设置透明度
|
|
|
- jt3dLeft.layer.setModelStyle({
|
|
|
- serviceId: _serviceId,
|
|
|
- alpha: $event,
|
|
|
- });
|
|
|
- } else {
|
|
|
- jt3dLeft.layer.setLayersStyle({
|
|
|
- serviceId: _serviceId,
|
|
|
- alpha: $event,
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * el-checkbox 当绑定值变化时触发的事件
|
|
|
- * @param {Object} checked 复选框状态
|
|
|
- * @param {Object} data 对应于节点点击的节点对象
|
|
|
- * @param {Object} node TreeNode 的 node 属性
|
|
|
- */
|
|
|
- handleCheckBoxChange(checked, data, node) {
|
|
|
-
|
|
|
- let _node = this.$refs.treeRef.getNode(data);
|
|
|
- if (_node.isLeaf) {
|
|
|
- this.$refs.treeRef.setChecked(_node,
|
|
|
- checked); //是否设置子节点，默认为false，利用tree组件渲染后带有的isLeaf(是否为叶子节点)属性，如果为叶子节点就选中。利用tree的API就实现了正确的回显效果
|
|
|
- }
|
|
|
-
|
|
|
- //控制子节点
|
|
|
- this.childNodesChange(node, checked);
|
|
|
- },
|
|
|
- /**
|
|
|
- * 控制子节点
|
|
|
- * @param {Object} node
|
|
|
- * @param {Object} checked
|
|
|
- */
|
|
|
- childNodesChange(node, checked) {
|
|
|
- let _self = this;
|
|
|
- node.childNodes.forEach(item => {
|
|
|
- _self.$refs.treeRef.setChecked(item, checked);
|
|
|
- _self.childNodesChange(item, checked);
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * 初始化复选框选中状态
|
|
|
- * @param {Object} datas
|
|
|
- */
|
|
|
- setNodesChecked(datas) {
|
|
|
- let _self = this;
|
|
|
- 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);
|
|
|
- }
|
|
|
- });
|
|
|
- if (data.children != undefined) {
|
|
|
- _self.setNodesChecked(data.children);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
|
|
|
/**
|
|
|
* 设置图层顺序
|
|
|
* @param {Object} options
|
|
|
*/
|
|
|
setLayerNumber(serviceId) {
|
|
|
- // let layerList = jt3dLeft._viewer.imageryLayers._layers
|
|
|
var imageryLayers = jt3dLeft._viewer.imageryLayers;
|
|
|
if (store.markID) {
|
|
|
console.log('标注id', store.markID)
|
|
|
@@ -969,7 +986,7 @@
|
|
|
|
|
|
//获取地图图集id
|
|
|
let roleId = store.roleId
|
|
|
- atlasLayersSqlWhere = '"roleid"' + " = " + roleId + " "
|
|
|
+ atlasLayersSqlWhere = '"roleId"' + " = " + roleId + " "
|
|
|
|
|
|
//Promise回调
|
|
|
function init(data) {
|
|
|
@@ -979,15 +996,19 @@
|
|
|
if (num < 10) {
|
|
|
res.layerorder = '0' + res.layerorder
|
|
|
}
|
|
|
-
|
|
|
- //显示2级
|
|
|
- if (res.parentid === null) {
|
|
|
+
|
|
|
+ //透明度
|
|
|
+ res.opacity = Number(res.opacity);
|
|
|
+
|
|
|
+ //默认展开
|
|
|
+ if (res.isexpand === '1') {
|
|
|
_this.expandedKeys.push(res.id);
|
|
|
}
|
|
|
-
|
|
|
- //其它级别展开
|
|
|
- if (res.isExpand === '1') {
|
|
|
- _this.expandedKeys.push(res.id);
|
|
|
+
|
|
|
+ // 复选框默认选中
|
|
|
+ if (res.isinit === '1') {
|
|
|
+ _this.checkedkeys.push(res.id);
|
|
|
+ _this.setLayerControl(res, true);
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@@ -1007,11 +1028,13 @@
|
|
|
//初始图层列表
|
|
|
this.inittree = res.data
|
|
|
init(res.data).then(item => {
|
|
|
- //图层初始化打开状态
|
|
|
- _this.setNodesChecked(item);
|
|
|
console.log('图层控制树列表', _this.treeData)
|
|
|
+
|
|
|
+ //复选框初始化选中
|
|
|
+ _this.$nextTick(() => {
|
|
|
+ _this.$refs.treeRef.setCheckedKeys(_this.checkedkeys, true);
|
|
|
+ });
|
|
|
})
|
|
|
-
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
@@ -1023,32 +1046,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;
|
|
|
|
