Angular Leaflet - 地图无法正确渲染答案

【问题标题】：Angular Leaflet - Map does does not render properlyAngular Leaflet - 地图无法正确渲染
【发布时间】：2019-07-26 13:41:21
【问题描述】：

无论我在 Angular 7 中尝试哪种方式，我的传单地图都无法正确加载。我得到一个块拼图，一半是灰色的，另一半是随机脱节的地图块（见图）。

地图块拼图：

我的 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 在 Imports 中添加了“LeafletModule.forRoot()”。 invalidateSize() 对我不起作用，尽管也许我用错了。我是用 setTimeout 做的，而不是在方法调用中做的。

我错过了什么吗？我是否必须像这样向 INDEX.HTML 添加脚本？

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

我搜索了很多帖子并关注了教程，但没有什么能让我加载一张漂亮的地图。

谁能帮忙？

谢谢，恐鸟

【问题讨论】：

我之前也遇到过同样的问题，只是为了确定，一旦地图加载完毕，调整浏览器页面的大小可以让地图正确加载？
当我调整浏览器大小时，地图仍然是 gobbledegook。所以 invalidateSize() 不是问题。

标签： angular typescript leaflet angular-leaflet-directive

【解决方案1】：

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

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

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

2.在你的ts中导入传单：

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);
}

Demo

您不需要使用脚本和cdns，因为您直接从本地文件夹导入文件。另外，您正在尝试使用真正过时的传单 0.4

【讨论】：

问题：我的 Angular 项目是 SCSS 样式的。这可能是个问题吗？
一点也不。您只需要在angular.json 上导入leaflet.css 样式，以便按预期呈现地图。检查演示。如果对您有帮助，请采纳答案。
好的，我距离添加它还有几个小时，但会尝试将它添加到我的angular.json。但对我来说它看起来像这样："styles": ["../node_modules/leaflet/dist/leaflet.css", "styles.scss"],。请注意，样式是 SCSS。可以吗？
leaflet.css 是来自leaflet样式库的文件。 styles.scss 是用户配置的 Angular 根样式，用于整个 Angular 应用程序。在组件中也是如此。两者之间没有冲突。如果您还使用其他库，例如 font-awesome，您可以导入其 .css 文件而不会发生冲突。
它确实有效，是的！但是有一件事没有提到，虽然可能因为我不是专家，所以不需要。当您将"./node_modules/leaflet/dist/leaflet.css" 添加到您的angular.js 时，请重新启动您的项目！ npm start 是我所缺少的。非常感谢。

【解决方案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重新运行项目

【讨论】：