![](/img/trans.png)
[英]How can I use OpenLayers3 to put an icon on a selected point of interest in my map?
[英]openlayers3 check if point of interest is in a bounding box
我正在嘗試做這個例子:我有一個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);
}
這是body的init函數:
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后,我可以單擊Stop Drawing按鈕。
最后一步是單擊檢查按鈕...我問您是否可以幫助我編寫檢查興趣點是否在poligon邊界框中的函數。
數組坐標包含poligon的坐標。
我的JsFiddle 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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.