在OpenLayers 5中绘制简单网格

我正在使用OpenLayers 5，希望用户绘制一个简单的网格（如所附的图像）。 用户应该能够像多边形一样在地图上的任何位置绘制网格。我在OpenLayers中搜索内置解决方案，但我只找到了

分划

层（），这并不真正符合我的要求。据我所知，分划覆盖了整个地图，无法修改

此外，应该可以移动和更改网格的大小，并使网格单元大小可自定义（可能使用

修改交互

）。此外，如果这样的网格在地图上，并且用户使用

绘制交互

绘制了一条线，则

捕捉交互

应适用于网格

有人知道这个问题的简单解决方法吗？或者我必须自己做这个，在里面画互动和多语言

欢迎任何帮助

---

下面的typescript代码有望帮助您在openlayers地图上绘制网格。修改和捕捉交互不在其中（翻译交互在其中），但祝您好运。；）

/*
*添加轴网图形
*/
drawGrid（行：编号，列：编号，网格颜色：字符串）{
this.gridDraw=新绘图({
source:this.drawingLayer.getSource（），
类型：GeometryType.CIRCLE，
geometryFunction:createBox（）
});
//将绘图的交互添加到地图
this.map.addInteraction（this.gridDraw）；
//在绘图开始时，将创建一个特征，我们现在设置样式（使用正确的线颜色）
this.gridDraw.on（'draund'，e=>{
e、 feature.setStyle（this.getGridStyle（例如feature、cols、rows、gridColor））；
//“平移”是指拖动特征
常量翻译=新翻译({
特色：新系列（[e.特色]），
});
translate.on（'translateing'，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（翻译）；
这个.gridInteractions.push（translate）；
});
}
/*
*设置网格的样式
*/
私有getGridStyle（功能：功能，列：编号，行：编号，gridColor:string |编号[]）{
常量样式=[]；
//添加外框样式
样式。推送（新样式）({
笔划：新笔划({
颜色：gridColor，
宽度：2
}),
填充：新填充({
颜色：“透明”
})
}));
//获取外框的坐标
const extent=feature.getGeometry（）.getExtent（）；
const bottomLeftCoord=getBottomLeft（范围）；
const topLeftCoord=getTopLeft（范围）；
const-topRightCoord=getTopRight（范围）；
//科尔斯
常量gridWidth=topRightCoord[0]-topLeftCoord[0]；
const colWidth=gridWidth/cols；
设xColCoord=[topLeftCoord[0]+colWidth，topLeftCoord[1]]；
const yColCoord=[bottomLeftCoord[0]+colWidth，bottomLeftCoord[1]]；
//为每列绘制一条垂直线
for（设i=1；i
/*
 * 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;
}