在面向 [long, lat] 的 react-leaflet 中定位标记方向

Question

我正在尝试在连接起点和终点的 GeoJSON 贝塞尔曲线上添加标记。标记需要面向目的地放置。

标记代码如下：

<Marker position={midPoint} key={origin}>
  <Tooltip permanent direction="center" sticky>
    <span>
      &gt;
    </span>
  </Tooltip>
</Marker>

它会在需要的位置添加标记

但是那些小“>”不会指向目的地。

以上情况有什么解决办法吗？

Answer 1

要考虑的一个选项是利用 Leaflet.PolylineDecorator leaflet plug-in，它支持绘制箭头等其他功能。

这是一个示例，说明如何将它与 react-leaflet 库一起使用来绘制箭头:

function DirectionsRoute(props) {
    const ctx = useLeaflet()
    const {coords} = props; 
    const {map} = ctx;


    function handleEachFeature(feature, layer){
        L.polylineDecorator(layer, {
          patterns: [
            {offset: '10%', repeat: '20%',  symbol: L.Symbol.arrowHead({pixelSize: 15, pathOptions: {fillOpacity: 1, weight: 0}})}
          ]
        }).addTo(map); 
    }


    return <GeoJSON data={coords} onEachFeature={handleEachFeature} />;
}

Note:

offset , endOffset and repeat options are used to control pattern

这是一个demo

结果

在面向 [long, lat] 的 react-leaflet 中定位标记方向

Position a marker direction in react-leaflet facing a [long, lat]

leaflet

reactjs

react-leaflet