1

Javascript/CoffeeScript では、Leafletを使用してマップを表示し、2 つのカスタム イメージからカスタム マーカーを作成し、ピンの影も付けたいと考えています。

  1. カテゴリを識別するための色 (または形状) を持つ「背景」画像が必要です
  2. その上、この画像内に各ピンの特定の画像 (ロゴ) を入れたい

どうすればそれができるのかわかりませんでした... 1 つの画像を設定するのは非常に簡単ですが、それらを重ねる方法がわかりません。

Leafletクラスに1つだけを送信するために、これらの画像を（ローカルに）重ね合わせ/グループ化/オーバーレイするツールを使用することも検討できますIconが、どのツールを使用すればよいかわかりません。

それにもかかわらず、二重オーバーレイの方がより効率的であり、私のケースは何人かの人々にとって役立つ可能性があると私はまだ考えています.

4

2 に答える 2

1

Icon クラスには、背景画像を設定するために使用できる shadowUrl プロパティがあります。

于 2013-06-11T07:19:34.793 に答える
0

やっと自力で直せるようになりました。コードは次のとおりです。CoffeeScript で申し訳ありませんが、thisを使用して JavaScript に変換できます。

最初にしたことは、DivIcon を拡張するための新しいクラスを作成して、デフォルトで非アクティブ化されている DivIcon のシャドウ プロパティを再アクティブ化することでした。

class DivIconWithShadow extends L.DivIcon

  createShadow: (oldIcon) ->
    return L.Icon::createShadow.call this, oldIcon

次に、コードで次のコードを使用して、アイコン付きのマーカーを作成します。

L.marker(latLng,
      icon: new DivIconWithShadow _.extend iconOptions,
          className: 'my-class',
          html: """
                <div class='icon_pin'>
                   <div class='logo' style='background-image: url(\"#{myVariablePath}\")'> </div>
                   <div class='top_pin'> </div>
                </div>
                """
    ).addTo(@map)

そして、CSSにこのようなものを入れてスタイルを整えることができます

.icon_pin {
  .top_pin {

    position: absolute;
    .at2x('../images/pingreen_open.png', 43px, 58px);
    background-repeat: no-repeat;
    width: 43px;
    height: 58px;

  }

  .logo {
    position: absolute;
    width: 29px;
    height: 29px;
    margin-left: 7px;
    margin-top: 7px;
    background-size: 29px 29px;
    background-position: center center;
    background-color: white;

  }

}
于 2013-06-27T16:18:19.727 に答える