507 lines
14 KiB
JavaScript
507 lines
14 KiB
JavaScript
'use script' //开发环境建议开启严格模式
|
||
;(function (window, mars3d) {
|
||
//创建widget类，需要继承BaseWidget
|
||
class MyWidget extends mars3d.widget.BaseWidget {
|
||
//外部资源配置
|
||
get resources() {
|
||
return [
|
||
//字体标号使用到的div转img库，无此标号时可以删除
|
||
'./lib/dom2img/dom-to-image.js',
|
||
]
|
||
}
|
||
|
||
//弹窗配置
|
||
get view() {
|
||
return {
|
||
type: 'window',
|
||
url: 'view.html',
|
||
windowOptions: {
|
||
width: 250,
|
||
position: {
|
||
top: 50,
|
||
right: 5,
|
||
bottom: 5,
|
||
},
|
||
},
|
||
}
|
||
}
|
||
get serverURL() {
|
||
return 'http://data.marsgis.cn'
|
||
}
|
||
get gltfServerURL() {
|
||
return 'http://data.marsgis.cn/gltf'
|
||
}
|
||
//初始化[仅执行1次]
|
||
create() {
|
||
this.storageName = 'mars3d_plot'
|
||
|
||
this.graphicGroupLayer = new mars3d.layer.GraphicGroupLayer({
|
||
name: this.config.name,
|
||
pid: 99, //图层管理 中使用，父节点id
|
||
defaultLayer: '默认分组',
|
||
hasEdit: false,
|
||
})
|
||
this.map.addLayer(this.graphicGroupLayer)
|
||
|
||
//事件监听
|
||
this.graphicGroupLayer.on(mars3d.EventType.drawCreated, (e) => {
|
||
var graphic = e.graphic
|
||
this.startEditing(graphic)
|
||
})
|
||
//模型加载完成后事件
|
||
this.graphicGroupLayer.on(mars3d.EventType.load, (e) => {
|
||
//console.log('gltf模型加载完成');
|
||
haoutil.loading.hide()
|
||
})
|
||
this.graphicGroupLayer.on(mars3d.EventType.editStart, (e) => {
|
||
var graphic = e.graphic
|
||
this.startEditing(graphic)
|
||
})
|
||
this.graphicGroupLayer.on(mars3d.EventType.editMovePoint, (e) => {
|
||
var graphic = e.graphic
|
||
this.startEditing(graphic)
|
||
})
|
||
this.graphicGroupLayer.on(mars3d.EventType.editRemovePoint, (e) => {
|
||
var graphic = e.graphic
|
||
this.startEditing(graphic)
|
||
})
|
||
this.graphicGroupLayer.on(mars3d.EventType.editStop, (e) => {
|
||
var graphic = e.graphic
|
||
this.stopEditing()
|
||
|
||
this.sendSaveEntity(graphic) //保存数据
|
||
this.showLayerTree()
|
||
})
|
||
|
||
this.graphicGroupLayer.on(mars3d.EventType.delete, (e) => {
|
||
this.sendDeleteEntity(e.graphic) //保存数据
|
||
this.showLayerTree()
|
||
})
|
||
|
||
this.sendGetList()
|
||
}
|
||
//每个窗口创建完成后调用
|
||
winCreateOK(opt, result) {
|
||
this.viewWindow = result
|
||
}
|
||
//激活插件
|
||
activate() {
|
||
this.graphicGroupLayer.hasEdit = true
|
||
}
|
||
//释放插件
|
||
disable() {
|
||
this.stopEditing()
|
||
|
||
this.graphicGroupLayer.stopDraw()
|
||
this.graphicGroupLayer.hasEdit = false
|
||
|
||
this.viewWindow = null
|
||
}
|
||
getDefStyle(type) {
|
||
return mars3d.graphic.StyleUtil.getDefStyle(type)
|
||
}
|
||
hasEdit(val) {
|
||
this.graphicGroupLayer.hasEdit = val
|
||
}
|
||
hasPopup(val) {
|
||
if (val) {
|
||
this.graphicGroupLayer.bindPopup(
|
||
(event) => {
|
||
let graphic = event.graphic
|
||
var html = mars3d.Util.getTemplateHtml({
|
||
title: '属性编辑',
|
||
template: [
|
||
{ field: 'name', name: '名称' },
|
||
{ field: 'address', name: '地址' },
|
||
{ field: 'phone', name: '电话' },
|
||
{ field: 'remark', name: '备注', type: 'textarea' },
|
||
{ name: '确定', type: 'button' },
|
||
],
|
||
attr: graphic.attr,
|
||
edit: true,
|
||
width: 190,
|
||
})
|
||
return html
|
||
},
|
||
{
|
||
onAdd: (event) => {
|
||
let eleId = event.id,
|
||
graphic = event.graphic
|
||
//popup的DOM添加到页面的回调方法
|
||
$('#' + eleId + ' .mars3d-popup-btn').click((e) => {
|
||
$('#' + eleId + ' .mars3d-popup-edititem').each(function () {
|
||
var val = $(this).val()
|
||
var key = $(this).attr('data-type')
|
||
graphic.attr[key] = val
|
||
})
|
||
this.graphicGroupLayer.closePopup()
|
||
})
|
||
},
|
||
onRemove: function (eleId, graphic) {
|
||
//popup的DOM从页面移除的回调方法
|
||
},
|
||
anchor: [0, -20],
|
||
}
|
||
)
|
||
} else {
|
||
this.graphicGroupLayer.unbindPopup()
|
||
}
|
||
}
|
||
//开始标记
|
||
startDraw(defval) {
|
||
haoutil.loading.hide()
|
||
switch (defval.type) {
|
||
default:
|
||
break
|
||
case 'model': //小模型
|
||
defval.drawShow = true //模型点状对象绘制时，是否显示本身对象，可避免在3dtiles上拾取坐标存在问题。
|
||
haoutil.loading.show() //LoadEnd后关闭
|
||
break
|
||
case 'point':
|
||
case 'font-point':
|
||
case 'billboard':
|
||
defval.drawShow = true //模型点状对象绘制时，是否显示本身对象，可避免在3dtiles上拾取坐标存在问题。
|
||
break
|
||
}
|
||
|
||
// console.log(JSON.stringify(defval));
|
||
this.graphicGroupLayer.startDraw(defval)
|
||
}
|
||
//结束绘制、等同双击完成绘制，比如手机端无法双击结束
|
||
endDraw() {
|
||
this.graphicGroupLayer.endDraw()
|
||
}
|
||
startEditingById(id) {
|
||
var graphic = this.graphicGroupLayer.getGraphicById(id)
|
||
if (graphic == null) {
|
||
return
|
||
}
|
||
graphic.flyTo()
|
||
|
||
this.graphicGroupLayer.startEditing(graphic)
|
||
}
|
||
startEditing(graphic) {
|
||
clearTimeout(this.timeTik)
|
||
|
||
if (this.viewWindow == null) {
|
||
return
|
||
}
|
||
|
||
var plotAttr = mars3d.widget.getClass('widgets/plotAttr/widget.js')
|
||
if (plotAttr && plotAttr.isActivate) {
|
||
plotAttr.startEditing(graphic, graphic.coordinates)
|
||
} else {
|
||
mars3d.widget.activate({
|
||
uri: 'widgets/plotAttr/widget.js',
|
||
graphic: graphic,
|
||
lonlats: graphic.coordinates,
|
||
})
|
||
}
|
||
}
|
||
stopEditing() {
|
||
this.timeTik = setTimeout(function () {
|
||
mars3d.widget.disable('widgets/plotAttr/widget.js')
|
||
}, 200)
|
||
}
|
||
|
||
flyTo(target) {
|
||
//参数解释：线面数据：scale控制边界的放大比例，点数据：radius控制视距距离
|
||
this.map.flyToGraphic(target, { scale: 1.9, radius: 1000 })
|
||
}
|
||
//文件处理
|
||
getGeoJson(target) {
|
||
if (target) {
|
||
return target.toGeoJSON()
|
||
} else {
|
||
return this.graphicGroupLayer.toGeoJSON()
|
||
}
|
||
}
|
||
downloadJson(filename, target) {
|
||
var data = this.getGeoJson(target)
|
||
if (data == null || (data.features && data.features.length == 0)) {
|
||
haoutil.msg('当前未标绘任何数据！')
|
||
} else {
|
||
var timestr = new Date().format('MMddHHmmss')
|
||
haoutil.file.downloadFile(filename + '_' + timestr + '.json', JSON.stringify(data))
|
||
}
|
||
}
|
||
loadGeoJSON(json, isClear, isFly) {
|
||
if (json == null) {
|
||
return
|
||
}
|
||
|
||
var arr = this.graphicGroupLayer.loadGeoJSON(json, {
|
||
clear: isClear,
|
||
flyTo: isFly,
|
||
})
|
||
|
||
this.showLayerTree()
|
||
return arr
|
||
}
|
||
deleteAll() {
|
||
this.stopEditing()
|
||
this.graphicGroupLayer.clear()
|
||
this.sendDeleteAll()
|
||
|
||
this.showLayerTree()
|
||
}
|
||
deleteEntity(graphic) {
|
||
graphic.remove()
|
||
}
|
||
//搜索
|
||
query(text, maxcount) {
|
||
var arrGraphic = this.graphicGroupLayer.getGraphics()
|
||
|
||
var arr = []
|
||
var counts = 0
|
||
for (var i = 0; i < arrGraphic.length; i++) {
|
||
var graphic = arrGraphic[i]
|
||
|
||
var name
|
||
if (graphic.type == 'label') {
|
||
name = graphic.text
|
||
} else if (graphic.attr) {
|
||
name = graphic.attr.name
|
||
}
|
||
|
||
if (name == null || name.indexOf(text) == -1) {
|
||
continue
|
||
}
|
||
|
||
arr.push({
|
||
name: name,
|
||
type: '标绘 - ' + graphic.attr.name,
|
||
_datatype: 'plot',
|
||
_entity: graphic,
|
||
})
|
||
|
||
if (maxcount) {
|
||
counts++
|
||
if (counts > maxcount) {
|
||
break
|
||
}
|
||
}
|
||
}
|
||
return arr
|
||
}
|
||
//弹窗属性编辑处理
|
||
// showEditAttrWindow(param) {
|
||
// this.last_window_param = param
|
||
|
||
// layer.open({
|
||
// type: 2,
|
||
// title: '选择数据',
|
||
// fix: true,
|
||
// shadeClose: false,
|
||
// maxmin: true,
|
||
// area: ['100%', '100%'],
|
||
// content: 'test.html?name=' + param.attrName + '&value=' + param.attrVal,
|
||
// skin: 'layer-mars-dialog animation-scale-up',
|
||
// success: function (layero) {},
|
||
// })
|
||
// }
|
||
// saveWindowEdit(attrVal) {
|
||
// this.viewWindow.plotEdit.updateAttr(this.last_window_param.parname, this.last_window_param.attrName, attrVal)
|
||
// layer.close(layer.index)
|
||
// }
|
||
|
||
//分组树相关方法
|
||
showLayerTree() {
|
||
if (!this.viewWindow || !this.isActivate) {
|
||
return
|
||
}
|
||
this.viewWindow.treeWork.loadData(this.graphicGroupLayer.getLayers())
|
||
}
|
||
checkRemoveGroup(layer) {
|
||
if (this.graphicGroupLayer.length < 2) {
|
||
haoutil.msg('不能删除所有图层，需要至少保留1个图层！')
|
||
return false
|
||
}
|
||
return true
|
||
}
|
||
deleteLayer(layer) {
|
||
var result = this.graphicGroupLayer.deleteLayer(layer)
|
||
if (result) {
|
||
this.showLayerTree()
|
||
haoutil.msg('删除成功！')
|
||
return true
|
||
} else {
|
||
haoutil.msg('删除失败！')
|
||
return false
|
||
}
|
||
}
|
||
//删除所有非空数组
|
||
deleteEmptyLayer() {
|
||
if (this.graphicGroupLayer.length < 2) {
|
||
haoutil.msg('不能删除所有图层，需要至少保留1个图层！')
|
||
return
|
||
}
|
||
this.graphicGroupLayer.deleteEmptyLayer()
|
||
this.showLayerTree()
|
||
}
|
||
editGroupName(layer) {
|
||
mars3d.widget.activate({
|
||
uri: 'widgets/plotGroupName/widget.js',
|
||
name: layer ? '重命名分组' : '新增分组',
|
||
data: layer ? layer.name : '',
|
||
checkName: (newname) => {
|
||
//校验分组是否有同名的
|
||
return this.graphicGroupLayer.hasLayer(newname, layer)
|
||
},
|
||
callback: (newname) => {
|
||
console.log(newname)
|
||
|
||
if (layer) {
|
||
//修改
|
||
layer.name = newname
|
||
} else {
|
||
//新增
|
||
this.graphicGroupLayer.createLayer(newname)
|
||
}
|
||
this.showLayerTree()
|
||
},
|
||
})
|
||
}
|
||
changeSelectedLayer(layer) {
|
||
this.graphicGroupLayer.selectedLayer = layer
|
||
this.showLayerTree()
|
||
}
|
||
moveToLayer(graphic, group) {
|
||
this.graphicGroupLayer.moveToLayer(graphic, group)
|
||
}
|
||
//数据保存及加载处理
|
||
sendGetList() {
|
||
if (window.hasServer) {
|
||
//读取后台存储
|
||
// window.sendAjax({
|
||
// url: 'map/plot/list',
|
||
// type: 'get',
|
||
// success: (arr) => {
|
||
// var arrjson = []
|
||
// for (var i = 0; i < arr.length; i++) {
|
||
// var geojson = JSON.parse(arr[i].geojson)
|
||
// geojson.properties.id = arr[i].id
|
||
// arrjson.push(geojson)
|
||
// }
|
||
// this.loadGeoJSON({ type: 'FeatureCollection', features: arrjson }, true, true)
|
||
// },
|
||
// })
|
||
} else {
|
||
//读取本地存储
|
||
var laststorage = haoutil.storage.get(this.storageName) //读取localStorage值
|
||
if (laststorage == null || laststorage == 'null') {
|
||
this.loadDemoData()
|
||
} else {
|
||
var json = JSON.parse(laststorage)
|
||
this.loadGeoJSON(json, true, true)
|
||
}
|
||
}
|
||
}
|
||
sendSaveEntity(graphic) {
|
||
if (this.viewWindow == null) {
|
||
return
|
||
}
|
||
console.log('plot: 保存了数据')
|
||
|
||
if (window.hasServer) {
|
||
//服务端存储
|
||
// if (!graphic.attr.name) {
|
||
// haoutil.msg('名称不可为空！')
|
||
// return
|
||
// }
|
||
// let geojson = graphic.toGeoJSON()
|
||
// window.sendAjax({
|
||
// url: 'map/plot/update',
|
||
// type: 'post',
|
||
// data: {
|
||
// id: graphic.id,
|
||
// name: graphic.attr.name || '', //名称
|
||
// geojson: geojson || '', //geojson
|
||
// },
|
||
// contentType: 'application/json',
|
||
// success: function (data) {
|
||
// graphic.id = data.id
|
||
// },
|
||
// })
|
||
} else {
|
||
//本地存储
|
||
var geojson = JSON.stringify(this.getGeoJson())
|
||
haoutil.storage.add(this.storageName, geojson)
|
||
}
|
||
|
||
//测试的功能
|
||
//this.sendSocket(graphic)
|
||
}
|
||
sendDeleteEntity(graphic) {
|
||
console.log('plot: 删除了数据')
|
||
|
||
if (window.hasServer) {
|
||
//后台删除
|
||
// window.sendAjax({
|
||
// url: 'map/plot/' + graphic.id,
|
||
// type: 'delete',
|
||
// contentType: 'application/json',
|
||
// success: function (result) {},
|
||
// })
|
||
} else {
|
||
var storagedata = JSON.stringify(this.getGeoJson())
|
||
haoutil.storage.add(this.storageName, storagedata)
|
||
}
|
||
}
|
||
sendDeleteAll() {
|
||
console.log('plot: 删除了所有数据')
|
||
|
||
if (window.hasServer) {
|
||
//后台删除
|
||
// window.sendAjax({
|
||
// url: 'map/plot/deleteAll',
|
||
// contentType: 'application/json',
|
||
// success: function (result) {},
|
||
// })
|
||
} else {
|
||
//本地存储
|
||
haoutil.storage.del(this.storageName)
|
||
}
|
||
}
|
||
|
||
//websocket更新坐标
|
||
// socketConfig() {
|
||
// var that = this
|
||
// mars3d.widget.activate({
|
||
// uri: 'widgets/plotSocket/widget.js',
|
||
// updateAttr: function (json) {
|
||
// that.graphicGroupLayer.loadGeoJSON(json, {
|
||
// clear: false,
|
||
// flyTo: false,
|
||
// })
|
||
// },
|
||
// })
|
||
// }
|
||
// sendSocket(graphic) {
|
||
// var plotSocket = mars3d.widget.getClass('widgets/plotSocket/widget.js')
|
||
// if (plotSocket && plotSocket.isActivate) {
|
||
// plotSocket.sendSocket(graphic.toGeoJSON())
|
||
// }
|
||
// }
|
||
|
||
//实际系统时可以注释下面代码，该代码是mars3d官网在线加载演示数据
|
||
loadDemoData() {
|
||
if (window.location.hostname.indexOf('mars') == -1) {
|
||
return
|
||
}
|
||
|
||
$.getJSON('http://data.marsgis.cn/file/geojson/draw-demo.json', (result) => {
|
||
if (!this.isActivate) {
|
||
return
|
||
}
|
||
this.loadGeoJSON(result, true, true)
|
||
})
|
||
}
|
||
}
|
||
|
||
//注册到widget管理器中。
|
||
mars3d.widget.bindClass(MyWidget)
|
||
|
||
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
||
})(window, mars3d)
|