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

Posted 2022-02-26 hpugisers

代码：

/*
 * @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//回调函函数自定义传入的参数