Ionic OpenStreetMap与Leaflet的集成
Ionic OpenStreetMap与Leaflet的集成
提问于 2018-05-28 06:13:13
我正在使用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;
}回答 1
Stack Overflow用户
发布于 2018-05-28 10:19:44
前段时间，我在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: '© 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中你需要链接传单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50556979
复制相关文章
相似问题