"use script"; //开发环境建议开启严格模式
|
(function (window, mars3d) {
|
//创建widget类，需要继承BaseWidget
|
class MyWidget extends mars3d.widget.BaseWidget {
|
//外部资源配置
|
get resources() {
|
return [
|
"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: false, //在标绘和编辑结束时，是否将坐标还原为普通值，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.graphicGroupLayer.on(mars3d.EventType.popupOpen, (event) => {
|
let container = event.container;
|
let btnOk = container.querySelector(".mars3d-popup-btn");
|
if (btnOk) {
|
let graphic = event.graphic;
|
btnOk.addEventListener("click", (e) => {
|
$(".mars3d-popup-edititem").each(function () {
|
var val = $(this).val();
|
var key = $(this).attr("data-type");
|
graphic.attr[key] = val;
|
});
|
this.map.closePopup();
|
});
|
}
|
});
|
|
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;
|
});
|
} 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));
|
}
|
}
|
|
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);
|
|
//本地存储
|
localforage.setItem(this.storageName, json);
|
|
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 {
|
//读取本地存储
|
localforage.getItem(this.storageName).then((laststorage) => {
|
if (laststorage == null || laststorage == "null") {
|
this.loadDemoData();
|
} else {
|
console.log("加载历史缓存数据", laststorage);
|
this.loadGeoJSON(laststorage, { 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 {
|
//本地存储
|
localforage.setItem(this.storageName, this.getGeoJson());
|
}
|
|
//测试的功能
|
//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 {
|
localforage.setItem(this.storageName, this.getGeoJson());
|
}
|
}
|
sendDeleteAll() {
|
// console.log('plot: 删除了所有数据')
|
|
if (window.hasServer) {
|
//后台删除
|
// window.sendAjax({
|
// url: 'map/plot/deleteAll',
|
// contentType: 'application/json',
|
// success: function (result) {},
|
// })
|
} else {
|
//本地存储
|
localforage.removeItem(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);
|
