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.
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: '© <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> |