echarts实现某个市3D地图展示

最新推荐文章于 2024-09-06 11:09:12 发布

楚汉乔

最新推荐文章于 2024-09-06 11:09:12 发布

阅读量1.2w

点赞数 3

分类专栏： echarts 文章标签： echarts 3D地图市级地图

本文链接：https://blog.csdn.net/chu_han_qiao/article/details/100667448

版权

这篇博客记录了如何利用ECharts实现3D形式展示某个城市的地图，以舟山市为例，通过获取GeoJSON文件，引入ECharts库，然后动态调整颜色来反映城市下属区域车辆数量的变化。

摘要由CSDN通过智能技术生成

应业务需求，以3D形式展示某个城市的地图，并根据该城市下属区域车辆的多少，动态变幻区域颜色
大概效果如下（颜色随便给的，超丑简单记录下吧）
在这里插入图片描述
以舟山市为例：
1.生成舟山市的geojson文件
查询链接：http://echarts.baidu.com/echarts2/doc/example/geoJson/china-main-city/522200.json
想要对应城市的geojson地图数据文件,直接用对应城市的区划代码的前六位替换掉链接后面的区划代码即可（可参考https://blog.csdn.net/GRAY_KEY/article/details/80197527的博客）
2.引入对应的echarts.js和 echarts-gl.js（下载地址：https://www.echartsjs.com/zh/download.html）
代码如下：具体配置内容参考https://www.echartsjs.com/zh/option-gl.html#globe

  // 初始化图表	
    var myChart = echarts.init(document.getElementById('main'));

    // JSON文件(地图数据)路径
    var uploadedDataURL = "json/zhoushan.json";

    var option = {
   };

    // 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
    myChart.showLoading();

    // 引入JSON文件
    $.get(uploadedDataURL, function(geoJson) {
   

        // 注册地图名字(tongren)和数据(geoJson)
        echarts.registerMap('zhoushan', geoJson);

        // 隐藏动画加载效果。
        myChart.hideLoading();

        // 图表配置项		
        option = {
   

            title: {
    // 标题
                top: '5%',
                text: '舟山市3D地图',
                subtext: '',
                x: 'center',
                textStyle: {
   
                    color: '#ccc'
                }
            },

            tooltip: {
    // 提示框
                trigger: 'item',
                formatter: function(params) {
   
                    return params.name;
                }
            },
            series: [{
   
                type: 'map3D', // 系列类型
                name: 'map3D', // 系列名称
                map: 'zhoushan', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
                // 环境贴图，支持純颜色值，渐变色，全景贴图的 url。默认为 'auto'，在配置有 light.ambientCubemap.texture 的时候会使用该纹理作为环境贴图。否则则不显示环境贴图。
                environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 配置为垂直渐变的背景
                    offset: 0,
                    color: '#00aaff' // 天空颜色           
                }, {
   
                    offset: 0.7,
                    color: '#998866' // 地面颜色
                }, {
   
                    offset: 1,
                    color: '#998866' // 地面颜色
                }], false),

                label: {
    // 标签的相关设置
                    show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                    //distance: 50,               // 标签距离图形的距离，在三维的散点图中这个距离是屏幕空间的像素值，其它图中这个距离是相对的三维距离
                    //formatter:,               // 标签内容格式器
                    textStyle: {
    // 标签的字体样式
                        color: '#000', // 地图初始化区域字体颜色
                        fontSize: 12, // 字体大小
                        opacity: 1, // 字体透明度
                        backgroundColor: 'rgba(0,23,11,0)' // 字体背景色
                    },
                },

                itemStyle