Angular Leaflet - 地图无法正确渲染

Question

无论我在 Angular 7 中尝试哪种方法，我的 Leaflet 地图都无法正确加载。我得到了一个方块拼图，在屏幕的一半是灰色的，另一半是随意不连贯的地图块（见图片）。

地图方块拼图： 我的 HTML 可以是以下之一：

<div 
  leaflet 
  [leafletOptions]="options">
</div>

或者

<div id="map" class="map"></div>

我的组件是：

import * as L from "leaflet";
...
@Component( {
  styleUrls:  [ "../../../../node_modules/leaflet/dist/leaflet.css" ],
  templateUrl:  "./map.html"
} )
...
export class Map implements OnInit {

  map: any;

  options = {
    layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 7, attribution: '...' })],
        zoom: 5,
        center: L.latLng([ 46.879966, -121.726909 ])};

  async ngOnInit() {

    this.map =  L.map('map').setView( [37.8, -96], 4 );
    var osmUrl    = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm       = new L.TileLayer( osmUrl, { minZoom: 1, maxZoom: 7, attribution: osmAttrib } );      
    this.map.addLayer( osm ); // */

  }

} 

我的app-module.ts文件中已经添加了"LeafletModule.forRoot()"到导入模块中。

invalidateSize()方法对我来说没有起作用，尽管可能是我使用不正确。我是通过setTimeout而不是方法调用来实现的。

我是否遗漏了什么？我需要像这样在INDEX.HTML中添加一个脚本吗？

<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

我搜索了很多帖子并跟随教程，但没有一个能够加载漂亮的地图。

有人能帮忙吗？

谢谢， Moa

- Moa

---

我之前遇到过相同的问题，确认地图加载后，调整浏览器页面大小会使地图正确加载吗？ - Simo

当我调整浏览器大小时，地图仍然是乱码。因此，invalidateSize() 不是问题所在。 - Moa

Answer 1

以下是您需要遵循的步骤：

1. 安装leaflet并在angular.json中导入leaflet css样式。

"styles": ["../node_modules/leaflet/dist/leaflet.css", "styles.css"],

2.在你的ts中导入leaflet：

import * as L from "leaflet";

3.在ngOnInit中初始化地图：

map;
ngOnInit() {
    this.map = L.map("map").setView([46.879966, -121.726909], 7);

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

演示

您无需使用脚本和CDN，因为您可以直接从本地文件夹导入文件。此外，您尝试使用的Leaflet 0.4版本已经过时。

- kboul

---

问题：我的 Angular 项目使用 SCSS 样式。这可能会出问题吗？ - Moa

完全不需要。您只需要在 angular.json 中导入 leaflet.css 样式，以便地图按预期呈现。请查看演示。如果有帮助，请接受答案。 - kboul

好的，我还需要花费几个小时来添加它，但是我会尝试将其添加到我的 angular.json 中。对于我来说，它会像这样："styles": ["../node_modules/leaflet/dist/leaflet.css", "styles.scss"]。请注意，这些样式是 SCSS 格式的。可以吗？ - Moa

leaflet.css是来自地图库Leaflet的样式文件。而styles.scss则是Angular根样式，用户可以配置它用于整个Angular应用程序。同样，在组件中也是如此。两者之间没有冲突。如果您还使用其他库，例如font-awesome，您可以导入其.css文件而不会发生冲突。 - kboul

是的，它起作用了！！但有一件事情没有提到，可能是因为我不是专家，也不需要它。 当你将"./node_modules/leaflet/dist/leaflet.css"添加到你的 angular.js 中时，请重新启动你的项目！我错过了npm start。非常感谢。 - Moa

Answer 2

我正在使用Angular Cli：9.1.1

在控制台中使用npm命令安装leaflet。

npm i leaflet

按照以下方式修改angular.json文件

{
  ...
  "projects": {
    "project-name": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              "./src/styles.scss",
              "./node_modules/leaflet/dist/leaflet.css"
            ],
            ...
          }
        }
      }
    }
  }
}

最后，通过ng serve重新运行该项目。

- Shatu