<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="UTF-8">
|
<title>图层控制</title>
|
<link href="../../libs/layui/css/layui.css" rel="stylesheet">
|
<script type="text/javascript" src="../../libs/jquery/jquery-3.5.1.min.js"></script>
|
<script type="text/javascript" src="../../libs/layui/layui.js"></script>
|
<script src="../../assets/map/map3DGltf.js"></script>
|
<style>
|
.layui-tree-txt {
|
color: white;
|
}
|
|
.layui-form-checked[lay-skin=primary] i {
|
border-color: #1E9FFF !important;
|
background-color: #1E9FFF;
|
color: #fff;
|
width: 12px !important;
|
height: 12px !important;
|
}
|
|
.layui-icon-file:before {
|
content: "\e642" !important;
|
color: #FFB800;
|
}
|
|
.layui-icon-subtraction:before {
|
content: "\e625" !important;
|
color: white;
|
}
|
|
|
.layui-icon-addition:before {
|
content: "\e623" !important;
|
color: white;
|
}
|
|
.layui-form-checkbox[lay-skin=primary] i {
|
width: 12px;
|
height: 12px;
|
}
|
|
::-webkit-scrollbar-track {
|
background-color: #F5F5F5;
|
}
|
|
::-webkit-scrollbar {
|
width: 6px;
|
height: 10px;
|
background-color: #F5F5F5;
|
}
|
|
::-webkit-scrollbar-thumb {
|
border-radius: 6px;
|
background-color: #999;
|
}
|
|
.layui-tree-btnGroup .layui-icon {
|
display: inline-block;
|
color: white
|
}
|
</style>
|
|
<script>
|
var layerMenu = parent.layerMenu;
|
var isloading = false;
|
layui.use(['tree'], function () {
|
var tree = layui.tree
|
isloading = true;
|
var modelTree = tree.render({
|
elem: '#model-tree-list'
|
, data: layerMenu
|
, edit: ["del"]
|
, showCheckbox: true //是否显示复选框
|
, id: 'model-tree-list'
|
, isJump: false //是否允许点击节点时弹出新窗口跳转
|
, onlyIconControl: true
|
, click: function (obj) {
|
if (isloading) {
|
return;
|
}
|
if (obj.data.isloading == false) {
|
addTiles2(obj.data);
|
obj.data.isloading = true;
|
obj.data.spread = true;
|
refreshTree();
|
changeChildrenChecked(obj.data.checked, obj.data);
|
}
|
var type = obj.data.field;
|
var data = obj.data.ext; //获取当前点击的节点数据
|
var viewer = parent.viewer;
|
var Cesium = parent.Cesium;
|
if (type != 'BaseMap' && type != 'Terrain' && type != 'Plotting' && type != 'DDE') {
|
var model = undefined;
|
switch (obj.data.field) {
|
case "Primitive": {
|
model = parent.getprimitiveModel(obj.data.id);
|
parent.currentProjectId = obj.data.ext.projectId;
|
break;
|
}
|
case "Project": {
|
parent.currentProjectId = obj.data.id;
|
break;
|
}
|
case "Entity": {
|
model = parent.getentityModel(obj.data.id);
|
break;
|
}
|
case "3DTile": {
|
model = parent.get3DTileSet(obj.data.ext.tilesId);
|
//parent.currentProjectId = obj.data.ext.projectId;
|
break;
|
}
|
case "shpFeature": {
|
console.log("shpFeature click");
|
|
}
|
}
|
if (model != undefined) {
|
viewer.flyTo(model, {
|
offset: {
|
heading: 0,
|
pitch: -90
|
},
|
}).then(function () {
|
// if (obj.data.field == 'Primitive') {
|
// setTimeout(() => {
|
// dptiles(model.root.children);
|
// }, 5000);
|
// }
|
});
|
}
|
|
}
|
else if (type == 'DDE') {
|
var lon, lat, alt;
|
lon = obj.data.lon;
|
lat = obj.data.lat;
|
alt = obj.data.altitude;
|
console.log(lon, lat, alt);
|
if (lon != undefined && lat != undefined && alt != undefined) {
|
let flyPromise = viewer.camera.flyTo({
|
duration: 3,
|
destination: Cesium.Cartesian3.fromDegrees(Number(lon), Number(lat), alt),
|
orientation: {
|
heading: Cesium.Math.toRadians(0), //绕垂直于地心的轴旋转
|
pitch: Cesium.Math.toRadians(-90), //绕纬度线旋转
|
roll: Cesium.Math.toRadians(0) //绕经度线旋转
|
},
|
});
|
}
|
}
|
}
|
, oncheck: function (obj) {
|
if (isloading) {
|
return;
|
}
|
var ischeck = obj.checked;
|
var objData = obj.data;
|
var type = objData.field;
|
|
if (type == "shpFeature") {//如果是 shp图层
|
if (ischeck) {
|
let data = obj.data.ext;
|
|
let path = data.path;
|
let shpArray = JSON.parse(path);
|
var shpPromises = [];
|
for (let i = 0; i < shpArray.length; i++) {
|
shpPromises.push(parent.Cesium.loadBlob(parent.httpConfig.nginxUrl + shpArray[i]));
|
}
|
|
//判断是否存在
|
let len = parent.viewer.imageryLayers.length;
|
if (parent.layerMap.get(obj.data.id) != null) {
|
parent.vMsg.warning("图层已经存在无需重复加载");
|
return;
|
}
|
|
var layer = null;
|
parent.Cesium.when.all(shpPromises, function (files) {
|
for (let i = 0; i < shpArray.length; i++) {
|
files[i].name = shpArray[i];
|
}
|
|
var shpProvider = new parent.VectorTileImageryProvider({
|
source: files,
|
zIndex: len,
|
removeDuplicate: false,
|
defaultStyle: {
|
outlineColor: data.color,
|
fillColor: data.color,
|
lineWidth: 1,
|
fill: true,
|
tileCacheSize: 200,
|
showMaker: true,
|
showCenterLabel: true,
|
fontColor: "rgba(255,0,0,1)",
|
labelOffsetX: -10,
|
labelOffsetY: -5,
|
fontSize: 13,
|
fontFamily: "黑体",
|
centerLabelPropertyName: "NAME",
|
lineCap: "round",
|
shadowColor: "black",
|
shadowOffsetX: 1,
|
shadowOffsetY: -1,
|
shadowBlur: 1,
|
lineJoin: "round"
|
},
|
maximumLevel: 20,
|
minimumLevel: 1,
|
simplify: false
|
});
|
shpProvider.readyPromise.then(function () {
|
parent.layerMap.set(obj.data.id, len);
|
layer = parent.viewer.imageryLayers.addImageryProvider(shpProvider, len);
|
|
parent.viewer.flyTo(layer);
|
parent.Cesium.Camera.DEFAULT_VIEW_RECTANGLE = shpProvider.rectangle;
|
|
});
|
|
});
|
} else {//移除shp
|
var id = obj.data.id;
|
var index = parent.layerMap.get(id);
|
|
parent.viewer.imageryLayers.remove(parent.viewer.imageryLayers.get(index), true);
|
parent.layerMap.delete(id);
|
for (let key of parent.layerMap.keys()) {//数组的游标-1
|
if (parent.layerMap.get(key) > index) {
|
parent.layerMap.set(key, parent.layerMap.get(key) - 1);
|
}
|
}
|
}
|
|
}
|
|
if (type != 'BaseMap' && type != 'Terrain' && type != 'Plotting') {
|
//changeChecked(ischeck, parent.getNodeById(objData.id));
|
/*
|
ischeck 为 true
|
需要将子节点置为 true
|
ischeck 为 false
|
需要将子节点和父节点都置为 false
|
*/
|
if (obj.data.isloading == false) {
|
addTiles2(obj.data);
|
obj.data.isloading = true;
|
obj.data.spread = true;
|
obj.data.checked = true;
|
refreshTree();
|
}
|
|
changeChildrenChecked(ischeck, obj.data);
|
if (ischeck == false) {
|
changeParentChecked(ischeck, obj.data);
|
}
|
} else {
|
//基本底图 地形 注记的改变是勾选时才响应事件
|
if (ischeck) {
|
let oid = String(objData.id);
|
var data = layerMenu[Number(oid.substr(0, 1)) - 1].children;
|
switch (type) {
|
case 'BaseMap': {
|
parent.changeBaseLayer(Number(oid.substr(1)));
|
break;
|
}
|
case 'Terrain': {
|
parent.changeTerrainLayer(Number(oid.substr(1)));
|
break;
|
}
|
case 'Plotting': {
|
parent.changePlottingLayer(Number(oid.substr(1)));
|
break;
|
}
|
}
|
//基本底图 地形 注记的各项是互斥的
|
if (objData.id > 3) {
|
var dom = $('div[data-id=' + obj.data.id + ']');
|
var domParent = $(dom).parent();
|
var children = $(domParent).children();
|
for (let i = 0; i < children.length; i++) {
|
let child = children[i];
|
var input = $(child).find('input[same="layuiTreeCheck"]');
|
var reInput = input.next();
|
if (input[0].checked && child.dataset.id != objData.id) {
|
reInput.click();
|
data[i].checked = false;
|
}
|
if (child.dataset.id == objData.id) {
|
data[i].checked = true;
|
}
|
}
|
}
|
}
|
}
|
}
|
, operate: function (obj) {
|
var type = obj.type;
|
if (type === "del") {
|
var modelId = obj.data.id;
|
var modelType = obj.data.field;
|
if (modelType != 'BaseMap' && modelType != 'Terrain' && modelType != 'Plotting') {
|
let result = modelType == 'Primitive' ? parent.delprimitiveModel(modelId) : parent.delentityModel(modelId);
|
}
|
parent.delNodeById(modelId, layerMenu);
|
delDrawEntity(modelId);
|
}
|
}
|
});
|
isloading = false;
|
function changeChildrenChecked(ischeck, tdata) {
|
var N = new Array();
|
N.push(tdata);
|
while (N.length > 0) {
|
var data = N.shift();
|
if (data.children != null && data.children != undefined) {
|
for (var i in data.children) {
|
N.push(data.children[i]);
|
}
|
}
|
data.checked = ischeck;
|
var model = undefined;
|
switch (data.field) {
|
case 'Primitive': {
|
model = parent.getprimitiveModel(data.id);
|
if (model != undefined) {
|
model.show = ischeck;
|
}
|
break;
|
}
|
case 'Entity': {
|
model = parent.getentityModel(data.id);
|
if (model != undefined) {
|
model.show = ischeck;
|
}
|
break;
|
}
|
case '3DTile': {
|
if (ischeck == true) {
|
model = parent.getprimitiveModel(data.parentId);
|
if (model != undefined) {
|
model.show = ischeck;
|
}
|
}
|
var tile = parent.get3DTile(data.ext.tilesId, data.url);
|
if (tile != undefined) {
|
// tile.children[0]._content._batchTable.setAllShow(ischeck);
|
tile.children[0]._content._model.show = ischeck;
|
}
|
break;
|
}
|
|
}
|
}
|
}
|
function changeParentChecked(ischeck, data) {
|
var parentOfData = parent.getParentByChildrenId(data.id);
|
if (parentOfData != null && parentOfData != undefined) {
|
parentOfData.checked = ischeck;
|
changeParentChecked(ischeck, parentOfData);
|
}
|
}
|
//zzf:隐藏除绘图菜单以外的删除按钮
|
$(modelTree.config.elem[0].children[0].childNodes).each(function () {
|
let parentDiv = $(this)[0].childNodes[0];
|
$(parentDiv).find("div .layui-icon-delete").remove();
|
if ($(this)[0].dataset.id != "4") {
|
let childrenDiv = $(this)[0].childNodes[1];
|
$(childrenDiv).find("div .layui-icon-delete").remove();
|
}
|
})
|
function delDrawEntity(modelId) {
|
let updateData = {
|
"ids": modelId,
|
}
|
let token = window.localStorage.getItem("token");
|
$.ajax({
|
type: "post",
|
async: false,
|
url: parent.httpConfig.webApiUrl + "landstamp/front/removeDrawEntity",
|
data: updateData,
|
contentType: "application/x-www-form-urlencoded",
|
beforeSend: function (request) {
|
request.setRequestHeader("token", token);
|
},
|
success: function (data) {
|
console.log(data)
|
},
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
console.log("ajax请求失败！");
|
}
|
});
|
}
|
});
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="model-tree-list" id="model-tree-list">
|
|
</div>
|
|
<script>
|
updateProjects();
|
function refreshTree() {
|
layui.use(['tree'], function () {
|
var tree = layui.tree;
|
isloading = true;
|
// tree.reload('model-tree-list', { data: layerMenu });
|
tree.reload('model-tree-list');
|
isloading = false;
|
});
|
}
|
function updateProjects() {
|
var sessionId = window.localStorage.getItem("JSESSIONID");
|
var token = window.localStorage.getItem("token");
|
//加载 shp
|
$.ajax({
|
type: "get",
|
async: false,
|
url: parent.httpConfig.webApiUrl + "landstamp/front/shpLayer",
|
contentType: "application/json;charset=utf-8",
|
beforeSend: function (request) {
|
request.setRequestHeader("token", token);
|
},
|
success: function (data) {
|
if (parent.getRootById(data.id) == null) {
|
data.isloading = false;
|
layerMenu.push(data);
|
}
|
},
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
console.log(errorThrown);
|
}
|
});
|
|
//加载项目树结构
|
$.ajax({
|
type: "get",
|
async: false,
|
url: parent.httpConfig.webApiUrl + "landstamp/front/layerTree",
|
contentType: "application/json;charset=utf-8",
|
beforeSend: function (request) {
|
request.setRequestHeader("token", token);
|
},
|
success: function (data) {
|
for (let i in data) {
|
if (parent.getRootById(data[i].id) == null) {
|
data[i].isloading = false;
|
layerMenu.push(data[i]);
|
}
|
}
|
},
|
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
console.log(errorThrown);
|
}
|
});
|
|
}
|
function addTiles(data) {
|
var promise = new Promise(function (res, rej) {
|
for (var i = 0; i < data.length; i++) {
|
var children = data[i].children;
|
for (var j = 0; j < children.length; j++) {
|
var tilesnode = children[j];
|
var id = tilesnode.id;
|
var tilesUrl = parent.httpConfig.nginxUrl + tilesnode.ext.tilesUrl;
|
var tilesType = tilesnode.ext.tilesType;
|
var lng = tilesnode.ext.lng;
|
var lat = tilesnode.ext.lat;
|
var x = tilesnode.ext.tilesX == null ? 0 : tilesnode.ext.tilesX;
|
var y = tilesnode.ext.tilesY == null ? 0 : tilesnode.ext.tilesY;
|
var z = tilesnode.ext.tilesZ == null ? 0 : tilesnode.ext.tilesZ;
|
|
var options = {
|
"id": id,
|
"url": tilesUrl,
|
"tilesType": tilesType,
|
"lng": lng,
|
"lat": lat,
|
"x": x,
|
"y": y,
|
"z": z
|
};
|
var tileset = parent.add3dtiles(options);
|
// tileset.readyPromise.then(function () {
|
// dptiles(tileset.root.children)
|
// })
|
|
$.ajax({
|
type: "get",
|
async: false,
|
url: tilesUrl,
|
dataType: "json",
|
success: function (data) {
|
for (var k = 0; k < data.root.children.length; k++) {
|
var tilemodel = data.root.children[k];
|
var tileUrl = tilemodel.content.url;
|
var pos1 = tileUrl.indexOf("Batched");
|
var pos2 = tileUrl.indexOf("/");
|
if (pos1 != -1 && pos2 != -1) {
|
pos1 = pos1 + 7;
|
var titlename = tileUrl.slice(pos1, pos2);
|
var tilenode = {
|
"title": titlename,
|
"id": id + titlename,
|
"field": "3DTile",
|
"checked": true,
|
"spread": true,
|
"children": [],
|
"parentId": id,
|
"url": tileUrl,
|
"ext": {
|
"projectId": tilesnode.ext.projectId,
|
"lng": lng,
|
"lat": lat,
|
"tilesId": id
|
}
|
};
|
parent.addTreeNode(tilenode, id);
|
}
|
}
|
},
|
error: function (data) {
|
console.log("ajax请求失败！");
|
}
|
});
|
}
|
}
|
});
|
return promise;
|
}
|
function addTiles2(data) {
|
var promise = new Promise(function (res, rej) {
|
var children = data.children;
|
for (var j = 0; j < children.length; j++) {
|
var tilesnode = children[j];
|
var id = tilesnode.id;
|
var tilesUrl = parent.httpConfig.nginxUrl + tilesnode.ext.tilesUrl;
|
var tilesType = tilesnode.ext.tilesType;
|
var lng = tilesnode.ext.lng;
|
var lat = tilesnode.ext.lat;
|
var x = tilesnode.ext.tilesX == null ? 0 : tilesnode.ext.tilesX;
|
var y = tilesnode.ext.tilesY == null ? 0 : tilesnode.ext.tilesY;
|
var z = tilesnode.ext.tilesZ == null ? 0 : tilesnode.ext.tilesZ;
|
|
var options = {
|
"id": id,
|
"url": tilesUrl,
|
"tilesType": tilesType,
|
"lng": lng,
|
"lat": lat,
|
"x": x,
|
"y": y,
|
"z": z
|
};
|
var tileset = parent.add3dtiles(options);
|
$.ajax({
|
type: "get",
|
async: false,
|
url: tilesUrl,
|
dataType: "json",
|
success: function (data) {
|
for (var k = 0; k < data.root.children.length; k++) {
|
var tilemodel = data.root.children[k];
|
var tileUrl = tilemodel.content.url;
|
var pos1 = tileUrl.indexOf("Batched");
|
var pos2 = tileUrl.indexOf("/");
|
if (pos1 != -1 && pos2 != -1) {
|
pos1 = pos1 + 7;
|
var titlename = tileUrl.slice(pos1, pos2);
|
var tilenode = {
|
"title": titlename,
|
"id": id + titlename,
|
"field": "3DTile",
|
"checked": false,
|
"spread": true,
|
"children": [],
|
"parentId": id,
|
"url": tileUrl,
|
"ext": {
|
"projectId": tilesnode.ext.projectId,
|
"lng": lng,
|
"lat": lat,
|
"tilesId": id
|
}
|
};
|
parent.addTreeNode(tilenode, id);
|
}
|
}
|
},
|
error: function (data) {
|
console.log("ajax请求失败！");
|
}
|
});
|
}
|
|
});
|
return promise;
|
}
|
|
function dptiles(tiles) {
|
for (var i in tiles) {
|
tiles[i].contentReadyPromise.then(function () {
|
if (tiles[i].content != undefined) {
|
var pnode = parent.getNodeById(tiles[i].tileset._id);
|
var node = {
|
"title": tiles[i].content.batchTable._properties.名称[0],
|
"id": 'tile' + tiles[i].content.batchTable._pickIds[0].key,
|
"field": "3DTile",
|
"checked": true,
|
"spread": true,
|
"children": [],
|
"ext": {
|
"lng": pnode.ext.lng,
|
"lat": pnode.ext.lat,
|
"tilesId": pnode.id
|
}
|
};
|
if (pnode.children == null || pnode.children == undefined) {
|
pnode.children = [];
|
}
|
pnode.children.push(node);
|
}
|
})
|
if (tiles[i].children != undefined) {
|
dptiles(tiles[i].children);
|
}
|
}
|
}
|
</script>
|
</body>
|
|
</html>
|
