0

我想用 ngx-leaflet 显示地图并将其用于使用 Angular Elements 构建的 Web 组件中。我面临的问题是与地图交互后新的图块没有呈现在屏幕上。

我已禁用区域并正在运行手动更改检测。我确实看到网络选项卡中加载了新的磁贴，但它们没有出现在屏幕上。我已手动将传单 css 复制到组件 css 文件中。

import { Component, OnInit, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
import { tileLayer, latLng } from 'leaflet';
import { interval } from 'rxjs';

@Component({
  selector: 'app-map-element',
  templateUrl: './map-element.component.html',
  styleUrls: ['./map-element.component.scss'],
  encapsulation: ViewEncapsulation.Emulated
})
export class MapElementComponent implements OnInit {

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

  constructor(
    private cd: ChangeDetectorRef,
  ) { }

  ngOnInit() {
    // Manually detecting changes every second to force a rerender
    interval(1000).subscribe(
      () => this.cd.detectChanges(),
    );
  }
}

我按照本课配置 Angular Elements：https ://angularfirebase.com/lessons/angular-elements-advanced-techniques/

这是带有代码的 Stackblitz：https ://stackblitz.com/edit/map-element

4

1 回答 1

1

Chris Engelsma就这个主题做了一个很棒的教程系列，你可以在这里查看他所有的四篇文章

于 2019-11-14T06:20:24.107 回答