Angular Leaflet-地图无法正确呈现

时间:2019-03-05 06:45:20

标签: angular leaflet

无论我在Angular 7中尝试哪种方式,我的Leaflet Map都无法正确加载。我得到了一个拼图块,其中一半的屏幕为灰色,另一半为随机分离的地图块(请参见图片)。

地图方块拼图:


我的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()”添加到了Imports中。 invalidateSize()对我不起作用,尽管也许我用错了。我是通过setTimeout而不是在方法调用中完成的。

我想念什么吗?我是否必须像这样或类似的方式向INDEX.HTML添加脚本?

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

我搜索了很多帖子并遵循了教程,但没有任何东西可以让我加载漂亮的地图。

有人可以帮忙吗?

谢谢, 莫阿

2 个答案:

答案 0 :(得分:0)

这是您需要遵循的步骤:

1.install传单并在angular.json上导入传单css样式

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

2.import 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

由于直接从本地文件夹导入文件,因此不需要使用脚本和CDN。另外,您尝试使用的传单0.4确实是过时的版本

答案 1 :(得分:0)

我正在使用Angular Cli:9.1.1

在控制台中通过leaflet命令安装npm

npm i leaflet

修改 angular.json 文件

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

最后通过ng serve

重新运行项目