Я работаю над приложением, основанным на определении местоположения, как часть университетского проекта, в котором пользователь должен иметь возможность "отбрасывать определенные сообщения в окружении хина, чтобы их могли видеть другие пользователи. Я использую Ionic v4 и Firebase в качестве базы данных.К сожалению, я довольно новичок в Ionic и Firebase, поэтому я не знаю, что делать, если не найду здесь ответа на свою проблему, поэтому решил, что с таким же успехом могу просто спросить.
Еще немного предыстории: я получил упомянутые капли , которые пользователь может написать, теперь я хочу, чтобы другие пользователи могли повышать и понижать эти капли . капли видны в openstreetmap с листовкой . До сих пор я получил все, чтобы работать, как задумано, но теперь я хочу получить 20% лучших из всех капель на основе их оценкии изменил значок, показанный на моей карте. Я думал, что смогу добиться этой покупки, добавив еще один запрос к базе данных к моему исходному, который просто получает каждый drop из моей базы данных.ionic service.
Это мой оригинальный запрос для получения каждой записи:
private dropsCollection: AngularFirestoreCollection<Drop>;
private drops: Observable<Drop[]>;
this.dropsCollection = db.collection('drops', ref =>
ref.where('createdAt', '>=', validMinTime)
);
А вот запрос для получения kingDrops :
private kingdropsCollection: AngularFirestoreCollection<Drop>;
private kingDrops: Observable<Drop[]>;
// 2 should be replaced dynamicly with the total amount of drops*0.2
const topDrops = 2;
this.kingdropsCollection = db.collection('drops', ref =>
ref.orderBy('score', 'desc').limit(topDrops)
);
Насколько я знаю, синтаксис должен быть в порядке, но как я могу реализовать этот запрос как "условие" в моем интерфейсе?Мне нужно иметь возможность динамически определять, какая из моих капель является kingDrop , и соответственно изменять значок.Вот код моего home.page.ts
import {Component, ElementRef, ViewChild} from '@angular/core';
import * as Geolib from 'geolib';
import leaflet from 'leaflet';
import {NavController} from '@ionic/angular';
import {Drop, DropService} from '../../services/drop.service';
import {AppComponent} from '../../app.component';
import {Router} from '@angular/router';
import {UserService} from '../../services/user.service';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss']
})
export class HomePage {
myDrops: Drop[];
@ViewChild('map') mapContainer: ElementRef;
map: any;
constructor(
private router: Router,
public navCtrl: NavController,
public dropService: DropService,
public appComponent: AppComponent,
public userService: UserService
) {}
ionViewDidEnter() {
this.loadmap();
}
loadmap() {
const positionIcon = leaflet.icon({
iconUrl: '../../../assets/icon/position.png',
shadowUrl: '../../../assets/icon/position-shadow.svg',
iconSize: [30, 30], // size of the icon
shadowSize: [30, 30], // size of the shadow
iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
shadowAnchor: [2, -2], // the same for the shadow
popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
});
this.map = leaflet.map('map').fitWorld();
leaflet.tileLayer(
'https://api.maptiler.com/maps/positron/{z}/{x}/{y}.png?key=JrASdfPCkNw3CYBKAD6E',
{
attributions:
'Map data © <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,
minZoom: 15
}
)
.addTo(this.map);
this.map.locate({
setView: true,
maxZoom: 10,
minZoom: 15
})
.on('locationfound', e => {
const markerGroup = leaflet.featureGroup();
const marker: any = leaflet
.marker([e.latitude, e.longitude], {
icon: positionIcon,
zIndexOffset: -1000 // put the markers on top of the location marker
})
.on('click', () => {
console.log('Position marker clicked');
});
markerGroup.addLayer(marker);
this.map.addLayer(markerGroup);
})
.on('locationerror', err => {
console.log(err.message);
});
this.loadMarkers();
}
loadMarkers() {
const greyDropIcon = leaflet.icon({
iconUrl: '../../../assets/icon/grey-drop.png',
shadowUrl: '../../../assets/icon/drop-shadow.svg',
iconSize: [25, 30], // size of the icon
shadowSize: [25, 30], // size of the shadow
iconAnchor: [0, 0], // point of the icon which will correspond to marker's location
shadowAnchor: [2, -2], // the same for the shadow
popupAnchor: [-3, -5] // point from which the popup should open relative to the iconAnchor
});
this.dropService.getDrops().subscribe((drops: any) => {
drops.forEach(singledrop => {
if (this.dropService.isDropVisible(singledrop)) {
const dropGroup = leaflet.featureGroup();
// check visibleDrops array of user for drops and add them
const dist = this.checkDropDistance(singledrop);
if (dist < 1500 && singledrop.score > -10) {
this.setDropVisible(singledrop);
} else if (singledrop.score > -10) {
const drop: any = leaflet.marker([singledrop.latitude, singledrop.longitude], {
icon: greyDropIcon
})
.on('click', () => {
console.log('Marker clicked, but out of range');
});
dropGroup.addLayer(drop);
this.map.addLayer(dropGroup);
}
}
});
});
}
// ...
}
Я пытался реализовать kingDrops так же, как drop выше, как это:
this.dropService.getKingDrops().subscribe((drops: any) => {
//..
});
Но это не сработало, и оно было бы продублировано, так как оригинальные капли уже есть на моей карте. Мне нужно какое-то условие, чтобы определить, есть ли падение это kingDrop или нет, и реализуйте значок соответствующим образом, но я не знаю синтаксис для написания такого условия ..
Может кто-нибудь помочь мне здесь?