815 lines
24 KiB
JavaScript
815 lines
24 KiB
JavaScript
/* 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) {
|
||
return
|
||
}
|
||
|
||
var arrFlyTable = JSON.parse(json)
|
||
if (arrFlyTable) {
|
||
thisWidget.showData(arrFlyTable)
|
||
tableWork.loadData(arrFlyTable)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
$('#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 [
|
||
'<a class="fly" href="javascript:void(0)" title="飞行"><i class="fa fa-send-o"></i></a> ',
|
||
'<a class="edit" href="javascript:void(0)" title="编辑"><i class="fa fa-edit"></i></a> ',
|
||
'<a class="remove" href="javascript:void(0)" title="删除"><i class="fa fa-trash"></i></a>',
|
||
].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] = {
|
||
edittype: '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 = '<tr><td class="nametd">类型：</td><td>' + (config.name || attr.name) + '</td></tr>'
|
||
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 += '<tr id="' + parname + 'tr_' + attrName + '" > <td class="nametd">' + edit.label + '</td> <td>' + input.html + '</td> </tr>'
|
||
}
|
||
$('#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 += '<tr id="' + parname + 'tr_' + attrName + '" > <td class="nametd">' + edit.label + '</td> <td>' + input.html + '</td> </tr>'
|
||
}
|
||
$('#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 +=
|
||
' <div class="mp_attr" style=" margin-top: 10px;"><table>' +
|
||
' <tr> <td class="nametd">经度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="jd" value="' +
|
||
jd +
|
||
'"></td></tr>' +
|
||
'<tr> <td class="nametd">纬度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="wd" value="' +
|
||
wd +
|
||
'"></td></tr>'
|
||
if (cfg.height) {
|
||
inHtml +=
|
||
'<tr><td class="nametd">高程：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="height" value="' +
|
||
height +
|
||
'" oldvalue="' +
|
||
height +
|
||
'"></td></tr>'
|
||
}
|
||
inHtml += ' </table> </div>'
|
||
} else {
|
||
if (cfg.height) {
|
||
$('#view_updateheight').show()
|
||
}
|
||
|
||
var delhtml = ''
|
||
|
||
if (latlngs.length > (cfg.minCount || 3)) {
|
||
delhtml = '<i class="fa fa-trash-o latlng-del" title="删除点" ></i>'
|
||
}
|
||
|
||
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 = '<i class="fa fa-plus-square-o latlng-install" title="插入点" data-index="' + idx + '" ></i> '
|
||
}
|
||
|
||
//
|
||
inHtml +=
|
||
'<div><div class="open"><i class="tree_icon">-</i>第' +
|
||
(idx + 1) +
|
||
'点 <label style="width:100px;"> </label> ' +
|
||
addthml +
|
||
delhtml +
|
||
' </div><div class="mp_attr"><table>' +
|
||
'<tr> <td class="nametd">经度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="jd" data-index="' +
|
||
idx +
|
||
'" value="' +
|
||
jd +
|
||
'"></td> </tr> ' +
|
||
'<tr> <td class="nametd">纬度：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="wd" data-index="' +
|
||
idx +
|
||
'" value="' +
|
||
wd +
|
||
'"></td> </tr> '
|
||
if (cfg.height) {
|
||
inHtml +=
|
||
'<tr> <td class="nametd">高程：</td> <td><input type="number" class="mp_input plot_latlngs" data-type="height" data-index="' +
|
||
idx +
|
||
'" value="' +
|
||
height +
|
||
'" oldvalue="' +
|
||
height +
|
||
'"></td> </tr> '
|
||
}
|
||
|
||
if (idx != latlngs.length - 1) {
|
||
var _speed = isSpeedArray ? (speeds ? speeds[idx] : defSpeed) : speeds || defSpeed
|
||
|
||
inHtml +=
|
||
'<tr> <td class="nametd">航速(km/h)</td> <td><input type="number" class="mp_input plot_speeds" title="第' +
|
||
(idx + 1) +
|
||
'点至第' +
|
||
(idx + 2) +
|
||
'点之间航速" data-type="speed" data-index="' +
|
||
idx +
|
||
'" value="' +
|
||
_speed +
|
||
'"></td> </tr> '
|
||
}
|
||
|
||
inHtml += ' </table> </div> </div>'
|
||
}
|
||
}
|
||
$('#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.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.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 = '<input id="' + parname + attrName + '" type="text" value="' + attrVal + '" class="mp_input" />'
|
||
|
||
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('<br />', 'gm'), '\n')
|
||
inHtml = '<textarea id="' + parname + attrName + '" class="mp_input" style="height:50px;resize: none;" >' + attrVal + '</textarea>'
|
||
|
||
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, '<br />')
|
||
|
||
that.updateAttr(parname, attrName, attrVal)
|
||
})
|
||
}
|
||
break
|
||
case 'number':
|
||
inHtml = '<input id="' + parname + attrName + '" type="number" value="' + attrVal + '" class="mp_input"/>'
|
||
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 = '<select id="' + parname + attrName + '" class="mp_select" data-value="' + attrVal + '" >'
|
||
for (var jj = 0; jj < edit.data.length; jj++) {
|
||
var temp = edit.data[jj]
|
||
inHtml += '<option value="' + temp.value + '">' + temp.text + '</option>'
|
||
}
|
||
inHtml += '</select>'
|
||
|
||
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 =
|
||
' <div class="radio radio-info radio-inline"> <input type="radio" id="' +
|
||
_name_key +
|
||
'_1" value="1" name="' +
|
||
_name_key +
|
||
'" ' +
|
||
(attrVal ? 'checked="checked"' : '') +
|
||
'><label for="' +
|
||
_name_key +
|
||
'_1"> 是</label> </div> <div class="radio radio-info radio-inline"> <input type="radio" id="' +
|
||
_name_key +
|
||
'_2" value="2" name="' +
|
||
_name_key +
|
||
'" ' +
|
||
(attrVal ? '' : 'checked="checked"') +
|
||
' "><label for="' +
|
||
_name_key +
|
||
'_2"> 否 </label> </div>'
|
||
|
||
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 = '<input id="' + parname + attrName + '" class="mp_input" style="width: 100%;" value="' + attrVal + '" />'
|
||
|
||
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 = '<input id="' + parname + attrName + '" type="text" value="' + attrVal * 100 + '" />'
|
||
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 = '<input id="' + parname + attrName + '" type="text" value="' + attrVal + '" readonly class="mp_input" />'
|
||
|
||
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()
|
||
break
|
||
|
||
case 'gs': //跟随视角
|
||
$('#' + parname + 'tr_followedX').hide()
|
||
$('#' + parname + 'tr_followedZ').hide()
|
||
break
|
||
case 'dy': //锁定第一视角
|
||
$('#' + parname + 'tr_followedX').show()
|
||
$('#' + parname + 'tr_followedZ').show()
|
||
|
||
break
|
||
case 'sd': //锁定上帝视角
|
||
$('#' + parname + 'tr_followedX').hide()
|
||
$('#' + parname + 'tr_followedZ').show()
|
||
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)
|
||
},
|
||
}
|