Web

OpenLayers Workshop(二)Vector Data

Drag and drop 抓和放

在我们的功能编辑器中,我们想要用户可以导入自己的数据并进行编辑.我们将要使用DragAndDrop进行交互.和以前一样,我们将继续使用 GeoJSON 格式来解析特征,但交互配置可以为任意数量的特征格式使用。

我们将在本练习中将我们的地图传递给许多其他组件,因此请确保您已将地图分配给名为 map 的变量:

const map = new Map({

在main.js中引用一个交互类DragAndDrop:

import DragAndDrop from 'ol/interaction/DragAndDrop';
接下来我们将要创建一个没有初始数组的矢量源.与之前从其它的位置加载数据不同,这个源将存储用户拖放到地图上的特征.
const source = new VectorSource();

现在删掉原先map中的layers列表,用上面的矢量源创建新的图层,并添加到地图中:

const layer = new VectorLayer({
  source: source
});
map.addLayer(layer);

最后,我们创建一个拖放的交互,将其配置为与我们的矢量源一起使用,并将其放到地图中:

map.addInteraction(new DragAndDrop({
  source: source,
  formatConstructors: [GeoJSON]
}));

当拖动data文件夹下的country.json文件到浏览器页面时,就会显示出上文中的地图。

发表评论