(function (window, mars3d) {
|
//创建widget类，需要继承BaseWidget
|
class MyWidget extends mars3d.widget.BaseWidget {
|
//外部资源配置
|
get resources() {
|
return ["map.css"];
|
}
|
|
//弹窗配置
|
get view() {
|
return {
|
type: "window",
|
url: "view.html",
|
windowOptions: {
|
width: 300,
|
height: 400,
|
},
|
};
|
}
|
//初始化[仅执行1次]
|
create() {
|
this.storageName = "mars3d_addmarker";
|
this.editable = true;
|
|
this.graphicLayer = new mars3d.layer.GraphicLayer({
|
name: this.config.name,
|
pid: 99, //图层管理 中使用，父节点id
|
hasEdit: false,
|
});
|
this.map.addLayer(this.graphicLayer);
|
|
this.graphicLayer.bindPopup((event) => {
|
let graphic = event.graphic;
|
if (!graphic) {
|
return;
|
}
|
|
var html = mars3d.Util.getTemplateHtml({
|
title: "我的标记",
|
template: [
|
{ field: "name", name: "名称" },
|
{ field: "remark", name: "备注", type: "textarea" },
|
this.editable ? { field: "id", name: "确定", type: "button" } : null,
|
],
|
attr: {
|
id: graphic.id,
|
...graphic.attr,
|
},
|
edit: this.editable,
|
width: 190,
|
});
|
return html;
|
});
|
|
this.graphicLayer.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;
|
});
|
graphic.label.text = graphic.attr.name;
|
this.saveEditFeature(graphic);
|
});
|
}
|
});
|
//事件监听
|
this.graphicLayer.on(mars3d.EventType.drawCreated, (e) => {
|
var graphic = e.graphic;
|
if (!graphic || !graphic.positionShow) {
|
return;
|
}
|
graphic.attr.name = "我的标记";
|
|
this.saveEntity(graphic, () => {
|
this.graphicLayer.openPopup(graphic);
|
});
|
});
|
|
this.graphicLayer.on(mars3d.EventType.editMovePoint, (e) => {
|
this.saveEntity(e.graphic); //编辑修改了点
|
});
|
this.graphicLayer.on(mars3d.EventType.removeGraphic, (e) => {
|
this.deleteItem(e.graphic.id); //保存数据
|
});
|
|
this.getList();
|
}
|
//每个窗口创建完成后调用
|
winCreateOK(opt, result) {
|
this.viewWindow = result;
|
}
|
//激活插件
|
activate() {
|
this.hasEdit(true);
|
}
|
//释放插件
|
disable() {
|
this.viewWindow = null;
|
this.stopDraw();
|
this.hasEdit(false);
|
}
|
stopDraw() {
|
this.graphicLayer.stopDraw();
|
}
|
//配置的样式
|
getStyle() {
|
return {
|
scale: 1,
|
image: this.path + "img/mark1.png",
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 8.0e6, 0.2),
|
highlight: {
|
type: mars3d.EventType.click,
|
image: this.path + "img/mark2.png",
|
},
|
label: {
|
text: "{name}",
|
font_size: 20,
|
outline: true,
|
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),
|
},
|
};
|
}
|
drawPoint() {
|
this.graphicLayer.startDraw({
|
type: "billboard",
|
style: this.getStyle(),
|
});
|
}
|
hasEdit(val) {
|
this.editable = val;
|
this.graphicLayer.hasEdit = val;
|
}
|
//========================
|
saveEditFeature(graphic) {
|
this.graphicLayer.closePopup();
|
|
this.saveEntity(graphic);
|
}
|
deleteItemById(id) {
|
let graphic = this.graphicLayer.getGraphicById(id);
|
if (graphic) {
|
graphic.remove();
|
}
|
this.deleteItem(id);
|
}
|
getGraphicAttrList() {
|
var arrAttr = [];
|
var arrGraphic = this.graphicLayer.getGraphics();
|
for (var i = 0, len = arrGraphic.length; i < len; i++) {
|
let graphic = arrGraphic[i];
|
let attr = graphic.attr;
|
if (!attr.name) {
|
attr.name = "我的标记";
|
}
|
arrAttr.push({
|
id: graphic.id,
|
...attr,
|
});
|
}
|
return arrAttr;
|
}
|
flyTo(id) {
|
let graphic = this.graphicLayer.getGraphicById(id);
|
if (graphic) {
|
//参数解释：点数据：radius控制视距距离
|
this.map.flyToGraphic(graphic, { radius: 2500 });
|
}
|
}
|
getJsonData() {
|
var arr = [];
|
var graphics = this.graphicLayer.getGraphics();
|
for (var i = 0, len = graphics.length; i < len; i++) {
|
var graphic = graphics[i];
|
var attr = graphic.attr;
|
var point = graphic.point.format();
|
|
arr.push({
|
id: graphic.id,
|
name: attr.name,
|
remark: attr.remark,
|
lat: point.lat,
|
lng: point.lng,
|
alt: point.alt,
|
});
|
}
|
return arr;
|
}
|
|
loadJson(arr, isclear) {
|
if (arr == null || arr.length == 0) {
|
return;
|
}
|
if (isclear) {
|
this.graphicLayer.clear();
|
}
|
|
var arrGraphic = [];
|
for (var i = 0; i < arr.length; i++) {
|
var item = arr[i];
|
if (!item.lat || !item.lng) {
|
continue;
|
}
|
|
if (!isclear) {
|
//叠加时，清除已有同id数据
|
let graphic = this.graphicLayer.getGraphicById(item.id);
|
this.graphicLayer.removeGraphic(graphic);
|
}
|
|
var graphic = new mars3d.graphic.BillboardEntity({
|
id: item.id,
|
position: [item.lng, item.lat, item.alt],
|
style: this.getStyle(),
|
attr: {
|
name: item.name || "我的标记",
|
remark: item.remark || "",
|
},
|
});
|
this.graphicLayer.addGraphic(graphic);
|
arrGraphic.push(graphic);
|
}
|
|
this.map.flyToGraphic(arrGraphic, { duration: 2.0, scale: 2 });
|
|
if (this.viewWindow) {
|
this.viewWindow.refMarkerList();
|
}
|
|
var storagedata = this.getJsonData();
|
localforage.setItem(this.storageName, storagedata);
|
}
|
getList() {
|
if (window.hasServer) {
|
//读取服务端存储
|
// window.sendAjax({
|
// url: 'map/mark/list',
|
// type: 'get',
|
// success: (arr) => {
|
// this.loadJson(arr, true)
|
// },
|
// })
|
} else {
|
//读取本地存储
|
localforage.getItem(this.storageName).then((laststorage) => {
|
if (!laststorage) {
|
return;
|
}
|
this.loadJson(laststorage, true);
|
});
|
}
|
}
|
saveEntity(graphic, endfun) {
|
if (window.hasServer) {
|
//服务端存储
|
// var attr = graphic.attr
|
// var point = graphic.point
|
// window.sendAjax({
|
// url: 'map/mark/update',
|
// data: JSON.stringify({
|
// id: graphic.id,
|
// name: attr.name,
|
// remark: attr.remark,
|
// lng: point.lng,
|
// lat: point.lat,
|
// alt: point.alt,
|
// }),
|
// type: 'post',
|
// contentType: 'application/json',
|
// success: (data) => {
|
// if (endfun) {
|
// endfun()
|
// }
|
// this.viewWindow.refMarkerList()
|
// },
|
// })
|
} else {
|
//浏览器本地存储
|
var storagedata = this.getJsonData();
|
localforage.setItem(this.storageName, storagedata);
|
|
if (endfun) {
|
endfun();
|
}
|
this.viewWindow.refMarkerList();
|
}
|
}
|
|
deleteItem(id) {
|
this.graphicLayer.closePopup();
|
this.viewWindow.refMarkerList();
|
|
//服务端存储
|
if (window.hasServer) {
|
// window.sendAjax({
|
// url: 'map/mark/' + id,
|
// type: 'delete',
|
// success: function (data) {},
|
// })
|
} else {
|
//浏览器本地存储
|
var storagedata = this.getJsonData();
|
localforage.setItem(this.storageName, storagedata);
|
}
|
}
|
deleteAll() {
|
this.graphicLayer.clear();
|
|
if (this.viewWindow) {
|
this.viewWindow.refMarkerList();
|
}
|
|
if (window.hasServer && window.userId) {
|
//服务端存储
|
// window.sendAjax({
|
// url: 'map/mark/del/' + window.userId,
|
// type: 'delete',
|
// dataType: 'json',
|
// success: function (data) {},
|
// })
|
} else {
|
//浏览器本地存储
|
localforage.removeItem(this.storageName);
|
}
|
}
|
}
|
|
//注册到widget管理器中。
|
mars3d.widget.bindClass(MyWidget);
|
|
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
})(window, mars3d);
|
