echarts 3D 地图点标记

最新推荐文章于 2024-03-11 17:11:50 发布
weixin_42517226
最新推荐文章于 2024-03-11 17:11:50 发布
阅读量909
点赞数 1
文章标签： echarts 3d javascript
本文链接：https://blog.csdn.net/weixin_42517226/article/details/130767059
版权
<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>3D地图</title>
        
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="js/echarts.js"></script>
        <script src="js/echarts-gl.min.js"></script>
</head>
<body>
    <!-- 3D地图容器 -->
    <div id="main" style="width: 100%; height: 800px;"></div>
    
    <script>    
        // 初始化图表    
        var myChart = echarts.init(document.getElementById('main'));
        
        // JSON文件(地图数据)路径
        var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v3/bound/230000_full.json";
        
        // 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
        myChart.showLoading();
        
        // 引入JSON文件
        $.getJSON(uploadedDataURL, function(geoJson) {
            
            // 注册地图名字(china)和数据(geoJson)
            echarts.registerMap('china', geoJson);
            
            // 隐藏动画加载效果。
            myChart.hideLoading();            
            
            // 图表配置项        
            var option = {
                
                    title : {                            // 标题
                        top : '5%',
                        text : '3D地图',
                        subtext : '',
                        x : 'center',
                        textStyle : {
                            color : '#ccc'
                        }
                    },
                    tooltip: {
                        show: true,
                    },
                    geo3D: {
                        map: 'china',
                        roam: true,
                        regionHeight: 5, //地图厚度
                        itemStyle: {
                            color: '#326a9a',
                            opacity: 0.8,
                            borderWidth: 0.8,
                            borderColor: '#c3d7de'
                        },
                        label:{
                            normal:{
                                show:false,
                            },
                            emphasis:{
                                show:false,
                            },
                           
                        },
                        
                        emphasis: { //当鼠标放上去  地区区域是否显示名称
                            disabled: true, //是否可以被选中
                            label: {
                                formatter: function(params) { // 鼠标经过的回调函数  
                                    // console.log('hover', params)
                                    dataObj = params;
                                    return params.name
                                },
                            },
                        },
                        light: { //光照阴影
                            main: {
                                color: '#fff', //光照颜色
                                intensity: 1.2, //光照强度
                                shadowQuality: 'high', //阴影亮度
                                shadow: false, //是否显示阴影
                                alpha: 55,
                                beta: 10
                            },
                            ambient: {
                                intensity: 0.3
                            }
                        },

                        viewControl: {
                            distance: 120, // 地图视角 控制初始大小
                            // rotateSensitivity: 0, // 旋转
                            // zoomSensitivity: 0, // 缩放
                            // autoRotate: false,
                            // maxBeta: Infinity,
                            // minBeta: -Infinity,
                            // beta: -15, //旋转视角
                            alpha: 35, //视角
                            panMouseButton: 'left',
                            rotateMouseButton: 'right',
                            center: [-1, 0, 5],
                        },

                    },
    
                    series: [
                        {
                            type: 'scatter3D',
                            coordinateSystem: 'geo3D',
                            symbolSize: 5,
                            rippleEffect: {
                                //坐标点动画
                                period: 3,
                                scale: 5,
                                brushType: 'fill'
                            },
                           
                            data: [
                                {
                                    name: "阿城区",
                                    value: [126.972726,45.538372],
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'right',
                                            formatter: '{b}',
                                            color: '#f99',
                                            fontWeight: "bold",
                                            fontSize: 18
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: 'red'
                                        }
                                    },
                                },
                                {
                                        name: "牡丹江",
                                        value: [129.650322,44.567084],
                                        label: {
                                            normal: {
                                                show: true,
                                                position: 'right',
                                                formatter: '{b}',
                                                color: '#f99',
                                                fontWeight: "bold",
                                                fontSize: 18
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: 'blue'
                                            }
                                        },
                                },
                                {
                                        name: "齐齐哈尔",
                                        value: [123.891969,47.388143],
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'right',
                                                formatter: '{b}',
                                                color: '#f99',
                                                fontWeight: "bold",
                                                fontSize: 18
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: 'black'
                                            }
                                        },
                                },
                                {
                                        name: "伊春",
                                        value: [128.859239,47.743023],
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'right',
                                                formatter: '{b}',
                                                color: '#f99',
                                                fontWeight: "bold",
                                                fontSize: 18
                                            }
                                        },
                                        itemStyle: {
                                            normal: {
                                                color: 'orange'
                                            }
                                        },
                                },

                            ],
                        },
                    ],
                      
                    
                       
            };



            
           
            myChart.setOption(option);
            
        });
        
      
    </script>
</body>
</html>