`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

拖放加载数据

把本地 GeoJSON 文件拖进地图直接渲染,示例同时提供页面内生成的数据。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

ol.interaction.DragAndDrop 负责接收拖入的文件,并用给定的 format 解析。GeoJSON 用 new ol.format.GeoJSON({ dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }) 完成经纬度到墨卡托的转换。

解析结果通过 addfeatures 事件交给业务层,示例把要素加入矢量源并 fit 到其范围;「加载内置示例」按钮解析页面内联的 GeoJSON 字符串, 不依赖任何外部文件。

操作结果
拖入本地 .geojson 文件要素加入图层,视图自动缩放到数据范围
点「加载内置示例」显示页面内生成的三个点
点「清空」移除全部要素

拖放解析失败不会抛到控制台之外,应在 addfeatures 前后加数量日志,方便排查坐标系与格式问题。

`r`n
`r`n