Fei_Xian_Lin_Ye_Fang_Huo/public/widgets/plot/widget.js

562 lines
16 KiB
JavaScript
Raw Normal View History

2023-08-18 08:55:52 +08:00
"use script"; //开发环境建议开启严格模式
(function (window, mars3d) {
//创建widget类需要继承BaseWidget
class MyWidget extends mars3d.widget.BaseWidget {
//外部资源配置
get resources() {
return [
"/widgets/plot/js/getGraphicDefStyle.js",
"./lib/kml/kml-geojson.js", //导出kml支持不用kml时可以删除
"./lib/dom2img/dom-to-image.js", //字体标号使用到的div转img库无此标号时可以删除
];
}
//弹窗配置
get view() {
return {
type: "window",
url: "view.html",
windowOptions: {
width: 250,
position: {
top: 50,
right: 5,
bottom: 5,
},
},
};
}
//初始化[仅执行1次]
create() {
this.storageName = "mars3d_plot";
this.graphicGroupLayer = new mars3d.layer.GraphicGroupLayer({
name: this.config.name,
pid: 99, //图层管理 中使用父节点id
defaultLayer: "默认分组",
isRestorePositions: true, //在标绘和编辑结束时是否将坐标还原为普通值true: 停止编辑时会有闪烁,但效率要好些。
hasEdit: false,
});
this.map.addLayer(this.graphicGroupLayer);
var that = this;
this.graphicGroupLayer.bindContextMenu([
{
text: "删除对象",
iconCls: "fa fa-trash-o",
callback: function (e) {
let graphic = e.graphic;
if (graphic) {
that.deleteEntity(graphic);
}
},
},
]);
//事件监听
this.graphicGroupLayer.on(mars3d.EventType.drawCreated, (e) => {
this.showLayerTree();
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.updateAttr, (e) => {
var graphic = e.graphic;
//更新了名称
if (e.attr.name && this.viewWindow) {
this.viewWindow.treeWork.updateNode(graphic);
}
});
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 getGraphicDefStyle(type);
}
updateTemplateValues(url) {
if (this.map.options.templateValues) {
return mars3d.Util.template(url, this.map.options.templateValues);
} else {
return url;
}
}
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("开始绘制", 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));
}
}
toKml(target) {
var geojsonObject = this.getGeoJson(target);
if (geojsonObject == null) {
return null;
}
geojsonObject = haoutil.system.clone(geojsonObject);
var kml = kgUtil.toKml(geojsonObject, {
name: "Mars3D标绘数据",
documentName: "Mars3D标绘数据文件",
documentDescription: "标绘数据 by mars3d.cn",
simplestyle: true,
});
return kml;
}
downloadKml(filename, target) {
var data = this.toKml(target);
if (data == null) {
haoutil.msg("当前未标绘任何数据!");
} else {
var timestr = new Date().format("MMddHHmmss");
haoutil.file.downloadFile(filename + "_" + timestr + ".kml", data);
}
}
loadGeoJSON(json, options) {
if (json == null) {
return;
}
var arr = this.graphicGroupLayer.loadGeoJSON(json, options);
//本地存储
var geojson = JSON.stringify(json);
haoutil.storage.add(this.storageName, geojson);
this.showLayerTree();
return arr;
}
deleteAll() {
this.stopEditing();
this.graphicGroupLayer.clear();
this.sendDeleteAll();
this.showLayerTree();
}
deleteEntity(graphic) {
graphic.remove();
this.sendDeleteEntity(graphic); //保存数据
this.showLayerTree();
}
//搜索
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) {
name = graphic.attr.name;
}
if (name == null || name.indexOf(text) == -1) {
continue;
}
arr.push({
name: name,
type: "标绘 - " + 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());
this.sendSaveEntity(); //保存所有数据
}
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);
this.showLayerTree();
}
//数据保存及加载处理
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 }, { clear: true, flyTo: true })
// },
// })
} else {
//读取本地存储
var laststorage = haoutil.storage.get(this.storageName); //读取localStorage值
if (laststorage == null || laststorage == "null") {
this.loadDemoData();
} else {
var json = JSON.parse(laststorage);
console.log("加载历史缓存数据", json);
this.loadGeoJSON(json, { clear: true, flyTo: 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)
// },
// })
// }
// 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("//data.mars3d.cn/file/geojson/mars3d-draw.json", (result) => {
if (!this.isActivate) {
return;
}
this.loadGeoJSON(result, { clear: true, flyTo: true });
});
}
}
//注册到widget管理器中。
mars3d.widget.bindClass(MyWidget);
//每个widet之间都是直接引入到index.html中会存在彼此命名冲突所以闭包处理下。
})(window, mars3d);