turf-point-on-surface
Finds a centroid guaranteed to be on the surface of a geometry, feature, or featurecollection.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="assets/css/styles.css" type="text/css">
<script src="//cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<script src="https://rawcdn.githack.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js" type="text/javascript"></script>
<title>Turf and OpenLayers 3 - Point on surface</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
// A building in Nantes, France
var coordinates = [
[
[-1.5587178, 47.2172349],
[-1.5588193, 47.2171524],
[-1.5586966, 47.2170781],
[-1.5586852, 47.217087],
[-1.5586665, 47.2170754],
[-1.5586529, 47.2170844],
[-1.558591, 47.2170477],
[-1.5586034, 47.2170364],
[-1.5585939, 47.2170291],
[-1.5585793, 47.2170404],
[-1.5585595, 47.2170289],
[-1.5585627, 47.2170011],
[-1.5585961, 47.2170028],
[-1.5586105, 47.2168861],
[-1.5587366, 47.2168588],
[-1.5587301, 47.2168345],
[-1.558791, 47.216822],
[-1.5587989, 47.2168363],
[-1.5589123, 47.2169065],
[-1.5590038, 47.2168367],
[-1.5590088, 47.2168311],
[-1.5588502, 47.2167374],
[-1.5585378, 47.2168006],
[-1.5584812, 47.216812],
[-1.558452, 47.2170663],
[-1.5585381, 47.2171282],
[-1.5587178, 47.2172349]
]
];
var polygon = turf.polygon(coordinates, {
"@id": "way/85440995",
"building": "yes",
"source": "cadastre-dgi-fr source : Direction Générale des Impôts - \
Cadastre. Mise à jour : 2010"
});
// Declare a formatter to read GeoJSON
var format = new ol.format.GeoJSON();
// Declare a source
var vectorSource = new ol.source.Vector();
// When reading feature, reproject to EPSG 3857
var feature = format.readFeature(polygon, {
featureProjection: 'EPSG:3857'
});
// Add a feature
vectorSource.addFeature(feature);
// Create function to style points
function setPointStyle(color, radius) {
return new ol.style.Style({
image: new ol.style.Circle({
stroke: new ol.style.Stroke({
color: 'white'
}),
fill: new ol.style.Fill({
color: color
}),
radius: radius
})
})
}
// Declare a vector layer with the already
// created source containing added feature
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: [0, 121, 88, 1],
width: 2
})
})
]
});
// Instanciate a map and add layers
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
vectorLayer,
// Centroid
new ol.layer.Vector({
source: new ol.source.Vector({
projection: 'EPSG:3857',
object: turf.centroid(polygon)
}),
style: [setPointStyle('black', 5)]
}),
// Point on surface
new ol.layer.Vector({
source: new ol.source.Vector({
projection: 'EPSG:3857',
features: (new ol.format.GeoJSON()).readFeatures(turf.pointOnSurface(polygon), {
featureProjection: 'EPSG:3857'
})
}),
style: [setPointStyle('orange', 5)]
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-1.558567, 47.216947]),
zoom: 19
})
});
</script>
</body>
</html>