Skip to content

Instantly share code, notes, and snippets.

@ThomasG77
Forked from rveciana/README.md
Last active July 24, 2018 14:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ThomasG77/d66f1040960646abf56c90ae5e759b8a to your computer and use it in GitHub Desktop.
Save ThomasG77/d66f1040960646abf56c90ae5e759b8a to your computer and use it in GitHub Desktop.
Using JSTS to measure how far a line travels through a polygon

Example to ilustrate this question at gis.stackoverflow.

We choose to replace Turf with JSTS.

If the result is more complex (i.e. the resulting intersection is a polyline), the algorithm should be repeated for each part in the polygon.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>A simple map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.6.0/jsts.min.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
p.distance-container {
position: absolute;
z-index: 10;
font-size: 2em;
margin: 1em;
right: 0em;
width: 8em;
background-color: #fff;
padding: 0.5em;
}
</style>
</head>
<body>
<div id='map'>
<p class='distance-container'>The line travels through the polygon for <span id="distance"></span> miles.</p>
</div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var poly = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
51.17431640625,
47.025206001585396
],
[
45.17578125,
43.13306116240612
],
[
54.5361328125,
41.85319643776675
],
[
51.17431640625,
47.025206001585396
]
]
]
}
}
var line = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[
42.78076171875,
46.01222384063236
],
[
49.78076171875,
43.01222384063236
],
[
50.78076171875,
44.51222384063236
],
[
56.865234375,
44.26093725039923
]
]
}
}
var geojsonReader = new jsts.io.GeoJSONReader();
var polyJsts = geojsonReader.read(poly.geometry);
console.log(polyJsts);
var lineJsts = geojsonReader.read(line.geometry);
console.log(lineJsts);
var intersected = polyJsts.intersection(lineJsts);
var polyStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
var polyLayer = L.geoJSON(poly, {
style: polyStyle
}).addTo(map);
var lineStyle = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
var lineLayer = L.geoJSON(line, {
style: lineStyle
}).addTo(map);
map.fitBounds(lineLayer.getBounds());
// let intersectionPoints = turf.lineIntersect(line, poly);
let intersectionPoints = {
type: "FeatureCollection", features: [{
"type":"Feature",
"properties": {},
"geometry": {
"type":"Point",
"coordinates": [intersected.getStartPoint().getCoordinate().x, intersected.getStartPoint().getCoordinate().y]
}
}, {
"type":"Feature",
"properties": {},
"geometry": {
"type":"Point",
"coordinates": [intersected.getEndPoint().getCoordinate().x, intersected.getEndPoint().getCoordinate().y]
}
}
]};
L.geoJSON(intersectionPoints).addTo(map);
let intersection = {
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": intersected.getCoordinates().map(coord => [coord.x, coord.y])
}
}
L.geoJSON(intersection).addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment