javascript 在传单中旋转标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13494649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotate marker in Leaflet
提问by sindrejh
How can I rotate a marker in leaflet? I will have a lot of markers, all with a rotation angle.
如何旋转传单中的标记？我会有很多标记，都有一个旋转角度。
I've tried this solution from runanet/coomsieat Leaflet on GitHub, but nothing happens with my marker:
我已经在 GitHub上的Leaflet 上从runanet/coomsie尝试了这个解决方案，但我的标记没有任何反应：
L.Marker.RotatedMarker= L.Marker.extend({
_reset: function() {
var pos = this._map.latLngToLayerPoint(this._latlng).round();
L.DomUtil.setPosition(this._icon, pos);
if (this._shadow) {
L.DomUtil.setPosition(this._shadow, pos);
}
if (this.options.iconAngle) {
this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.MsTransform = 'rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.OTransform = 'rotate(' + this.options.iconAngle + 'deg)';
}
this._icon.style.zIndex = pos.y;
},
setIconAngle: function (iconAngle) {
if (this._map) {
this._removeIcon();
}
this.options.iconAngle = iconAngle;
if (this._map) {
this._initIcon();
this._reset();
}
}
});
var rotated = new L.Marker.RotatedMarker([63.42, 10.39]);
rotated.setIconAngle(90);
rotated.addTo(map);
Any other ideas or solutions? (Testing with Firefox 16 on Windows.)
任何其他想法或解决方案？（在 Windows 上使用 Firefox 16 进行测试。）
采纳答案by robpvn
Running the code as it is, the icon will disappear when you try to rotate it in Firefox (try rotating on a mouseclick instead of on load and you will see that the icon appears before you try to rotate it), but I'm willing to bet it will work (the first time) in a webkit browser. The reason is the transform lines:
按原样运行代码，当您尝试在 Firefox 中旋转它时，图标将消失（尝试在鼠标点击而不是加载时旋转，您会在尝试旋转之前看到图标出现），但我愿意打赌它会在 webkit 浏览器中工作（第一次）。原因是变换线：
this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';
Firefox also uses CSS transforms to position icons, so before rotation it will have Moztransform will have a value of for example "translate(956px, 111px)". The way the code is now, it will replace that with simply "rotate(90deg)" and Firefox won't know where to place the icon.
Firefox 还使用 CSS 转换来定位图标，因此在旋转之前，它会具有 Moztransform 的值，例如“translate(956px, 111px)”。代码现在的方式，它将用简单的“旋转（90度）”替换它，Firefox 将不知道将图标放在哪里。
You want Moztransform to have a value of "translate(956px, 111px) rotate(90deg)", so if you use this code it will work the first time, like in webkit.
您希望 Moztransform 具有“translate(956px,111px)rotate(90deg)”的值，因此如果您使用此代码，它将第一次工作，就像在 webkit 中一样。
this._icon.style.MozTransform = this._icon.style.MozTransform + ' rotate(' + this.options.iconAngle + 'deg)';
However, it will break on the next rotate, so you really need to set both the translation and rotation in one go, like this:
但是，它会在下一次旋转时中断，因此您确实需要一次性设置平移和旋转，如下所示：
this._icon.style.MozTransform = L.DomUtil.getTranslateString(pos) + ' rotate(' + this.options.iconAngle + 'deg)';
Then you can get rid of the L.DomUtil.setPosition(this._icon, pos); at the start.
然后你可以去掉 L.DomUtil.setPosition(this._icon, pos); 在开始时。
回答by ThinusP
This solution is by far the easiest: https://github.com/bbecquet/Leaflet.RotatedMarker
这个解决方案是迄今为止最简单的：https: //github.com/bbecquet/Leaflet.RotatedMarker
Note: it only modifies the existing marker, allowing two more options (rotationAngle and rotationOrigin).
注意：它只修改现有标记，允许另外两个选项（rotationAngle 和 rotationOrigin）。
The solution works very well. As per the GitHub page, a usage example:
该解决方案效果很好。根据 GitHub 页面，使用示例：
L.marker([48.8631169, 2.3708919], {
rotationAngle: 45
}).addTo(map);
回答by André Boonzaaijer
What works very well for me is adding a data-rotate="[angle]" attribute to each marker. This allows you to call the following JQuery statement on each refresh when necessary:
对我来说非常有用的是为每个标记添加一个 data-rotate="[angle]" 属性。这允许您在必要时在每次刷新时调用以下 JQuery 语句：
$('.your-marker-class').each(function () {
var deg = $(this).data('rotate') || 0;
var rotate = 'rotate(' + $(this).data('rotate') + 'deg) scale(0.5,0.5)';
$(this).css({
'-webkit-transform': rotate,
'-moz-transform': rotate,
'-o-transform': rotate,
'-ms-transform': rotate,
'transform': rotate
});
});
Works very fast and with hundreds/thousands of markers. Found this method in some other post somewhere on the internets but seemed right to share here also.
工作速度非常快，有数百/数千个标记。在互联网上某处的其他一些帖子中找到了这种方法，但在这里分享似乎也是正确的。
回答by Brad Melchin
If you're using react-leaflet, I built upon this idea (https://github.com/bbecquet/Leaflet.RotatedMarker) to create a React component that extends Marker and accepts both rotation and rotationOrigin as a prop.
如果您使用的是 react-leaflet，我基于这个想法 ( https://github.com/bbecquet/Leaflet.RotatedMarker) 创建了一个 React 组件，它扩展了 Marker 并接受旋转和旋转原点作为道具。
// Libs
import L from 'leaflet'
// Components
import { ExtendableMarker } from 'react-leaflet-extendable'
// HOCS
import { withLeaflet } from 'react-leaflet'
const proto_setPos = L.Marker.prototype._setPos
const LeafletMarker = L.Marker.extend({
_setPos(pos: [number, number]) {
proto_setPos.call(this, pos)
this._setRotation(this.options.rotation)
},
_setRotation(rotation: number | null | undefined) {
if (typeof rotation === 'number') {
this._icon.style[L.DomUtil.TRANSFORM + 'Origin'] = this.options.rotationOrigin || 'center'
const transform = this._icon.style[L.DomUtil.TRANSFORM] + ` rotate(${rotation}deg)`
this._icon.style[L.DomUtil.TRANSFORM] = transform
}
},
})
const createRotatedMarker = (pos: [number, number], options: any) => {
return new LeafletMarker(pos, options)
}
class RotatedMarker extends ExtendableMarker {
public createLeafletElement() {
return createRotatedMarker(this.props.position, { ...this.props })
}
}
export default withLeaflet(RotatedMarker)