|
|
@@ -44,128 +44,156 @@
|
|
|
* 树单击事件
|
|
|
*/
|
|
|
handleNodeClick(treeNode) {
|
|
|
+ if (treeNode.parentid != 'CIM') {
|
|
|
|
|
|
- let _self = this;
|
|
|
+ //清除高亮显示
|
|
|
+ let list = jt3d._dataSources.getByName("单击高亮显示")
|
|
|
+ list.forEach(res => {
|
|
|
+ jt3d._dataSources.remove(res)
|
|
|
+ })
|
|
|
+
|
|
|
+ var field = treeNode.field;
|
|
|
+ var properties = treeNode.data.properties;
|
|
|
+ let geometry = treeNode.data.geometry;
|
|
|
+
|
|
|
+ //详细信息
|
|
|
+ this.createContent(field, properties);
|
|
|
+ //定位
|
|
|
+ this.location(geometry);
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
+ //信息展示
|
|
|
+ createContent(field, properties) {
|
|
|
+ let strHtml = "";
|
|
|
+ strHtml += "<table style='z-index:100;width:98%';border:2px solid #fff;>";
|
|
|
+ strHtml += "<thead>";
|
|
|
+ strHtml += "<tr>";
|
|
|
+ strHtml += "<th>属性名</th>";
|
|
|
+ strHtml += "<th>属性值</th>";
|
|
|
+ strHtml += "</tr> ";
|
|
|
+ strHtml += " </thead>";
|
|
|
+ strHtml += "<tbody>";
|
|
|
|
|
|
- if (treeNode.parentid != 'CIM') {
|
|
|
+ field.forEach(itemField => {
|
|
|
+ if (itemField.isDisplay === 1) {
|
|
|
+ var fieldDesc = itemField.fieldDescription || itemField.fieldName;
|
|
|
+ var fieldVals = properties[itemField.fieldName];
|
|
|
|
|
|
- //清除高亮显示
|
|
|
- let list = jt3d._dataSources.getByName("单击高亮显示")
|
|
|
- list.forEach(res => {
|
|
|
- jt3d._dataSources.remove(res)
|
|
|
- })
|
|
|
+ //日期格式
|
|
|
+ if (itemField.fieldType === 1) {
|
|
|
+ let time = new Date(fieldVals).getTime();
|
|
|
+ fieldVals = formattingTime(time);
|
|
|
+ }
|
|
|
|
|
|
- //高亮显示并定位显示详细信息
|
|
|
- if(treeNode.data.geometry.type == 'Point'){
|
|
|
- let strHtml = "";
|
|
|
- strHtml += "<table style='z-index:100;width:98%';border:2px solid #fff;>";
|
|
|
- strHtml += "<thead>";
|
|
|
+ if (fieldVals != null && fieldVals != "" && fieldVals != undefined) {
|
|
|
strHtml += "<tr>";
|
|
|
- strHtml += "<th>属性名</th>";
|
|
|
- strHtml += "<th>属性值</th>";
|
|
|
- strHtml += "</tr> ";
|
|
|
- strHtml += " </thead>";
|
|
|
- strHtml += "<tbody>";
|
|
|
-
|
|
|
- var field = treeNode.field;
|
|
|
- var properties = treeNode.data.properties
|
|
|
- field.forEach(itemField => {
|
|
|
- if (itemField.isDisplay === 1) {
|
|
|
- var fieldDesc = itemField.fieldDescription || itemField
|
|
|
- .fieldName;
|
|
|
- var fieldVals = properties[itemField.fieldName];
|
|
|
-
|
|
|
- //日期格式
|
|
|
- if (itemField.fieldType === 1) {
|
|
|
- let time = new Date(fieldVals).getTime();
|
|
|
- fieldVals = formattingTime(time);
|
|
|
- }
|
|
|
-
|
|
|
- if (fieldVals != null && fieldVals != "" && fieldVals !=
|
|
|
- undefined) {
|
|
|
- strHtml += "<tr>";
|
|
|
- strHtml += "<td>" + fieldDesc + "</td>";
|
|
|
- strHtml += "<td>" + fieldVals + "</td>";
|
|
|
- strHtml += "</tr>";
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- strHtml += "</tbody>";
|
|
|
- strHtml += "</table>";
|
|
|
- let divb = document.getElementById('detailDiv')
|
|
|
- divb.innerHTML = strHtml; //设置显示的数据，可以是标签．
|
|
|
- }else if(treeNode.data.geometry.type == "MultiPolygon"){
|
|
|
- this.polygon(treeNode)
|
|
|
+ strHtml += "<td>" + fieldDesc + "</td>";
|
|
|
+ strHtml += "<td>" + fieldVals + "</td>";
|
|
|
+ strHtml += "</tr>";
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- resolve(1)
|
|
|
- })
|
|
|
+ });
|
|
|
+ strHtml += "</tbody>";
|
|
|
+ strHtml += "</table>";
|
|
|
+ let divb = document.getElementById('detailDiv')
|
|
|
+ divb.innerHTML = strHtml; //设置显示的数据，可以是标签．
|
|
|
},
|
|
|
-
|
|
|
- polygon(treeNode){
|
|
|
- jt3d.PolygonObject.generatePolygonByPoints(treeNode.data.geometry.coordinates[0][0], {
|
|
|
- color: [255, 0, 255, 0],
|
|
|
- outline: true,
|
|
|
- outlineWidth: 5,
|
|
|
- outlineColor: [0, 255, 180, 1]
|
|
|
- }).then((locationEntity) => {
|
|
|
- // 初始化定位参数
|
|
|
- let options = {};
|
|
|
- options.duration = Cesium.defaultValue(options.duration, 2);
|
|
|
- options.heading = Cesium.defaultValue(options.heading, 0);
|
|
|
- options.pitch = Cesium.defaultValue(options.pitch, -60);
|
|
|
- options.range = Cesium.defaultValue(options.range, 800.0);
|
|
|
-
|
|
|
- let flyToEntity = jt3d.LocateUtil.flyToEntity(locationEntity, options);
|
|
|
- flyToEntity.then(function(flag) {
|
|
|
- //详细信息
|
|
|
- let strHtml = "";
|
|
|
- strHtml += "<table>";
|
|
|
- strHtml += "<thead>";
|
|
|
- strHtml += "<tr>";
|
|
|
- strHtml += "<th>属性名</th>";
|
|
|
- strHtml += "<th>属性值</th>";
|
|
|
- strHtml += "</tr> ";
|
|
|
- strHtml += " </thead>";
|
|
|
- strHtml += "<tbody>";
|
|
|
-
|
|
|
- var field = treeNode.field;
|
|
|
- var properties = treeNode.data.properties
|
|
|
- field.forEach(itemField => {
|
|
|
- if (itemField.isDisplay === 1) {
|
|
|
- var fieldDesc = itemField.fieldDescription || itemField
|
|
|
- .fieldName;
|
|
|
- var fieldVals = properties[itemField.fieldName];
|
|
|
-
|
|
|
- //日期格式
|
|
|
- if (itemField.fieldType === 1) {
|
|
|
- let time = new Date(fieldVals).getTime();
|
|
|
- fieldVals = formattingTime(time);
|
|
|
- }
|
|
|
-
|
|
|
- if (fieldVals != null && fieldVals != "" && fieldVals !=
|
|
|
- undefined) {
|
|
|
- strHtml += "<tr>";
|
|
|
- strHtml += "<td>" + fieldDesc + "</td>";
|
|
|
- strHtml += "<td>" + fieldVals + "</td>";
|
|
|
- strHtml += "</tr>";
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ //定位
|
|
|
+ location(geometry) {
|
|
|
+ let _self = this;
|
|
|
+ //先创建一个CustomDataSource源，然后把entity存入这里面
|
|
|
+ let dataSources = new Cesium.CustomDataSource("单击高亮显示");
|
|
|
+ jt3d._dataSources.add(dataSources);
|
|
|
+
|
|
|
+ //高亮显示并定位
|
|
|
+ if (geometry.type == 'Point') {
|
|
|
+ let coordinates = geometry.coordinates;
|
|
|
+
|
|
|
+ //点
|
|
|
+ let position = Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2] || 0);
|
|
|
+ // let point = jt3d.PointObject.addBillboard(position).then(function(entity) {
|
|
|
+ // dataSources.entities.add(entity);
|
|
|
+
|
|
|
+ // //定位
|
|
|
+ // _self.flyToEntity(entity, {
|
|
|
+ // duration: 3,
|
|
|
+ // heading: 200,
|
|
|
+ // pitch: -80,
|
|
|
+ // range: 1000
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+
|
|
|
+ //动态圆
|
|
|
+ let circleObject = new this.jt3dSDK.CircleObject(jt3d._viewer);
|
|
|
+ circleObject.drawCircle([coordinates[0], coordinates[1], coordinates[2] || 0], 10, {
|
|
|
+ color: [255, 0, 0, 1],
|
|
|
+ outline: true,
|
|
|
+ outlineColor: [255, 255, 255, 1],
|
|
|
+ outlineWidth: 1,
|
|
|
+ CircleType: 'DynamicCircle',
|
|
|
+ count: 2,
|
|
|
+ duration: 4000
|
|
|
+ }).then(function(entity) {
|
|
|
+
|
|
|
+ dataSources.entities.add(entity);
|
|
|
+
|
|
|
+ //定位到点
|
|
|
+ jt3d.LocateUtil.flyToPoint({
|
|
|
+ longitude: coordinates[0],
|
|
|
+ latitude:coordinates[1],
|
|
|
+ height: coordinates[2],
|
|
|
+ duration: 3,
|
|
|
+ heading: 100,
|
|
|
+ pitch: -80,
|
|
|
+ range: 300,
|
|
|
+ }).then(function(flag) {
|
|
|
+
|
|
|
});
|
|
|
-
|
|
|
- strHtml += "</tbody>";
|
|
|
- strHtml += "</table>";
|
|
|
-
|
|
|
- let divb = document.getElementById('detailDiv')
|
|
|
- divb.innerHTML = strHtml; //设置显示的数据，可以是标签．
|
|
|
-
|
|
|
});
|
|
|
- });
|
|
|
- }
|
|
|
|
|
|
+ } else if (geometry.type == 'MultiPoint') {
|
|
|
+
|
|
|
+ } else if (geometry.type == "MultiPolygon") {
|
|
|
+
|
|
|
+ } else if (geometry.type == "MultiLineString") {
|
|
|
+
|
|
|
+ let coordinatesList = geometry.coordinates;
|
|
|
+ for (var j = 0; j < coordinatesList.length; j++) {
|
|
|
+ let coordinates = coordinatesList[j];
|
|
|
+ let positions = coordinates.map(point => {
|
|
|
+ return Cesium.Cartesian3.fromDegrees(point[0], point[1], point[2] || 0);
|
|
|
+ });
|
|
|
+
|
|
|
+ let line = jt3d.PolylineObject.addPolyline(positions, {
|
|
|
+ color: [255, 255, 0, 0.8]
|
|
|
+ }).then(function(entity) {
|
|
|
+ dataSources.entities.add(entity);
|
|
|
+
|
|
|
+ //定位
|
|
|
+ _self.flyToEntity(entity, {
|
|
|
+ duration: 3,
|
|
|
+ heading: 200,
|
|
|
+ pitch: -80,
|
|
|
+ range: 1000
|
|
|
+ })
|
|
|
+
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //定位飞行飞行
|
|
|
+ flyToEntity(entity, options) {
|
|
|
+ let flyToEntity = jt3d.LocateUtil.flyToEntity(entity, options);
|
|
|
+ flyToEntity.then(function(entity) {
|
|
|
+ if (entity.point) {
|
|
|
+ jt3d._viewer.entities.remove(entity);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {}
|
|
|
}
|
|
|
@@ -178,12 +206,12 @@
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
z-index: 100000;
|
|
|
-
|
|
|
+
|
|
|
// overflow-y: hidden;
|
|
|
._right {
|
|
|
// overflow-y: hidden;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
//左侧树
|
|
|
&>div:nth-child(1) {
|
|
|
position: absolute;
|
|
|
@@ -194,40 +222,40 @@
|
|
|
float: left;
|
|
|
overflow: auto !important;
|
|
|
border-right: 5rem solid #ddd;
|
|
|
-
|
|
|
+
|
|
|
.el-tree {
|
|
|
background: rgb(28 59 112 / 0%);
|
|
|
height: calc(100% - 2rem);
|
|
|
color: #fff;
|
|
|
--el-tree-node-hover-bg-color: #2a67c3;
|
|
|
--el-font-size-base: 14rem;
|
|
|
-
|
|
|
+
|
|
|
.overflowtext {
|
|
|
width: auto !important;
|
|
|
padding: 0;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
.tree-line {
|
|
|
.el-tree-node {
|
|
|
position: relative;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.el-tree-node__children {
|
|
|
padding-left: 16rem !important; // 缩进量
|
|
|
-
|
|
|
+
|
|
|
.el-tree-node__content {
|
|
|
padding-left: 18rem !important;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
//高亮显示选中样式
|
|
|
.el-tree-node.is-current>.el-tree-node__content {
|
|
|
background: #2a67c3;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 竖线
|
|
|
.el-tree-node::before {
|
|
|
content: "";
|
|
|
@@ -239,12 +267,12 @@
|
|
|
border-width: 1rem;
|
|
|
border-left: 1rem dashed rgba(255, 255, 255, .8);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 当前层最后一个节点的竖线高度固定
|
|
|
.el-tree-node:last-child::before {
|
|
|
height: 38rem; // 可以自己调节到合适数值
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 横线
|
|
|
.el-tree-node::after {
|
|
|
content: "";
|
|
|
@@ -256,20 +284,20 @@
|
|
|
border-width: 1rem;
|
|
|
border-top: 1rem dashed rgba(255, 255, 255, .8);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
|
|
&>.el-tree-node::after {
|
|
|
border-top: none;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
&>.el-tree-node::before {
|
|
|
border-left: none;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 展开关闭的icon
|
|
|
.el-tree-node__expand-icon {
|
|
|
font-size: 16rem;
|
|
|
-
|
|
|
+
|
|
|
// 叶子节点（无子节点）
|
|
|
&.is-leaf {
|
|
|
color: transparent;
|
|
|
@@ -277,9 +305,9 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
//右侧基本信息
|
|
|
&>div:nth-child(2) {
|
|
|
position: absolute;
|
|
|
@@ -292,7 +320,7 @@
|
|
|
font-size: 14rem;
|
|
|
padding-top: 5rem;
|
|
|
overflow: auto;
|
|
|
-
|
|
|
+
|
|
|
table {
|
|
|
border-collapse: collapse;
|
|
|
margin: 0 auto;
|
|
|
@@ -301,40 +329,40 @@
|
|
|
height: 100%;
|
|
|
border-right: 2px solid rgb(221, 221, 221);
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table td,
|
|
|
table th {
|
|
|
// border: 1rem solid #ddd;
|
|
|
color: #fff;
|
|
|
height: 30rem;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table thead th {
|
|
|
background-color: rgb(28 59 112 / 100%);
|
|
|
border: 2rem solid #ddd;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table tr:nth-child(odd) {
|
|
|
background: rgb(40 89 172 / 60%);
|
|
|
border-left: 2rem solid #ddd;
|
|
|
border-right: 2rem solid #ddd;
|
|
|
border-bottom: 1rem solid #ddd;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table tr:nth-child(even) {
|
|
|
background: rgb(28 59 112 / 60%);
|
|
|
border-left: 2rem solid #ddd;
|
|
|
border-right: 2rem solid #ddd;
|
|
|
border-bottom: 1rem solid #ddd;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// thead 表头固定，tbody 滚动
|
|
|
table>thead>tr {
|
|
|
display: table;
|
|
|
width: 100%;
|
|
|
table-layout: fixed;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table>tbody {
|
|
|
display: block;
|
|
|
height: 340rem;
|
|
|
@@ -343,7 +371,7 @@
|
|
|
/* 当垂直内容超出显示高度时以滚动条形式展示 */
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table>tbody>tr {
|
|
|
/* 将tr设置为table元素,以此达到内容沾满table的效果 */
|
|
|
display: table;
|
|
|
@@ -352,7 +380,7 @@
|
|
|
/* 设置table-layout为fixed以达到首行和内容行对其的效果 */
|
|
|
table-layout: fixed;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
table>tbody>tr>td {
|
|
|
border-right: 2rem solid #ddd;
|
|
|
}
|
