17

リーフレットのマーカーを回転させるにはどうすればよいですか？たくさんのマーカーがあり、すべて回転角が付いています。

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);

他のアイデアや解決策はありますか？（Windows上のFirefox 16でテストします。）

4

4 に答える 4

8

コードをそのまま実行すると、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はCSS変換を使用してアイコンを配置するため、回転する前にMoztransformの値は「translate（956px、111px）」などになります。現在のコードは、単に「rotate（90deg）」に置き換えられ、Firefoxはアイコンを配置する場所を認識しません。

Moztransformの値を「translate（956px、111px）rotate（90deg）」にする必要があるため、このコードを使用すると、Webkitのように初めて機能します。

this._icon.style.MozTransform = this._icon.style.MozTransform  + ' rotate(' + this.options.iconAngle + 'deg)';

ただし、次の回転で壊れるので、次のように、平行移動と回転の両方を一度に設定する必要があります。

this._icon.style.MozTransform = L.DomUtil.getTranslateString(pos) + ' rotate(' + this.options.iconAngle + 'deg)';

次に、L.DomUtil.setPosition（this._icon、pos）;を取り除くことができます。開始時。

于 2012-11-21T15:04:26.863 に答える
7

このソリューションははるかに簡単です：https ：//github.com/bbecquet/Leaflet.RotatedMarker

注：既存のマーカーのみを変更し、さらに2つのオプション（rotationAngleとrotationOrigin）を許可します。

このソリューションは非常にうまく機能します。GitHubページによると、使用例は次のとおりです。

L.marker([48.8631169, 2.3708919], {
    rotationAngle: 45
}).addTo(map);
于 2016-01-27T08:34:24.773 に答える
2

私にとって非常にうまく機能するのは、各マーカーに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
        });
    });

非常に高速で、数百/数千のマーカーで動作します。この方法はインターネット上の他の投稿で見つかりましたが、ここでも共有するのが正しいようです。

于 2015-07-30T13:09:09.410 に答える
1

react-leafletを使用している場合は、このアイデア（https://github.com/bbecquet/Leaflet.RotatedMarker）に基づいて、Markerを拡張し、rotationとrotationOriginの両方を小道具として受け入れるReactコンポーネントを作成しました。

// 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)

于 2020-03-07T16:05:17.110 に答える