echarts繪製世界地圖部分機場顯示
阿新 • • 發佈：2018-12-17
<!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>
自行參考，如遇問題，評論區見。歡迎指出不足之地，共同學習。