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);
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
|
|||
|
|
|||
|
}));
|