openlayers结合turf.js 做空间分析_基于turf.js的空间分析

turf.js是一个空间分析的gis库，封装了很多常用的空间分析算法，比如相交，缓冲，点在面内等等；在做gis开发的时候，gis渲染引擎结合该库非常方便，不需要自己动手做空间分析的相关计算；本文用openlayers结合turf.js做个简单的相交分析

1 具体思路

 使用openlayers创建两个多边形，然后利用turf.js的turf.intersect方法做空间相交分析，得到两个多边形相交的几何部分，然后用openlayers绘制高亮凸显出来。

2 效果和代码如下

import * as ol from 'ol';
import * as layer from 'ol/layer';
import * as source from 'ol/source';
import * as style from 'ol/style';
import * as geom from 'ol/geom';
import 'ol/ol.css';
import turf from "turf";
var map = new ol.Map({
  layers:[
    new layer.Tile({
        source:new source.OSM()
    })
  ],
  target: "map",
  view: new ol.View({
    center: [122.520217, 45.535693],
    zoom: 9,
    projection: "EPSG:4326"
  })
});
// 创建source对象
var VectorSource = new source.Vector({
  features: []            // 值是一个feature数组   source:features  1:N
});
// 创建layer对象
var VectorLayer = new layer.Vector({
  source: VectorSource    // layer-source  1:1
});
//将layer添加到map
map.addLayer(VectorLayer);
var pt1 = [
  [
    [122.801742, 45.48565],
    [122.801742, 45.60491],
    [122.584762, 45.60491],
    [122.584762, 45.48565],
    [122.801742, 45.48565]
  ]
];
var pt2 = [
  [
    [122.520217, 45.535693],
    [122.64038, 45.553967],
    [122.720031, 45.526554],
    [122.669906, 45.507309],
    [122.723464, 45.446643],
    [122.532577, 45.408574],
    [122.487258, 45.477466],
    [122.520217, 45.535693]
  ]
];
 
var poly1 = turf.polygon(
  [
    pt1[0]
  ],
  {
    name: "大头1",
    age: "280"
  }
);
var poly2 = turf.polygon(
  [
    pt2[0]
  ],
  {
    name: "大头",
    age: "28"
  }
);
/**
 * 创建两个多边形到地图
 */
function createPolygon(ptArr) {
  var feature = new ol.Feature({
    geometry: new geom.Polygon(ptArr)
  });
  VectorSource.addFeature(feature);
}
createPolygon(pt1);
createPolygon(pt2);
 
// 获取相交几何坐标
var intersection = turf.intersect(poly1, poly2);
var geometry1 = intersection.geometry.coordinates;
// 创建相交图层
var IntersectLayer = new layer.Vector({
  source: new source.Vector({
    features: [
      new ol.Feature({
        geometry: new geom.Polygon(geometry1)
      })
    ] 
  })
});
// 定义相交样式
var IntersectStyle= new style.Style({
  stroke: new style.Stroke({
    color: "blue",
    width: 3
  }),
  fill: new style.Fill({
    color: "rgba(202, 12, 22, 0.5)"
  })
});
IntersectLayer.setStyle(IntersectStyle);
// 添加相交图层到地图
map.addLayer(IntersectLayer);