OpenLayers3 检查兴趣点是否在边界框中
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);
}
这是身体初始化函数:
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);
});
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 如何检测是否有溢出
- jQuery中是否内置了任何字符串格式化函数
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 测试索引值是否等于某个数字的倍数
- Fancybox是否将Click事件静音
- 主干-不管怎样,检查事件以前是否绑定过
- YUI3 IO实用程序是否可以根据给定的内容类型标头值自动序列化数据
- 是否可以同时使用Leaflet.js中的中心和边界属性
- 地图边界!如何检查地址是否位于边界中
- 如何使用google.maps.Rectangle对象在谷歌地图上绘制选择/边界框/矩形,并检查标记是否落在其中
- 单词边界是否适用于符号字符
- OpenLayers3 检查兴趣点是否在边界框中
- 确定点是否在边界框内
- 过滤谷歌地图自定义覆盖取决于他们是否落在当前的地图边界
- 谷歌地图的最大边界是否与最大纬度不一致?
- 有没有办法检测折线是否在这里地图 API 中的道路边界内/不在道路边界内
- 检测元素边界是否与父元素边界重叠
- 检测鼠标是否在列边界上