Question

我正在使用Leaflet在页面上绘制平面图。我能够渲染图像，但是由于用户可以上传任何尺寸的地图，因此我需要能够说明这一点。

上传图像时，我正在捕获高度/宽度，但不确定如何将其传递给我的视图。

我正在尝试这种方法（运气不佳）：

<div #map id="map" ng-style="{'height' : '{{ myObject.mapHeight }}px' }"></div>

mapHeight在我的.ts文件中可用。然后可以将其输出到视图中以检查是否确实有值通过。将图像高度传递到视图的最佳方法是什么？

这是我的.ts文件：

map: L.Map = null;
@ViewChild('map') mapContainer: ElementRef;


...

this.map = L.map(this.mapContainer.nativeElement, {
  crs: L.CRS.Simple,
});


let geoJson = L.geoJSON(this.geoData, {
  style: function (feature) {
    return {
      weight: 0.8
    }
  },
  onEachFeature: function (feature, layer) {
    //
  }
}).addTo(this.map);

let bounds: any = [[0, 0], [this.myObject.mapHeight, this.myObject.mapWidth]];
let image: any = L.imageOverlay(this.myObject.mapUrl, bounds).addTo(this.map);

this.map.fitBounds(bounds);

编辑

如果我这样做，我可以得到高度，但是看着日志，似乎这个方法就可以运行了。我可以想像在某个时候我会消耗掉所有内存，这不好。

<div #map id="map" [ngStyle]="getMapStyle()"></div>

.ts

...
getMapStyle() {
    console.log('--> getMapStyle called');
    console.log('map height: ', this.mapHeight + 'px');

    return {
      'height': this.myObject.mapHeight + 'px'
    };
}

Answer 1

对于其他想要这样做的人来说，这就是最终对我有用的东西。

.html

<div #map id="map" [style.height.px]="myObject?.mapHeight"></div>

如何在Ionic 3 App中将动态高度传递给Leaflet CRS地图？

1 个答案: