전단지 + Sencha NO touch + Sencha 건축가 통합 : 혼합 타일

Question

Sencha Architect를 사용하는 동안 Sencha 4.1 (ExtJS)을 전단지 매핑 라이브러리와 통합하려고합니다.

페이지가로드되면 타일이 겹쳐져 오프셋으로 보입니다. 타일을 볼 수 있도록 페이지를 위로 드래그해야합니다.

전체 프로젝트는 여기 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가 호출 될 때,지도의 부모 컨테이너는 높이 만 충분히 ATTRIB 텍스트, 약 16 PIX를 포함하는 것입니다, 특히, 아직 적절한 크기하지 않은 것 같습니다 디버깅. doResize가 호출되면 컨테이너의 크기는 적절하지만 최종 결과는 변경되지 않습니다. 타일이 겹쳐서 오프셋됩니다.

혼합 레이어

Answer 1

1) 문제는 CSS에 의해 발생합니다 ... 나는 용기에 다양한 변화를 시도으나 효과가 없었다. leaflet.css에 html로 잘못된 경로가 있으므로 문서에 첨부되지 않았습니다. CDN에서 그것을 CSS 파일에 문제 설정 올바른 경로를 혼합 수정 또는 연결하려면 :에 extjs에 의한 오프셋

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

2) 잘못된 맵이 생성 사업부 :

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

그것은 바닥에지도 컨테이너를 밀어 잘못된 오프셋 계산이 이루어집니다. 인라인 스타일 또는 CSS를 사용하여이 문제를 해결할 수도 있습니다.

.leaflet-map-pane { 
    top: 0; 
}