Yandex Maps APIのマーカーフィルターアニメーション

Yandex.Maps APIの最新バージョンはすべての人に適しています。 しかし、完璧に制限はありません。 マップ上のオブジェクトをフェードでフィルタリングしたかった。

これが可能かどうか見てみましょう。





タスクは、マップ上の1つ以上のオブジェクトをフィルタリングするときに、残りを非表示にすることです。 たとえば、透明度を高めます。

掘り始めます。

マーカーのDOM要素や他の地理オブジェクトへのアクセスは、APIでは利用できません。 これは、一般的に正しいです。 ブラウザとジオオブジェクトの表示方法に応じて、これは複数のネストされたDOM要素またはキャンバスに描画された画像のいずれかです。

より深く掘ります。 これについては、DOM要素を取得して、遷移と不透明度のCSSクラスをどこで取得できますか?

ここにあります-これは、ジオオブジェクトのオプションのペインプロパティです。

各ジオオブジェクトには、表示先のレイヤー(ペイン)があります。

レイヤーが何であるか見てみましょう:

'ground':pane.MovablePane(zIndex:100)-マップの背景を配置するために設計された最も低いペイン。

'areas':pane.MovablePane(zIndex:200)-ポリゴンなどのエリアオブジェクトのペイン。

'shadows':pane.MovablePane(zIndex:300)-上にあるマップオブジェクトの影のペイン。

'places':pane.MovablePane(zIndex:400)-ラベルなどのポイントオブジェクトのペイン。

'events':pane.EventsPane(zIndex:500)-マップイベントをリッスンするように設計されたペイン。

'overlaps':pane.MovablePane(zIndex:600)-インタラクティブ機能を実装するためにアクティブエリアを使用する必要のないオブジェクトの場合はペイン。

'balloon':pane.MovablePane(zIndex:700)-バルーンのペイン。

'outerBalloon':pane.MovablePane(zIndex:800)-バルーンの外部ペイン。

'controls':pane.StaticPane(zIndex:900)-マップコントロールのペイン。

'copyrights':pane.StaticPane(zIndex:1000)-ペインの著作権;

「ヒント」:pane.StaticPane(zIndex:1100)-支払いのヒント。

'outerHint':pane.StaticPane(zIndex:1200)-外部ペインヒント。



今、 場所レイヤーに興味があります

影と領域のレイヤーもあります。 そのため、シャドウまたはポリゴンを持つオブジェクトがある場合、それらを操作する必要があります。

しかし今、私たちは原理そのものに興味を持っています。

各レイヤーにはgetElement()プロパティがあり、DOM要素にアクセスできます。

別のレイヤーをマップに追加しましょう。

var selectedPane = new ymaps.pane.MovablePane(myMap, { zIndex: 420}), myMap.panes.append('selected', selectedPane);
      
      





次に、スタイルに追加します

 .hiding ymaps { transition: opacity 1s; } .hidden ymaps { opacity: 0; }
      
      





これで、ラベルが表示されるcssクラスのメインレイヤーを設定できます

 var placesPane = myMap.panes.get('places').getElement(); $(placesPane).addClass('hiding');
      
      





いいね! これで、cssクラスをメインレイヤーに非表示および非表示に設定すると、1秒でフェードエフェクトが得られます!

選択された(フィルターされた)マーカーが残りで一緒に消えないことを確認するためだけに残ります。

このために、新しいselectedPaneレイヤーがあります!

タグをselectedPaneに移動します

 myPlaceMark.options.set('pane', 'selected');
      
      





そして、cssクラスを非表示レイヤーレイヤーに設定します。

 var placesPane = myMap.panes.get('places').getElement(); $(placesPane).addClass('hidden');
      
      





そうそう! すべてが美しくフェージングしています。



フィードでは、タグをクリックしてタグをフィルタリングし、1秒後に戻ります。

コレクション、フィルターなどでも同じことができます。

他の効果を追加できます。

たとえば、トランスフォーム(translate(@x、@y))要素をビューポート外のランダムな座標に設定できます-フィルタリング時にラベルが「散乱」します。 ここでは想像力の範囲が広大です。



これがお役に立てば幸いです。



All Articles