我正在尝试检查点是否在多边形内。这是我的功能:
import { containsXY } from 'ol/extent';
isInside(polygon, longitude, latitude) {
polygon = JSON.parse(polygon); // Polygon is originally = JSON.stringify([[long1, lat1],[long2, lat2], ...])
let poli = new Polygon(polygon);
// Try 1: Not working
console.log("Result --> ", containsXY(poli, latitude, longitude));
console.log("Result --> ", containsXY(poli, longitude, latitude));
console.log("Result --> ", containsXY(poli.getExtent(), latitude, longitude));
console.log("Result --> ", containsXY(poli.getExtent(), longitude, latitude));
// Try 2: Not working
let coordinate = this.to3857([longitude, latitude]);
console.log("Result --> ", containsXY(poli, coordinate[0], coordinate[1]));
console.log("Result --> ", containsXY(poli, coordinate[1], coordinate[0]));
console.log("Result --> ", containsXY(poli.getExtent(), coordinate[0], coordinate[1]));
console.log("Result --> ", containsXY(poli.getExtent(), coordinate[1], coordinate[0]));
// Try 3: Not working
coordinate = this.to4326([longitude, latitude]);
console.log("Result --> ", containsXY(poli, coordinate[0], coordinate[1]));
console.log("Result --> ", containsXY(poli, coordinate[1], coordinate[0]));
console.log("Result --> ", containsXY(poli.getExtent(), coordinate[0], coordinate[1]));
console.log("Result --> ", containsXY(poli.getExtent(), coordinate[1], coordinate[0]));
}
所有结果均为false
。如何检查坐标是否在多边形中? OpenLayers API对我没有任何帮助。
预先感谢
答案 0 :(得分:2)
要确定Point
的几何图形是否在Polygon
的范围/范围内,请使用:
ol.extent.containsXY(polygon.getExtent(), coordinate[0], coordinate[1])
更新了isInside
函数:
function isInside(polygon, longitude, latitude) {
let coordinate = ol.proj.fromLonLat([longitude, latitude]);
console.log("Result (in bounds) --> ", ol.extent.containsXY(polygon.getExtent(), coordinate[0], coordinate[1]));
}
要确定Point
几何是否在Polygon
的内部(与在Polygon
的边界/范围之内),请使用(根据相关问题:{ {3}}):
polygon.intersectsCoordinate(coordinate);
更新了isInside
函数:
function isInside(polygon, longitude, latitude) {
let coordinate = ol.proj.fromLonLat([longitude, latitude]);
console.log("Result (in polygon) --> ", polygon.intersectsCoordinate(coordinate));
}
Check if a point is inside polygon in OpenLayers 3
代码段:
function isInside(polygon, longitude, latitude, text) {
let coordinate = ol.proj.fromLonLat([longitude, latitude]);
console.log("Result for " + text + " (in bounds) --> ", ol.extent.containsXY(polygon.getExtent(), coordinate[0], coordinate[1]));
console.log("Result for " + text + " (in polygon) --> ", polygon.intersectsCoordinate(coordinate));
}
window.onload = function() {
isInside(polygon, 106.8060388, -6.5971469, "black marker");
isInside(polygon, 105.998544, -7.0553, "blue marker");
}
var map = new ol.Map({
layers: [
new ol.layer.Tile({ // TileLayer({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.fromLonLat([106.044189, -6.840865]),
zoom: 7
})
});
// modified from https://stackoverflow.com/questions/27210362/open-layers-3-how-to-draw-a-polygon-programmatically
var jsonData = [{
lat: -5.896423,
lng: 106.044189
},
{
lat: -6.840865,
lng: 105.192749
},
//{lat: -6.147714, lng: 106.972534},
{
lat: -6.813594,
lng: 106.016724
},
{
lat: -6.988102,
lng: 106.516601
},
{
lat: -7.36416,
lng: 106.406738
},
{
lat: -7.511228,
lng: 107.450439
},
{
lat: -6.093095,
lng: 106.989014
}
]
// A ring must be closed, that is its last coordinate
// should be the same as its first coordinate.
var ring = [];
for (var i = 0; i < jsonData.length; i++) {
ring.push([jsonData[i].lng, jsonData[i].lat]);
}
// A polygon is an array of rings, the first ring is
// the exterior ring, the others are the interior rings.
// In your case there is one ring only.
var polygon = new ol.geom.Polygon([ring]);
polygon.transform('EPSG:4326', 'EPSG:3857');
// Create feature with polygon.
var feature = new ol.Feature(polygon);
feature.set('name', 'polygon');
// Create vector source and the feature to it.
var vectorSource = new ol.source.Vector();
vectorSource.addFeature(feature);
// Create vector layer attached to the vector source.
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
// Add the vector layer to the map.
map.addLayer(vectorLayer);
var geoMarker = new ol.Feature({
type: 'geoMarker',
name: 'insidePolygon',
geometry: new ol.geom.Point(ol.proj.fromLonLat([106.8060388, -6.5971469]))
});
geoMarker.setStyle(new ol.style.Style({
image: new ol.style.Circle({ //CircleStyle({
radius: 7,
snapToPixel: false,
fill: new ol.style.Fill({
color: 'black'
}),
stroke: new ol.style.Stroke({
color: 'black',
width: 2
})
})
}));
vectorSource.addFeature(geoMarker);
var geoMarker1 = new ol.Feature({
type: 'geoMarker',
name: 'outsidePolygon',
geometry: new ol.geom.Point(ol.proj.fromLonLat([105.998544, -7.0553]))
});
geoMarker1.setStyle(new ol.style.Style({
image: new ol.style.Circle({ //CircleStyle({
radius: 7,
snapToPixel: false,
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: 'blue',
width: 2
})
})
}));
vectorSource.addFeature(geoMarker1);
var tooltip = document.getElementById('tooltip');
var overlay = new ol.Overlay({
element: tooltip,
offset: [10, 0],
positioning: 'bottom-left'
});
map.addOverlay(overlay);
function displayTooltip(evt) {
var pixel = evt.pixel;
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
tooltip.style.display = feature ? '' : 'none';
if (feature) {
overlay.setPosition(evt.coordinate);
tooltip.innerHTML = feature.get('name');
}
};
map.on('pointermove', displayTooltip);
html,
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.map {
height: 100%;
width: 100%;
}
<link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
<div id="map" class="map"></div>
<div id="tooltip"></div>