实现一个酷炫的echarts 3D地图

最新推荐文章于 2024-04-08 02:47:56 发布
最新推荐文章于 2024-04-08 02:47:56 发布
阅读量341 收藏
点赞数
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50478723/article/details/134241219
版权

1.安装echarts  npm install echarts --save

2 挂载到vue原型上 

3.编写3d地图组件即可

<template>
    <div id="safetyMapct" class="project-map"></div>
</template>

<script>
//换成自己所需的行政区地图json
import ziji from "@/assets/json/ct.json";
export default {
    data() {
        return {

        };
    },
    mounted() {
        this.initEcharts();
    },

    methods: {
        initEcharts() {
            var data3d = [
                {
                    name: '某地方',
                    value: [119.72385, 27.562508, 5],
                    pathName: require("@/assets/images/carousel1.jpg"),
                    lineName: '某地方'
                },
                {
                    name: '某地方',
                    value: [119.921587, 27.430135, 5],
                    pathName: require("@/assets/images/carousel1.jpg"),
                    lineName: '某地方'
                },
                {
                    name: '某地方',
                    value: [120.40004, 27.390077, 5],
                    pathName: require("@/assets/images/carousel1.jpg"),
                    lineName: '某地方'
                },
                {
                    name: '某地方',
                    value: [120.477368, 27.177313, 5],
                    pathName: require("@/assets/images/carousel1.jpg"),
                    lineName: '某地方'
                }
            ];
            var linesData = [{
                fromName: "中心机房",
                toName: "机房1",
                coords: [
                    [119.72385, 27.562508],
                    [119.840283, 27.494724],

                ]
            },
            {

                fromName: "中心机房",
                toName: "机房2",
                coords: [
                    [119.840283, 27.494724],
                    [119.894175, 27.460023],

                ]
            },
            {

                fromName: "中心机房",
                toName: "机房3",
                coords: [
                    [119.894175, 27.460023],
                    [119.921587, 27.430135],

                ]
            },
            {

                fromName: "中心机房",
                toName: "机房4",
                coords: [
                    [119.921587, 27.430135],
                    [120.052239, 27.412451],

                ]
            },
            {

                fromName: "中心机房",
                toName: "机房5",
                coords: [
                    [85.74, 41.60, 1],
                    [85.50, 41.99, 1],

                ]
            },


            ];
   
            let iconUrl = document.createElement("img");
            let labelUrl = document.createElement("img");
            iconUrl.src = require("@/assets/images/digital-table-screen/safety-profile/ruihu-map-z-index.png");
            labelUrl.src = require("@/assets/images/digital-table-screen/safety-profile/ruihu-map-z-index.png");
            let option = { 
                geo3D: {
                    map: 'centerMap',
                    show: false,
                    zlevel: -10,
                    boxWidth: 200,
                    boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
                    regionHeight: 8,
                    shading: 'lambert',
                    left: "5%",

                    viewControl: {
                        projection: 'perspective',
                        autoRotate: false,
                        damping: 0,
                        rotateSensitivity: 2, //旋转操作的灵敏度
                        rotateMouseButton: 'left', //旋转操作使用的鼠标按键
                        zoomSensitivity: 2, //缩放操作的灵敏度
                        panSensitivity: 2, //平移操作的灵敏度
                        panMouseButton: 'right', //平移操作使用的鼠标按键

                        distance: 150, //默认视角距离主体的距离
                        center: [0, 0, 0],

                        animation: true,
                        animationDurationUpdate: 1000,
                        animationEasingUpdate: 'cubicInOut'
                    },
                },

                series: [
                    {
                        type: 'map3D',
                        map: 'centerMap',
                        show: true,
                        zlevel: 1,
                        boxWidth: 200,
                        //boxHeight: 4, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
                        regionHeight: 8,
                        shading: 'lambert',
                        label: { // 标签的相关设置
                            show: false,
                        },
                        left: "5%",
                        itemStyle: {
                            color: '#025894',
                            areaColor: '#025894',
                            opacity: 1,
                            borderWidth: 1,
                            borderColor: '#1cccff'
                        },
                        emphasis: {
                            label: {
                                show: false,

                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                    backgroundColor: 'transparent' // 字体背景色
                                }
                            },
                            borderColor: '#333',
                            borderWidth: 5,
                            itemStyle: {
                                color: '#025894',
                                areaColor: '#025894',

                            }
                        },
                        light: {
                            main: {

                                shadow: true,
                                shadowQuality: 'ultra',
                            },

                        },



                        viewControl: {
                            projection: 'perspective',
                            autoRotate: false,
                            damping: 0,
                            rotateSensitivity: 2, //旋转操作的灵敏度
                            rotateMouseButton: 'left', //旋转操作使用的鼠标按键
                            zoomSensitivity: 2, //缩放操作的灵敏度
                            panSensitivity: 2, //平移操作的灵敏度
                            panMouseButton: 'right', //平移操作使用的鼠标按键

                            distance: 150, //默认视角距离主体的距离
                            center: [0, 0, 0],

                            animation: true,
                            animationDurationUpdate: 1000,
                            animationEasingUpdate: 'cubicInOut'
                        },


                    },
                    {
                        type: 'scatter3D',
                        coordinateSystem: 'geo3D',
                        zlevel: 3,
                        //symbol: 'path://m232.99844,160.209511l15.863519,0l0,-14.211071l16.27296,0l0,14.211071l15.863521,0l0,14.577861l-15.863521,0l0,14.211069l-16.27296,0l0,-14.211069l-15.863519,0l0,-14.577861z',
                        symbol: 'circle',
                        symbolSize: 16,

                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}',

                                textStyle: {
                                    color: '#fff',
                                    fontSize: 14,
                                    backgroundColor: 'transparent' // 字体背景色
                                },

                            }
                        },

                        data: data3d,
                        itemStyle: { //坐标点颜色
                            color: '#2681cf',
                            shadowBlur: 20,
                            shadowColor: '#fff'
                        },
                        emphasis: {
                            itemStyle: { //坐标点颜色
                                color: '#1ca1d2',
                            },
                        }


                    },
                    // 线 和 点
                    {
                        type: 'lines3D',
                        coordinateSystem: 'geo3D',
                        zlevel: 1, //设置这个才会有轨迹线的小尾巴
                        polyline: false,
                        effect: {
                            show: true,
                            period: 10,
                            trailLength: 0.1,
                            trailColor: '#17eafe',
                            color: '#fff', //流动点颜色
                            symbol: 'arrow',
                            symbolSize: 6
                        },
                        lineStyle: {
                            normal: {
                                color: '#fff', //线条颜色
                                width: 1,
                                curveness: 0.5,
                                shadowColor: '#fff',
                            }
                        },
                        blendMode: 'lighter',
                        data: linesData,

                    },


                ]
            };

            this.$echarts.registerMap('centerMap', ziji);
            this.myChart = this.$echarts.init(document.getElementById("safetyMapct"));
            this.myChart.setOption(option, true);
            // img.onload = () => {
            //     this.myChart.setOption(option, true);
            // }
            window.addEventListener("resize", this.listenResize);
        },
        listenResize() {
            this.myChart.resize();
        },
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.listenResize);
    }
};
</script>

<style scoped lang="scss">
.project-map {
    width: rem(800);
    height: vh(564);
    position: absolute;

    canvas {
        width: rem(800) !important;
        height: vh(564) !important;
    }
}

::v-deep .tooltipArea {
    width: rem(310);
    height: rem(150);
    padding: 0 rem(10);
    background-color: rgba(8, 19, 51, 0.9);

    .tooltip-header {
        width: 100%;
        height: rem(26);
        line-height: rem(26);
        text-align: center;
        font-size: rem(16);
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #FFFFFF;
        text-shadow: 0px 2px 0px rgba(0, 2, 3, 0.88);
        background: linear-gradient(90deg, rgba(18, 33, 76, 0.04) 0%, rgba(35, 89, 170, 0.8) 50%, rgba(29, 45, 92, 0.03) 100%);
    }

    .tooltip-content {
        display: flex;

        .tooltip-content-left {
            width: rem(90);
            height: rem(100);
            margin-top: rem(8);
        }

        .tooltip-content-right {
            font-size: rem(14);
            font-family: PingFang SC;
            font-weight: bold;
            color: #FFFFFF;
            text-shadow: 0px 3px 0px rgba(0, 2, 3, 0.88);
            padding: rem(10);

            .right-item {
                margin: rem(10) 0 rem(16);

                span {
                    margin-right: rem(8);
                }
            }

            .right-bottom {
                display: flex;
                justify-content: space-around;
                align-items: center;

                .right-line {
                    width: 2px;
                    height: 25px;
                    border: 2px solid #5F9BFF;
                }

                .bottom-number {
                    font-size: 20px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #00E4FF;
                    margin-bottom: rem(6);
                    text-shadow: 0px 3px 0px rgba(0, 2, 3, 0.88);
                }

                .bottom-unit {
                    font-size: 12px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #00E4FF;
                    text-shadow: 0px 3px 0px rgba(0, 2, 3, 0.88);
                }
            }
        }
    }
}
</style>

4. 来看看效果吧

前端小啊giao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echarts 炫酷北京地图
08-10
echarts 炫酷北京地图 JSON 地图文字居中 行政区文字居中
使用echarts实现3D地图和需要注意的点
small_zu_classma的博客
06-22 9371
一些用echarts的艰难险阻
echars 3D地图为区域自定义颜色_echarts地图区域 颜色，2024年最新大学生程序设计大赛
最新发布
2401_84160087的博客
04-08 931
序、Python等项目供你选择，真正体系化！**
Echarts 3d地图
qq_43557302的博客
08-13 7045
使用echarts绘制3d地图以及在3d地图上绘制江苏省区域边界飞线图以及3d柱状图和3d散点.
python绘制地图线路_[实用参考]手把手教你如何用Python绘制JS地图
weixin_39947522的博客
12-04 812
Folium是建立在PPthon生态系统的数据整理(Datawrangling)能力和Leaflet.js库的映射能力之上的开源库。用PPthon处理数据，然后用Folium将它在Leaflet地图上进行可视化。概念Folium能够将通过PPthon处理后的数据轻松地在交互式的Leaflet地图上进行可视化展示。它不单单可以在地图上展示数据的分布图，还可以使用Vincent/Vega在地图上加以标...
ECharts3D地图
萤烛末光,增辉日月
09-16 2522
了解和使用ECharts3D地图，包括基础设置、地图标记、地图飞线、地图凸起等图表展现。
echarts 3D地图
Xiang_Gong_Ya_的博客
04-13 547
安装下载3D扩展组件 npm install echarts-gl import "echarts-gl"; initMap() { // 基于准备好的dom，初始化echarts实例 const chart = this.$echarts.init(document.getElementById("map")); // 引用省地图json数据 let hz = require("../../../../static/china_province/3
酷炫的Echarts地图数据特效.rar
10-02
酷炫的Echarts地图数据特效.rar
酷炫echarts首页
07-31
提供echarts资源，科技感首页开发，通过html，只需导入到项目中后，根据需求改变
echarts超级炫酷3d地球
09-01
双击可以运行。将案例放在首页，超级炫酷。引入简单方便，如果不懂引入，可以评论留言，手把手教，包会。免费送图标实例。
Flutter 实现酷炫的3D效果示例代码
08-18
主要介绍了Flutter 实现酷炫的3D效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
echarts-3d地图.zip
07-31
echarts echarts-gl 实现3D地图 （摘录于https://blog.csdn.net/GRAY_KEY/article/details/81295961）
echarts 3D地图，地图区域点击触发事件
10-16
echarts 3D地图，地图区域点击触发事件，3d地图加数据
基于 Vue 实现一个酷炫的 menu插件
08-28
本文给大家介绍基于 Vue 实现一个酷炫的 menu插件，此篇教程需要大家具备一定的css和vue基础知识，本文分步骤给大家介绍的非常详细，需要的朋友参考下吧
Echarts 3D地图图表
热门推荐
qq_35119405的博客
07-30 1万+
需求：实现如图所示的3D地图图表 （1）原本使用的highcharts没有3d地图的功能，搜索插件也没有可替代的方案，选择echarts理由是在地图方面百度拥有毋庸置疑的实力 https://blog.csdn.net/GRAY_KEY/article/details/81295961 （2）通过代码可以轻易写出例子的效果，但是想要写特定区域的地图则需要该地区相对应的json文件，需要通...
echarts绘制3D地图
m0_56377024的博客
07-27 4404
使用echarts和echarts-gl绘制3D地图，下面是一个demo演示，echarts版本4.6.0，echarts-gl版本1.1.2，demo启动前先自行安装，至于背景嘛，大家就自行放个背景图啦. index.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont.
echarts 3d地图-成都
晚星的博客
08-20 883
<template> <div class="right_main_under" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"> <!-- //中间地图 --> <div class="centermap">.
echarts r 地图_介绍 5种 绘制炫酷地图的方法
weixin_39796855的博客
12-21 1036
点击关注上方“SQL数据库开发”，设为“置顶或星标”，第一时间送达干货。地图可视化是一种非常直观的数据分析结果展现形式，python 有很多可视化库可以实现，pyecharts 就是很多 python 爱好者喜爱的实现地图可视化方法之一。不可否认，pyecharts 绘制的地图实现方便、图形美观而且支持交互，但在面对不同需求时，其实我们还有很多其他手段实现地图可视化。一、序本文主要是介绍...
大屏的酷炫echarts
02-01
Echarts是一种酷炫的可视化数据展示工具，它的大屏功能能够将数据以更加生动、直观的方式展现出来。大屏的酷炫Echarts可以给用户带来以下几个方面的好处。 首先，大屏的展示效果非常震撼。利用Echarts的各种图表和动画效果，可以将数据以炫酷的方式展示出来，使得数据变得更加有趣、生动，吸引观众的注意力，提升数据传达效果。无论是展示营销数据、行业发展趋势，还是展示地理信息、人口统计等，都可以通过Echarts的大屏功能实现更加吸引人的展示效果。 其次，大屏的酷炫Echarts具有数据实时更新的特点。无论是生产线的实时产能监控，还是股票行情的实时变化，通过Echarts的大屏功能，可以实时将最新的数据呈现给用户，使用户能够及时掌握到最新的变化趋势，做出更加明智的决策。 再者，大屏的酷炫Echarts具备可交互性。通过大屏展示，用户可以与数据进行互动，通过点击、拖动等操作，可以实现数据的过滤、切换，使得数据分析更加灵活高效。用户可以根据自己的需求，自由选择展示的数据维度，深入探索数据背后的信息，从而更好地理解和应用数据。 总之，大屏的酷炫Echarts通过丰富多样的图表和动画效果、数据实时更新以及可交互性，为用户提供了一种全新的数据展示方式。它不仅能够让数据更有说服力地传达，还能够帮助用户更好地理解和应用数据，为决策提供有力的支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值