使用传单在forestadmin中定期更新地图

Question

我在开车时用地图显示乘客。地图在地图上以标记的形式显示位置。但在mongodb中更新数据后，我的地图没有更新。我正在使用forestadmin和node-js。在forestadmin中，我使用的是smartview，必须使用ember.js。我显示的是leaflet OpenStreetMap映射。

这是我正在使用的javascript：

export default Component.extend(SmartViewMixin, {
store: service(),
tagName: "",
map: null,
loaded: false,
init(...args) {
this._super(...args);
this.loadPlugin();
},
didInsertElement() {
this.displayMap();
},
onRecordsChange: observer("records", function () {
this.displayMap();
}),
loadPlugin() {
scheduleOnce("afterRender", this, () => {
$.getScript(
"//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js",
() => {
$.getScript(
"//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js",
() => {
this.set("loaded", true);
this.displayMap();
}
);
}
);
const headElement = document.getElementsByTagName("head")[0];
const cssLeafletLink = document.createElement("link");
cssLeafletLink.type = "text/css";
cssLeafletLink.rel = "stylesheet";
cssLeafletLink.href =
"//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css";
headElement.appendChild(cssLeafletLink);
const cssDrawLink = document.createElement("link");
cssDrawLink.type = "text/css";
cssDrawLink.rel = "stylesheet";
cssDrawLink.href =
"//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css";
headElement.appendChild(cssDrawLink);
});
},
displayMap() {
if (!this.loaded) {
return;
}
if (this.map) {
this.map.off();
this.map.remove();
this.map = null;
}
const markers_arr = [];
this.records.forEach(function (record) {
markers_arr.push([
record.get("forest-latitude"),
record.get("forest-longitude"),
record.get("id"),
record.get("forest-userId.forest-email"),

record.get("forest-userId.forest-bikeModel"),
record.get("forest-userId.forest-bikeRegNo"),
record.get("forest-userId.forest-phone"),
]);
});
var map = L.map("map").setView(
new L.LatLng(markers_arr[0][0], markers_arr[0][1]),
7
);
const osmUrl =
"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png";
const osmAttrib =
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
const osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
map.addLayer(osm);
var markers = [];
markers_arr.forEach(function (mark) {
var foo = "ID: "+mark[2] + "n <br>Email: " + mark[3]+ "n <br>Phone: " + mark[6]+ "n <br>Bike Model: " + mark[4] + "n <br>Bike #: " + mark[5]
var marker1 = L.marker([mark[0], mark[1]] )
.addTo(map)
.bindPopup(foo);
markers.push(marker1);
marker1.on("mouseover", function (ev) {
marker1.openPopup();
});
});
function markerFunction(id) {
for (var i in markers) {
var markerID = markers[i].options.title;
if (markerID == id) {
markers[i].openPopup();
}
}
}
},
});

这是HTML:

<style>
#map {
width: 100%;
height: 100%;
z-index: 4;
}  
</style>
<div id="map"></div>

我也在HTML中使用fetchRecord，但它不更新最新数据。

<button {{action 'fetchRecords'}}>
Refresh data
</button>

帮助我

Answer 1

这是因为当记录发生更改时，您没有任何东西可以重新计算地图。首先，如果你想让它自动更新，我会在你的情况下做的是每秒钟检索一次记录或类似的事情，这样你就可以做下面这样的事情，但我不确定它会解决你的问题。

我觉得奇怪的是，每次你获取数据时，你都会破坏你的地图。你就不能刷新一下标记吗？这可能是你的问题。

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';
import { later } from '@ember/runloop';
import { action } from '@ember/object';
import {
triggerSmartAction, deleteRecords, getCollectionId, loadExternalStyle, loadExternalJavascript,
} from 'client/utils/smart-view-utils';
export default class extends Component {
@service store;
@tracked map = null;
@tracked loaded = false;
@action
async loadPlugin() {
loadExternalStyle('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css');
loadExternalStyle('//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css');
await loadExternalJavascript('//cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js')
await loadExternalJavascript('//cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js')
this.loaded = true;
this.displayMap();
}
displayMap() {
if (!this.loaded) {
return;
}
if (this.map) {
this.map.remove();
this.map = null;
}
const markers_arr = this.args.records.map((record) => [
record.get("forest-latitude"),
record.get("forest-longitude"),
record.get("id"),
record.get("forest-userId.forest-email"),
record.get("forest-userId.forest-bikeModel"),
record.get("forest-userId.forest-bikeRegNo"),
record.get("forest-userId.forest-phone"),
]);
const map = L.map("map").setView(
new L.LatLng(markers_arr[0][0], markers_arr[0][1]),
7
);
const osmUrl =
"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png";
const osmAttrib =
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';
const osm = new L.TileLayer(osmUrl, { attribution: osmAttrib });
map.addLayer(osm);
const markers = [];
markers_arr.forEach(function (mark) {
const foo = "ID: "+mark[2] + "n <br>Email: " + mark[3]+ "n <br>Phone: " + mark[6]+ "n <br>Bike Model: " + mark[4] + "n <br>Bike #: " + mark[5]
const marker1 = L.marker([mark[0], mark[1]] )
.addTo(map)
.bindPopup(foo);
markers.push(marker1);
marker1.on("mouseover", function (ev) {
marker1.openPopup();
});
});
// This is what will refresh the records every 5s
later(() => {
this.refreshRecords();
}, 5000)
}
@action
async refreshRecords() {
await this.args.fetchRecords();
this.displayMap();
}
}

<style>
#map {
width: 100%;
height: 100%;
z-index: 4;
}  
</style>
<div id="map" {{did-insert this.loadPlugin}}></div>