在面向 [long, lat] 的 react-leaflet 中定位标记方向 [英] Position a marker direction in react-leaflet facing a [long, lat]

问题描述

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

这是标记代码:

 <标记位置= {midPoint}键= {起源}><工具提示永久性方向=中心"发粘>< span>& gt;</span></工具提示></Marker> 

它将在所需位置添加标记

但那些小>"不会指向目的地.

以上方案有解决方案吗?

解决方案

要考虑的一个选项是利用

I'm trying to add a marker on GeoJSON bezier curve which connects origin and destination points. The marker needs to be positioned facing destination.

Here is the marker code:

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

It would add markers at desired position

But those little ">" would not point towards destination.

Any solution for the above scenario?

解决方案

One option to consider is utilize Leaflet.PolylineDecorator leaflet plug-in which supports drawing arrow heads among another features.

Here is an example how to utilize it along with react-leaflet library to draw arrow heads:

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

Here is a demo

Result

这篇关于在面向 [long, lat] 的 react-leaflet 中定位标记方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！