FlowActuarial/ruoyi-ui/src/views/index.vue

<template>
  <div class="map" ref="map"></div>
</template>

<script>
import { listSite } from "@/api/site/site";

export default {
  data() {
    return {
      queryParams: {
        page: 1,
        size: 10000,
      },
      loading: true,
      list: []
    }
  },
  created() {
    this.getList();
  },
  mounted() {
    this.map = new T.Map(this.$refs.map);
    this.map.centerAndZoom(new T.LngLat(104.066541, 30.572269), 8);
    this.map.addControl(new T.Control.Zoom());
    this.map.addControl(new T.Control.MapType());
  },
  methods: {
    handleQuery() {
      this.getList();
    },
    getList() {
      this.loading = true;
      listSite({page: 1, size: 10000,}).then(response => {
          this.list = response.data.records || [];
          if (this.list.length > 0) {
            this.map.centerAndZoom(new T.LngLat(+this.list[0].lon, +this.list[0].lat), 8);
          }
          this.list.forEach((item) => {
            const point = new T.LngLat(+item.lon, +item.lat);
            const marker = new T.Marker(point);
            marker.addEventListener('click', () => {
              this.handleSiteClick(item);
            })
            this.map.addOverLay(marker);
          })
          this.loading = false;
        }
      );
    },
    handleSiteClick(site) {
      this.$router.push(`/analysis/task/realtime/${site.siteId}`);
    }
  }
};
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: calc(100vh - 90px);
}
</style>