선을 분할할 시작 거리와 끝 거리를 지정합니다.

행을 분할할 시작점과 끝점을 지정합니다.와 비슷하게 이곳은'Lm에서 떨어진 선내, 시작부터 Sm~Em 구간을 잘라라'다.

사용lineSlice의 남매 방법lineSliceAlong.
  • Split line by distance - JSFiddle - Code Playground
  • 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(선, 시작 거리, 끝 거리, 단위).
    왜 선형과 매개 변수의 순서가 같지 않습니까...

    참고 자료

  • lineSliceAlong - Turf.js | Advanced geospatial analysis
  • 좋은 웹페이지 즐겨찾기