【openlayers系统学习】1.2交互-拖放文件

二、拖放

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文件）

​​