/* 2017-12-7 12:41:21 | 修改 木遥(微信: http://marsgis.cn/weixin.html ) */ "use script"; //开发环境建议开启严格模式 //对应widget.js中MyWidget实例化后的对象 var thisWidget; //当前页面业务 function initWidgetView(_thisWidget) { thisWidget = _thisWidget; //清除所有标号 $("#btn_plot_delall").click(function () { thisWidget.deleteAll(); }); $("#btnDelete").click(function (e) { thisWidget.deleteCurrentGraphic(); window.tab2plot(); //切换面板 }); $("#btn_plot_savefile").click(function () { var data = thisWidget.arrFlyTable; if (data == null || data.length == 0) { toastr.warning("当前没有漫游路线数据!"); } else { haoutil.file.downloadFile("漫游路线数据.json", JSON.stringify(data)); } }); $("#btn_plot_importfile").click(function () { $("#input_plot_file").click(); }); function clearPlotFile() { if (!window.addEventListener) { document.getElementById("input_plot_file").outerHTML += ""; //IE } else { document.getElementById("input_plot_file").value = ""; //FF } } $("#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(); if (fileType != "json") { toastr.error("文件类型不合法,请选择json格式标注文件!"); clearPlotFile(); return; } if (window.FileReader) { var reader = new FileReader(); reader.readAsText(file, "UTF-8"); reader.onloadend = function (e) { var json = this.result; clearPlotFile(); if (!json) { haoutil.msg("数据为空,只能导入从“导出”按钮保存的数据。"); return; } var arrFlyTable = JSON.parse(json); if (Array.isArray(arrFlyTable)) { thisWidget.showData(arrFlyTable); tableWork.loadData(arrFlyTable); } else { haoutil.msg("数据格式有误,只能导入从“导出”按钮保存的数据。"); } }; } }); $("#btnSaveGeoJson").click(function () { var id = plotEdit._last_attr.id; thisWidget.stopDraw(); for (var i = 0, len = thisWidget.arrFlyTable.length; i < len; i++) { var item = thisWidget.arrFlyTable[i]; if (item.id == id) { thisWidget.saveForGeoJson(item); break; } } }); $("#btnSaveCzml").click(function () { var id = plotEdit._last_attr.id; thisWidget.stopDraw(); for (var i = 0, len = thisWidget.arrFlyTable.length; i < len; i++) { var item = thisWidget.arrFlyTable[i]; if (item.id == id) { thisWidget.saveForCzml(item); break; } } }); //是否可以编辑 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); }); plotEdit.initEvent(); plotEdit.loadConfig(); tableWork.initEvent(); } //标号列表相关 var plotlist = { //开始绘制 startPlot: function () { var defval = haoutil.system.clone(plotEdit.defval["polyline"] || {}); defval.type = "polyline"; defval.name = "飞行漫游路线"; thisWidget.startDraw(defval); }, //绘制结束 plotEnd: function () { //取消选中状态 if (this._lastLi) { this._lastLi.removeClass("markon"); } }, }; //列表处理 var tableWork = { $table: null, getHeight: function () { return $(window).height() - 80; }, initEvent: function () { var that = this; $("#btn_Add_line").click(function () { plotlist.startPlot(); }); $("#btnFlyStart").click(function (e) { var id = plotEdit._last_attr.id; thisWidget.graphicLayer.stopDraw(); for (var i = 0, len = thisWidget.arrFlyTable.length; i < len; i++) { var item = thisWidget.arrFlyTable[i]; if (item.id == id) { thisWidget.toRoamFly(item); break; } } }); var $table = $("#table"); $table.bootstrapTable({ height: this.getHeight(), singleSelect: true, //单选 pagination: false, iconsPrefix: "fa", columns: [ { title: "名称", sortable: true, editable: false, align: "left", formatter: function (value, row, index) { return row?.attr?.name || ""; }, }, { title: "操作", align: "center", width: 80, events: { "click .remove": function (e, value, row, index) { thisWidget.deleteGraphic(row.id); }, "click .fly": function (e, value, row, index) { thisWidget.toRoamFly(row); }, "click .edit": function (e, value, row, index) { that.showTableItem(row); }, }, formatter: function (value, row, index) { return [ '  ', '  ', '', ].join(""); }, }, ], onDblClickRow: function (rowData, $element, field) { that.showTableItem(rowData); }, }); this.$table = $table; this.loadData(thisWidget.arrFlyTable); }, loadData: function (arr) { if (this.$table) { this.$table.bootstrapTable("load", arr); } }, showTableItem: function (data) { thisWidget.startEditingById(data.id); }, }; //属性编辑相关 var plotEdit = { hasEditSylte: false, config: {}, defval: {}, initEvent: function () { var that = this; if (!this.hasEditSylte) { $("#attr_style_view").hide(); } //改变高度 - 高程全部设置为 $("#plot_latlngs_allheight").bind("input propertychange", function () { $("#plot_latlngs_addheight").val(""); var thisval = Number($(this).val()); //高度(米) if (isNaN(thisval)) { thisval = 1; } var latlngs = []; $(".plot_latlngs").each(function () { if ($(this).attr("data-type") == "height") { $(this).val(thisval); latlngs.push(thisval); } else { latlngs.push(Number($(this).val())); //经纬度值 } }); thisWidget.updateGeo2map(latlngs, true); }); //改变高度 - 在地表高程偏移 $("#plot_latlngs_addheight").bind("input propertychange", function () { $("#plot_latlngs_allheight").val(""); var thisval = Number($(this).val()); //高度(米) if (isNaN(thisval)) { thisval = 1; } var latlngs = []; $(".plot_latlngs").each(function () { if ($(this).attr("data-type") == "height") { var oldval = Number($(this).attr("oldvalue")); $(this).val(oldval + thisval); latlngs.push(oldval + thisval); } else { latlngs.push(Number($(this).val())); //经纬度值 } }); thisWidget.updateGeo2map(latlngs, true); }); //航速 $("#txtFlySpeedAll").bind("input propertychange", function () { var thispeed = Number($(this).val()); if (thispeed > 0) { var speeds = []; $(".plot_speeds").each(function () { $(this).val(thispeed); speeds.push(thispeed); }); that._last_attr.attr.speed = speeds; } }); }, loadConfig: function () { var that = this; $.getJSON("config/attr.json", function (data) { that.config = data; for (var i in data) { var defstyle = {}; for (let idx = 0; idx < data[i].style.length; idx++) { let item = data[i].style[idx]; defstyle[item.name] = item.defval; } var defattr = {}; for (let idx = 0; idx < data[i].attr.length; idx++) { let item = data[i].attr[idx]; defattr[item.name] = item.defval; } that.defval[i] = { type: "polyline", name: data[i].name, position: data[i].position, style: defstyle, attr: defattr, }; } //plotlist.bindSelList(); }); }, _last_attr: null, //选中标号,激活属性面板 startEditing: function (attr, latlngs) { this._last_attr = attr; var config = this.config["polyline"] || {}; if (latlngs) { this.updateLatlngsHtml(latlngs, config.position); } var arrFun = []; //==============style================== if (this.hasEditSylte) { let parname = "plot_attr_style_"; let inHtml = '类型:' + (config.name || attr.name) + ""; for (let idx = 0; idx < config.style.length; idx++) { let edit = config.style[idx]; if (edit.type == "hidden") { continue; } let attrName = edit.name; let attrVal = attr.style[attrName]; let input = this.getAttrInput(parname, attrName, attrVal, edit); if (input.fun) { arrFun.push({ parname: parname, name: attrName, value: attrVal, edit: edit, fun: input.fun, }); } inHtml += ' ' + edit.label + " " + input.html + " "; } $("#talbe_style").html(inHtml); } //==============attr================== let parname = "plot_attr_attr_"; let inHtml = ""; for (let idx = 0; idx < config.attr.length; idx++) { let edit = config.attr[idx]; if (edit.type == "hidden") { continue; } let attrName = edit.name; let attrVal = attr.attr[attrName]; let input = this.getAttrInput(parname, attrName, attrVal, edit); if (input.fun) { arrFun.push({ parname: parname, name: attrName, value: attrVal, edit: edit, fun: input.fun, }); } inHtml += ' ' + edit.label + " " + input.html + " "; } $("#talbe_attr").html(inHtml); //执行各方法 for (let idx = 0; idx < arrFun.length; idx++) { let item = arrFun[idx]; item.fun(item.parname, item.name, item.value, item.edit); } window.tab2attr(); //切换面板 }, lastCfg: null, updateLatlngsHtml: function (latlngs, cfg) { cfg = cfg || this.lastCfg || {}; this.lastCfg = cfg; $("#plot_latlngs_addheight").val(""); $("#plot_latlngs_allheight").val(""); $("#view_updateheight").hide(); if (!cfg.hasOwnProperty("height")) { cfg.height = true; } //显示坐标信息 var inHtml = ""; if (!latlngs || latlngs.length == 0) { // } else if (latlngs.length == 1) { let latlng = latlngs[0]; let jd = latlng[0]; let wd = latlng[1]; let height = latlng.length == 3 ? latlng[2] : 0; inHtml += '
' + ' ' + ''; if (cfg.height) { inHtml += ''; } inHtml += "
经度:
纬度:
高程:
"; } else { if (cfg.height) { $("#view_updateheight").show(); } var delhtml = ""; if (latlngs.length > (cfg.minCount || 3)) { delhtml = ''; } var speeds = this._last_attr.attr.speed; var isSpeedArray = !haoutil.isutil.isNumber(speeds); var defSpeed = $("#txtFlySpeedAll").val() || 100; for (var idx = 0; idx < latlngs.length; idx++) { var latlng = latlngs[idx]; var jd = latlng[0]; var wd = latlng[1]; var height = latlng.length == 3 ? latlng[2] : 0; var addthml = ""; if (cfg.maxCount == null || latlngs.length < cfg.maxCount) { addthml = '  '; } // inHtml += '
-第' + (idx + 1) + '点 ' + addthml + delhtml + '
' + ' ' + ' '; if (cfg.height) { inHtml += ' '; } if (idx != latlngs.length - 1) { var _speed = isSpeedArray ? (speeds ? speeds[idx] : defSpeed) : speeds || defSpeed; inHtml += ' '; } inHtml += "
经度:
纬度:
高程:
航速(km/h)
"; } } $("#view_latlngs").html(inHtml); $("#view_latlngs .open").click(window.changeOpenShowHide); var that = this; $("#view_latlngs .latlng-del").click(function () { $(this).parent().parent().remove(); var latlngs = []; var withHeight = false; $(".plot_latlngs").each(function () { latlngs.push(Number($(this).val())); if ($(this).attr("data-type") === "height") { withHeight = true; } }); thisWidget.updateGeo2map(latlngs, withHeight); //重新修改界面 var arr = []; if (withHeight) { for (let i = 0; i < latlngs.length; i += 3) { arr.push([latlngs[i], latlngs[i + 1], latlngs[i + 2]]); } } else { for (let i = 0; i < latlngs.length; i += 2) { arr.push([latlngs[i], latlngs[i + 1]]); } } that.updateLatlngsHtml(arr); }); $("#view_latlngs .latlng-install").click(function () { var idx = Number($(this).attr("data-index")); //速度 var speeds = []; $(".plot_speeds").each(function () { speeds.push(Number($(this).val())); }); speeds.splice(idx + 1, 0, speeds[idx]); that._last_attr.attr.speed = speeds; var latlngs = []; var withHeight = false; $(".plot_latlngs").each(function () { latlngs.push(Number($(this).val())); if ($(this).attr("data-type") === "height") { withHeight = true; } }); //重新修改界面 var arr = []; if (withHeight) { for (let i = 0; i < latlngs.length; i += 3) { arr.push([latlngs[i], latlngs[i + 1], latlngs[i + 2]]); } } else { for (let i = 0; i < latlngs.length; i += 2) { arr.push([latlngs[i], latlngs[i + 1]]); } } var pt1 = arr[idx]; var pt2 = idx == arr.length - 1 ? arr[0] : arr[idx + 1]; var jd = Number(((pt1[0] + pt2[0]) / 2).toFixed(6)); var wd = Number(((pt1[1] + pt2[1]) / 2).toFixed(6)); if (withHeight) { var gd = Number(((pt1[2] + pt2[2]) / 2).toFixed(1)); arr.splice(idx + 1, 0, [jd, wd, gd]); latlngs.splice((idx + 1) * 3, 0, jd, wd, gd); } else { arr.splice(idx + 1, 0, [jd, wd]); latlngs.splice((idx + 1) * 3, 0, jd, wd); } that.updateLatlngsHtml(arr); thisWidget.updateGeo2map(latlngs, withHeight); }); $(".plot_latlngs").bind("input propertychange", function () { var latlngs = []; var withHeight = false; $(".plot_latlngs").each(function () { latlngs.push(Number($(this).val())); if ($(this).attr("data-type") === "height") { withHeight = true; } }); thisWidget.updateGeo2map(latlngs, withHeight); }); $(".plot_speeds").bind("input propertychange", function () { var speeds = []; $(".plot_speeds").each(function () { speeds.push(Number($(this).val())); }); that._last_attr.attr.speed = speeds; }); }, //单击地图空白,释放属性面板 stopEditing: function () { window.tab2plot(); //切换面板 $("#talbe_style").html(""); $("#talbe_attr").html(""); this._last_attr = null; }, //获取各属性的编辑html和change方法 getAttrInput: function (parname, attrName, attrVal, edit) { attrVal = attrVal || ""; var that = this; var inHtml = ""; var fun = null; switch (edit.type) { default: case "label": inHtml = attrVal; break; case "text": inHtml = ''; fun = function (parname, attrName, attrVal, edit) { $("#" + parname + attrName).on("input propertychange", function (e) { var attrVal = $(this).val(); that.updateAttr(parname, attrName, attrVal); }); }; break; case "textarea": attrVal = attrVal.replace(new RegExp("
", "gm"), "\n"); inHtml = '"; fun = function (parname, attrName, attrVal, edit) { $("#" + parname + attrName).on("input propertychange", function (e) { var attrVal = $(this).val(); if (attrVal.length == 0) { attrVal = ""; } attrVal = attrVal.replace(/\n/g, "
"); that.updateAttr(parname, attrName, attrVal); }); }; break; case "number": inHtml = ''; fun = function (parname, attrName, attrVal, edit) { $("#" + parname + attrName).on("input propertychange", function (e) { var attrVal = Number($(this).val()); that.updateAttr(parname, attrName, attrVal); }); }; break; case "combobox": inHtml = '"; fun = function (parname, attrName, attrVal, edit) { $("#" + parname + attrName).select(); //绑定样式 $("#" + parname + attrName).change(function () { var attrVal = $(this).attr("data-value"); that.updateAttr(parname, attrName, attrVal); that.changeViewByAttrEx(parname, attrName, attrVal); }); that.changeViewByAttrEx(parname, attrName, attrVal); }; break; case "radio": var _name_key = parname + attrName; inHtml = '
'; fun = function (parname, attrName, attrVal, edit) { $('input:radio[name="' + parname + attrName + '"]').change(function () { var attrVal = $(this).val() == "1"; that.updateAttr(parname, attrName, attrVal); that.changeViewByAttr(parname, edit.impact, attrVal); }); that.changeViewByAttr(parname, edit.impact, attrVal); }; break; case "color": inHtml = ''; fun = function (parname, attrName, attrVal, edit) { $("#" + parname + attrName).minicolors({ position: "bottom right", control: "saturation", change: function (hex, opacity) { that.updateAttr(parname, attrName, hex); }, }); }; break; case "slider": inHtml = ''; fun = function (parname, attrName, attrVal, edit) { var _width = $(".mp_tab_card").width() * 0.7 - 30; $("#" + parname + attrName).progress(_width); //绑定样式 $("#" + parname + attrName).change(function () { var attrVal = Number($(this).val()) / 100; that.updateAttr(parname, attrName, attrVal); }); }; break; case "window": inHtml = ''; fun = function (parname, attrName, attrVal, edit) { $("#" + parname + attrName).on("click", function (e) { thisWidget.showEditAttrWindow({ data: that._last_attr, parname: parname, attrName: attrName, attrVal: attrVal, }); }); $("#" + parname + attrName).on("input propertychange", function (e) { var attrVal = $(this).val(); that.updateAttr(parname, attrName, attrVal); }); }; break; } return { html: inHtml, fun: fun, }; }, //联动属性控制 changeViewByAttr: function (parname, arrimpact, visible) { if (arrimpact && arrimpact.length > 0) { for (var jj = 0; jj < arrimpact.length; jj++) { var attrName = arrimpact[jj]; if (visible) { $("#" + parname + "tr_" + attrName).show(); } else { $("#" + parname + "tr_" + attrName).hide(); } } } }, changeViewByAttrEx: function (parname, attrName, attrVal) { if (parname == "plot_attr_attr_" && attrName == "cameraType") { switch (attrVal) { default: //无 $("#" + parname + "tr_followedX").hide(); $("#" + parname + "tr_followedZ").hide(); $("#" + parname + "tr_offsetZ").hide(); break; case "gs": //跟随视角 $("#" + parname + "tr_followedX").hide(); $("#" + parname + "tr_followedZ").hide(); $("#" + parname + "tr_offsetZ").hide(); break; case "dy": //锁定第一视角 $("#" + parname + "tr_followedX").show(); $("#" + parname + "tr_followedZ").show(); $("#" + parname + "tr_offsetZ").show(); break; case "sd": //锁定上帝视角 $("#" + parname + "tr_followedX").hide(); $("#" + parname + "tr_followedZ").show(); $("#" + parname + "tr_offsetZ").hide(); break; } } }, //属性面板值修改后触发此方法 updateAttr: function (parname, attrName, attrVal) { switch (parname) { default: case "plot_attr_style_": this._last_attr.style[attrName] = attrVal; break; case "plot_attr_attr_": this._last_attr.attr[attrName] = attrVal; //this.startEditing(this._last_attr); break; } thisWidget.updateAttr2map(this._last_attr); }, };