bmh_cesium/public/widgets/plot/widget.js

536 lines
18 KiB
JavaScript
Raw Normal View History

2025-03-09 23:23:50 +00:00
//模块:
xjsdk.widget.bindClass(xjsdk.widget.BaseWidget.extend({
options: {
resources: [
//字体标号使用到的div转img库无此标号时可以删除
"./lib/dom2img/dom-to-image.js",
],
//弹窗
view: {
type: "window",
url: "view.html",
windowOptions: {
width: 250,
position: {
"top": 50,
"right": 5,
"bottom": 5
}
}
},
},
drawControl: null,
getServerURL: function () {
return this.viewer.xjsdk.config.serverURL;
},
getGltfServerURL: function () {
return serverURL_gltf; //配置在config\xjsdkUrl.js
},
//初始化[仅执行1次]
create: function () {
var that = this;
this.drawControl = new xjsdk.Draw(this.viewer, {
hasEdit: false,
nameTooltip: true,
});
//事件监听
this.drawControl.on(xjsdk.draw.event.DrawCreated, function (e) {
var entity = e.entity;
that.startEditing(entity);
});
this.drawControl.on(xjsdk.draw.event.EditStart, function (e) {
var entity = e.entity;
that.startEditing(entity);
});
this.drawControl.on(xjsdk.draw.event.EditMovePoint, function (e) {
var entity = e.entity;
that.startEditing(entity);
});
this.drawControl.on(xjsdk.draw.event.EditRemovePoint, function (e) {
var entity = e.entity;
that.startEditing(entity);
});
this.drawControl.on(xjsdk.draw.event.EditStop, function (e) {
var entity = e.entity;
that.stopEditing(entity);
that.sendSaveEntity(entity); //保存数据
that.showTable();
});
this.drawControl.on(xjsdk.draw.event.Delete, function (e) {
that.sendDeleteEntity(e.entity);//保存数据
that.showTable();
});
////编辑时拖拽点颜色(修改内部默认值)
//xjsdk.draw.dragger.PointColor.Control = new Cesium.Color.fromCssColorString("#1c197d"); //位置控制拖拽点
//xjsdk.draw.dragger.PointColor.MoveHeight = new Cesium.Color.fromCssColorString("#9500eb"); //上下移动高度的拖拽点
//xjsdk.draw.dragger.PointColor.EditAttr = new Cesium.Color.fromCssColorString("#f73163"); //辅助修改属性(如半径)的拖拽点
//xjsdk.draw.dragger.PointColor.AddMidPoint = new Cesium.Color.fromCssColorString("#04c2c9").withAlpha(0.3); //增加新点,辅助拖拽点
////标绘时的tooltip修改内部默认值
//xjsdk.draw.tooltip.draw.point.start = '单击 完成绘制';
//xjsdk.draw.tooltip.draw.polyline.start = '单击 开始绘制';
//xjsdk.draw.tooltip.draw.polyline.cont = '单击增加点,右击删除点';
//xjsdk.draw.tooltip.draw.polyline.end = '单击增加点,右击删除点<br/>双击完成绘制';
//xjsdk.draw.tooltip.draw.polyline.end2 = '单击完成绘制';
//xjsdk.draw.tooltip.edit.start = '单击后 激活编辑';
//xjsdk.draw.tooltip.edit.end = '释放后 完成修改';
//xjsdk.draw.tooltip.dragger.def = '拖动 修改位置'; //默认拖拽时提示
//xjsdk.draw.tooltip.dragger.addMidPoint = '拖动 增加点';
//xjsdk.draw.tooltip.dragger.moveHeight = '拖动 修改高度';
//xjsdk.draw.tooltip.dragger.editRadius = '拖动 修改半径';
//xjsdk.draw.tooltip.del.def = '<br/>右击 删除该点';
//xjsdk.draw.tooltip.del.min = '无法删除,点数量不能少于';
//添加到图层控制
if (window.bindToLayerControl) {
this.layerWork = bindToLayerControl({
pid: 0,
name: '标绘',
visible: true,
onAdd: function () { //显示回调
that.drawControl.setVisible(true);
},
onRemove: function () { //隐藏回调
that.drawControl.setVisible(false);
},
onCenterAt: function (duration) { //定位回调
var arr = that.drawControl.getEntitys();
that.viewer.flyTo(arr, {
duration: duration
});
},
compare: {//"分屏对比" 中使用, 回覆盖上面方法
onCreate: function (viewerEx) {
//viewerEx为分屏中另外一个屏的地球回调 add时不能讲当前viewer的对象直接添加到viewerEx需要新构造
this.drawControlEx = new xjsdk.Draw(viewerEx, { hasEdit: false, nameTooltip: true })
},
onAdd: function (viewerEx) { //显示回调
//viewerEx为分屏中另外一个屏的地球回调
this.drawControlEx.loadJson(that.getGeoJson()); //新构造数据不能直接add到新viewerEx
this.drawControlEx.setVisible(true);
},
onRemove: function (viewerEx) { //隐藏回调
this.drawControlEx.setVisible(false);
},
},
});
}
this.sendGetList();
},
viewWindow: null,
//每个窗口创建完成后调用
winCreateOK: function (opt, result) {
this.viewWindow = result;
},
//激活插件
activate: function () {
this.drawControl.hasEdit(true);
},
//释放插件
disable: function () {
this.stopEditing();
this.viewWindow = null;
this.drawControl.stopDraw();
this.drawControl.hasEdit(false);
//this.deleteAll();
//从图层控制中 移除
// if(this.layerWork){
// unbindLayerControl(this.layerWork);
// }
},
getDefStyle: function (type) {
return xjsdk.draw.util.getDefStyle(type)
},
//开始标记
startDraw: function (defval) {
if (defval && defval.type === "model") {
haoutil.msg("模型根据其大小需要一点加载时间,请稍等片刻。");
}
// defval.drawShow = true;//模型点状对象绘制时是否显示本身对象可避免在3dtiles上拾取坐标存在问题。
// console.log(JSON.stringify(defval));
this.drawControl.startDraw(defval);
},
//结束绘制、等同双击完成绘制,比如手机端无法双击结束
endDraw: function () {
this.drawControl.endDraw();
},
startEditingById: function (id) {
var entity = this.drawControl.getEntityById(id);
if (entity == null) return;
this.viewer.xjsdk.flyTo(entity);
this.drawControl.startEditing(entity);
},
startEditing: function (entity) {
var that = this;
if (this.viewWindow == null) return;
var lonlats = this.drawControl.getCoordinates(entity);
clearTimeout(this.timeTik);
var plotAttr = xjsdk.widget.getClass('widgets/plotAttr/widget.js');
if (plotAttr && plotAttr.isActivate) {
plotAttr.startEditing(entity, lonlats);
}
else {
xjsdk.widget.activate({
uri: 'widgets/plotAttr/widget.js',
entity: entity,
lonlats: lonlats,
deleteEntity: function (entity) {
that.deleteCurrentEntity(entity);
},
updateAttr: function (attr) {
that.updateAttr2map(attr);
},
updateGeo: function (positions) {
that.updateGeo2map(positions);
},
centerAt: function (entity) {
that.centerCurrentEntity(entity);
},
});
}
},
stopEditing: function () {
this.timeTik = setTimeout(function () {
xjsdk.widget.disable('widgets/plotAttr/widget.js');
}, 200);
},
//更新图上的属性
updateAttr2map: function (attr) {
this.drawControl.updateAttribute(attr);
},
//更新图上的几何形状、坐标等
updateGeo2map: function (positions) {
this.drawControl.setPositions(positions); //更新当前编辑的entity
// if (positions.length <= 3) {
// var entity = this.drawControl.getCurrentEntity();
// this.centerCurrentEntity(entity);
// }
return positions;
},
centerCurrentEntity: function (entity) {
//参数解释线面数据scale控制边界的放大比例点数据radius控制视距距离
this.viewer.xjsdk.flyTo(entity, { scale: 0.5, radius: 1000 });
},
//文件处理
getGeoJson: function () {
return this.drawControl.toGeoJSON();
},
getCurrentEntityGeoJson: function () {
var entity = this.drawControl.getCurrentEntity();
if (entity == null) return;
return this.drawControl.toGeoJSON(entity);
},
jsonToLayer: function (json, isClear, isFly) {
if (json == null) return;
this.showTable(json);
return this.drawControl.loadJson(json, {
clear: isClear,
flyTo: isFly
});
},
deleteAll: function () {
this.drawControl.deleteAll();
this.sendDeleteAll();
this.showTable();
},
deleteEntity: function (id) {
var entity = this.drawControl.getEntityById(id);
if (entity == null) return;
this.drawControl.deleteEntity(entity);
},
isOnDraw: false,
deleteCurrentEntity: function (entity) {
var entity = entity || this.drawControl.getCurrentEntity();
if (entity == null) return;
this.drawControl.deleteEntity(entity);
},
hasEdit: function (val) {
this.drawControl.hasEdit(val);
},
//搜索
query: function (text, maxcount) {
var arrEntity = this.drawControl.getEntitys();
var arr = [];
var counts = 0;
for (var i = 0; i < arrEntity.length; i++) {
var entity = arrEntity[i];
var name;
if (entity.attribute.type === "label") {
name = entity.attribute.style.text;
} else if (entity.attribute.attr) {
name = entity.attribute.attr.name;
}
if (name == null || name.indexOf(text) == -1) continue;
arr.push({
name: name,
type: '标绘 - ' + entity.attribute.name,
_datatype: 'plot',
_entity: entity
});
if (maxcount) {
counts++;
if (counts > maxcount) break;
}
}
return arr;
},
//弹窗属性编辑处理
last_window_param: null,
showEditAttrWindow: function (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-xjsdk-dialog animation-scale-up",
// success: function (layero) {
// }
//});
},
saveWindowEdit: function (attrVal) {
this.viewWindow.plotEdit.updateAttr(this.last_window_param.parname, this.last_window_param.attrName, attrVal);
layer.close(layer.index);
},
showTable: function (json) {
json = json || this.getGeoJson();
var arr = [];
if (json && json.features) {
for (var i = 0, len = json.features.length; i < len; i++) {
var feature = json.features[i];
var name;
var type;
if (feature.properties) {
name = (feature.properties.attr && feature.properties.attr.name) || feature.properties.name || "未命名"
type = feature.properties.type
}
arr.push({ index: i, name: name, type: type });
}
}
this.arrList = arr;
if (this.viewWindow)
this.viewWindow.tableWork.loadData(arr);
},
showTableItem: function (item) {
var entity = this.drawControl.getEntitys(true)[item.index];
this.viewer.xjsdk.flyTo(entity);
},
delTableItem: function (item) {
var entity = this.drawControl.getEntitys()[item.index];
this.drawControl.deleteEntity(entity);
},
editTableItem: function (item) {
var entity = this.drawControl.getEntitys(true)[item.index];
if (entity == null) return;
this.viewer.xjsdk.flyTo(entity);
this.drawControl.startEditing(entity);
},
storageName: "xjsdkgis_plot",
sendGetList: function () {
var that = this;
if (window.hasServer) {
//读取后台存储
sendAjax({
url: 'map/plot/list',
type: 'get',
success: function (arr) {
var arrjson = [];
for (var i = 0; i < arr.length; i++) {
var geojson = JSON.parse(arr[i].geojson);
geojson.properties.attr.id = arr[i].id;
arrjson.push(geojson);
}
var thisJson = {
type: "FeatureCollection",
features: arrjson
}
var entitys = that.drawControl.loadJson(thisJson, {
clear: true,
flyTo: false
});
that.showTable(thisJson);
}
});
} else {
//读取本地存储
var laststorage = haoutil.storage.get(this.storageName); //读取localStorage值
if (laststorage == null || laststorage == 'null') {
//实际系统时可以注释下面代码,该代码是在线加载演示数据
if (location.hostname != "127.0.0.1" && location.hostname != "localhost") {
$.getJSON(serverURL_file + "/geojson/draw-demo.json", function (result) {
if (!that.isActivate) return;
that.jsonToLayer(result, true, true);
});
}
} else {
var json = JSON.parse(laststorage);
that.jsonToLayer(json, true, true);
}
}
},
sendSaveEntity: function (entity) {
if (this.viewWindow == null) return;
if (this.isOnDraw) {
this.isOnDraw = false;
return;
}
console.log("plot: 保存了数据")
if (window.hasServer) {
entity.attribute.attr = entity.attribute.attr || {};
var entityId = entity.attribute.attr.id;
//服务端存储
var geojson = this.drawControl.toGeoJSON(entity);
if (!entity.attribute.attr.name) {
// this.drawControl.deleteEntity(entity);
haoutil.msg("名称不可为空!");
return;
}
//新增
if (!entityId) {
sendAjax({
url: "map/plot/add",
type: "post",
data: JSON.stringify({
name: entity.attribute.attr.name || "", //名称
geojson: geojson || "", //geojson
type: entity.attribute.type, //类型
remark: entity.attribute.attr.remark || "", //备注
}),
contentType: "application/json",
success: function (data) {
entity.attribute.attr.id = data.id;
}
});
} else {
//修改
sendAjax({
url: "map/plot/update",
data: JSON.stringify({
id: entityId,
geojson: geojson,
}),
contentType: "application/json",
success: function (result) { },
});
}
} else {
entity.attribute.attr.id = entity.attribute.attr.id || (new Date()).format("yyyyMMddHHmmss");
//本地存储
var geojson = JSON.stringify(this.getGeoJson());
haoutil.storage.add(this.storageName, geojson);
}
this.sendSocket(entity);
},
sendDeleteEntity: function (entity) {
console.log("plot: 删除了数据")
if (window.hasServer) {
//后台删除
var entityId = entity.attribute.attr.id;
if (!entityId) { //表示绘制过程中删除
this.isOnDraw = true;
return;
}
sendAjax({
url: "map/plot/" + entityId,
data: JSON.stringify({}),
type: "delete",
contentType: "application/json",
success: function (result) {
},
});
}
else {
var storagedata = JSON.stringify(this.getGeoJson());
haoutil.storage.add(this.storageName, storagedata);
}
},
sendDeleteAll: function () {
console.log("plot: 删除了所有数据")
if (window.hasServer) {
//后台删除
sendAjax({
url: "map/plot/deleteAll",
contentType: "application/json",
success: function (result) {
},
});
}
else {
//本地存储
haoutil.storage.del(this.storageName);
}
},
//websocket更新坐标
socketConfig: function () {
var that = this;
xjsdk.widget.activate({
uri: 'widgets/plotSocket/widget.js',
updateAttr: function (json) {
that.drawControl.loadJson(json, {
clear: false,
flyTo: false
});
}
});
},
sendSocket: function (entity) {
var plotSocket = xjsdk.widget.getClass('widgets/plotSocket/widget.js');
if (plotSocket && plotSocket.isActivate) {
var geojson = this.drawControl.toGeoJSON(entity);
plotSocket.sendSocket(geojson);
}
}
}));