선을 분할할 시작 거리와 끝 거리를 지정합니다.
15314 단어 JavaScriptmapboxTurf.js
사용
lineSlice
의 남매 방법lineSliceAlong
.const routeSource = {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.48369693756104, 37.83381888486939],
[-122.48356819152832, 37.82954808664175],
[-122.48751640319824, 37.83168351665737],
[-122.49223709106445, 37.83337825839438],
[-122.49378204345702, 37.83368330777276]
]
}
}
};
const lineFeature = {
type: 'FeatureCollection',
features: [
{
"type": "Feature",
"properties": {},
"geometry": {
"type":"LineString",
"coordinates": []
}
}
]
};
const map = new mapboxgl.Map({
container: 'map',
center: [-122.486052, 37.830348],
zoom: 15,
style: {
version: 8,
sources: {
OSM: {
type: "raster",
tiles: [
"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
],
tileSize: 256,
attribution:
"OpenStreetMap",
},
},
layers: [{
id: "BASEMAP",
type: "raster",
source: "OSM",
minzoom: 0,
maxzoom: 18,
}],
},
});
map.once('load', () => {
map.addSource('route', routeSource);
map.addLayer({
'id': 'route',
'type': 'line',
'source': 'route',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': '#888',
'line-width': 8
}
});
map.addSource('lineOnLine', {
'type': 'geojson',
'data': lineFeature
});
lineSource = map.getSource('lineOnLine');
map.addLayer({
'id': 'lineOnLine',
'type': 'line',
'source': 'lineOnLine',
'layout': {
'line-join': 'round',
'line-cap': 'round'
},
'paint': {
'line-color': 'red',
'line-width': 12
}
});
});
document.getElementById('split').addEventListener('click', () => {
const fromDist = Number(document.getElementById('from').value);
const toDist = Number(document.getElementById('to').value);
const slicedLine = turf.lineSliceAlong(routeSource.data, fromDist, toDist, { units: 'meters' });
lineSource.setData(slicedLine);
});
사용 방법은 터프입니다.linesliceAlong(선, 시작 거리, 끝 거리, 단위).왜 선형과 매개 변수의 순서가 같지 않습니까...
참고 자료
Reference
이 문제에 관하여(선을 분할할 시작 거리와 끝 거리를 지정합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/amay077/items/3b316a3872475e44656f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)