Angular 2 Leaflet Tiles 巨大的差距答案

【问题标题】：Angular 2 Leaflet Tiles huge gapsAngular 2 Leaflet Tiles 巨大的差距
【发布时间】：2017-06-27 22:31:39
【问题描述】：

在我的 Angular 2 应用程序之外使用相同的配置，传单加载正常，但这是 Angular 2 中发生的情况：

如果我移动地图，会加载不同的图块，但同样的问题仍然存在。

html：

<div class="leaflet-maps" id="map"></div>

组件：

    let el = this._elementRef.nativeElement.querySelector('.leaflet-maps');

    let map = L.map("map", {
        zoomControl: false,
        center: L.latLng(37.8, -96),
        zoom: 5,
        minZoom: 4,
        maxZoom: 19
    });

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

我已经通过以下方式加载了传单 css 文件：

styleUrls: ['./maps.component.scss']

我粘贴小册子css内容的地方

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,

....

【问题讨论】：

标签： javascript css angular sass leaflet

【解决方案1】：

这解决了我的问题：

import { Component, ViewEncapsulation} from '@angular/core';

@Component({
    selector: 'maps',
    templateUrl: 'maps.component.html',
    styleUrls: ['./maps.component.scss'],
    encapsulation: ViewEncapsulation.None  // <--
})

【讨论】：

【解决方案2】：

在您的 index.html 中添加以下 CSS 链接。这将解决瓷砖问题

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

【讨论】：