關於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//回調函函數自定義傳入的參數