Порядок перекрытия линий MapBox GL - PullRequest
Новая
       9

Порядок перекрытия линий MapBox GL

0 голосов
/ 24 апреля 2020

Я провел некоторое исследование о том, как определить порядок полилиний в MapBox GL. В настоящее время они перекрываются, и я не могу установить порядок сортировки по некоторым причинам: 

const [activeRouteIndex, setActiveRouteIndex] = useState(0);
mockdata.routes.forEach((route, index) => {
    map.addSource(`route_${index}`, {
      type: 'geojson',
      data: {
        type: 'Feature',
        properties: {
          'route-index': index,
          route: index === activeRouteIndex ? 'selected' : 'alternate',
        },
        geometry: polyline.toGeoJSON(route.geometry),
      },
    });
    map.addLayer({
      id: `route_${index}`,
      type: 'line',
      source: `route_${index}`,
      layout: {
        'line-join': 'round',
         'line-cap': 'round',
         'line-sort-key': index === activeRouteIndex ? 99 : 1,
      },
      paint: {
        'line-color': index === activeRouteIndex ? '#3667FB' : '#818ABD',
        'line-width': 3,
      },
    });
});

И его использование: 

    <Fragment>
      <Head>
        <title>Map</title>
      </Head>
      <div
        id="map"
        className="App"
        ref={containerRef}
        style={{ height: '100vh', width: '100vw', position: 'absolute', top: 0, left: 0 }}
      />
    </Fragment>
  );
```
...