关于Cesium拖json文件上传的插件

代码:

/*
 * @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//回调函函数自定义传入的参数
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章