在react-leaflet中将标记方向朝向[long，lat]

Question

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

这里是标记代码：

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

它将在下面的所需位置添加标记：

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

以上方案是否有解决方案？

Answer 1

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

这里是一个如何与Leaflet.PolylineDecorator库一起使用以绘制箭头的示例：

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} />;
}

，offset和endOffset选项用于控制模式

这里是repeat

结果

demo