javascript - 使用传单在 Forestadmin 中定期更新地图

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>

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

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

帮我

标签： javascriptember.jsleafletmapsforestadmin

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>