可视化例子(5)——人口迁移流动图(百度地图)

最新推荐文章于 2024-02-26 10:59:13 发布

爱睡懒觉的老舅

最新推荐文章于 2024-02-26 10:59:13 发布

阅读量5.1k

点赞数 5

本文链接：https://blog.csdn.net/Ocean111best/article/details/103216000

版权

可视化同时被 3 个专栏收录

16 篇文章 4 订阅

订阅专栏

Echarts

15 篇文章 0 订阅

订阅专栏

Mapbox

5 篇文章 0 订阅

订阅专栏

一、效果图

二、注意说明

需要自己申请一个百度地图的ak，在前面引用即可

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户迁移</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <!-- bootstrap-->
    <link href="js/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script><!-- bootstrap-->
    <link href="js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
    <!--echart3-->
    <script type="text/javascript" src="js/echarts3/echarts3.7.2.min.js"></script>
    <script type="text/javascript" src="js/echarts3/chalk.js"></script>
    <script type="text/javascript" src="js/echarts3/bmap.min.js"></script>

    <!-- mapbox -->
  <!--   <script src='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
    <script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script> -->
    <script src="http://echarts.baidu.com/resource/echarts-gl-latest/mapboxgl-token.js"></script>

    <!--new 样式-->
    <link href="css/new-style.css" rel="stylesheet" type="text/css"/>
</head>
<style>
    body {
        overflow: hidden;
    }

    body * {
       -webkit-touch-callout: none;
         -webkit-user-select: none;
            -moz-user-select: none;
             -ms-user-select: none;
                 user-select: none;
    }

    .map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>
<body>
<div class="mm-container" style="">
    <div id='chart-map' class='map'></div>
</div>

<script>
    $(function(){
        var myChart = echarts.init(document.getElementById('chart-map'));
        var uploadedDataURL = "js/echarts3/map/guangdong.json";
        var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

        var guangdongData = [
            {name: '广州市', value: 100},
            {name: '深圳市', value: 85},
            {name: '珠海市', value: 70},
            {name: '汕头市', value: 20},
            {name: '佛山市', value: 77},
            {name: '韶关市', value: 60},
            {name: '湛江市', value: 1},
            {name: '肇庆市', value: 98},
            {name: '江门市', value: 90},
            {name: '茂名市', value: 45},
            {name: '惠州市', value: 25},
            {name: '梅州市', value: 35},
            {name: '汕尾市', value: 45},
            {name: '河源市', value: 70},
            {name: '阳江市', value: 65},
            {name: '清远市', value: 75},
            {name: '东莞市', value: 85},
            {name: '中山市', value: 95},
            {name: '潮州市', value: 80},
            {name: '揭阳市', value: 16},
            {name: '云浮市', value: 52}
        ];
        var palceCodData = [
            {name: '广州市', value: [113.475995,23.417055]},
            {name: '深圳市', value: [114.032357,22.675157]},
            {name: '珠海市', value: [113.234262,22.167468]},
            {name: '汕头市', value: [116.442536,23.305796]},
            {name: '佛山市', value: [112.994017,23.032548]},
            {name: '韶关市', value: [113.590304,24.844739]},
            {name: '湛江市', value: [110.064944,21.335451]},
            {name: '肇庆市', value: [112.365740,23.464062]},
            {name: '江门市', value: [112.687406,22.397417]},
            {name: '茂名市', value: [110.886700,21.850193]},
            {name: '惠州市', value: [114.413784,23.131249]},
            {name: '梅州市', value: [116.123213,24.307352]},
            {name: '汕尾市', value: [115.378103,23.046161]},
            {name: '河源市', value: [114.794798,23.867677]},
            {name: '阳江市', value: [111.782165,22.068633]},
            {name: '清远市', value: [113.072816,24.205702]},
            {name: '东莞市', value: [113.761870,23.032629]},
            {name: '中山市', value: [113.388499,22.531929]},
            {name: '潮州市', value: [116.623721,23.779569]},
            {name: '揭阳市', value: [115.970463,23.373230]},
            {name: '云浮市', value: [111.746914,22.934758]}
        ];
        var flexData = [
            {name: '广州市', value: [1960.7,520.1]},
            {name: '深圳市', value: [1886.6,392.5]},
            {name: '珠海市', value: [268.6,90.7]},
            {name: '汕头市', value: [513.9,92]},
            {name: '佛山市', value: [919.2,308.5]},
            {name: '韶关市', value: [192.7,67.7]},
            {name: '湛江市', value: [481.5,31.7]},
            {name: '肇庆市', value: [246.2,119.4]},
            {name: '江门市', value: [375.9,147.9]},
            {name: '茂名市', value: [375.8,85.6]},
            {name: '惠州市', value: [601.4,200.3]},
            {name: '梅州市', value: [275.7,48.6]},
            {name: '汕尾市', value: [178,53.2]},
            {name: '河源市', value: [192.7,56.3]},
            {name: '阳江市', value: [164,69.1]},
            {name: '清远市', value: [293.6,99.4]},
            {name: '东莞市', value: [1091.3,481.7]},
            {name: '中山市', value: [530.5,157.5]},
            {name: '潮州市', value: [214.9,60.4]},
            {name: '揭阳市', value: [379.9,91.9]},
            {name: '云浮市', value: [140.1,74.7]}
        ];
        var newData1 = guangdongData.map(function(item, index) {
            return {name: item.name, value: palceCodData[index].value.concat(item.value), itemStyle: {color: '#f93'}}
        });
        var moniData = palceCodData.map(function(item, index) {
            return [palceCodData[0].value, item.value]
        });
        var moniData2 = palceCodData.map(function(item, index) {
            return [item.value, palceCodData[0].value]
        });
        // moniData.push(...moniData2)
        function setData (data) {
            var newData = [];
            for (let i = 0; i < 1; i++) {
                newData.push(...data);
            }
            return newData
        }
        var option = {
            title: {
                text: '',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (obj) {
                    if (obj.seriesType === 'map3D') {
                        return `${obj.name}</br>常驻人口：${flexData[obj.dataIndex].value[0]}<br>流动人口：${flexData[obj.dataIndex].value[1]}`
                    }
                }
            },
            bmap: {
                show: false,
                center: [113.075995,22.717055],
                zoom: 9,
                roam: true
            },
            series: [
            {
                name: 'des',
                type: 'scatter',
                symbol: 'pin',
                coordinateSystem: 'bmap',
                zlevel: 10,
                symbolSize: 70,
                label: {
                    normal: {
                        show: true,
                        formatter: '广州市',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#f54a76',
                        shadowColor: 'rgba(0, 0, 0)',
                        shadowBlur: 20
                    }
                },
                data: [{name: '广州', value: [113.475995, 23.417055, 100]}]
            },
            {
                name: '地点',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                zlevel: 10,
                color: '#f93',
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    normal:
                    {
                        show : true,
                        color: '#fff',
                        fontSize: 15,
                        position:'right',
                        distance: 10,
                        fontWeight: 'bolder',
                        textShadowColor: '#000',
                        textShadowBlur: 10,
                        formatter:'{b}'
                    },
                    emphasis: {
                        show: true,
                        color: '#fff',
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: 20,
                showEffectOn: 'render',
                itemStyle: {
                    normal: {
                        color: '#d8c700',
                        shadowColor: 'rgba(0, 0, 0)',
                        shadowBlur: 20
                    }
                },
                data: palceCodData
            },
            {
                name: '迁移人口',
                type: 'lines',
                coordinateSystem: 'bmap',
                large: true,
                largeThreshold: 100,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.9,
                    color: '#00f1ff',
                    symbolSize: 5,
                },
                lineStyle: {
                    normal: {
                        color: '#00f1ff',
                        width: 0,
                        curveness: 0.2
                    }
                },
                data: setData(moniData),
                zlevel: 2
            },
            {
                name: '迁移人口',
                type: 'lines',
                coordinateSystem: 'bmap',
                large: true,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 30
                },
                lineStyle: {
                    normal: {
                        color: '#00f1ff',
                        width: 0,
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: setData(moniData),
                zlevel: 3,
                animationDurationUpdate: function (idx) {
                    return idx * 100
                }
            }
            ]
        };
        $.get(uploadedDataURL, function (geoJson) {
            echarts.registerMap('guangdong', geoJson);
            myChart.setOption(option);
            var bmap = myChart.getModel().getComponent('bmap').getBMap()
            bmap.setMapType(BMAP_HYBRID_MAP)
            function getBoundary(cityName){       
                var bdary = new BMap.Boundary();
                bdary.get(cityName, function(rs){    
                    var count = rs.boundaries.length;
                    if (count === 0) {
                        alert('未能获取当前输入行政区域');
                        return ;
                    }
                    var pointArray = [];
                    for (var i = 0; i < count; i++) {
                        var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeOpacity: 1, strokeColor: "#fff", fillOpacity: 0.1, fillColor: '#627BC1'});
                        bmap.addOverlay(ply);
                    }    
                    bmap.setViewport(pointArray);               
                });   
            }
            for(var i = 0; i < guangdongData.length; i++){  
                getBoundary(guangdongData[i].name);  
            } 
        });
    });

</script>
</body>
</html>

爱睡懒觉的老舅

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
可视化例子(5)——人口迁移流动图(百度地图)

一、效果图二、注意说明需要自己申请一个百度地图的ak，在前面引用即可 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>三、完整代码<!DOCTYPE html><html lang="en"...
复制链接

扫一扫