0

我已经使用 Select 交互和 Draw 交互实现了 OpenLayers 6，我在它们之间切换。

我们可以假设用户只绘制多边形（三点或更多的几何图形）。

我希望绘制的多边形在完成后被选中。

因此，我在 Draw 交互上监听“drawend”，将绘制交互设置为非活动，将选择交互设置为活动，但是我需要将选定的特征设置为仅绘制的特征。

到目前为止，我所拥有的只是我想出的这个笨重的 hack：

// Find the center point of the drawn feature (EPSG:3857)
const featureCenter: [number, number] = this._getCenterOfExtent(geometry.getExtent());
// Get the local pixel coordinate for the feature's center
const pixel: Pixel = this._map.getPixelFromCoordinate(featureCenter);
// Create a new MapBrowserEvent registering a 'click' on this local pixel coordinate
const mbEvent: MapBrowserEvent = new MapBrowserEvent('click', this._map, new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    clientX: pixel[0],
    clientY: pixel[1]
}));
// Turn off multi-polygon selection on our Select Interaction. We only want the top polygon at this spot.
this._registeredSelector.setProperties({
    multi: false
});
// Trigger the 'click' event on the map
this._map.dispatchEvent(mbEvent);

不幸的是，这并不总是有效。我在我的 Select 交互中监听“点击”，它在强行触发点击后触发。但是，有时，该事件具有 Point、LineString 和 Polygon 的多个几何形状。很多时候，它甚至在selected数组中都没有 Polygon 几何图形。其他时候，它在数组中有一个附近的 Polygon 几何体selected，而不是我们上次绘制的那个。

是否有强制触发选择特定特征的 OpenLayers 原生方法？

另外，这是我的_getCenterOfExtent方法：

/* EXPECTS EPSG:3857 */
private _getCenterOfExtent(extent: Extent):[number, number] {
    return [
        extent[0] + (extent[2]-extent[0])/2,
        extent[1] + (extent[3]-extent[1])/2
    ];
}

更新 对窗口对象使用我的点击事件的屏幕坐标似乎比在地图上尝试客户端坐标更准确。此外，我发现以编程方式切换multiSelect Interaction 并没有实际工作，至少不是我尝试的方式。我切换到始终使用单选，这应该可以满足我们的需求。

const bbox: ClientRect | DOMRect = this._map.getTargetElement().getBoundingClientRect();
let mbEvent: MapBrowserEvent | undefined;
if (bbox) {
    pixel[0] += bbox.left;
    pixel[1] += bbox.top;
    mbEvent = new MapBrowserEvent('click', this._map, new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: true,
        screenX: pixel[0],
        screenY: pixel[1]
    }));
} else {
    mbEvent = new MapBrowserEvent('click', this._map, new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        clientX: pixel[0],
        clientY: pixel[1]
    }));
}
this._map.dispatchEvent(mbEvent);
4

1 回答 1

0

我在一个非常不起眼的地方找到了我的答案。这是一个关于将视口拟合到一组选定的多边形的旧问题的旧答案。

您似乎可以通过引用修改集合，并且地图将更新以反映更改。

因此，我们可以从一个 Select Interaction 中获取所选特征的 Collection，清除其中的内容，并设置新的内容。

import { Collection } from 'ol';

...

type RegisteredListener = (event: MapBrowserEvent | DrawEvent | SelectEvent) => boolean;

...

private _drawingSource: VectorSource = new VectorSource({wrapX: false});
private _drawingLayer: VectorLayer = new VectorLayer({
    source: this._drawingSource
});
private _registeredDraw: Draw = new Draw({
    source: this._drawingSource,
    type: 'Polygon'
});
private _registeredSelector: Select = new Select({
    condition: click,
    multi: false,
    filter: (feature: FeatureLike, layer: Layer) => {
        const geometry: RenderFeature | Geometry | undefined = feature.getGeometry();
        if (geometry && geometry.getType() === 'Polygon') {
            return true;
        }
        return false;
    }
});

...

private _onDrawEnd: RegisteredListener = (event: DrawEvent) => {
    if (event.feature) {
        // Get Collection of selected Features
        const selectedCollection: Collection<FeatureLike> = this._registeredSelector.getFeatures();
        // Clear the Collection
        selectedCollection.clear();
        // Add the recently drawn Feature to the collection
        selectedCollection.push(event.feature);
        event.stopPropagation();
        // Re-enable the Select Interaction
        // If we don't set a timeout before enabling the Select Interaction again,
        // it will fire with the location if the last point, selecting only Point and/or LineString,
        // not the Polygon. This would clear the selected features. This occurs even if we stop the event propagation.
        setTimeout(() => {
            this._registeredDraw.setActive(true);
            this._registeredSelect.setActive(true);
        });
    }
    return false;
}
于 2019-12-06T16:51:18.907 回答