本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1049.html ，对应的 官网示例 https://openlayers.org/en/latest/examples/drag-and-drop.html
https://openlayers.org/en/latest/examples/drag-and-drop-image-vector.html?q=Drag
向map添加ol.interaction.DragAndDrop
拖拽文件到map时，会触发ol.interaction.DragAndDrop的addfeature事件，通过绑定的function获取到事件对象event所包含的要素数组。
将要素数组添加到矢量图层。
image.png
<!DOCTYPE html>
<html>
<head>
<title>拖放数据文件渲染要素</title>
<link rel="stylesheet" href="../include/ol.css" type="text/css" />
<script src="../include/ol.js"></script>
</head>
<body>
<div id="info"> </div>
<div>  拖放 GPX, GeoJSON, IGC, KML, 或者 TopoJSON格式的文件到地图上，本例会将矢量文件渲染成图像。</div>
<div id="map" class="map"></div>
<script>
//扩展拖拽交互操作
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
formatConstructors: [ //格式构造器，指定可以处理的文件格式
ol.format.GPX,
ol.format.GeoJSON,
ol.format.IGC,
ol.format.KML,
ol.format.TopoJSON
]
});
//初始构造时，只有底图，没有矢量图层；当拖拽文件后，增加矢量图层到底图
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]), //交互操作，默认 +扩展
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Aerial',
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
})
})
],
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
//当拖拽时，增加要素到底图上
dragAndDropInteraction.on('addfeatures', function (event) {
var vectorSource = new ol.source.Vector({
features: event.features
});
map.addLayer(new ol.layer.Vector({
renderMode: 'image',
source: vectorSource
}));
map.getView().fit(vectorSource.getExtent()); //获取矢量数据源的四至，将地图视图与地图范围进行适配
});
//鼠标悬停，显示要素信息
var displayFeatureInfo = function (pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function (feature) {
features.push(feature);
});
if (features.length > 0) {
var info = [];
var i, ii;
for (i = 0, ii = features.length; i < ii; ++i) {
info.push(features[i].get('name'));
}
document.getElementById('info').innerHTML = info.join(', ') || ' ';
} else {
document.getElementById('info').innerHTML = ' ';
}
};
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
displayFeatureInfo(pixel);
});
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});
</script>
</body>
</html>
网友评论