タグとクラスターを使用して、API 2.xでYandex.Mapsを印刷します

ラベルとクラスターを含むAPI 2.xコアマップの印刷が機能しないことは誰もが知っています。 これまで、マップはキャンバス上ではなく、バッキング（背景画像）のあるディーバ上に構築されていました。 また、キャンバスはお気に入りのブラウザには役立ちません。

このタスクは、マップの印刷可能なバージョンをすばやく作成するように設定されていました。 ラベルの数は、600以上のクラスタであり、「すぐに使える」クラスタです。

カットの下の作業オプション



通常どおりマップを初期化する-リンクからズームと中央を取得する

ymaps.ready(function () { var mapTypes = ['yandex#map', 'yandex#satellite', 'yandex#hybrid', 'yandex#publicMap', 'yandex#publicMapHybrid'], map = new ymaps.Map($('#map')[0], { center:[ parseFloat(<?= $request_lat?>), parseFloat(<?= $request_lng?>)], zoom:parseInt(<?= $request_zoom?>), type: mapTypes[<?= $request_mtype ? $request_mtype : 0?>] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タグの印刷用レイアウトを作成します

ここで、フレンドリーなプリンターとは、背景画像を使用せずに、画像で多数のdivを実行することを意味する必要があります。

タグアイコンは2つの部分で構成されています-画像と背景です。 両方ともスプライトで。 したがって、そのような必死のスタイル。 わかりやすくするためにインラインにします

  ymaps.layout.storage.add('voina#icon', ymaps.templateLayoutFactory.createClass( '<div style="position: absolute; width: 28px; height: 36px; overflow: hidden;z-index: 0; ">' + '<div style="position:absolute;width:20px;height:20px;overflow:hidden;top:4px;left:4px">' + '<img src="/img/new_buttons_21.png" style="position:absolute;left:$[properties.iconOffset]px;"></div>' + '<img src="/img/buttons7.gif" style="position: absolute; left: -264px; top: -70px; "></div>' ));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスタアイコンでも同じことが言えます。 私は内部の異なる数のポイントに対して異なるサイズのクラスターアイコンを気にしませんでした-私はすぐにしなければなりませんでした）

  ymaps.layout.storage.add('voina#cluster', ymaps.templateLayoutFactory.createClass( '<div style="position: absolute; margin: -26px 0 0 -26px; width: 58px; height: 58px; overflow: hidden;z-index: 0; ">' + '<div style="z-index:800;position: absolute; width: 58px; height: 58px; text-align: center; font-size: 13px; line-height: 58px;">$[properties.geoObjects.length]</div>' + '<img src="/img/cluster_big.png" style="position: absolute;"></div>'));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、レイヤー自体のコンテナを取得します

  var $container = map.panes.get('layers').getElement(),
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スタティックのカードのタイプは異なるため、対応を行い、カードの中心を取得します

  stMapTypes = {'yandex#map' : 'map', 'yandex#satellite' : 'sat', 'yandex#hybrid' : 'sat,ski', 'yandex#publicMap' : 'pmap'}, center = map.getCenter(),
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

サイズは待ち伏せです。 静的は最大650から450を与えます。私も気にしませんでした-それを最大にしましょう

マップのあるdivも、これらのサイズ以下にする必要があります。

良い方法では、大きなマップでdivを作成する場合、レイヤーを介した別のアプローチが必要です。

  size = [650, 450],
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

統計のフォームリンク

  mapUrl = 'http://static-maps.yandex.ru/1.x/?ll='+center[1]+','+center[0]+ '&z='+map.getZoom()+'&l='+stMapTypes[map.getType()]+ '&size='+size[0]+','+size[1];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで魔法が始まります

ペインはビューポートの中央に揃えられるため、絶対位置でdivを作成して中央に配置します。 実際、map.panes.get（ 'layers'）。getViewport（）を呼び出してセンターを読む必要がありました。 しかし、ロードするとき、ペインは中央にあり、マップを移動させません

  $('<div></div>').css({ position: 'absolute', left: -Math.round(size[0] / 2)+'px', top: -Math.round(size[1] / 2)+'px', zIndex: 800}).
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

静的なimg内に挿入

  wrapInner($('<img>').attr({'src':mapUrl, width: size[0], height: size[1], border: '0'})).
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

レイヤーのコンテナに残りの要素を挿入します

  prependTo($container);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

良い機能-すべてのマップイベントを無効にします。 今は動きも考えもしません

  map.events.removeAll();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、マーカーをマップに追加します。 変数window.dataにあります

  var len = window.data.length; if (len) { for (var i = 0, markers = [ ], properties, latLng; i < len; i++) { latLng = [parseFloat(window.data[i][1]), parseFloat(window.data[i][2])]; markers.push( new ymaps.Placemark(latLng, { iconOffset: -window.data[i][5] * 20 - 1 }, { iconLayout:'voina#icon', iconOffset: [1, 2], openBalloonOnClick: false })); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスターになりました。 マージンとは何ですか-私は覚えていませんが、通常のマップ上にありました

  var clusterer = new ymaps.Clusterer({margin: [20]});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスターアイコンのレイアウトを設定する

  clusterer.options.set('clusterIconLayout', 'voina#cluster');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この関数は書きたくありませんでしたが、クラスターを別の方法で開くことはできませんでした

  clusterer.createCluster = function (center, geoObjects) { var cluster = ymaps.Clusterer.prototype.createCluster.call(this, center, geoObjects); //          cluster.events.add('click', function(e) { e.stopImmediatePropagation(); e.preventDefault(); return false; }); return cluster; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスターにマーカーを追加します

  clusterer.add(markers);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

念のため、クラスターもtheれています

  clusterer.events.removeAll();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

クラスターをカードに追加します

  map.geoObjects.add(clusterer); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

多田!!! すべてが機能し、印刷されます（ブラウザが非常に多くのdomオブジェクトに耐えられる場合）

1つのバグのみ-2つの著作権。 カードから削除したり、エラーを隠したりする場合もあります。 大丈夫。







こちらをご覧ください