Echarts的世界、中国、省份地图

最新推荐文章于 2025-05-31 15:16:47 发布

M_Limeng

最新推荐文章于 2025-05-31 15:16:47 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/M_Limeng/article/details/123091438

此博客展示了如何使用ECharts GL创建3D地图，包括中国、世界地图以及省份和城市的3D视图。示例中包含自动旋转、视角控制、灯光效果以及从不同地点到宁波的轨迹线。代码示例涵盖了地图初始化、数据加载以及地图交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

安装的依赖

npm i echarts echarts-gl -S

html

 <div class="beijing">
      <div id="ChinaMap"></div>
      <div id="WorldMap"></div>
      <div id="CityMap"></div>
  </div>

import echartsGL from "echarts-gl";
var echarts = require("echarts");
require("echarts/map/js/china");
require("echarts/map/js/world");
// 河北省
require("echarts/map/js/province/hebei");
// 其他省
require("echarts/map/js/province/anhui");
require("echarts/map/js/province/aomen");
require("echarts/map/js/province/heilongjiang");
require("echarts/map/js/province/henan");
require("echarts/map/js/province/hubei");
require("echarts/map/js/province/hunan");
require("echarts/map/js/province/jiangsu");
require("echarts/map/js/province/jiangxi");
require("echarts/map/js/province/jilin");
require("echarts/map/js/province/liaoning");
require("echarts/map/js/province/neimenggu");
require("echarts/map/js/province/beijing");
require("echarts/map/js/province/ningxia");
require("echarts/map/js/province/qinghai");
require("echarts/map/js/province/shandong");
require("echarts/map/js/province/shanghai");
require("echarts/map/js/province/shanxi");
require("echarts/map/js/province/shanxi1");
require("echarts/map/js/province/sichuan");
require("echarts/map/js/province/taiwan");
require("echarts/map/js/province/tianjin");
require("echarts/map/js/province/xianggang");
require("echarts/map/js/province/chongqing");
require("echarts/map/js/province/xinjiang");
require("echarts/map/js/province/xizang");
require("echarts/map/js/province/yunnan");
require("echarts/map/js/province/zhejiang");
require("echarts/map/js/province/fujian");
require("echarts/map/js/province/gansu");
require("echarts/map/js/province/guangdong");
require("echarts/map/js/province/guangxi");
require("echarts/map/js/province/guizhou");
require("echarts/map/js/province/hainan");
export default {
   
   
  data() {
   
   
    return {
   
   
      //map3D 配置项开始
      autoRotate: false, //是否开启视角绕物体的自动旋转查看。
      autoRotateDirection: "cw", //物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
      autoRotateSpeed: 20, //旋转速度
      autoRotateAfterStill: 3, //在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。
      damping: 0.8, //鼠标进行旋转，缩放等操作时的迟滞因子，在大于 0 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。
      rotateSensitivity: 5, //旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。0不能旋转
      distance: 92, //地图大小   值越大-地图越小，值越小-地图越大
      alpha: 45, //垂直翻转角度
      beta: 0, //视角绕 y 轴，即左右旋转的角度。
      zoomSensitivity: 3, //缩放操作的灵敏度，值越大越灵敏。0表示不能缩放
      center: [0, -10, 0], //[ 18, 10, 0 ]视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
      //map3D 配置项结束

      //lines3D 轨迹线数据
      datas: [
        {
   
   
          fromName: "北京",
          toName: "宁波",
          coords: [
            [116.24, 39.55, 1],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "上海",
          toName: "宁波",
          coords: [
            [121.46, 31.28],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "河北",
          toName: "宁波",
          coords: [
            [116.21, 39.44],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "山西",
          toName: "宁波",
          coords: [
            [111.95, 37.65],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "内蒙古",
          toName: "宁波",
          coords: [
            [111.764469, 40.859042],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "辽宁",
          toName: "宁波",
          coords: [
            [122.42, 41.29],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "吉林",
          toName: "宁波",
          coords: [
            [126.32, 43.68],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "黑龙江",
          toName: "宁波",
          coords: [
            [128.34, 48.85],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "江苏",
          toName: "宁波",
          coords: [
            [119.26, 33.04],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "浙江",
          toName: "宁波",
          coords: [
            [120.15, 29.28],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "安徽",
          toName: "宁波",
          coords: [
            [117.28, 31.86],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "福建",
          toName: "宁波",
          coords: [
            [118.31, 26.07],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "山西",
          toName: "宁波",
          coords: [
            [115.89, 27.97],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "山东",
          toName: "宁波",
          coords: [
            [118.01, 36.37],
            [114.577059, 38.153047, 1],
          ],
        },
        {
   
   
          fromName: "河南",
          toName: "宁波",
          coords: [
            [113.46