openlayers+turf.js实现缓冲区的绘制_vue openlayers turf缓冲区

一、下载安装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);