关于中国地图那些事

    这个月一直在写地图,写到销魂,一直都在修改,最终,产品经理终于放过了我页面中的那个可怜的地图,让大家都来瞅瞅吧;不多说,上代码:

<!doctype html>
<html lang="en">
<head>
       
    <meta charset="UTF-8">
        <title>地图</title>
       
       
    <style>

        * {

            margin: 0;
            padding: 0;

        }

        #map {

            width: 450px;

            height: 550px;

        }

    </style>


</head>
<body>

           
<div id="map">
       
               
</div>
       
</div>
</body>
<script src="js/jquery.min.js"></script>


<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>

<script>
    $(document).ready(function () {
//        地图
        var chart = echarts.init(document.getElementById('map'));
        var allData = {
            "citys": [
                {
                    "name": "杭州",
                    "value": [120.15507, 30.274085, 10],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "集安",
                    "value": [126.194031, 41.125307, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "贵阳",
                    "value": [106.630154, 26.647661, 2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "抚顺",
                    "value": [123.957208, 41.880872, 3],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "海门",
                    "value": [121.181615, 31.871173, 2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "珠海",
                    "value": [113.576726, 22.270715, 9],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "河北",
                    "value": [114.475704, 38.584854, -19],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "深圳",
                    "value": [114.057868, 22.543099, 14],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "黄浦",
                    "value": [121.484443, 31.231763, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "蓬莱",
                    "value": [120.758848, 37.810661, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "甘肃",
                    "value": [103.826308, 36.059421, -2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "龙井",
                    "value": [129.427066, 42.766311, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "茂名",
                    "value": [110.925456, 21.662999, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "丹东",
                    "value": [124.354707, 40.0005, 2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "晋中",
                    "value": [112.752695, 37.687024, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "浙江",
                    "value": [120.152792, 30.267447, -2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "海城",
                    "value": [122.685217, 40.882377, 2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "溆浦",
                    "value": [110.594921, 27.908281, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "北京",
                    "value": [116.407526, 39.90403, -14],
                    "symbolSize": 8,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "四川",
                    "value": [104.075931, 30.651652, -5],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "福建",
                    "value": [119.295144, 26.10078, -1],
                    "symbolSize": 15,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "青岛",
                    "value": [120.38264, 36.067082, 52],
                    "symbolSize": 3,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "南京",
                    "value": [118.796877, 32.060255, 17],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "新疆",
                    "value": [87.627704, 43.793026, -2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "陕西",
                    "value": [108.954239, 34.265472, -2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "石家庄",
                    "value": [114.51486, 38.042307, 4],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "南昌",
                    "value": [115.858198, 28.682892, 2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "广州",
                    "value": [113.264435, 23.129163, 13],
                    "symbolSize": 15,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "上海",
                    "value": [121.473701, 31.230416, 44],
                    "symbolSize": 8,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "重庆",
                    "value": [106.568088, 29.643221, -23],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "苏州",
                    "value": [120.585316, 31.298886, 14],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "大连",
                    "value": [121.614682, 38.914003, 40],
                    "symbolSize": 3,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "广西",
                    "value": [108.327546, 22.815478, -1],
                    "symbolSize": 15,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "郑州",
                    "value": [113.625368, 34.7466, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "湖北",
                    "value": [114.341862, 30.546498, -4],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "厦门",
                    "value": [118.089425, 24.479834, 3],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "哈尔滨",
                    "value": [126.534967, 45.803775, 8],
                    "symbolSize": 15,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
                {
                    "name": "江苏",
                    "value": [118.763232, 32.061707, -1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "延安",
                    "value": [109.489727, 36.585455, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "天津",
                    "value": [117.200983, 39.084158, 28],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "长沙",
                    "value": [112.938814, 28.228209, 5],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "安徽",
                    "value": [117.284923, 31.861184, -1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "昆山",
                    "value": [120.980737, 31.385598, 4],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "西藏",
                    "value": [91.117212, 29.646923, -1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "河南",
                    "value": [113.274379, 34.445122, 0],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "湖南",
                    "value": [112.98381, 28.112444, -1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "合肥",
                    "value": [117.227239, 31.820587, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "山东",
                    "value": [117.020359, 36.66853, -6],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "西安",
                    "value": [108.940175, 34.341568, 3],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "长沙",
                    "value": [113.000194, 28.242883, -58],
                    "symbolSize": 3,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "重庆",
                    "value": [106.551557, 29.56301, 2],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "长春",
                    "value": [125.323544, 43.817072, 8],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "海口",
                    "value": [110.3893, 19.8516, 1],
                    "symbolSize": 15,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "昆明",
                    "value": [102.9199, 25.4663, 8],
                    "symbolSize": 15,
                    "itemStyle": {"normal": {"color": "#F58158"}}
                },
                {
                    "name": "青海",
                    "value": [101.4038, 36.8207, 1],
                    "symbolSize": 2,
                    "itemStyle": {"normal": {"color": "#71f29b"}}
                },
            ],
            "moveLines": [
                {"fromName": "河南", "toName": "江苏", "coords": [[113.274379, 34.445122], [118.763232, 32.061707]]},
                {"fromName": "河南", "toName": "上海", "coords": [[113.274379, 34.445122], [121.473701, 31.230416]]},
                {"fromName": "福建", "toName": "上海", "coords": [[119.295144, 26.10078], [121.473701, 31.230416]]},
                {"fromName": "广西", "toName": "上海", "coords": [[108.327546, 22.815478], [121.473701, 31.230416]]},
                {"fromName": "黑龙江", "toName": "上海", "coords": [[126.534967, 45.803775], [121.473701, 31.230416]]},
                {"fromName": "海口", "toName": "上海", "coords": [[110.3893, 19.8516], [121.473701, 31.230416]]},
                {"fromName": "甘肃", "toName": "上海", "coords": [[103.826308, 36.059421], [121.473701, 31.230416]]},
                {"fromName": "新疆", "toName": "上海", "coords": [[87.627704, 43.793026], [121.473701, 31.230416]]},
                {"fromName": "广东", "toName": "四川", "coords": [[113.264435, 23.129163], [104.075931, 30.651652]]},
                {"fromName": "广东", "toName": "湖南", "coords": [[113.264435, 23.129163], [113.000194, 28.242883]]},

                {"fromName": "广东", "toName": "河北", "coords": [[113.264435, 23.129163], [114.475704, 38.584854]]},
                {"fromName": "云南", "toName": "广东", "coords": [[102.9199, 25.4663], [113.264435, 23.129163]]},
                {"fromName": "云南", "toName": "浙江", "coords": [[102.9199, 25.4663], [120.152792, 30.267447]]},
                {"fromName": "云南", "toName": "湖北", "coords": [[102.9199, 25.4663], [114.341862, 30.546498]]},
                {"fromName": "云南", "toName": "青海", "coords": [[102.9199, 25.4663], [101.4038, 36.8207]]},
                {"fromName": "黑龙江", "toName": "安徽", "coords": [[126.534967, 45.803775], [117.284923, 31.861184]]},
                {"fromName": "黑龙江", "toName": "山东", "coords": [[126.534967, 45.803775], [117.020359, 36.66853]]},
                {"fromName": "黑龙江", "toName": "新疆", "coords": [[126.534967, 45.803775], [87.627704, 43.793026]]},
                {"fromName": "海南", "toName": "福建", "coords": [[110.3893, 19.8516], [119.295144, 26.10078]]},
                {"fromName": "海南", "toName": "山西", "coords": [[110.3893, 19.8516], [112.562398, 37.873532]]},
                {"fromName": "海南", "toName": "吉林", "coords": [[110.3893, 19.8516], [125.323544, 43.817072]]},
                {"fromName": "海南", "toName": "重庆", "coords": [[110.3893, 19.8516], [106.551557, 29.56301]]},
                {"fromName": "福建", "toName": "陕西", "coords": [[119.295144, 26.10078], [108.954239, 34.265472]]},
                {"fromName": "福建", "toName": "浙江", "coords": [[119.295144, 26.10078], [120.152792, 30.267447]]},
                {"fromName": "福建", "toName": "青海", "coords": [[119.295144, 26.10078], [101.4038, 36.8207]]},
                {"fromName": "江苏", "toName": "上海", "coords": [[118.763232, 32.061707], [121.473701, 31.230416]]},
                {"fromName": "江苏", "toName": "北京", "coords": [[118.763232, 32.061707], [116.407526, 39.90403]]},
                {"fromName": "上海", "toName": "北京", "coords": [[121.473701, 31.230416], [116.407526, 39.90403]]},
                {"fromName": "山东", "toName": "四川", "coords": [[117.020359, 36.66853], [104.075931, 30.651652]]},
                {"fromName": "河北", "toName": "四川", "coords": [[114.475704, 38.584854], [104.075931, 30.651652]]},
                {"fromName": "四川", "toName": "内蒙", "coords": [[104.075931, 30.651652], [106.568088, 29.643221]]},
                {"fromName": "贵州", "toName": "湖北", "coords": [[106.630154, 26.647661], [114.341862, 30.54649]]},
                {"fromName": "江西", "toName": "陕西", "coords": [[115.858198, 28.682892], [108.954239, 34.265472]]},
                {"fromName": "广东", "toName": "北京", "coords": [[113.264435, 23.129163], [116.407526, 39.90403]]},
                {"fromName": "云南", "toName": "北京", "coords": [[102.9199, 25.4663], [116.407526, 39.90403]]},
                {"fromName": "福建", "toName": "北京", "coords": [[119.295144, 26.10078], [116.407526, 39.90403]]},
            ]
        };
        var option = {
            legend: {
                show: false,
                orient: 'vertical',
                top: 'bottom',
                left: 'right',
                data: ['地点', '线路'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: false,
                zoom: 1.2, //设置地图大小是否固定
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#ccc',
                        opacity: '0.8' //设置地图透明度
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [{
                name: '地点',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    brushType: 'stroke'
                },
                label: {
                    emphasis: {
                        show: false,
                        position: 'right',
                        formatter: '{b}'
                    }
                },
                symbolSize: 2,
                showEffectOn: 'render',
                itemStyle: {
                    normal: {
                        color: '#46bee9'
                    }
                },
                data: allData.citys
            }, {
                name: '线路',
                type: 'lines',
                coordinateSystem: 'geo',
                zlevel: 2,
                large: true,
                effect: {
                    show: true,
                    constantSpeed: 20, //航线光标的速度
                    symbol: 'pin',
                    symbolSize: 3,
                    trailLength: 0,
                },
                lineStyle: { //设置航线颜色
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0, color: '#71f29b'
                        }, {
                            offset: 1, color: '#F58158'
                        }], false),
                        width: 2, //设置航线宽度
                        opacity: 0.3, //设置航线透明度
                        curveness: 0.1
                    }
                },
                data: allData.moveLines
            }]
        };
        chart.setOption(option)
    })
</script>


</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值