在 OpenLayers 5 中绘制简单的网格

Question

我正在使用 OpenLayers 5 https://openlayers.org/ 并希望用户绘制一个简单的网格（如附图所示）。 用户应该能够像多边形一样在地图上的任何位置绘制网格。我在 OpenLayers 中寻找内置解决方案，但我只找到了 graticule 层 (https://openlayers.org/en/latest/examples/graticule.html)，这并不符合我的要求。据我了解，标线覆盖了整个地图，无法修改。

此外，应该可以移动和更改网格的大小，并使网格单元格大小可自定义（可能使用modify interaction）。此外，如果地图上有这样的网格并且用户用draw interaction 绘制了一条线，那么snap interaction 应该适用于网格。

有谁知道这个问题的简单解决方案，还是我必须自己通过绘图交互和内部更多多边形来解决这个问题。

欢迎任何帮助！

Answer 1

以下打字稿代码有望使您走上正确的轨道，在 openlayers 地图上绘制网格。修改和快照交互不在其中（翻译交互在），但祝你好运。 ;)

/*
 * Add a Grid drawing
 */
drawGrid(rows: number, cols: number, gridColor: string) {
    this.gridDraw = new Draw({
        source: this.drawingLayer.getSource(),
        type: GeometryType.CIRCLE,
        geometryFunction: createBox()
    });

    // Add the interaction for drawing to the map
    this.map.addInteraction(this.gridDraw);

    // On the start of the drawing, a feature is created and we set now the style (with the correct line color)
    this.gridDraw.on('drawend', e => {
        e.feature.setStyle(this.getGridStyle(e.feature, cols, rows, gridColor));

        // Translate is to drag the feature
        const translate = new Translate({
            features: new Collection([e.feature]),
        });

        translate.on('translating', ev => {
            ev.features.getArray()[0].setStyle(this.getGridStyle(ev.features.getArray()[0], cols, rows, gridColor));
        });
        translate.on('translateend', ev => {
            ev.features.getArray()[0].setStyle(this.getGridStyle(ev.features.getArray()[0], cols, rows, gridColor));
        });
        this.map.addInteraction(translate);
        this.gridInteractions.push(translate);
    });
}

/*
 * Set the styles for the grid
 */
private getGridStyle(feature: Feature, cols: number, rows: number, gridColor: string | number[]) {
    const styles = [];
    // Add the outer box style
    styles.push(new Style({
        stroke: new Stroke({
            color: gridColor,
            width: 2
        }),
        fill: new Fill({
            color: 'transparent'
        })
    }));

    // Get the coordinates of the outer box
    const extent = feature.getGeometry().getExtent();
    const bottomLeftCoord = getBottomLeft(extent);
    const topLeftCoord = getTopLeft(extent);
    const topRightCoord = getTopRight(extent);

    // Cols
    const gridWidth = topRightCoord[0] - topLeftCoord[0];
    const colWidth = gridWidth / cols;
    let xColCoord = [topLeftCoord[0] + colWidth, topLeftCoord[1]];
    const yColCoord = [bottomLeftCoord[0] + colWidth, bottomLeftCoord[1]];

    // Draw a vertical line for each column
    for (let i = 1; i <= cols - 1; i++) {
        styles.push(new Style({
            geometry: new LineString([xColCoord, yColCoord]),
            stroke: new Stroke({
                color: gridColor,
                width: 2
            })
        }));

        // Update the coordinates for the next column
        xColCoord[0] = xColCoord[0] + colWidth;
        yColCoord[0] = yColCoord[0] + colWidth;
    }

    // Rows
    const gridHeight = bottomLeftCoord[1] - topLeftCoord[1];
    const rowHeight = gridHeight / rows;
    const xRowCoord = [topLeftCoord[0], topLeftCoord[1] + rowHeight];
    let yRowCoord = [topRightCoord[0], topRightCoord[1] + rowHeight];

    // Draw a horizontal line for each row
    for (let i = 1; i <= rows - 1; i++) {
        styles.push(new Style({
            geometry: new LineString([xRowCoord, yRowCoord]),
            stroke: new Stroke({
                color: gridColor,
                width: 2
            })
        }));

        // Update the coordinates for the next row
        xRowCoord[1] = xRowCoord[1] + rowHeight;
        yRowCoord[1] = yRowCoord[1] + rowHeight;
    }

    return styles;
}