536 lines
18 KiB
JavaScript
536 lines
18 KiB
JavaScript
//模块：
|
||
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);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
})); |