CesiumJS ViewerDragDropMixin是一个能够为Cesium Viewer添加拖拽文件的功能的插件。该插件支持拖拽GeoJSON、KML和GPX文件并将其添加到Viewer中。
首先在你的HTML页面中引入cesium.js和viewerDragDropMixin.js文件。
<script src="cesium/Cesium.js"></script>
<script src="cesium/viewerDragDropMixin.js"></script>
然后创建一个Viewer对象并将其传递给ViewerDragDropMixin的构造函数，就可以在该Viewer上添加文件拖拽功能。
var viewer = new Cesium.Viewer('cesiumContainer');
var viewerDragDropMixin = new Cesium.ViewerDragDropMixin(viewer);
你也可以直接将ViewerDragDropMixin添加到Viewer的原型对象中，这样可以在创建Viewer对象时自动拥有文件拖拽功能。
Cesium.Viewer.prototype.viewerDragDropMixin = undefined; // 在Viewer原型对象上定义名为viewerDragDropMixin的属性
var viewer = new Cesium.Viewer('cesiumContainer');
viewer.viewerDragDropMixin = new Cesium.ViewerDragDropMixin(viewer); // 直接将ViewerDragDropMixin添加到Viewer的viewerDragDropMixin属性中
ViewerDragDropMixin只有一个构造函数，接受一个Viewer实例作为参数。
创建ViewerDragDropMixin实例并将其添加到指定的Viewer中。
ViewerDragDropMixin另外提供了两种事件，当拖拽文件时会触发文件拖拽事件(fileDrag)并返回一个带有文件列表的事件对象；当拖拽结束时会触发文件拖拽结束事件(fileDrop)并返回一个带有加载完成的数据列表的事件对象。
当拖拽文件时会触发该事件，并返回一个带有文件列表的事件对象。
viewerDragDropMixin.fileDrag.addEventListener(function (event) {
console.log('你拖拽了' + event.files.length + '个文件');
});
当拖拽文件结束时会触发该事件，并返回一个带有加载完成的数据列表的事件对象，其中数据列表的每一项对应一个拖拽的文件，如果加载失败则该项的值为undefined。
viewerDragDropMixin.fileDrop.addEventListener(function (event) {
console.log(event.dataSources.length + '个文件已经加载完成');
});
var viewer = new Cesium.Viewer('cesiumContainer');
var viewerDragDropMixin = new Cesium.ViewerDragDropMixin(viewer);
viewerDragDropMixin.fileDrag.addEventListener(function (event) {
console.log('你拖拽了' + event.files.length + '个文件');
});
viewerDragDropMixin.fileDrop.addEventListener(function (event) {
console.log(event.dataSources.length + '个文件已经加载完成');
});
viewerDragDropMixin.addHandler('.geojson,.json', function (dataSource, name) {
// 添加GeoJSON文件
viewer.dataSources.add(dataSource);
});
viewerDragDropMixin.addHandler('.kml', function (dataSource, name) {
// 添加KML文件
viewer.dataSources.add(dataSource);
});
viewerDragDropMixin.addHandler('.gpx', function (dataSource, name) {
// 添加GPX文件
viewer.dataSources.add(dataSource);
});