openlayer调用turf进行空间数据分析实例

openlayer调用turf进行空间数据分析实例

turf处理的数据格式为GeoJson，所以在前端在进行空间数据分析前要将数据进行转换。本人简单实现在OL中调用Turf功能，希望能给进行前端空间数据处理及分析的朋友提供参考。

具体如下：

1.引入turf脚本库

   
   
   
   
   
   


   
   
   
   
   
   
   


   

   

   
   

2.Djmogo.js脚本内容

var map; var vectorLayer; var rasterLayer;
var tdtter = "http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}";
var tdtras = "http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}";
var tdtrod = "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}";


var tdtter_lyr = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: tdtter
    })
});


var tdtras_lyr = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: tdtras
    })
});


var tdtrod_lyr = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: tdtrod
    })
});




$(function () {
    CallTurfFunc();
    var map = new ol.Map({
        layers: [tdtras_lyr, vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({
            projection: 'EPSG:3857',
            center: [13571211.104171252, 3637958.2943287985],
            zoom: 7
        })
    });
});

3.turf函数调用

function CallTurfFunc()
{
    var geojsonObject = {
        "type": "FeatureCollection", "features": [
        {
            "type": "Feature", "geometry": { "type": "LineString", "coordinates": [[13573970.118557936, 3633242.5444948766],...., [13244699.128637088, 3787062.8617844293], [13241824.615167486, 3787216.2597758584], [13239428.843400298, 3787373.647233305]] },
            "properties": { "name": "changjiang", "queryargs": "taihu_js", "id": "F32A001", "is_Gq": "true" }
        }
        ]
    };


    var format = new ol.format.GeoJSON();
    var features = format.readFeatures( geojsonObject);
    var changjiang = features[0];
    // convert to a turf.js feature
    var turfLine = format.writeFeatureObject(changjiang);
    // get the line length in kilometers-------------------------------
    var length = turf.lineDistance( turfLine, 'kilometers');
    alert("changjinag length: " + length);

    //chagnjiang onmap-------------------------------------------------
    changjiang.getGeometry();
    var source = new ol.source.Vector();
    source.addFeature(changjiang);
    vectorLayer = new ol.layer.Vector({
        source: source
    });
}