使用传单定期更新森林管理中的地图

Question

我正在使用地图显示骑手时，驾驶。地图显示位置作为地图上的标记。但是，在mongodb中更新数据之后，我的地图并没有更新。我使用的是、forestadmin、和节点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>