372 lines
13 KiB
JavaScript
372 lines
13 KiB
JavaScript
|
||
//模块：
|
||
var addmarkerWidget = xjsdk.widget.bindClass(xjsdk.widget.BaseWidget.extend({
|
||
viewer: null, //框架会自动对map赋值
|
||
options: {
|
||
resources: ['map.css'],
|
||
//弹窗
|
||
view: {
|
||
type: "window",
|
||
url: "view.html",
|
||
windowOptions: {
|
||
width: 300,
|
||
height: 400
|
||
}
|
||
}
|
||
},
|
||
drawControl: null,
|
||
//初始化[仅执行1次]
|
||
create: function () {
|
||
this.drawControl = new xjsdk.Draw(this.viewer, {
|
||
hasEdit: false,
|
||
});
|
||
|
||
//事件监听
|
||
var that = this;
|
||
this.drawControl.on(xjsdk.draw.event.DrawCreated, function (e) {
|
||
var entity = e.entity;
|
||
that.bindMarkerEx(entity);
|
||
});
|
||
this.drawControl.on(xjsdk.draw.event.EditMovePoint, function (e) {//编辑修改了点
|
||
var entity = e.entity;
|
||
|
||
that.saveEntity(entity);
|
||
});
|
||
|
||
//添加到图层控制
|
||
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 });
|
||
},
|
||
});
|
||
}
|
||
|
||
this.getList();
|
||
},
|
||
viewWindow: null,
|
||
//每个窗口创建完成后调用
|
||
winCreateOK: function (opt, result) {
|
||
this.viewWindow = result;
|
||
},
|
||
//激活插件
|
||
activate: function () {
|
||
this.hasEdit(true);
|
||
},
|
||
//释放插件
|
||
disable: function () {
|
||
this.viewWindow = null;
|
||
this.stopDraw();
|
||
this.hasEdit(false);
|
||
|
||
// //从图层控制中 移除
|
||
// if(this.layerWork){
|
||
// unbindLayerControl(this.layerWork);
|
||
// }
|
||
},
|
||
stopDraw: function () {
|
||
this.drawControl.stopDraw();
|
||
},
|
||
drawPoint: function () {
|
||
this.stopDraw();
|
||
this.drawControl.startDraw({
|
||
type: "billboard",
|
||
style: {
|
||
scale: 1,
|
||
image: this.path + "img/marker.png"
|
||
}
|
||
});
|
||
},
|
||
editable: false,
|
||
hasEdit: function (val) {
|
||
this.editable = val;
|
||
this.drawControl.hasEdit(val);
|
||
},
|
||
bindMarkerEx: function (entity) {
|
||
if (entity == null || entity.position == null) return;
|
||
entity.attribute.attr = entity.attribute.attr || {};
|
||
entity.attribute.attr.id = "0";//(new Date()).format("yyyyMMddHHmmss");
|
||
entity.attribute.attr.name = "我的标记";
|
||
entity.label = this.getLabelStyle(entity.attribute.attr.name);
|
||
entity.billboard.scaleByDistance = new Cesium.NearFarScalar(1.5e2, 1, 8.0e6, 0.2);
|
||
var that = this;
|
||
this.saveEntity(entity, function () {
|
||
entity.popup = {
|
||
html: function (entity) {
|
||
return that.getMarkerInhtml(entity.attribute.attr);
|
||
},
|
||
anchor: [0, -35]
|
||
};
|
||
that.viewer.xjsdk.popup.show(entity, entity.position._value);
|
||
});
|
||
},
|
||
//========================
|
||
saveEditFeature: function (id) {
|
||
var entity = this.drawControl.getEntityById(id);
|
||
|
||
entity.attribute.attr = entity.attribute.attr || {};
|
||
entity.attribute.attr.name = $.trim($("#addmarker_attr_name").val());
|
||
entity.attribute.attr.remark = $.trim($("#addmarker_attr_remark").val());
|
||
|
||
this.viewer.xjsdk.popup.close();
|
||
entity.label.text = entity.attribute.attr.name;
|
||
|
||
this.saveEntity(entity);
|
||
},
|
||
deleteEditFeature: function (id) {
|
||
var entity = this.drawControl.getEntityById(id);
|
||
this.drawControl.deleteEntity(entity);
|
||
|
||
this.viewer.xjsdk.popup.close();
|
||
this.viewWindow.refMarkerList();
|
||
|
||
//服务端存储
|
||
if (window.hasServer) {
|
||
sendAjax({
|
||
url: 'map/mark/' + id,
|
||
type: "delete",
|
||
success: function (data) {
|
||
}
|
||
});
|
||
}
|
||
else {//浏览器本地存储
|
||
var storagedata = this.getJsonData();
|
||
haoutil.storage.add(this.storageName, storagedata);
|
||
}
|
||
},
|
||
getMarkerDataList: function () {
|
||
var arr = [];
|
||
var arrEntity = this.drawControl.getEntitys();
|
||
for (var i = 0, len = arrEntity.length; i < len; i++) {
|
||
if (!arrEntity[i].attribute.attr.name) arrEntity[i].attribute.attr.name = "我的标记";
|
||
arr.push(arrEntity[i].attribute.attr);
|
||
}
|
||
return arr;
|
||
},
|
||
getMarkerInhtml: function (attr) {
|
||
var inhtml;
|
||
if (this.editable) {
|
||
if (!attr.name || attr.name == "我的标记")
|
||
attr.name = "";
|
||
if (!attr.remark)
|
||
attr.remark = "";
|
||
if (!attr.id)
|
||
attr.id = "0";
|
||
inhtml = '<div class="addmarker-popup-titile">添加标记</div><div class="addmarker-popup-content" ><form >' +
|
||
'<div class="form-group"> <label for="addmarker_attr_name">名称</label><input type="text" id="addmarker_attr_name" class="form-control" value="' + attr.name + '" placeholder="请输入标记名称" /> </div>' +
|
||
'<div class="form-group"> <label for="addmarker_attr_remark">备注</label><textarea id="addmarker_attr_remark" class="form-control" rows="3" style="resize: none;" placeholder="请输入备注（可选填）" >' + attr.remark + '</textarea></div>' +
|
||
'<div class="form-group" style="text-align: center;"><input type="button" class="btn btn-primary btn-sm" value="保存" onclick="addmarkerWidget.saveEditFeature(' + attr.id + ')" />' +
|
||
' <input type="button" class="btn btn-danger btn-sm" value="删除" onclick="addmarkerWidget.deleteEditFeature(' + attr.id + ')" /></div>' +
|
||
'</form></div>';
|
||
} else {
|
||
inhtml = '<div class="addmarker-popup-titile">我的标记</div><div class="addmarker-popup-content" ><form >' +
|
||
'<div class="form-group"><label>名称</label>：' + attr.name + '</div>' +
|
||
'<div class="form-group"><label>备注</label>：' + attr.remark + '</div>' +
|
||
'</form></div>';
|
||
}
|
||
return inhtml;
|
||
},
|
||
centerAt: function (id) {
|
||
var entity = this.drawControl.getEntityById(id);
|
||
if (entity) {
|
||
//参数解释：点数据：radius控制视距距离
|
||
this.viewer.xjsdk.flyTo(entity, { radius: 2500 });
|
||
}
|
||
},
|
||
deleteAll: function () {
|
||
this.drawControl.deleteAll();
|
||
|
||
if (this.viewWindow)
|
||
this.viewWindow.refMarkerList();
|
||
|
||
//服务端存储
|
||
if (window.hasServer && userId) {
|
||
sendAjax({
|
||
url: 'map/mark/del/' + userId,
|
||
type: "delete",
|
||
dataType: "json",
|
||
success: function (data) {
|
||
}
|
||
});
|
||
}
|
||
else {//浏览器本地存储
|
||
//本地存储
|
||
haoutil.storage.del(this.storageName);
|
||
}
|
||
},
|
||
label_font_style: "normal small-caps normal 19px 楷体",
|
||
getLabelStyle: function (name) {
|
||
return new Cesium.LabelGraphics({
|
||
text: name == "" ? "我的标记" : name,
|
||
font: this.label_font_style,
|
||
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||
outlineColor: Cesium.Color.BLACK,
|
||
outlineWidth: 3,
|
||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
pixelOffset: new Cesium.Cartesian2(0, -50),
|
||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000)
|
||
});
|
||
},
|
||
getJsonData: function () {
|
||
var arr = [];
|
||
var arrEntity = this.drawControl.getEntitys();
|
||
for (var i = 0, len = arrEntity.length; i < len; i++) {
|
||
var entity = arrEntity[i];
|
||
var attr = entity.attribute.attr;
|
||
var coord = xjsdk.draw.attr.billboard.getCoordinates(entity);
|
||
|
||
var item = {
|
||
id: attr.id,
|
||
name: attr.name,
|
||
remark: attr.remark,
|
||
x: coord[0][0],
|
||
y: coord[0][1],
|
||
z: coord[0][2]
|
||
};
|
||
arr.push(item);
|
||
}
|
||
return JSON.stringify(arr);
|
||
},
|
||
jsonToLayer: function (arr, isclear) {
|
||
if (arr == null || arr.length == 0) return;
|
||
if (isclear) {
|
||
this.drawControl.deleteAll();
|
||
}
|
||
|
||
var that = this;
|
||
var arrEntity = [];
|
||
for (var i = 0; i < arr.length; i++) {
|
||
var item = arr[i];
|
||
if (!item.x || !item.y) continue;
|
||
|
||
var attribute = {
|
||
type: "billboard",
|
||
attr: {
|
||
id: item.id || "",
|
||
name: item.name || "",
|
||
remark: item.remark || ""
|
||
},
|
||
style: {
|
||
scale: 1,
|
||
image: this.path + "img/marker.png"
|
||
}
|
||
};
|
||
|
||
if (!isclear) { //叠加时，清除已有同id数据
|
||
var entity = this.drawControl.getEntityById(attribute.attr.id);
|
||
this.drawControl.deleteEntity(entity);
|
||
}
|
||
|
||
var position = Cesium.Cartesian3.fromDegrees(item.x, item.y, item.z || 0.0);
|
||
var entity = this.drawControl.attributeToEntity(attribute, position);
|
||
entity.popup = {
|
||
html: function (entity) {
|
||
return that.getMarkerInhtml(entity.attribute.attr);
|
||
},
|
||
anchor: [0, -35]
|
||
};
|
||
entity.billboard.scaleByDistance = new Cesium.NearFarScalar(1.5e2, 1, 8.0e6, 0.2);
|
||
entity.label = this.getLabelStyle(attribute.attr.name);
|
||
arrEntity.push(entity);
|
||
}
|
||
|
||
this.viewer.flyTo(arrEntity, { duration: 2.0 });
|
||
|
||
if (this.viewWindow)
|
||
this.viewWindow.refMarkerList();
|
||
},
|
||
storageName: "xjsdkgis_addmarker",
|
||
getList: function () {
|
||
var that = this;
|
||
|
||
//读取服务端存储
|
||
if (window.hasServer) {
|
||
var that = this;
|
||
sendAjax({
|
||
url: 'map/mark/list',
|
||
type: 'get',
|
||
success: function (arr) {
|
||
that.jsonToLayer(arr, true);
|
||
}
|
||
});
|
||
}
|
||
else {//读取本地存储
|
||
var laststorage = haoutil.storage.get(this.storageName); //读取localStorage值
|
||
if (laststorage != null && laststorage != 'null') {
|
||
|
||
var arr = JSON.parse(laststorage);
|
||
this.jsonToLayer(arr, true);
|
||
}
|
||
}
|
||
},
|
||
saveEntity: function (entity, endfun) {
|
||
//服务端存储
|
||
if (window.hasServer) {
|
||
var attr = entity.attribute.attr;
|
||
var coord = xjsdk.draw.attr.billboard.getCoordinates(entity);
|
||
var that = this;
|
||
if (attr.id == "0") {//新增
|
||
sendAjax({
|
||
url: 'map/mark/add',
|
||
data: JSON.stringify({
|
||
name: attr.name,
|
||
remark: attr.remark,
|
||
x: coord[0][0],
|
||
y: coord[0][1],
|
||
z: coord[0][2]
|
||
}),
|
||
type: 'post',
|
||
contentType: "application/json",
|
||
success: function (data) {
|
||
entity.attribute.attr.id = data.id;
|
||
if (endfun) endfun();
|
||
that.viewWindow.refMarkerList();
|
||
}
|
||
});
|
||
} else {//修改
|
||
sendAjax({
|
||
url: 'map/mark/update',
|
||
data: JSON.stringify({
|
||
id: attr.id,
|
||
name: attr.name,
|
||
remark: attr.remark,
|
||
x: coord[0][0],
|
||
y: coord[0][1],
|
||
z: coord[0][2],
|
||
}),
|
||
type: 'post',
|
||
contentType: "application/json",
|
||
success: function (data) {
|
||
if (endfun) endfun();
|
||
that.viewWindow.refMarkerList();
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
else {//浏览器本地存储
|
||
if (entity.attribute.attr.id == "0")
|
||
entity.attribute.attr.id = (new Date()).format("yyyyMMddHHmmss");
|
||
|
||
var storagedata = this.getJsonData();
|
||
haoutil.storage.add(this.storageName, storagedata);
|
||
|
||
if (endfun) endfun();
|
||
this.viewWindow.refMarkerList();
|
||
}
|
||
|
||
},
|
||
|
||
|
||
})); |