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 时，地图的父容器的大小还没有正确，特别是它的高度仅足以包含属性文本，大约 16 pix。当 doResize 被调用时，容器的大小是正确的，但它不会改变最终结果：瓷砖混合并偏移。

我尝试了对容器的各种更改，但没有任何效果......

4

1 回答 1

1

1) 混合层的问题是由 CSS 引起的。您leaflet.css在 html 中的路径错误，因此未附加在文档中。要修复混合问题，请设置正确的 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 回答