以下打字稿代码有望使您走上正确的道路，以在openlayers地图上绘制网格。 Modify和snap交互不在其中（平移交互在其中），但祝您好运。 ;）

/*
 * 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],gridColor));
        });
        translate.on('translateend',gridColor));
        });
        this.map.addInteraction(translate);
        this.gridInteractions.push(translate);
    });
}

/*
 * Set the styles for the grid
 */
private getGridStyle(feature: Feature,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]),width: 2
            })
        }));

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

    return styles;
}