二、拖放
Drag and drop 拖放
对于我们的要素编辑器，我们希望用户能够导入自己的数据进行编辑。为此，我们将使用 DragAndDrop 交互。和以前一样，我们将坚持使用 GeoJSON 格式来解析特征，但交互可以配置为使用任意数量的特征格式。
在本练习中，我们将把地图传递给许多其他组件，因此请确保您已将映射分配给名为 map 的变量：
const map = new Map({
将拖放交互导入到您的 main.js 中：
/**
* 导入DragAndDrop交互模块
* 该交互模块允许用户通过拖放操作向地图添加数据。
*/
import DragAndDrop from 'ol/interaction/DragAndDrop';
接下来，我们将创建一个没有初始数据的矢量源。该源将存储用户拖放到地图上的要素，而不是像上一个示例那样从远程位置加载数据。
/**
* 创建一个新的向量源对象。
* VectorSource是一个用于存储向量数据的对象，可以用于地图应用程序等，其中向量数据可以是点、线、多边形等。
* 返回值: VectorSource对象，用于存储向量数据。
*/
const source = new VectorSource();
现在，从地图中删除旧的 layers 列表，使用空矢量源创建一个新图层，并将其添加到地图中。
/**
* 创建一个新的矢量图层对象。
* VectorLayer是一个用于显示矢量数据的图层对象，它将矢量数据存储在VectorSource对象中，并使用VectorSource对象中的数据来渲染矢量数据。
* 返回值: VectorLayer对象，用于显示矢量数据。
*/
const layer = new VectorLayer({
source: source,
});
map.addLayer(layer);
最后，我们将创建一个拖放交互，将其配置为与我们的矢量源一起使用，并将其添加到地图中：
/**
* 创建一个新的拖放交互对象。
* DragAndDrop是一个交互对象，用于处理拖放操作，允许用户将数据从文件拖放到地图上。
* 返回值: DragAndDrop对象，用于处理拖放操作。
*/
map.addInteraction(
new DragAndDrop({
source: source,
formatConstructors: [GeoJSON],
})
);
现在您应该能够将 GeoJSON 文件拖放到地图上并查看它们的渲染效果。（使用的数据是data文件下countries.json文件）
