echart第一篇（map3D）

最新推荐文章于 2025-04-08 15:20:00 发布

Itqiandao

最新推荐文章于 2025-04-08 15:20:00 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Itqiandao/article/details/121584408

echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Echarts和Echarts-GL库创建3D地图，并详细解析了地图注册、实例化、配置项设置等步骤，包括视觉映射、地图控制器、区域样式及数据关联等关键配置。通过示例代码展示了丽水地区的3D地图效果，适用于地理数据可视化的应用场景。

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

一、准备工作

安装 echarts和echarts-gl
命令如下：npm install echarts和npm install echarts-gl
npm地址：
https://www.npmjs.com/package/echarts
https://www.npmjs.com/package/echarts-gl

geo地址获取
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4

二、简介

1、注册echarts地图

    //注册lishui区域
      echarts.registerMap('lishui', { geoJSON: lishuiGeoJson });

2、创建echarts实例

const geoChart = echarts.init(document.getElementById('main'));

3、相关配置

const option = {
        //视觉映射组件,用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）
        visualMap: {
          min: 1,
          max: 15,
          text: ['低产值', '高产值'],
          realtime: false,
          calculable: true,
          //   dimension: 2,
          inRange: {
            // color: ['#080606', '#F83F3F']
            //颜色配色
            color: ['#06BB43', '#F86B36']
          }
        },
        series: [
          {
            //地图，用于地理区域数据的可视化，配合visualMap使用更好
            type: 'map3D',
            //系列名称
            name: '丽水地图测试',
            // colorBy: 'data',
            map: 'lishui',
            //三维地图每个区域的高度,厚度
            regionHeight: 5,
            //背景环境贴图  右/下/左/上四个方位
            // environment: parkCenter,
            left: '0%',
            viewControl: {
              //autoRotate: true,
              rotateSensitivity: 0,
              zoomSensitivity: 0,
              //X轴绕
              alpha: 75,
              //y轴绕
              beta: 0,
              distance: 120
            },         

            itemStyle: {
              //普通样式
              normal: {
                opacity: 1,
                borderWidth: 1,
                borderColor: '#162D8B',
                label: {
                  show: true,
                  //   formatter: () => {
                  //     return '<div style="color:red">123456</div>';
                  //   },
                  textStyle: {
                    color: '#FFFFFF', //文字颜色
                    fontSize: 18 //文字大小
                  }
                }
              },
              //高亮样式
              emphasis: {
                // 选中样式
                borderWidth: 1.5,
                borderColor: '#162D8B',
                color: '#F4D417',
                label: {
                  show: true,
                  textStyle: {
                    color: '#FFFFFF'
                  }
                }
              }
            },
            shading: 'color',
            //针对 GeoJSON 要素的自定义属性名称，作为主键用于关联数据点和 GeoJSON 地理要素
            nameProperty: 'name',
            data: [
              //
              { name: '莲都区', adcode: '331102', value: 1 },
              //name: '青田县',
              { name: '青田县', adcode: '331121', value: 1 },
              //name: '缙云县'
              { name: '缙云县', adcode: '331122', value: 1 },
              //name: '遂昌县'
              { name: '遂昌县', adcode: '331123', value: 1 },
              //name: '松阳县'
              { name: '松阳县', adcode: '331124', value: 1 },
              //name: '云和县'
              { name: '云和县', adcode: '331125', value: 1 },
              // name: '庆元县'
              { name: '庆元县', adcode: '331126', value: 15 },
              //name: '景宁畲族自治县'
              { name: '景宁县', adcode: '331127', value: 15 },
              // name: '龙泉市'
              { name: '龙泉市', adcode: '331181', value: 1 }
            ],
            //center: [119.929284, 28.473734],
            //地图的长宽比
            aspectScale: 1.0,
            //选择类型,
            selectedMode: 'single',
            //鼠标经过高亮
            hoverable: false,
            //鼠标滚轮缩放
            roam: true
          }
        ]
      };
      geoChart.setOption(option);
    }