最近項(xiàng)目里需要展示世界地圖，團(tuán)隊(duì)內(nèi)的圖表庫又不能滿足要求，google了一下，看到了別人寫的一個(gè)demo, 順藤摸瓜，找到了使用的圖表庫Amcharts。
下面就舉例講述下，我用到的地圖demo:
效果圖：
image.png
// index.html
<!doctype html>
<html>
<head>
<base href="/" />
<meta charset="utf-8" />
<title>World Map</title>
<script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js?3.17.0"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
</head>
<body>
<div id="mapdiv"></div>
<script type="text/javascript" >
// svg path for target icon
var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
// svg path for plane icon
var planeSVG = "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47";
window.AmCharts && window.AmCharts.makeChart(mapdiv, {
type: "map",
fontSize: 20,
hideCredits: true,
dataProvider: {
map: "worldLow",
zoomLevel: 1,
zoomLongitude: 8,
zoomLatitude: 42,
lines: [{
id: "line1",
arc: -0.85,
alpha: 0.3,
latitudes: [48.8567, 23.117],
longitudes: [2.3510, 112.576]
}, {
id: "line2",
alpha: 0,
color: "#000000",
latitudes: [48.8567, 23.117],
longitudes: [2.3510, 112.576]
}],
images: [{
svgPath: targetSVG,
label: "Paris",
latitude: 48.8567,
longitude: 2.3510
}, {
svgPath: targetSVG,
label: "廣州",
latitude: 23.117,
longitude: 113.276,
}, {
svgPath: planeSVG,
positionOnLine: 0.5,
color: "#1860ff",
animateAlongLine: false,
lineId: "line1",
//是否往返
flipDirection: false,
loop: true,
scale: 0.05,
positionScale: 1.8
}]
},
areasSettings: {
unlistedAreasColor: "#8dd9ef",
},
imagesSettings: {
color: "#585869",
rollOverColor: "#585869",
selectedColor: "#585869",
labelRollOverColor: '#585869',
pauseDuration: 0.2,
animationDuration: 4.5,
adjustAnimationSpeed: true
},
linesSettings: {
color: "#585869",
alpha: 0.4,
arrowAlpha: 0.5
}
});
</script>
</body>
</html>
index.html 里需要先引入三個(gè)js 文件。
- jquery 不用說了，很多人都會用
- worldLow.js 文件里就是一個(gè)世界地圖的GeoJSON標(biāo)準(zhǔn)的數(shù)據(jù)結(jié)構(gòu)。GeoJSON是一種對各種地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式，基于Javascript對象表示法的地理空間信息數(shù)據(jù)交換格式。查看Amcharts百度百科
- ammap.js 我看了ammap.js的源碼，感覺寫的很不錯(cuò)
