vue3+vite项目中如何实现中国地图的展示，有划线，可放大缩小

TttHhhYy

已于 2023-11-28 15:41:01 修改

阅读量355

点赞数 1

文章标签： swift 开发语言 ios

于 2023-11-28 15:31:30 首次发布

本文链接：https://blog.csdn.net/THY0827/article/details/134668532

版权

1.大致展示效果

2.map.vue文件中去写地图代码

<template>
    <div id="main" style="width:800px;height:600px">
        home
    </div>
</template>
<script setup>
import { ref,onMounted } from 'vue';
import * as echarts from 'echarts';
import * as chinaJSON from '../../china.json';
echarts.registerMap('china', chinaJSON )
onMounted(()=>{
    init()
})
const init=()=>{
    var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
 // 引入航线所用的飞机箭头 用于symbol属性
 const planePath =
    'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
  
  myChart.setOption({
    // geo地理坐标系组件 支持在地理坐标系上绘制散点图，线集
    geo: {
      map: 'china', // 中国地图
      roam: true, // 是否开启放大缩小/拖拽功能
      //地图的位置调试
      left: 150,
      top: 120,
      right: 150,
      bottom: 0,
      // 缩放比列
      zoom: 1.12,
      // 地图中心点位置
      layoutCenter: ['50%', '50%'],
      //地图上的文字的设置
      label: {
        show: true,
        color: 'white',
        fontSize: 14,
      },
      // itemStyle地图区域的多边形 图形样式
      itemStyle: {
        areaColor: '#12235c', // 地图区域的颜色
        // borderColor: '#2ab8ff', // 图形的描边颜色
        borderColor: 'rgba(147, 235, 248, 1)',
        borderWidth: 0.8,
        shadowColor: 'rgba(128, 217, 248, .8)',
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10,
        opacity: 0.9,
      },
      //地图高亮的效果
      emphasis: {
        label: {
          color: 'white',
          fontSize: 32,
          // fontWeight: 'bold',
        },
        itemStyle: {
          // areaColor: '#5470c6',
          borderWidth: 2,
          borderType: 'dashed', // 高亮时虚线边框
        },
        // focus: 'self', // 鼠标移入地区，其余地区淡出
      },
    },
    //布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 航线的设置 series-lines
    series: [
      {
        type: 'lines', //航线的系列
        data: [
          {
            // 北京->河南
            coords: [
              [116.405285, 39.904989], // 起点
              [113.665412, 34.757975], // 终点
            ],
          },
          {
            // 河南->北京
            coords: [
              [113.665412, 34.757975],
              [116.405285, 39.904989],
            ],
          },
          {
            // 北京->黑龙江
            coords: [
              [116.405285, 39.904989],
              [126.642464, 45.756967],
            ],
          },
          {
            // 黑龙江->北京
            coords: [
              [126.642464, 45.756967],
              [116.405285, 39.904989],
            ],
          },
          {
            // 河南->浙江
            coords: [
              [113.665412, 34.757975],
              [120.153576, 30.287459],
            ],
          },
          {
            // 浙江->河南
            coords: [
              [120.153576, 30.287459],
              [113.665412, 34.757975],
            ],
          },
          {
            // 浙江->台湾
            coords: [
              [120.153576, 30.287459],
              [121.509062, 25.044332],
            ],
          },
          {
            // 北京->新疆
            coords: [
              [116.405285, 39.904989],
              [87.617733, 43.792818],
            ],
          },
          {
            // 新疆->北京
            coords: [
              [87.617733, 43.792818],
              [116.405285, 39.904989],
            ],
          },
          {
            // 河南->四川
            coords: [
              [113.665412, 34.757975],
              [104.065735, 30.659462],
            ],
          },
          {
            // 四川->河南
            coords: [
              [104.065735, 30.659462],
              [113.665412, 34.757975],
            ],
          },
          {
            // 四川->西藏
            coords: [
              [104.065735, 30.659462],
              [91.132212, 29.660361],
            ],
          },
          {
            // 四川->广东
            coords: [
              [104.065735, 30.659462],
              [113.280637, 23.125178],
            ],
          },
          {
            // 广东->四川
            coords: [
              [113.280637, 23.125178],
              [104.065735, 30.659462],
            ],
          },
        ],
        // 开启动画特效
        effect: {
          show: true,
          period: 5, // 箭头指向速度，值越小速度越快
          trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
          // symbol: 'arrow', // 箭头图标
          symbol: planePath, // 箭头图标使用引入的箭头
          symbolSize: 18,
        },
        // 线路统一的样式设置
        lineStyle: {
          color: '#00eaff',
          width: 1.5, //尾迹线条宽度
          opacity: 0.7, //尾迹线条透明度
          curveness: 0.3, //尾迹线条曲直度
        },
      },
    ],
  })
}


</script>

3.当然可以封装成组件

组件展示页面代码入下：

<template>
  
  <!-- 外边盒子 -->
  <div class="container">
    <img style="z-index:-1;width:100vw;height:100vh" src="../../public/images/bg.png" alt="">
    <!-- 数据大屏展示内容区域 -->
    <div class="screen" ref="screen">
      <!-- 数据大屏顶部 -->
      <div class="top">
        <Top />
      </div>
      <!-- 数据大屏主体部分 -->
      <div class="body">
       
        <div class="center">
          <ChinaMap class="chinaMap"></ChinaMap>
          <TrendChart class="trendChart"></TrendChart>
        </div>
       
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入顶部的子组件
import Top from './components/top/index.vue'

//引入中间两个子组件
import ChinaMap from './components/map/index.vue'
import TrendChart from './components/line/index.vue'

// 获取数据大屏展示内容盒子的DOM元素
let screen = ref()
// 挂载时首先去获取视口的宽高
onMounted(() => {
  // 使用ref获取到的dom对象调用时都需要带.value
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
})
// 创建函数
function getScale(w = 1920, h = 1080) {
  let ww = window.innerWidth / w
  let wh = window.innerHeight / h
  // 按照变化较小者的比例去进行缩放
  return ww < wh ? ww : wh
}
// 视口发生变化时
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
</script>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100vh;

  background-position: center center;
  background-size: cover;

  // 大屏的响应式使用transform的scale属性去实现
  .screen {
    position: fixed;
    width: 1920px;
    height: 100vh;
    // 将transform的基准点改为左上角
    transform-origin: left top;
    // 然后将整体往右下角移50%
    left: 50%;
    top: 38%;
    .top {
      width: 100%;
      height: 30px;
    }
    .body {
      // 让主体部分左中右三部分进行浮动
      display: flex;
      height: 1040px;
      .left {
        // 设置弹性盒的flex属性可以设置弹性盒元素之间的比例大小
        flex: 1;
        display: flex;
        flex-direction: column;
        .tourist {
          flex: 1;
        }
        .sex {
          flex: 1;
        }
        .age {
          flex: 1;
        }
      }
      .center {
        flex: 2;
        display: flex;
        flex-direction: column;
        .chinaMap {
          flex: 4;
        }
        .trendChart {
          flex: 1;
        }
      }
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        // margin-left: 40px;
        .rank {
          flex: 1.5;
        }
        .year {
          flex: 1;
        }
        .count {
          flex: 1;
        }
      }
    }
  }
}
</style>

4.地图组件中代码如下

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

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//引入中国地图的JSON数据（需要去阿里云下载）
import * as chinaJSON from './china.json'
//获取DOM元素
let map = ref()
// 注册中国地图echarts.registerMap 参数1 地图名 参数2 配置对象[包含地图数据]
echarts.registerMap('china', chinaJSON)
onMounted(() => {
  // 引入航线所用的飞机箭头 用于symbol属性
  const planePath =
    'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
  let myEcharts = echarts.init(map.value)
  myEcharts.setOption({
    // geo地理坐标系组件 支持在地理坐标系上绘制散点图，线集
    geo: {
      map: 'china', // 中国地图
      roam: true, // 是否开启放大缩小/拖拽功能
      //地图的位置调试
      left: 150,
      top: 120,
      right: 150,
      bottom: 0,
      // 缩放比列
      zoom: 1.12,
      // 地图中心点位置
      layoutCenter: ['50%', '50%'],
      //地图上的文字的设置
      label: {
        show: true,
        color: 'white',
        fontSize: 14,
      },
      // itemStyle地图区域的多边形 图形样式
      itemStyle: {
        areaColor: '#12235c', // 地图区域的颜色
        // borderColor: '#2ab8ff', // 图形的描边颜色
        borderColor: 'rgba(147, 235, 248, 1)',
        borderWidth: 0.8,
        shadowColor: 'rgba(128, 217, 248, .8)',
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10,
        opacity: 0.9,
      },
      //地图高亮的效果
      emphasis: {
        label: {
          color: 'white',
          fontSize: 32,
          // fontWeight: 'bold',
        },
        itemStyle: {
          // areaColor: '#5470c6',
          borderWidth: 2,
          borderType: 'dashed', // 高亮时虚线边框
        },
        // focus: 'self', // 鼠标移入地区，其余地区淡出
      },
    },
    //布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 航线的设置 series-lines
    series: [
      {
        type: 'lines', //航线的系列
        data: [
          {
            // 北京->河南
            coords: [
              [116.405285, 39.904989], // 起点
              [113.665412, 34.757975], // 终点
            ],
          },
          {
            // 河南->北京
            coords: [
              [113.665412, 34.757975],
              [116.405285, 39.904989],
            ],
          },
          {
            // 北京->黑龙江
            coords: [
              [116.405285, 39.904989],
              [126.642464, 45.756967],
            ],
          },
          {
            // 黑龙江->北京
            coords: [
              [126.642464, 45.756967],
              [116.405285, 39.904989],
            ],
          },
          {
            // 河南->浙江
            coords: [
              [113.665412, 34.757975],
              [120.153576, 30.287459],
            ],
          },
          {
            // 浙江->河南
            coords: [
              [120.153576, 30.287459],
              [113.665412, 34.757975],
            ],
          },
          {
            // 浙江->台湾
            coords: [
              [120.153576, 30.287459],
              [121.509062, 25.044332],
            ],
          },
          {
            // 北京->新疆
            coords: [
              [116.405285, 39.904989],
              [87.617733, 43.792818],
            ],
          },
          {
            // 新疆->北京
            coords: [
              [87.617733, 43.792818],
              [116.405285, 39.904989],
            ],
          },
          {
            // 河南->四川
            coords: [
              [113.665412, 34.757975],
              [104.065735, 30.659462],
            ],
          },
          {
            // 四川->河南
            coords: [
              [104.065735, 30.659462],
              [113.665412, 34.757975],
            ],
          },
          {
            // 四川->西藏
            coords: [
              [104.065735, 30.659462],
              [91.132212, 29.660361],
            ],
          },
          {
            // 四川->广东
            coords: [
              [104.065735, 30.659462],
              [113.280637, 23.125178],
            ],
          },
          {
            // 广东->四川
            coords: [
              [113.280637, 23.125178],
              [104.065735, 30.659462],
            ],
          },
        ],
        // 开启动画特效
        effect: {
          show: true,
          period: 5, // 箭头指向速度，值越小速度越快
          trailLength: 0, // 特效尾迹长度[0,1]值越大，尾迹越长重
          // symbol: 'arrow', // 箭头图标
          symbol: planePath, // 箭头图标使用引入的箭头
          symbolSize: 18,
        },
        // 线路统一的样式设置
        lineStyle: {
          color: '#00eaff',
          width: 1.5, //尾迹线条宽度
          opacity: 0.7, //尾迹线条透明度
          curveness: 0.3, //尾迹线条曲直度
        },
      },
    ],
  })
})
</script>
<script lang="ts">
// 起名字，否则每个组件在开发者工具中都为index
export default {
  name: 'ChinaMap',
}
</script>

<style scoped lang="scss"></style>