使用带有 Ionic2 打字稿的 Leaflet答案

【问题标题】：Usage of Leaflet with Ionic2 typescript使用带有 Ionic2 打字稿的 Leaflet
【发布时间】：2017-02-19 22:15:08
【问题描述】：

我是 Ionic2 和 Angular2 的新手，使用 typescript，我想为 iOS 和 Android 构建一个移动应用程序。下一步我想添加一张地图并找到 Leaflet，以便在 GoogleMaps 和 OSM 之间轻松切换，...

所以，我的问题从安装开始：有不同的软件包，例如 npm install leaflet 或 npm install leaflet-map 或 npm install ui-leaflet 等等......

其次，我不知道如何包含这些包。如果有人可以在 Ionic2 中为我提供一个非常简单的基本应用程序，显示传单地图，那就太好了。

【问题讨论】：

标签： angular typescript ionic-framework leaflet ionic2

【解决方案1】：

好的.. 首先安装传单及其类型

npm install leaflet --save
npm install @types/leaflet --save

然后将 leaflet 导入到您的组件或其他任何东西中

import 'leaflet';

在 html 文件中添加一个带有 id="map" 和预设大小的 div（最好通过 css 完成）。

<div style="height: 180px" id="map"></div>

由于styleUrls: [] 在 Ionic2 中仍然存在问题，您还必须将传单样式添加到您的 html 文件中：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

准备好之后，您可以像这样从leaflet tutorial 开始：

ngOnInit(): void {
   var map = L.map('map')
      .setView([51.505, -0.09], 13);

   L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 18,
      accessToken: 'xxx'
    }).addTo(this.map);

}

【讨论】：

你能把你的代码贴在某个地方吗？我正在使用我的传单应用程序升级到 ionic1，并试图围绕它进行思考。干杯！
这些行都是 ionic 2 相关的行。其他一切都应该与您已经存在的代码相同。比如添加标记等等。但请随时询问。
运行起来了。谢谢。但是，我在加载地图图块时遇到问题。它们稀疏地出现空白，并且像缩放这样的地图处理无济于事。通过https://github.com/tsubik/ionic2-geofence 代码可以顺利运行它，但从空白模板开始，它提供了这个笨重的用户体验。有什么想法吗？
您是否正确使用了tileLayer？我将它添加到上面的解决方案中。
Leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(this.map);