openlayers3檢查興趣點是否在邊界框中

Question

我正在嘗試執行此示例： 我有一個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);  
    }; 

這是幫我畫一個poligon功能。當我繪製一個poligon時，如果存在另一個poligon，它將被刪除。

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完成後，我可以點擊停止繪圖按鈕。

最後一步是點擊檢查按鈕...我問你是否可以幫助我編寫檢查興趣點是否在poligon邊界框中的函數。

數組座標包含poligon的座標。

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

感謝

Answer 1

你可以繪製多邊形程度並檢查是否存在座標是它裏面：

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); 
});