1

Sencha Architectを使用しながら、Sencha 4.1（ExtJS）をLeafletマッピングライブラリと統合しようとしています。

ページが読み込まれると、タイルが混同され、オフセットされて表示されます。タイルを表示するには、ページを上にドラッグする必要があります。

プロジェクト全体は、https ：//github.com/breizo/SenchaLeafletから入手できます。

作成されたカスタムコンポーネントの抜粋を次に示します（完全なコードはこちらをご覧ください：https ：//github.com/breizo/SenchaLeaflet/blob/master/ux/LeafletMap.js ）。

constructor: function () {
    this.callParent(arguments);
    this.on({
        resize: 'doResize',
        scope: this
    });
    var ll = window.L;
    if (!ll) {
        this.setHtml('Leaflet library is required');
    }
}

 onRender: function() {
    this.callParent(arguments); 
    var renderTo = arguments[0].dom.id;
    debugger;
    var me = this,
        ll = window.L,
        element = me.mapContainer,
        mapOptions = me.getMapOptions(),
        map,
        tileLayer;


    if (ll) {
        // if no center property is given -> use default position
        if (!mapOptions.hasOwnProperty('center') || !(mapOptions.center instanceof ll.LatLng)) {
            mapOptions.center = new ll.LatLng(47.36865, 8.539183); // default: Zuerich
        }

        me.setTileLayer(new ll.TileLayer(me.getTileLayerUrl(), me.getTileLayerOptions()));
        tileLayer = me.getTileLayer();
        mapOptions.layers = [tileLayer];

        me.setMap(new ll.Map(renderTo, mapOptions));
        map = me.getMap();

        // track map events
        map.on('zoomend', me.onZoomEnd, me);
        map.on('movestart', me.onMoveStart, me);
        map.on('moveend', me.onMoveEnd, me);
        me.fireEvent('maprender', me, map, tileLayer);
    }
},

デバッグ時に、onRenderが呼び出されたとき、マップの親コンテナはまだ適切なサイズになっていないようです。特に、その高さは、属性テキストを含むのに十分なだけで、約16pixです。doResizeが呼び出されると、コンテナーのサイズは適切になりますが、最終結果は変わりません。タイルが混同され、オフセットされます。

コンテナにさまざまな変更を加えてみましたが、何も機能しませんでした...

4

1 に答える 1

1

1）混合レイヤーの問題はCSSが原因です。leaflet.cssHTMLのパスが間違っているため、ドキュメントに添付されていません。ミキシングの問題を修正するには、cssファイルへの正しいパスを設定するか、CDNから添付します。

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />

2）間違ったマップオフセットは、extjsで生成されたdivが原因で発生します：

<div class="x-llmap x-fit-item x-llmap-default" ...></div>

マップコンテナを一番下にプッシュし、間違ったオフセット計算が行われます。インラインスタイルまたはCSSを使用してこれを修正することもできます。

.leaflet-map-pane {
    top: 0;
}
于 2012-11-18T11:42:49.830 に答える