echarts绘制世界地图部分机场显示

缺乏、安全感 2022-04-13 14:59 508阅读 0赞

<!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>

自行参考，如遇问题，评论区见。欢迎指出不足之地，共同学习。