1. 程式人生 > >echarts繪製世界地圖部分機場顯示

echarts繪製世界地圖部分機場顯示

<!DOCTYPE html>
<html style="height: 100%";>
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%";>
       <div id="container" style="height: 100%";></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
             <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;

var data = [
    {name: '香港', value: '香港國際機場'},
        {name: '澳門', value: '澳門國際機場'},
        {name: '臺灣', value: '臺灣桃園國際機場'},
        {name: '中國', value: '上海浦東國際機場'},
        {name: '新加坡', value: '新加坡樟宜機場'},
        {name: '馬來西亞', value: '吉隆坡國際機場'},
        {name: '馬來西亞', value: '古晉國際機場'},
        {name: '馬來西亞', value: '亞庇國際機場'},
        {name: '馬來西亞', value: '檳城國際機場'},
        {name: '柬埔寨', value: '金邊國際機場'},
        {name: '柬埔寨', value: '暹粒國際機場'},
        {name: '印度尼西亞', value: '雅加達蘇加諾哈達機場'},
        {name: '菲律賓', value: '麥克坦-宿霧國際機場'},
        {name: '印度', value: '新德里甘地國際機場'},
        {name: '印度', value: '海德拉巴國際機場'},
        {name: '印度', value: '班加羅爾國際機場'},
        {name: '馬爾地夫', value: 'Velana國際機場'},
        {name: '阿曼', value: '塞拉萊國際機場'},
        {name: '阿聯酋', value: '阿布卡比國際機場'},
        {name: '沙烏地阿拉伯·利雅得', value: '哈立德國王國際機場'},
        {name: '沙烏地阿拉伯·達曼', value: '法赫德國王國際機場'},
        {name: '加拿大', value: '多倫多皮爾遜國際機場'},
        {name: '加拿大', value: '溫哥華國際機場'},
        {name: '加拿大', value: '埃德蒙頓國際機場'},
        {name: '加拿大', value: '溫尼伯國際機場'},
        {name: '澳大利亞', value: '布里斯本機場'},
        {name: '澳大利亞', value: '墨爾本機場'},
        {name: '巴西', value: '里約熱內盧/RIOgaleao-安東尼奧·卡洛斯·裘賓國際機場'},
        {name: '義大利', value: '達芬奇菲烏米奇諾機場(羅馬)'},
        {name: '英國', value: '倫敦希思羅國際機場'},
];

var geoCoordMap = {
    '香港國際機場':[113.922901,22.303733],
        '澳門國際機場':[113.592,22.1494],
        '臺灣桃園國際機場':[121.234792,25.078754],
        '上海浦東國際機場':[121.79928302764893,31.150458752704395],
        '新加坡樟宜機場':[103.99139,1.36218],
        '吉隆坡國際機場':[101.71958,2.74793],
        '古晉國際機場':[110.344,1.48417],
        '亞庇國際機場':[116.053,5.93722],
        '檳城國際機場':[100.277,5.29722],
        '金邊國際機場':[104.844733,11.5502258],
        '暹粒國際機場':[103.813903,13.4086400],
        '雅加達蘇加諾哈達機場':['-6.12556',106.656],
        '麥克坦-宿霧國際機場':[123.97811119146607,10.31598186517425],
        '新德里甘地國際機場':[77.09997,28.5587],
        '海德拉巴國際機場':[78.42986,17.23673],
        '班加羅爾國際機場':[77.70541472305666,13.204852282710783],
        'Velana國際機場':[73.5281971883525,4.185657244347064],
        '塞拉萊國際機場':[54.1000,17.0333],
        '阿布卡比國際機場':[54.64908,24.4293],
        '哈立德國王國際機場':[46.70079,24.95847],
        '法赫德國王國際機場':[26.4711,49.7978],
        '多倫多皮爾遜國際機場':['-79.62447',43.67759],
        '溫哥華國際機場':['-123.17758',49.19607],
        '埃德蒙頓國際機場':['-113.5167',53.5667],
        '溫尼伯國際機場':['-97.21945',49.90395],
        '布里斯本機場':[153.11869,'-27.3838'],
        '墨爾本機場':[144.84849,'-37.66964'],
        '里約熱內盧/RIOgaleao-安東尼奧·卡洛斯·裘賓國際機場':['-43.25162','-22.81157'],
        '達芬奇菲烏米奇諾機場(羅馬)':[41.8003,12.2389],
        '布里斯本機場':['-0.45143',51.47053],
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].value];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option = {
    title: {
        
    },
    tooltip : {
        trigger: 'item',
        formatter: function (obj) {
                        var value = obj.value;
                        return '<div style="border-bottom: 1px solid rgba(255,255,255,.3)">'
                                + obj.name
                                + '</div>'
                                + value[2]
                }
    },
    bmap: {
                zoom: 1,
        roam: true,
        mapStyle: {
            styleJson: [
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": {
                            "color": "#044161"
                        }
                    },
                    {
                        "featureType": "land",
                        "elementType": "all",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#064f85"
                        }
                    },
                    {
                        "featureType": "railway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#005b96",
                            "lightness": 1
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#004981"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#00508b"
                        }
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "green",
                        "elementType": "all",
                        "stylers": {
                            "color": "#056197",
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "subway",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "manmade",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "local",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "labels",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#029fd4"
                        }
                    },
                    {
                        "featureType": "building",
                        "elementType": "all",
                        "stylers": {
                            "color": "#1a5787"
                        }
                    },
                    {
                        "featureType": "label",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    }
            ]
        }
    },
    series : [
        {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: convertData(data),
                        symbolSize: 20, 
                        symbol: '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',
           symbolRotate: 35,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal:{color: 'rgb(254, 113, 12)',},
            }
        },
    ]
};;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>

自行參考,如遇問題,評論區見。歡迎指出不足之地,共同學習。