Пользовательский элемент управления с mapbox-gl, VueMapbox не обновляется - PullRequest
Новая
       51

Пользовательский элемент управления с mapbox-gl, VueMapbox не обновляется

0 голосов
/ 30 апреля 2020

Я пытаюсь создать собственный элемент управления картой с помощью плагина VueMapbox для Mapbox-gl. Элемент управления отображает общее количество результатов запроса, который выполняет родительский компонент.

Элемент управления не может быть обычным дочерним компонентом, поскольку он должен отображаться поверх карты mapbox. Обычный дочерний компонент будет отображаться под картой, а не как элемент управления.

Поэтому я создаю компонент элемента управления с этим. js на основе файла из https://github.com/soal/vue-mapbox/blob/development/src/components/UI/controls/ScaleControl.js

import controlMixin from "vue-mapbox/src/components/UI/controls/controlMixin";

class HitsCountControl {
  onAdd(map) {
    this.map = map;
    this.container = document.createElement("div");
    this.container.className = "my-custom-control";
    this.container.textContent = "My custom control";
    this.container.style.color = "blue";
    this.container.innerHTML = `Displaying x of ${totalHitsAnywhere} hits`;
    return this.container;
  }
  onRemove() {
    this.container.parentNode.removeChild(this.container);
    this.map = undefined;
  }
}

export default {
  name: "LayersControl",

  mixins: [controlMixin],

  props: {
    container: {
      type: HTMLElement,
      default: undefined
    },
    totalHitsAnywhere: {
      type: Number,
      default: 0
    }
  },

  watch: {
    totalHitsAnywhere() {
      console.log("updated totalHitsAnywhere");
      console.log("new value: " + this.totalHitsAnywhere);
    }
  },

  created() {
    this.control = new HitsCountControl();
    this.$_addControl();
  }
};

Я включаю компонент в родительский компонент следующим образом ... 

<template>
  <div>
    <MglMap
      :accessToken="accessToken"
      :mapStyle="mapStyle"
      :zoom="3"
      :center="[-90, 40]"
      @load="onMapLoaded"
      class="mapboxMap"
      :attributionControl="false"
    >
      <HitsCountControl
        position="bottom-left"
        :totalHitsAnywhere="totalHitsAnywhere"
      />
</MglMap>
</div>
</template>

Когда значение totalHitsAnywhere обновляется в родительском компоненте, дочерний компонент действительно обнаруживает это изменение, потому что наблюдение Код в моем дочернем компоненте выводит новое значение на консоль. Однако внутреннее содержимое HTML компонента не обновляется. Почему нет?

...