635 lines
17 KiB
JavaScript
635 lines
17 KiB
JavaScript
"use script"; //开发环境建议开启严格模式
|
|
|
|
//对应widget.js中MyWidget实例化后的对象
|
|
var thisWidget;
|
|
|
|
//当前页面业务
|
|
function initWidgetView(_thisWidget) {
|
|
thisWidget = _thisWidget;
|
|
|
|
//清除所有标号
|
|
$("#btn_plot_delall").click(function () {
|
|
thisWidget.deleteAll();
|
|
// tab2plot()
|
|
});
|
|
$("#btn_plot_end").click(function (e) {
|
|
thisWidget.endDraw();
|
|
});
|
|
|
|
$("#btn_plot_socket").click(function (e) {
|
|
thisWidget.socketConfig();
|
|
});
|
|
|
|
//是否可以编辑
|
|
var isedit = true;
|
|
$("#btn_plot_isedit").click(function () {
|
|
isedit = !isedit;
|
|
|
|
if (isedit) {
|
|
$(this).removeClass("active");
|
|
$(this).children().removeClass("fa-lock").addClass("fa-unlock");
|
|
} else {
|
|
$(this).addClass("active");
|
|
$(this).children().removeClass("fa-unlock").addClass("fa-lock");
|
|
}
|
|
thisWidget.hasEdit(isedit);
|
|
});
|
|
|
|
var isPopup = false;
|
|
$("#btn_plot_ispopup").click(function () {
|
|
isPopup = !isPopup;
|
|
|
|
if (isPopup) {
|
|
$(this).removeClass("active");
|
|
$(this).children().removeClass("fa-file-text").addClass("fa-file-text-o");
|
|
} else {
|
|
$(this).addClass("active");
|
|
$(this).children().removeClass("fa-file-text-o").addClass("fa-file-text");
|
|
}
|
|
thisWidget.hasPopup(isPopup);
|
|
});
|
|
|
|
plotFile.initEvent();
|
|
plotlist.bindSelList();
|
|
treeWork.initEvent();
|
|
}
|
|
|
|
//文件处理
|
|
var plotFile = {
|
|
initEvent: function () {
|
|
var that = this;
|
|
|
|
$("#btn_plot_openfile").click(function () {
|
|
that.openPlotFile({ clear: true });
|
|
});
|
|
|
|
$("#btn_plot_openfile2").click(function () {
|
|
that.openPlotFile({ clear: false });
|
|
});
|
|
|
|
$("#btn_plot_savefile").click(function () {
|
|
thisWidget.downloadJson("标绘");
|
|
});
|
|
|
|
$("#input_plot_file").change(function (e) {
|
|
var file = this.files[0];
|
|
|
|
var fileName = file.name;
|
|
var fileType = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
|
|
|
|
that.loadJsonOptions.symbol = null;
|
|
if (fileType == "json" || fileType == "geojson") {
|
|
let reader = new FileReader();
|
|
reader.readAsText(file, "UTF-8");
|
|
reader.onloadend = function (e) {
|
|
let json = this.result;
|
|
thisWidget.loadGeoJSON(json, that.loadJsonOptions);
|
|
that.clearPlotFile();
|
|
};
|
|
} else if (fileType == "kml") {
|
|
let reader = new FileReader();
|
|
reader.readAsText(file, "UTF-8");
|
|
reader.onloadend = function (e) {
|
|
let strkml = this.result;
|
|
parent.kgUtil.toGeoJSON(strkml).then((geojoson) => {
|
|
console.log("kml2geojson", geojoson);
|
|
that.loadJsonOptions.symbol = that.kmlDefSymbol;
|
|
thisWidget.loadGeoJSON(geojoson, that.loadJsonOptions);
|
|
});
|
|
that.clearPlotFile();
|
|
};
|
|
} else if (fileType == "kmz") {
|
|
//加载input文件控件的二进制流
|
|
parent.kgUtil.toGeoJSON(file).then((geojoson) => {
|
|
console.log("kmz2geojson", geojoson);
|
|
|
|
that.loadJsonOptions.symbol = that.kmlDefSymbol;
|
|
thisWidget.loadGeoJSON(geojoson, that.loadJsonOptions);
|
|
that.clearPlotFile();
|
|
});
|
|
} else {
|
|
toastr.error("暂不支持 " + fileType + " 文件类型的数据！");
|
|
that.clearPlotFile();
|
|
}
|
|
});
|
|
},
|
|
openPlotFile: function (options) {
|
|
this.loadJsonOptions = options;
|
|
this.loadJsonOptions.flyTo = true;
|
|
|
|
$("#input_plot_file").click();
|
|
},
|
|
clearPlotFile: function () {
|
|
if (!window.addEventListener) {
|
|
document.getElementById("input_plot_file").outerHTML += ""; //IE
|
|
} else {
|
|
document.getElementById("input_plot_file").value = ""; //FF
|
|
}
|
|
},
|
|
//kml的默认样式处理
|
|
kmlDefSymbol: function (attr, style, featue) {
|
|
style.clampToGround = true; //贴地
|
|
|
|
let geoType = featue.geometry?.type;
|
|
if (geoType == "Point") {
|
|
return {
|
|
image: "img/marker/di3.png",
|
|
verticalOrigin: 1,
|
|
scale: 0.4,
|
|
clampToGround: true,
|
|
label: {
|
|
text: attr.name,
|
|
font_size: 18,
|
|
color: "#ffffff",
|
|
outline: true,
|
|
outlineColor: "#000000",
|
|
pixelOffsetY: -20,
|
|
scaleByDistance: true,
|
|
scaleByDistance_far: 990000,
|
|
scaleByDistance_farValue: 0.3,
|
|
scaleByDistance_near: 10000,
|
|
scaleByDistance_nearValue: 1,
|
|
},
|
|
};
|
|
}
|
|
return style;
|
|
},
|
|
};
|
|
|
|
//标号列表相关
|
|
var plotlist = {
|
|
//绑定标号列表切换下拉框
|
|
bindSelList: function () {
|
|
var that = this;
|
|
var $sel_plot_list = $("#sel_plot_list");
|
|
$.getJSON("config/plotlist.json", function (plotlist) {
|
|
var inhtml = "";
|
|
var defval;
|
|
var count = 0;
|
|
for (var i in plotlist) {
|
|
inhtml += '<option value="' + i + '">' + i + "(" + plotlist[i].length + ")</option>";
|
|
if (defval == null) {
|
|
defval = i;
|
|
}
|
|
count++;
|
|
}
|
|
var historyval = haoutil.storage.get("plot_list");
|
|
if (historyval) {
|
|
defval = historyval;
|
|
}
|
|
|
|
if (defval && plotlist[defval]) {
|
|
that.showPlotList(plotlist[defval]);
|
|
$sel_plot_list.attr("data-value", defval);
|
|
}
|
|
if (count > 1) {
|
|
$sel_plot_list.html(inhtml);
|
|
$sel_plot_list.select();
|
|
$sel_plot_list.change(function () {
|
|
var val = $(this).attr("data-value");
|
|
var list = plotlist[val];
|
|
that.showPlotList(list);
|
|
|
|
haoutil.storage.add("plot_list", val); //记录历史值
|
|
});
|
|
} else {
|
|
$sel_plot_list.hide();
|
|
$(".mp_mark").css({ "margin-top": "10px" });
|
|
}
|
|
});
|
|
},
|
|
_listData: null,
|
|
showPlotList: function (list) {
|
|
this._listData = list;
|
|
|
|
var inhtml = "";
|
|
for (var i = 0; i < list.length; i++) {
|
|
var item = list[i];
|
|
if (item.hide) {
|
|
continue;
|
|
}
|
|
|
|
//处理模型url
|
|
if (item.style && item.style.url) {
|
|
item.style.url = thisWidget.updateTemplateValues(item.style.url);
|
|
}
|
|
|
|
var defStyle = thisWidget.getDefStyle(item.edittype || item.type);
|
|
|
|
//使用图片图标
|
|
var image;
|
|
if (defStyle) {
|
|
image = defStyle.image;
|
|
}
|
|
if (item.style && item.style.image) {
|
|
image = item.style.image;
|
|
}
|
|
if (item.image) {
|
|
image = item.image;
|
|
}
|
|
|
|
if (image) {
|
|
image = thisWidget.updateTemplateValues(image);
|
|
|
|
if (image.startsWith("http") || image.startsWith("//")) {
|
|
//不用特殊处理
|
|
} else if (image.startsWith("{plotPath}")) {
|
|
image = image.replace("{plotPath}", "."); //是模块内部本级图片
|
|
} else {
|
|
image = "../../" + image; //相对于父级index页面的图片
|
|
}
|
|
inhtml +=
|
|
' <li onclick="plotlist.startPlot(' +
|
|
i +
|
|
',this)"> <i title="' +
|
|
item.name +
|
|
'" > <img src="' +
|
|
image +
|
|
'" onerror="plotlist.imgerrorfun();"/></i></li>';
|
|
}
|
|
// else if (item.style && item.style.html) {
|
|
// inhtml += ' <li onclick="plotlist.startPlot(' + i + ',this)"> <i title="' + item.name + '" > ' + item.style.html + '</i></li>';
|
|
// }
|
|
else {
|
|
//使用字体图标
|
|
var icon;
|
|
var clr = "#000000";
|
|
if (defStyle) {
|
|
icon = defStyle.iconClass;
|
|
clr = defStyle.color;
|
|
}
|
|
if (item.iconClass) {
|
|
icon = item.iconClass;
|
|
}
|
|
if (item.style && item.style.iconClass) {
|
|
icon = item.style.iconClass;
|
|
}
|
|
|
|
if (item.color) {
|
|
clr = item.color;
|
|
}
|
|
if (item.style && item.style.color) {
|
|
clr = item.style.color;
|
|
}
|
|
if (icon) {
|
|
inhtml +=
|
|
'<li onclick="plotlist.startPlot(' + i + ',this)"><i title="' + item.name + '" class="' + icon + '" style="color:' + clr + '"></i></li>';
|
|
} else {
|
|
inhtml +=
|
|
'<li onclick="plotlist.startPlot(' + i + ',this)"><i title="' + item.name + '" style="font-size: 13px;">' + item.name + "</i></li>";
|
|
}
|
|
}
|
|
}
|
|
$("#plotlist").html(inhtml);
|
|
},
|
|
imgerrorfun: function () {
|
|
var img = event.srcElement;
|
|
img.src = "../../../img/favicon/app-icon72x72@2x.png";
|
|
img.onerror = null;
|
|
},
|
|
//激活标绘
|
|
_lastLi: null,
|
|
//开始绘制
|
|
startPlot: function (idx, li) {
|
|
var _thisli = $(li);
|
|
_thisli.addClass("markon");
|
|
if (this._lastLi) {
|
|
this._lastLi.removeClass("markon");
|
|
}
|
|
this._lastLi = _thisli;
|
|
|
|
var item = haoutil.system.clone(this._listData[idx] || {});
|
|
delete item.image;
|
|
|
|
//赋值默认样式
|
|
var defStyle = thisWidget.getDefStyle(item.edittype || item.type);
|
|
if (defStyle) {
|
|
item.style = item.style || {};
|
|
for (var i in defStyle) {
|
|
if (item.style[i] == null) {
|
|
item.style[i] = defStyle[i];
|
|
}
|
|
}
|
|
}
|
|
|
|
//赋值默认属性
|
|
item.attr = {
|
|
id: "",
|
|
name: "",
|
|
remark: "",
|
|
};
|
|
|
|
thisWidget.startDraw(item);
|
|
},
|
|
//绘制结束
|
|
plotEnd: function () {
|
|
//取消选中状态
|
|
if (this._lastLi) {
|
|
this._lastLi.removeClass("markon");
|
|
}
|
|
},
|
|
};
|
|
|
|
//标号树处理
|
|
var objFeature = {};
|
|
var treeObj;
|
|
|
|
var treeWork = {
|
|
initEvent: function () {
|
|
$("#btn_plot_addgroup").click(function (e) {
|
|
thisWidget.editGroupName();
|
|
});
|
|
$("#btn_plot_delAllGroup").click(function (e) {
|
|
thisWidget.deleteEmptyLayer();
|
|
});
|
|
|
|
bindRightMenuEvnet(); //右键
|
|
thisWidget.showLayerTree();
|
|
},
|
|
loadData: function (arrGroup) {
|
|
//初始化树 http://www.treejs.cn/v3/api.php
|
|
var setting = {
|
|
check: {
|
|
enable: true,
|
|
},
|
|
edit: {
|
|
drag: {
|
|
isMove: true,
|
|
},
|
|
showRemoveBtn: false,
|
|
showRenameBtn: false,
|
|
enable: true,
|
|
},
|
|
data: {
|
|
simpleData: {
|
|
enable: true,
|
|
},
|
|
},
|
|
callback: {
|
|
beforeDrag: treeOverlays_beforeDrag,
|
|
beforeDrop: treeOverlays_beforeDrop,
|
|
onDrop: treeOverlays_onDrop,
|
|
onCheck: treeOverlays_onCheck,
|
|
onRightClick: treeOverlays_OnRightClick,
|
|
onClick: treeOverlays_onClick,
|
|
onRemove: treeOverlays_onRemove,
|
|
},
|
|
};
|
|
|
|
//构造树节点
|
|
objFeature = {};
|
|
|
|
var zNodes = [];
|
|
for (var i = 0; i < arrGroup.length; i++) {
|
|
var layer = arrGroup[i];
|
|
var arrGraphic = layer.getGraphics();
|
|
|
|
var name = layer.name + "(" + arrGraphic.length + "个)";
|
|
if (layer.isActivate) {
|
|
name += "-激活";
|
|
}
|
|
var oldNode = treeObj && treeObj.getNodeByParam("id", layer.uuid);
|
|
|
|
//添加分组
|
|
var groupNode = {
|
|
id: layer.uuid,
|
|
pId: layer.pid,
|
|
name: name,
|
|
icon: "img/tree/folder.png",
|
|
isGroup: true,
|
|
checked: layer.show,
|
|
open: oldNode && oldNode.open, //是否展开分组
|
|
};
|
|
|
|
zNodes.push(groupNode);
|
|
|
|
objFeature[groupNode.id] = layer;
|
|
|
|
for (var j = 0, len = arrGraphic.length; j < len; j++) {
|
|
var graphic = arrGraphic[j];
|
|
|
|
//添加标号
|
|
var plotNode = {
|
|
id: graphic.uuid,
|
|
pId: groupNode.id,
|
|
name: graphic.attr?.name || graphic.name || "未命名",
|
|
checked: graphic.show,
|
|
icon: "img/tree/plot.png",
|
|
};
|
|
zNodes.push(plotNode);
|
|
|
|
objFeature[plotNode.id] = graphic;
|
|
}
|
|
}
|
|
|
|
$.fn.zTree.destroy();
|
|
treeObj = $.fn.zTree.init($("#treeOverlays"), setting, zNodes);
|
|
},
|
|
updateNode: function (graphic) {
|
|
var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");
|
|
|
|
var node = treeObj.getNodeByParam("id", graphic.uuid, null);
|
|
if (node) {
|
|
node.name = graphic.attr?.name || graphic.name || "未命名";
|
|
|
|
var show = graphic.isAdded && graphic.show;
|
|
if (node.checked != show) {
|
|
node.checkedOld = node.checked;
|
|
node.checked = show;
|
|
}
|
|
|
|
treeObj.updateNode(node);
|
|
}
|
|
},
|
|
};
|
|
|
|
//===================================单击定位图层====================================
|
|
function treeOverlays_onClick(event, treeId, treeNode) {
|
|
if (treeNode == null || treeNode.id == null) {
|
|
return;
|
|
}
|
|
|
|
var layer = objFeature[treeNode.id];
|
|
if (layer == null) {
|
|
return;
|
|
}
|
|
|
|
thisWidget.flyTo(layer);
|
|
}
|
|
|
|
//===================================勾选显示隐藏图层====================================
|
|
|
|
function treeOverlays_onCheck(e, treeId, setreeNode) {
|
|
//获得所有改变check状态的节点
|
|
var changedNodes = treeObj.getChangeCheckedNodes();
|
|
for (var i = 0; i < changedNodes.length; i++) {
|
|
var treeNode = changedNodes[i];
|
|
treeNode.checkedOld = treeNode.checked;
|
|
|
|
// if (treeNode.check_Child_State == 1) {
|
|
// // 0:无子节点被勾选, 1:部分子节点被勾选, 2:全部子节点被勾选, -1:不存在子节点 或 子节点全部设置为 nocheck = true
|
|
// continue
|
|
// }
|
|
|
|
var layer = objFeature[treeNode.id];
|
|
if (layer == null) {
|
|
continue;
|
|
}
|
|
|
|
layer.show = treeNode.checked;
|
|
}
|
|
}
|
|
|
|
//===================================右键菜单====================================
|
|
var lastRightClickTreeId;
|
|
var lastRightClickTreeNode;
|
|
|
|
function treeOverlays_OnRightClick(event, treeId, treeNode) {
|
|
if (treeNode == null || objFeature[treeNode.id] == null) {
|
|
return;
|
|
}
|
|
|
|
//右击时的节点
|
|
lastRightClickTreeId = treeId;
|
|
lastRightClickTreeNode = treeNode;
|
|
|
|
var top = event.clientY;
|
|
var left = event.clientX;
|
|
var maxtop = document.body.offsetHeight - 100;
|
|
var maxleft = document.body.offsetWidth - 100;
|
|
|
|
if (top > maxtop) {
|
|
top = maxtop;
|
|
}
|
|
if (left > maxleft) {
|
|
left = maxleft;
|
|
}
|
|
|
|
if (treeNode.isGroup) {
|
|
$("#plot_rMenu_group .group").show();
|
|
$("#plot_rMenu_group .plot").hide();
|
|
} else {
|
|
$("#plot_rMenu_group .group").hide();
|
|
$("#plot_rMenu_group .plot").show();
|
|
}
|
|
|
|
$("#plot_rMenu_group")
|
|
.css({
|
|
top: top + "px",
|
|
left: left + "px",
|
|
})
|
|
.show();
|
|
$("body").bind("mousedown", onBodyMouseDown);
|
|
}
|
|
|
|
function bindRightMenuEvnet() {
|
|
$("#plot_rMenu_group li").on("click", function () {
|
|
hideRMenu();
|
|
|
|
var type = $(this).attr("data-type");
|
|
moveNodeAndLayer(type);
|
|
});
|
|
}
|
|
|
|
function onBodyMouseDown(event) {
|
|
if (!(event.target.id == "plot_rMenu_group" || $(event.target).parents("#plot_rMenu_group").length > 0)) {
|
|
hideRMenu();
|
|
}
|
|
}
|
|
|
|
function hideRMenu() {
|
|
$("body").unbind("mousedown", onBodyMouseDown);
|
|
$("#plot_rMenu_group").hide();
|
|
}
|
|
|
|
//移动节点及图层位置
|
|
function moveNodeAndLayer(type) {
|
|
var thisNode = lastRightClickTreeNode;
|
|
var thisLayer = objFeature[thisNode.id];
|
|
|
|
switch (type) {
|
|
default:
|
|
break;
|
|
case "g_act": //置为激活分组
|
|
thisWidget.changeSelectedLayer(thisLayer);
|
|
break;
|
|
case "g_name": //重命名分组
|
|
thisWidget.editGroupName(thisLayer);
|
|
break;
|
|
case "g_del": //删除分组
|
|
// if (thisWidget.checkRemoveGroup(thisLayer)) {
|
|
treeObj.removeNode(thisNode);
|
|
thisWidget.deleteLayer(thisLayer);
|
|
// }
|
|
break;
|
|
case "p_del": //删除标号
|
|
treeObj.removeNode(thisNode);
|
|
thisWidget.deleteEntity(thisLayer);
|
|
break;
|
|
case "g_json": //导出GeoJson
|
|
thisWidget.downloadJson("标绘分组_" + thisNode.name, thisLayer);
|
|
break;
|
|
case "g_kml":
|
|
thisWidget.downloadKml("标绘分组_" + thisNode.name, thisLayer);
|
|
break;
|
|
case "p_json": //导出GeoJson
|
|
thisWidget.downloadJson(thisNode.name, thisLayer);
|
|
break;
|
|
case "p_kml":
|
|
thisWidget.downloadKml(thisNode.name, thisLayer);
|
|
break;
|
|
case "g_imp": //导入GeoJson到分组中
|
|
plotFile.openPlotFile({ layer: thisLayer.name });
|
|
break;
|
|
}
|
|
}
|
|
|
|
//===================================删除处理====================================
|
|
|
|
function treeOverlays_onRemove(event, treeId, treeNode) {
|
|
if (treeNode == null || treeNode.id == null) {
|
|
return;
|
|
}
|
|
|
|
var layer = objFeature[treeNode.id];
|
|
if (layer == null) {
|
|
return;
|
|
}
|
|
|
|
if (treeNode.isGroup) {
|
|
thisWidget.deleteLayer(layer);
|
|
} else {
|
|
thisWidget.deleteEntity(layer);
|
|
}
|
|
}
|
|
|
|
//===================================拖拽调整层次处理====================================
|
|
|
|
function treeOverlays_beforeDrag(treeId, treeNodes) {
|
|
for (var i = 0, l = treeNodes.length; i < l; i++) {
|
|
if (treeNodes[i].isGroup) {
|
|
return false; //禁止拖拽
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
function treeOverlays_beforeDrop(treeId, treeNodes, targetNode, moveType) {
|
|
if (targetNode && targetNode.isGroup) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
} //禁止拖拽到我身上
|
|
}
|
|
|
|
function treeOverlays_onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
|
|
if (!targetNode) {
|
|
return;
|
|
}
|
|
|
|
// var group = targetNode.name //分组名称
|
|
var layerGroup = objFeature[targetNode.id]; //分组
|
|
var graphic = objFeature[treeNodes[0].id];
|
|
|
|
thisWidget.moveToLayer(graphic, layerGroup);
|
|
}
|