How to draw a dynamically updated map of China in a front-end project

php中世界最好的语言
Release: 2023-03-18 06:34:01
Original
3310 people have browsed it

Today I will teach you a cool code, a sparkling map of China. You only need to use vue+vuex+axios+echarts to dynamically update this map. Let's take a look.

1. Generate project and install plug-in

# 安装vue-cli
npm install vue-cli -g
# 初始化项目
vue init webpack china-map
# 切到目录下
cd china-map
# 安装项目依赖
npm install
# 安装 vuex
npm install vuex --save
# 安装 axios
npm install axios --save
# 安装 ECharts
npm install echarts --save
Copy after login

2. Project structure

├── index.html
├── main.js
├── components
│  └── index.vue
└── store
  ├── index.js     # 组装模块及导出store的文件
  └── modules
    └── ChinaMap.js  # 中国地图Vuex模块
Copy after login

3. Introduce China map and draw basic charts

1. Press The demand is to introduce Echarts charts and components related to China maps.

// 主模块
let echarts = require('echarts/lib/echarts')
// 散点图
require('echarts/lib/chart/scatter')
// 散点图放大
require('echarts/lib/chart/effectScatter')
// 地图
require('echarts/lib/chart/map')
// 图例
require('echarts/lib/component/legend')
// 提示框
require('echarts/lib/component/tooltip')
// 地图geo
require('echarts/lib/component/geo')
Copy after login

2. Introducing the China map JS file will automatically register the map; you can also introduce the json file through axios, and you need to manually register echarts.registerMap('china', chinaJson.data).

// 中国地图JS文件
require('echarts/map/js/china')
Copy after login

3. Prepare a DOM container with fixed width and height and initialize an echarts instance in mounted.

DOM container

<template>
 <div id="china-map"></div>
</template>
Copy after login

Initialize echarts instance

let chinaMap = echarts.init(document.getElementById(&#39;china-map&#39;))
Copy after login

4. Set the initialized blank map. You need to set many echarts parameters here. Please refer to the ECharts configuration item manual.

chinaMap.setOption({
  backgroundColor: &#39;#272D3A&#39;,
  // 标题
  title: {
   text: &#39;中国地图闪闪发光&#39;,
   left: &#39;center&#39;,
   textStyle: {
    color: &#39;#fff&#39;
   }
  },
  // 地图上圆点的提示
  tooltip: {
   trigger: &#39;item&#39;,
   formatter: function (params) {
    return params.name + &#39; : &#39; + params.value[2]
   }
  },
  // 图例按钮 点击可选择哪些不显示
  legend: {
   orient: &#39;vertical&#39;,
   left: &#39;left&#39;,
   top: &#39;bottom&#39;,
   data: [&#39;地区热度&#39;, &#39;top5&#39;],
   textStyle: {
    color: &#39;#fff&#39;
   }
  },
  // 地理坐标系组件
  geo: {
   map: &#39;china&#39;,
   label: {
    // true会显示城市名
    emphasis: {
     show: false
    }
   },
   itemStyle: {
    // 地图背景色
    normal: {
     areaColor: &#39;#465471&#39;,
     borderColor: &#39;#282F3C&#39;
    },
    // 悬浮时
    emphasis: {
     areaColor: &#39;#8796B4&#39;
    }
   }
  },
  // 系列列表
  series: [
   {
    name: &#39;地区热度&#39;,
    // 表的类型 这里是散点
    type: &#39;scatter&#39;,
    // 使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
    coordinateSystem: &#39;geo&#39;,
    data: [],
    // 标记的大小
    symbolSize: 12,
    // 鼠标悬浮的时候在圆点上显示数值
    label: {
     normal: {
      show: false
     },
     emphasis: {
      show: false
     }
    },
    itemStyle: {
     normal: {
      color: &#39;#ddb926&#39;
     },
     // 鼠标悬浮的时候圆点样式变化
     emphasis: {
      borderColor: &#39;#fff&#39;,
      borderWidth: 1
     }
    }
   },
   {
    name: &#39;top5&#39;,
    // 表的类型 这里是散点
    type: &#39;effectScatter&#39;,
    // 使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
    coordinateSystem: &#39;geo&#39;,
    data: [],
    // 标记的大小
    symbolSize: 12,
    showEffectOn: &#39;render&#39;,
    rippleEffect: {
     brushType: &#39;stroke&#39;
    },
    hoverAnimation: true,
    label: {
     normal: {
      show: false
     }
    },
    itemStyle: {
     normal: {
      color: &#39;#f4e925&#39;,
      shadowBlur: 10,
      shadowColor: &#39;#333&#39;
     }
    },
    zlevel: 1
   }
  ]
 })
Copy after login


4. Configure Vuex management and distribution data

1.Introduce vuex and axios into ChinaMap.js.

import axios from &#39;axios&#39;
Copy after login

2. Set the necessary variables.

const state = {
 geoCoordMap: {&#39;香港特别行政区&#39;: [114.08, 22.2], &#39;澳门特别行政区&#39;: [113.33, 22.13], &#39;台北&#39;: [121.5, 25.03]/*等等*/},
 // 发光的城市
 showCityNumber: 5,
 showCount: 0,
 // 是否需要loading
 isLoading: true
}
Copy after login

3. Grab background data and update the map in actions.

const actions = {
 fetchHeatChinaRealData ({state, commit}, chartsObj) {
  axios.get(&#39;static/data/heatChinaRealData.json&#39;)
   .then(
    (res) => {
     let data = res.data
     let paleData = ((state, data) => {
      let arr = []
      let len = data.length
      while (len--) {
       let geoCoord = state.geoCoordMap[data[len].name]
       if (geoCoord) {
        arr.push({
         name: data[len].name,
         value: geoCoord.concat(data[len].value)
        })
       }
      }
      return arr
     })(state, data)
     let lightData = paleData.sort((a, b) => {
      return b.value - a.value
     }).slice(0, state.showCityNumber)
     chartsObj.setOption({
      series: [
       {
        name: &#39;地区热度&#39;,
        data: paleData
       },
       {
        name: &#39;top5&#39;,
        data: lightData
       }
      ]
     })
    }
   )
 }
}
Copy after login


At this time npm run dev can already see the flashing yellow dots on the map of China.

If you want to change it to display dynamically, you can add under mounted in index.vue:

chinaMap.showLoading(showLoadingDefault)
this.$store.commit(&#39;openLoading&#39;)
this.$store.dispatch(&#39;fetchHeatChinaRealData&#39;, chinaMap)
setInterval(() => {
  this.$store.dispatch(&#39;fetchHeatChinaRealData&#39;, chinaMap)
}, 1000)
Copy after login


In actions in ChinaMap.js Modification of fetchHeatChinaRealData in mutations:

let lightData = paleData.sort((a, b) => {
  return b.value - a.value
}).slice(0 + state.showCount, state.showCityNumber + state.showCount)
if (state.isLoading) {
  chartsObj.hideLoading()
  commit(&#39;closeLoading&#39;)
}
Copy after login


5. Others

1. Don’t forget to introduce Vuex in main.js.

import Vue from &#39;vue&#39;
import Index from &#39;./components/index.vue&#39;
import store from &#39;./store/index&#39;
let ChinaMap = new Vue({
 el: &#39;#app&#39;,
 store,
 template: &#39;<Index/>&#39;,
 components: {Index}
})
 
Vue.use(ChinaMap)
Copy after login

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed code examples of how to implement stack data structure and bracket matching algorithm in php

The most popular in php Simple string matching algorithm, php matching algorithm_PHP tutorial

The simplest string matching algorithm tutorial in php


The above is the detailed content of How to draw a dynamically updated map of China in a front-end project. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template