openlayers+turf.js实现缓冲区的绘制_vue openlayers turf缓冲区-CSDN博客

本文链接：https://blog.csdn.net/gis_zzu/article/details/102812294

本文详细介绍了如何使用Turf.js库在OpenLayers中为点、线和面地理数据创建缓冲区。通过具体代码示例，展示了如何生成缓冲数据，并将其与GeoJSON对象结合，最终在地图上显示缓冲效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、下载安装turf

下载地址：https://github.com/Turfjs/turf

api和示例地址：http://turfjs.org/docs/

二、使用openlayers配个turf.js

(1) 点数据的缓存

//创建缓冲数据
var point =  turf.point([114.2058,33.2469]);
var buffered = turf.buffer(point , 0.2, {units: 'kilometers'});
//创建数据geojson对象和数据源对象
var format = new ol.format.GeoJSON();
var source =new ol.source.Vector()
//读取geojson数据
var a = format.readFeature(point);
var b = format.readFeature(buffered);
//将数据添加数据源的
source.addFeature(a);
source.addFeature(b);
//添加图层
var test= new ol.layer.Vector({source: source})
map.addLayer(test);

（2）线数据的缓冲区

//创建缓冲数据
var line =  turf.lineString([[114.2058,33.2469],[114.1715,33.2443],[114.1735,33.2271],[114.2085,33.2257],[114.2058,33.2469]]);
var buffered = turf.buffer(line , 0.2, {units: 'kilometers'});
//创建数据geojson对象和数据源对象
var format = new ol.format.GeoJSON();
var source =new ol.source.Vector()
//读取geojson数据
var a = format.readFeature(line);
var b = format.readFeature(buffered);
//将数据添加数据源的
source.addFeature(a);
source.addFeature(b);
//添加图层
var test= new ol.layer.Vector({source: source})
map.addLayer(test);

（3）面数据的缓冲区的分析

//创建缓冲数据
var py =  turf.polygon([[[114.2058,33.2469],[114.1715,33.2443],[114.1735,33.2271],[114.2085,33.2257],[114.2058,33.2469]]]);
var buffered = turf.buffer(py , 0.2, {units: 'kilometers'});
//创建数据geojson对象和数据源对象
var format = new ol.format.GeoJSON();
var source =new ol.source.Vector()
//读取geojson数据
var a = format.readFeature(py );
var b = format.readFeature(buffered);
//将数据添加数据源的
source.addFeature(a);
source.addFeature(b);
//添加图层
var test= new ol.layer.Vector({source: source})
map.addLayer(test);