Vue实现疫情地图

Vue实现疫情地图的方法

使用高德地图API与疫情数据

高德地图提供了JavaScript API，结合公开的疫情数据可以快速实现疫情地图功能。需要注册高德开发者账号获取API Key。

安装高德地图JavaScript API库：

npm install @amap/amap-jsapi-loader --save

在Vue组件中初始化地图：

import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      markers: []
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    async initMap() {
      try {
        const AMap = await AMapLoader.load({
          key: 'YOUR_API_KEY',
          version: '2.0'
        });
        this.map = new AMap.Map('map-container', {
          viewMode: '2D',
          zoom: 4,
          center: [105.602725, 37.076636]
        });
        this.loadEpidemicData();
      } catch (error) {
        console.error('地图加载失败', error);
      }
    },
    loadEpidemicData() {
      // 这里调用疫情数据API
      fetch('https://api.example.com/epidemic/data')
        .then(response => response.json())
        .then(data => {
          this.addMarkers(data);
        });
    },
    addMarkers(data) {
      data.forEach(item => {
        const marker = new AMap.Marker({
          position: [item.longitude, item.latitude],
          content: this.createMarkerContent(item),
          offset: new AMap.Pixel(-15, -30)
        });
        this.markers.push(marker);
        this.map.add(marker);
      });
    },
    createMarkerContent(item) {
      return `<div class="epidemic-marker">
        <span class="count">${item.confirmed}</span>
        <span class="city">${item.city}</span>
      </div>`;
    }
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy();
    }
  }
};

使用ECharts实现可视化

ECharts提供了地图可视化功能，适合展示疫情分布热力图或区域统计。

安装ECharts：

npm install echarts --save

在Vue中使用ECharts：

import * as echarts from 'echarts';
import 'echarts/map/js/china';

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('chart-container'));
      this.updateChart();
    },
    updateChart() {
      fetch('https://api.example.com/epidemic/data')
        .then(response => response.json())
        .then(data => {
          const option = {
            visualMap: {
              min: 0,
              max: 1000,
              text: ['High', 'Low'],
              realtime: false,
              calculable: true,
              inRange: {
                color: ['#50a3ba', '#eac736', '#d94e5d']
              }
            },
            series: [{
              name: '疫情数据',
              type: 'map',
              map: 'china',
              data: data.map(item => ({
                name: item.province,
                value: item.confirmed
              }))
            }]
          };
          this.chart.setOption(option);
        });
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};

使用第三方疫情地图组件

现有开源项目如vue-epidemic-map提供了封装好的组件，可以快速集成。

安装组件：

npm install vue-epidemic-map --save

在项目中使用：

import VueEpidemicMap from 'vue-epidemic-map';

export default {
  components: {
    VueEpidemicMap
  },
  data() {
    return {
      epidemicData: []
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      fetch('https://api.example.com/epidemic/data')
        .then(response => response.json())
        .then(data => {
          this.epidemicData = data;
        });
    }
  }
};

模板部分：

<template>
  <vue-epidemic-map 
    :data="epidemicData" 
    map-type="china" 
    heat-mode
  />
</template>

数据更新策略

定时刷新数据保持地图信息最新，可以使用WebSocket或轮询方式。

data() {
  return {
    timer: null,
    refreshInterval: 600000 // 10分钟
  };
},
mounted() {
  this.startAutoRefresh();
},
methods: {
  startAutoRefresh() {
    this.timer = setInterval(() => {
      this.loadEpidemicData();
    }, this.refreshInterval);
  }
},
beforeDestroy() {
  if (this.timer) {
    clearInterval(this.timer);
  }
}

性能优化建议

对于大量数据点展示，考虑使用聚类标记或区域热力图代替单个标记。使用防抖技术避免频繁重绘，大数据量时采用分页加载策略。