Echarts中3D地图热力图

3D地图中的热力图就是把3D地图和热力图进行结合,实现在3D地图中进行热力图的显示,具体主要代码如下(框架是Angular,引入Echarts插件之后,地图插件也引入之后):

 const option = {
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
            return params.name + ' : ' + params.value;
        }
      },
      visualMap: {
        type: 'continuous',
        show: true,
        min: 0,
        max: 15,
        text: text,
        inRange: {
          color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
        },
      },
      series: [
        {
          type: 'map3D',
          map: 'china',
          postEffect: {
            enable: true,
            colorCorrection: {
              lookupTexture: '../../../assets/images/hot.jpg'
            }
          },
          light: {
            main: {
              intensity: 1,
              shadow: true,
              alpha: 150,
              beta: 70
            },
            ambient: {
              intensity: 0
            },
            ambientCubemap: {
              diffuseIntensity: 1,
              texture: '../../../assets/images/MonValley_A_LookoutPoint_2k.hdr'
            }
          },
          groundPlane: {
            show: true
          },
          data: data
        }
      ]
    };

具体的属性在series中,type:'map3D’是把地图设置为3D地图,map:'china’是把地图的基底设置成中国地图,也可以是世界地图或者是城市地图,关键在于前面所引用的地图插件。
tooltip中的设置是提示框显示,当鼠标触摸到地图上时,就会显示地图上区域的数据值,或者是一些区域信息;
visualMap中设置的是Echarts图周边的数据视觉组件,一般都是根据数据来改变颜色;
postEffect中设置的是对地图的后期处理处理,可以去官网上查看详细配置信息,3D地图后期处理Echarts官网链接
groundPlane,light也是官网上一些3D地图配置信息,可以在官网上查看详细配置信息。

要使用 echarts 实现 3D 地图热力效果,可以按照以下步骤进行: 1. 准备地图数据:需要准备一个包含地理信息的数据集,比如 GeoJSON 格式的数据,用来绘制地图。 2. 准备热力数据:需要准备一个包含每个地理位置的热力值的数据集,可以是一个数组,也可以是一个对象数组。 3. 配置 echarts 的 option:需要在 option 中配置地图类型、地图数据、热力数据、热力颜色等相关信息。 4. 渲染 echarts 表:将配置好的 option 传入 echarts 实例的 setOption 方法中,即可渲染出 3D 地图热力效果。 以下是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3D 地图热力效果</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script> </head> <body> <div id="map" style="width: 800px; height: 600px;"></div> <script> // 准备地图数据 var geoCoordMap = { "北京": [116.46, 39.92], "上海": [121.48, 31.22], "广州": [113.23, 23.16], "深圳": [114.07, 22.62], "成都": [104.06, 30.67], // 其他城市... }; var geoData = Object.keys(geoCoordMap).map(function (name) { return { name: name, value: geoCoordMap[name].concat(Math.random() * 100) } }); // 准备热力数据 var heatData = geoData.map(function (item) { return { name: item.name, value: item.value[2] } }); // 配置 echarts 的 option var option = { tooltip: {}, geo3D: { map: 'china', roam: true, itemStyle: { areaColor: '#1B1B1B', borderColor: '#404a59' }, light: { main: { intensity: 1, shadow: true }, ambient: { intensity: 0.3 } } }, series: [{ type: 'scatter3D', coordinateSystem: 'geo3D', symbolSize: 10, label: { show: false }, itemStyle: { color: '#ddb926' }, data: geoData }, { type: 'heatmap', coordinateSystem: 'geo3D', data: heatData, itemStyle: { color: 'red' } }] }; // 渲染 echarts 表 var chart = echarts.init(document.getElementById('map')); chart.setOption(option); </script> </body> </html> ``` 需要注意的是,这里使用的是 echarts 5.x 版本,其中的 geo3D 组件是 3D 地图组件,heatmap 组件是热力组件。在配置 option 时,需要将它们分别配置好,并指定 coordinateSystem 为 geo3D
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值