代码:
/*
* @Author: your name
* @Date: 2020-01-09 10:13:45
* @LastEditTime : 2020-01-14 10:31:46
* @LastEditors : Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \cesium\Test\lib\drawMinx\FileDragDropMixin.js
*/
function FileDragDropHandler(targetDiv,viewer){
var dragBox = document.createElement("div");
dragBox.id='fileDragDrop'
dragBox.classList.add("filedragdrop");
dragBox.innerHTML="请将文件拖拽到此区域";
this._dragBox=dragBox;
this._viewer=viewer;
this._parentDiv=targetDiv;
targetDiv.appendChild(dragBox);
this.fileDragDropCallBack=undefined;
this.callBackParms=undefined;
}
FileDragDropHandler.prototype.startuploadfile=function(){
var _this=this;
var oBox = _this._dragBox;
var timer = null;
document.ondragover = function () {
clearTimeout(timer);
timer = setTimeout(function () {
oBox.style.display = 'none';
}, 200);
oBox.style.display = 'block';
};
//进入子集的时候 会触发ondragover 频繁触发 不给ondrop机会
oBox.ondragenter = function () {
oBox.innerHTML = '请释放鼠标';
};
oBox.ondragover = function () {
return false;
};
oBox.ondragleave = function () {
oBox.innerHTML = '请将文件拖拽到此区域';
};
oBox.ondrop = function (ev) {
ev.preventDefault();
var oFile = ev.dataTransfer.files[0];
var reader = new FileReader();
reader.readAsText(oFile, "UTF-8");
//读取成功
reader.onload = function () {
var data = JSON.parse(this.result);
if (_this.fileDragDropCallBack) {
//回调函数,callBackParms为回调函数的参数,需要自己传入,data与_this._viewer不需要传入,但是声明的回调函数中要有该参数
_this.fileDragDropCallBack(_this.callBackParms,data,_this._viewer);
}
};
reader.onloadstart = function () {
//alert('读取开始');
};
reader.onloadend = function () {
// alert('读取结束');
};
reader.onabort = function () {
alert('读取数据中断');
};
reader.onerror = function () {
alert('读取数据失败');
};
return false;
};
}
function FileDragDropMixin(viewer){
var fileDragDropHandler= new FileDragDropHandler(document.querySelector(".cesium-viewer"),viewer);
Cesium.defineProperties(viewer, {
fileDragDropMixin: {
get: function() {
return fileDragDropHandler;
}
}
});
}
调用:
<script src="./lib/drawMinx/FileDragDropMixin.js"></script>//引用
viewer.extend(FileDragDropHandler);//加入扩展插件
viewer.fileDragDropMixin.fileDragDropCallBack = _this.parseJson;//回调函数
viewer.fileDragDropMixin.callBackParms = options//回调函函数自定义传入的参数