Ionic OpenStreetMap 与 Leaflet 的集成答案

【问题标题】：Ionic OpenStreetMap Integration with LeafletIonic OpenStreetMap 与 Leaflet 的集成
【发布时间】：2018-05-27 22:13:12
【问题描述】：

我正在使用 Leaflet 将 Ionic App 与 OSM 集成。我在 page.html 文件中有，其余代码在我的 page.ts 文件中。所以，我没有使用 @ViewChild() 来找到那个 div。因为，Leaflet 的 L.map('map') 应该可以找到它。我正在 ionViewDidLoad 上初始化我的地图，并在 ionViewDidEnter 中进行繁重的工作，例如将从 post 请求中检索到的 osm 数据转换为 geoJSON 数据，然后在地图上放置很多标记。我有点试图释放 ionViewDidLeave 中的资源，使 this.map = null;。这是一个正确的实现吗？谁能在实施方面提出建议。因为当我滚动时页面有点冻结。

ionViewDidLoad() {
    this.map = L.map('map').setView([41.0131, 28.9641], 18);
    L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
      maxZoom: 18
    }).addTo(this.map);
}

ionViewDidEnter() {
    this.filterProvider.getData(resource).subscribe(data => {
      if (this.map !== null) {
        L.geoJSON(osmtogeojson(data), {
          style: function(feature) {
              return {
                color: "#0288D1"
              };
          },
          pointToLayer: function(feature, latlng) {
            return L.marker(latlng, {
              icon: L.icon({
                iconUrl: 'assets/map/' + resource.toLowerCase() +'.png'
              })
            });
          },
          onEachFeature: function(feature, layer) {
            layer.bindPopup(JSON.stringify(feature.properties));
          }
        }).addTo(this.map);
      }
    });
}

ionViewDidLeave() {
   this.map = null;
   this.selectedResource = null;
}

【问题讨论】：

“在地图上放置很多标记”通常是多少？这可能是您的页面冻结的原因。

标签： leaflet ionic3 openstreetmap

【解决方案1】：

前段时间我在 codigo200 博客上发表了一个 Ionic3 + Leaflet 的例子，可以解决你的问题。代码在github，可以看解释here。

// atributes

map: L.Map;
center: L.PointTuple;
tempIcon: any;

ionViewDidLoad() {

this.center = [23.03, -81.57]; //a place in Cuba

this.map = L.map('map', {
center: this.center,
zoom: 13
});

//Adicionamos la ruta de OSM.
L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '&copy; Código 200'
})
.addTo(this.map);

this.mensaje("Pulse sobre un punto en el mapa para añadir un nuevo lugar");

this.tempIcon = L.icon({
iconUrl: 'assets/imgs/marker.png',
shadowUrl: '',
iconSize: [32, 32], // size of the icon
shadowSize: [0, 0], // size of the shadow
iconAnchor: [32, 32], // point of the icon which will correspond to markers location
shadowAnchor: [0, 0], // the same for the shadow
popupAnchor: [32, 20] // point from which the popup should open relative to the iconAnchor
});

this.map.on('click', (e) => { this.onMapClick(e) });

}

onMapClick(e) {
let tempMarker = L.marker(e.latlng, { icon: this.tempIcon })
.on('click', this.showMarkerMenu, this)  // Al hacer click, ejecutamos this.showMarkerMenu y le pasamos el contexto (this)
.addTo(this.map);

this.mensaje("Coordinate: " + e.latlng);

}

所以，我希望能解决你的问题，记住你需要 index.html 中的链接传单。

【讨论】：