OpenLayers3 检查兴趣点是否在边界框中

openlayers3 check if point of interest is in a bounding box

本文关键字:边界 是否 检查 OpenLayers3      更新时间:2023-09-26

我正在尝试做这个例子:我有一个 openlayers3 地图和一个兴趣点。

在这张地图中,我可以画一个边界框,然后单击选中按钮,脚本必须告诉我边界框是否包含我的兴趣点。

这是我的地图:

        var init = function () {
        var raster = new ol.layer.Tile({
            source: new ol.source.MapQuest({
                layer: 'osm'
            })
        });
        source = new ol.source.Vector({
            wrapX: false
        });
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        map = new ol.Map({
            target: 'map',
            layers: [raster,vector],
            view: new ol.View({
              center: ol.proj.fromLonLat([11.249367, 43.774298]),
              zoom: 15
            })
        });
        // SMN marker
        var pos = ol.proj.fromLonLat([11.2490443, 43.774704]);
        var marker = new ol.Overlay({
          position: pos,
          positioning: 'center-center',
          element: document.getElementById('marker'),
          stopEvent: false
        });
        map.addOverlay(marker);
        // Vienna label
        var smn = new ol.Overlay({
          position: pos,
          element: document.getElementById('smn')
        });
        map.addOverlay(smn);
        // Popup showing the position the user clicked
        var popup = new ol.Overlay({
          element: document.getElementById('popup')
        });
        map.addOverlay(popup);      
    };

这是帮助我绘制多边形的功能。当我绘制一个多边形时,如果存在另一个多边形,则会将其删除。

function addInteraction() {
        var ct = 0;
        draw = new ol.interaction.Draw({
            source: source,
            type: 'Polygon',
            geometryFunction: function (c, g) {
                if (goog.isDef(g)) {
                    g.setCoordinates(c);
                } else {
                    g = new ol.geom.Polygon(c);
                }
                if (c[0].length > ct) {
                    console.log('click coord : ' + c[0][c[0].length - 1]);
                    var coord = c[0][c[0].length - 1];
                    coordinates.push(coord);
                    $('div#coordinate').html( $('div#coordinate').html() + "<p>" + ( Number(coord[0]).toFixed(2) ) + " - " + ( Number(coord[1]).toFixed(2) ) + "</p>" );
                    ct = c[0].length;
                } else {
                    console.log('move coord : ' + c[0][c[0].length - 1]);
                }
                return g;
            }
        });
        draw.on('drawend',  function(e) {
            lastFeature = e.feature;
        })
        draw.on('drawstart', function (e) {
            source.clear();
        });
        map.addInteraction(draw);
    }

这是身体初始化函数:

    function config(){
        init();
        $('button#check').on('click', function () {
         // something
        });
        $('button#draw').on('click', function () {
            coordinates=[];
            map.removeInteraction(draw);
            addInteraction();
        });
        $('button#nodraw').on('click', function () {
            map.removeInteraction(draw);
        });
    };

我用静态坐标设置了一个兴趣点。单击"绘图"按钮,我可以在地图上绘制一个框,指定多边形的顶点。策略完成后,我可以单击"停止绘图"按钮。

最后一步是点击检查按钮...我问你是否可以帮我编写一个函数,检查兴趣点是否在 poligon 边界框中。

数组坐标包含波利贡的坐标。

我的小提琴http://jsfiddle.net/michelejs/3zawt33b/6/

谢谢

您可以获取绘制的面范围并检查其中是否有某个坐标:

draw.on('drawend', function(evt){
  var coord = ol.proj.fromLonLat([11.2490443, 43.774704]);
  var polygon_extent = evt.feature.getGeometry().getExtent();
  var contains = ol.extent.containsCoordinate(polygon_extent, coord);
  console.info(contains);
});