leaflet-canvasmarker添加的marker旋转问题
<p>Leafletjs的标准图层的marker是可以通过组件 <code>leaflet-rotatedmarker</code>进行图标旋转的，在marker上添加两个属性：</p><ul>
<li><code>rotationAngle</code>：旋转角度，以度为单位，顺时针旋转。</li>
<li><code>rotationOrigin</code>：旋转中心，默认值为 'bottom center'，对应于标记图标的“尖端”。</li>
</ul>
<p><mark>但是leaflet-canvasmarker组件的图层使用leaflet-rotatedmarker的旋转方式失效，而在leaflet-canvasmarker官网提供了一个旋转的方法： Leaflet.Icon扩展参数 rotate</mark></p>
<p>参考网址：https://zhuanlan.zhihu.com/p/593744067</p>
<ul>
<li>
<p>旋转</p>
</li>
<li>
<p>使用 <code>rotate(angle)</code> 方法可以旋转画布，但默认的旋转原点是画布的左上角，也就是 <code>(0, 0)</code> 坐标。</p>
<p>我计算旋转角度通常是用 <code>角度 * Math.PI / 180</code> 的方式表示。</p>
</li>
</ul>
<p>关键代码：<code>rotate: Math.PI / 180 * v.direction,</code></p>
<pre><code class="language-js">// 图标
const icon = L.icon({
iconUrl,
iconSize: ,
iconAnchor: ,
rotate: Math.PI / 180 * v.direction,
});
// 加到marker上
const m = L.marker(,{ icon, data: v});
</code></pre><br><br>
来源：https://www.cnblogs.com/zibocoder/p/18848768
頁:
[1]