我需要根据主/限制矢量图层剪切矢量图层。在绘制时,如果所绘制的部分超出了限制图层,则剪切超出限制图层的区域。
示例1。 如我们所见,底部边框的一部分超出了限制(紫色图层)
我想知道是否可以在添加功能时剪切超出限制层的区域。示例2。删除超出限制层(绿色)的区域。 我尝试使用Turf.js库中的bboxPolygon函数计算几何图形。甚至尝试使用booleanWithin检测绘制的多边形是否在限制层之外,但都没有成功。
现在,我想知道是否可能剪切区域,然后在
addfeature
上渲染剪切区域以符合限制层(如示例2所示)。这是我用来检测区域是否被剪切或是否在限制层内部的代码片段。
// detect if drawn layers is outside restriction layer
vectorDrawLayer.getSource().on('addfeature', (evt) => {
let feature = evt.feature;
//let coordinatess = feature.getGeometry().clone().transform('EPSG:3857', 'EPSG:4326').getCoordinates();
let geojsonFormat = new GeoJSON();
let firstGeometryObject = {};
let secondGeometryObject = {};
if (vectorDrawLayer.getSource().getState() === 'ready') {
let firstGeometry = vectorDrawLayer.getSource().getFeatures()[0];
let secondGeometry = restrictionLayer.getSource().getFeatures()[0];
firstGeometryObject = geojsonFormat.writeFeatureObject(firstGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
secondGeometryObject = geojsonFormat.writeFeatureObject(secondGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
}
let isWithin = booleanWithin(firstGeometryObject, secondGeometryObject)
let clipped = bBoxclip(firstGeometryObject, transformedExtent);
//console.log(JSON.stringify(firstGeometryObject))
console.log(clipped.geometry.coordinates);
console.log(isWithin);
})
更新:
我能够使用http://turfjs.org/docs/#intersect仅提取在限制层内的多边形,但现在我无法渲染仅交叉的图层。
最初,我想删除图层源,然后在获取交叉多边形坐标后,我想添加新的交叉多边形几何(不包括外部区域),但我无法渲染任何东西(似乎我漏掉了一些东西)
这是代码片段:
let geojsonFormat = new GeoJSON();
let firstGeometryObject = {};
let secondGeometryObject = {};
let feature;
if (vectorDrawLayer.getSource().getState() === 'ready') {
let firstGeometry = vectorDrawLayer.getSource().getFeatures()[0];
let secondGeometry = restrictionLayer.getSource().getFeatures()[0];
firstGeometryObject = geojsonFormat.writeFeatureObject(firstGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
secondGeometryObject = geojsonFormat.writeFeatureObject(secondGeometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
let intersectTest = intersect(firstGeometryObject, secondGeometryObject);
let polygon = new Polygon(intersectTest.geometry.coordinates)
feature = new Feature({
geometry: polygon,
name: 'test BlaBla'
});
console.log(feature)
vectorDrawSource.removeFeature(firstGeometry);
vectorDrawSource.addFeatures(feature);
}
这是一个测试应用程序的链接(更新): https://stackblitz.com/edit/js-vpdnbf