Используйте тепловую карту. js вместе с vue. js - PullRequest
Новая
       22

Используйте тепловую карту. js вместе с vue. js

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

Я хочу использовать тепловую карту. js (или другую тепловую карту) вместе с vue, но мне нужна помощь сома.

До сих пор я реализовывал листовку в vue, но так как я довольно новичок в vue Я не уверен, как реализовать тепловую карту. js.

Я думаю, мне нужно поместить h337.create({ в функцию create ()? но я немного растерялся, как продолжать строить оттуда.

Любая помощь будет очень высоко оценена 

<template>
  <div>
    <div>
      <div style="height: 500px; width: 100%">
        <l-map
          v-if="showMap"
          :zoom="zoom"
          :center="center"
          style="height: 80%"
          @update:center="centerUpdate"
          @update:zoom="zoomUpdate"
        >
          <l-tile-layer :url="url" :attribution="attribution" />
        </l-map>
      </div>
    </div>
  </div>
</template>

<script>
import { latLng } from "leaflet";
import { LMap, LTileLayer } from "vue2-leaflet";

export default {
  name: "Heatmap",
  components: {
    LMap,
    LTileLayer
  },

  data() {
    return {
      // Leaflet
      zoom: 13,
      center: latLng(47.41322, -1.219482),
      url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      showMap: true,
      // heatmap.js
      mydata: [
        // v SCFC
        { x: 100, y: 182, value: 0.9 }
      ]
    };
  },

  methods: {
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    },
    showLongText() {
      this.showParagraph = !this.showParagraph;
    }
  }
};
</script>
...