openlayer调用turf进行空间数据分析实例
turf处理的数据格式为GeoJson，所以在前端在进行空间数据分析前要将数据进行转换。本人简单实现在OL中调用Turf功能，希望能给进行前端空间数据处理及分析的朋友提供参考。
具体如下：
1.引入turf脚本库
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<title></title>
<link rel=”stylesheet” href=”Style/style.css” type=”text/css”/>
<link rel=”stylesheet” href=”Lib/ol.css” type=”text/css”/>
<script src=”Lib/ol-debug.js” type=”text/javascript”></script>
<script src=”Libs/ol/ol-debug.js” type=”text/javascript”></script>
<link href=”Libs/ol/ol.css” rel=”stylesheet” type=”text/css” />
<link href=”Libs/jquery-ui-1.11.4/jquery-ui.min.css” rel=”stylesheet” type=”text/css” />
<link href=”Libs/jquery-ui-1.11.4/jquery-ui.css” rel=”stylesheet” type=”text/css” />
<script src=”Libs/jquery-ui-1.11.4/external/jquery/jquery.js” type=”text/javascript”></script>
<script src=”Libs/jquery-ui-1.11.4/jquery-ui.min.js” type=”text/javascript”></script>
<script src=”Libs/jquery-ui-1.11.4/jquery-ui.js” type=”text/javascript”></script>
<script src=”Libs/jquery.ui.datepicker-zh-CN.js” type=”text/javascript”></script>
<script src=”https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js”></script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div id=”map”></div>
<script src=”Script/Djmogo.js” type=”text/javascript”></script>
</form>
</body>
</html>
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
});
}
转载自：https://blog.csdn.net/pdw521/article/details/79296045
