在OpenLayers中如何获取绘制多边形的坐标及对应区域信息

1. 获取绘制多边形坐标 #

你原有代码没有监听绘制完成的回调事件，OpenLayers的Draw交互提供了drawend事件，会在用户完成绘制后触发，你可以在这个事件回调中拿到绘制生成的要素及对应坐标，修改你的addInteraction函数即可：

function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
        draw = new Draw({
            source: source,
            type: typeSelect.value,
        });
        // 新增绘制完成监听
        draw.on('drawend', function(e) {
            var feature = e.feature;
            var geometry = feature.getGeometry();
            var geomType = geometry.getType();
            
            // 坐标转换：把默认的EPSG:3857投影坐标转为WGS84经纬度
            var transformCoord = function(coord) {
                return toLonLat(coord);
            };
            
            // 按几何类型处理坐标
            var resultCoords;
            if (geomType === 'Polygon') {
                // 多边形返回外环坐标数组，每个元素是[lon, lat]格式
                resultCoords = geometry.getCoordinates()[0].map(transformCoord);
                console.log('绘制的多边形经纬度坐标：', resultCoords);
                // 也可以直接转成WKT格式方便存储
                // var wkt = new ol.format.WKT().writeFeature(feature);
            } else if (geomType === 'LineString') {
                resultCoords = geometry.getCoordinates().map(transformCoord);
                console.log('绘制的线经纬度坐标：', resultCoords);
            } else if (geomType === 'Point') {
                resultCoords = transformCoord(geometry.getCoordinates());
                console.log('绘制的点经纬度坐标：', resultCoords);
            }

            // 拿到坐标后可以在这里调用获取社区信息的方法
            getAreaInfo(resultCoords, geomType);
        })
        map.addInteraction(draw);
    }
}

2. 获取绘制区域的社区名称 #

你需要用到逆地理编码服务，把绘制的坐标传给逆地理编码接口就能拿到行政区划、社区等地址信息，通用实现逻辑如下：

function getAreaInfo(coords, geomType) {
    // 先获取绘制区域的中心点，也可以直接传多边形坐标
    var center;
    if (geomType === 'Polygon') {
        var extent = new ol.geom.Polygon([coords]).getExtent();
        center = ol.extent.getCenter(extent);
    } else if (geomType === 'LineString') {
        center = new ol.geom.LineString(coords).getCoordinateAt(0.5);
    } else {
        center = coords;
    }
    console.log('区域中心点经纬度：', center);

    // 调用逆地理编码接口即可，可选用高德、百度等公开服务，也可使用本地部署的地理编码服务
    // 示例逻辑参考：
    // 1. 把中心点坐标传给逆地理编码接口
    // 2. 解析接口返回结果，提取社区、街道等地址信息
    // 3. 把结果渲染到页面或者弹窗中即可
}

3. 修正原有代码的错误 #

你原来的地图点击事件存在逻辑错误，evt.feature不是坐标，需要修改成如下逻辑：

map.on('click', function (evt) {
    var element = popup.getElement();
    // 判断点击的是不是绘制的要素
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
        return feature;
    });
    var coordinate = evt.coordinate;
    var hdms = toStringHDMS(toLonLat(coordinate));

    $(element).popover('dispose');
    popup.setPosition(coordinate);
    var content = `<p>点击位置坐标：</p><code>${hdms}</code>`;
    // 如果点击的是绘制的要素，追加要素信息
    if(feature) {
        var geomType = feature.getGeometry().getType();
        content += `<p>要素类型：${geomType}</p>`;
    }
    $(element).popover({
        container: element,
        placement: 'top',
        animation: false,
        html: true,
        content: content,
    });
    $(element).popover('show');
});

修改完成后，你每次完成绘制都会在控制台输出对应坐标，调用逆地理编码接口后就能拿到对应的社区信息。

内容的提问来源于stack exchange，提问作者Bumda