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

此博客展示了如何使用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>

js

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值