openlayers第三天

最新推荐文章于 2024-06-28 17:37:50 发布

仑小杰

最新推荐文章于 2024-06-28 17:37:50 发布

阅读量440

点赞数 2

分类专栏： # openlayers

本文链接：https://blog.csdn.net/m0_37659871/article/details/80598589

版权

本文介绍在OpenLayers中进行多边形查询的实现，包括绘制点、线、圆形、矩形和多边形，并获取绘制图形的空间几何数据。重点讲述了如何进行矩形范围内的目标查询，以及多边形和圆形查询的处理，涉及到后台的跨域调用和特定格式的数据转换。

摘要由CSDN通过智能技术生成

openlayers第三天，多边形查询

建议先看一下官网的demo

demo里面包含了点、线、多边形和圆，自己再额外加上一个框选，基本就差不错了。

核心代码：

var draw; // global so we can remove it later
function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
        draw = new ol.interaction.Draw({
            source: source,
            type: typeSelect.value
        });
        map.addInteraction(draw);
    }
}

通过更改ol.interaction.Draw中type的值，就可以画出不同的形状。

如果想要绘制矩形框，那么就需要做一点改动，同样的，先看一下官网的demo

核心代码：

if (value === 'Box') {
    value = 'Circle';
    geometryFunction = ol.interaction.Draw.createBox();
}
draw = new ol.interaction.Draw({
    source: source,
    type: value,
    geometryFunction: geometryFunction
});