openlayers结合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);


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部