337 lines
9.0 KiB
JavaScript
337 lines
9.0 KiB
JavaScript
;(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
|
||
|
||
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
|
||
},
|
||
{
|
||
onAdd: (event) => {
|
||
let eleId = event.id,
|
||
graphic = event.graphic
|
||
//popup的DOM添加到页面的回调方法
|
||
$('#' + eleId + ' .mars3d-popup-btn').click((e) => {
|
||
$('#' + eleId + ' .mars3d-popup-edititem').each(function () {
|
||
var val = $(this).val()
|
||
var key = $(this).attr('data-type')
|
||
graphic.attr[key] = val
|
||
})
|
||
this.saveEditFeature(graphic)
|
||
})
|
||
},
|
||
onRemove: function (eleId, graphic) {
|
||
//popup的DOM从页面移除的回调方法
|
||
},
|
||
anchor: [0, -35],
|
||
}
|
||
)
|
||
|
||
//事件监听
|
||
this.graphicLayer.on(mars3d.EventType.drawCreated, (e) => {
|
||
var graphic = e.graphic
|
||
if (!graphic || !graphic.position) {
|
||
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.delete, (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(name) {
|
||
return {
|
||
scale: 1,
|
||
image: this.path + 'img/marker.png',
|
||
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1, 8.0e6, 0.2),
|
||
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.stopDraw()
|
||
this.graphicLayer.startDraw({
|
||
type: 'billboard',
|
||
style: this.getStyle(),
|
||
})
|
||
}
|
||
hasEdit(val) {
|
||
this.editable = val
|
||
this.graphicLayer.hasEdit = val
|
||
}
|
||
//========================
|
||
saveEditFeature(graphic) {
|
||
this.graphicLayer.closePopup()
|
||
graphic.label.text = graphic.attr.name
|
||
|
||
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 JSON.stringify(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(item.name),
|
||
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()
|
||
}
|
||
}
|
||
getList() {
|
||
if (window.hasServer) {
|
||
//读取服务端存储
|
||
// window.sendAjax({
|
||
// url: 'map/mark/list',
|
||
// type: 'get',
|
||
// success: (arr) => {
|
||
// this.loadJson(arr, true)
|
||
// },
|
||
// })
|
||
} else {
|
||
//读取本地存储
|
||
var laststorage = haoutil.storage.get(this.storageName) //读取localStorage值
|
||
if (laststorage != null && laststorage != 'null') {
|
||
var arr = JSON.parse(laststorage)
|
||
this.loadJson(arr, 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()
|
||
haoutil.storage.add(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()
|
||
haoutil.storage.add(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 {
|
||
//浏览器本地存储
|
||
haoutil.storage.del(this.storageName)
|
||
}
|
||
}
|
||
}
|
||
|
||
//注册到widget管理器中。
|
||
mars3d.widget.bindClass(MyWidget)
|
||
|
||
//每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
|
||
})(window, mars3d)
|