<html>
<head>
<meta charset="utf-8">
<title>html5 echarts地圖分佈動畫特效</title>
<style>
html, body {
margin: 0;
padding: 0;
}
</style>
</head>
<body style="background:#1B1B1B">
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 爲ECharts準備一個具備大小（寬高）的Dom-->
<div id="main" style="height:100%;width: 100%;">
</div>
<!--Step:2 Import echarts.js-->
<!--Step:2 引入echarts.js-->
<!--這裏的key需要自己去申請-->
<script src="https://webapi.amap.com/maps?v=1.4.10&key=您的key"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script src="./echarts-amap.min.js" charset="UTF-8"></script>
<script type="text/javascript">
var green = "#7ce757";
var orange = "#ffb034";
var blue = "#3fbeff";
var red = "#db4d4c";
var lightBlue = "#24d8e3";
var labelColor = "#e0e0e0";
d = [{
brakeType: "困人",
elevatorBrakeList: [{
brakeCreateTime: "2018-10-23 17:15:37",
brakeStatus: "0",
elevatorAddress: "大廳西側",
elevatorBrakeTypeName: "**",
registerCode: "30101401852014050007",
wbUnitName: "山西測試公司有限公司",
wbUnitPhone: "18636671234"
}],
housingAddress: "高新街90號",
housingLatitude: "38.802184",
housingLongitude: "112.559108",
housingName: "*****大廈",
wyUnitName: "山西測試公司有限公司",
wyUnitPhone: "18935112562"
}];
var option = null;
var data = [];
var geoCoordMap = {};
for (var p = 0; p < d.length; p++) {
var color = "";
if (d[p].brakeType == "測試") {
for (var q = 0; q < d[p].elevatorBrakeList.length; q++) {
if (d[p].elevatorBrakeList[q].brakeStatus == 0) {
color = red;
break
} else {
color = orange;
}
}
} else {
for (var w = 0; w < d[p].elevatorBrakeList.length; w++) {
if (d[p].elevatorBrakeList[w].brakeStatus == 0) {
color = lightBlue;
break
} else {
color = blue;
}
}
}
data.push({name: d[p].housingName, value: d[p].elevatorBrakeList.length, color: color, obj: d[p]});
var pos = bd_encrypt(parseFloat(d[p].housingLongitude), parseFloat(d[p].housingLatitude));
geoCoordMap[d[p].housingName] = [parseFloat(d[p].housingLongitude), parseFloat(d[p].housingLatitude)]
}
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
obj: data[i].obj,
itemStyle: {
color: data[i].color
}
});
}
}
return res;
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '模擬遷徙',
subtext: '數據純屬虛構',
left: 'center',
textStyle: {
color: '#fff'
}
},
amap: {
maxPitch: 60,
pitch: 30, //45 俯仰角
viewMode: '3D',
zoom: 14,
expandZoomRange: true,
zooms: [3, 20],
mapStyle: 'amap://styles/91efbbc655ee096897f47f6ee34d1707', //地圖主題
center: [112.590936, 37.784202], //中心點
rotation: 0, //順時針旋轉角度
resizeEnable: true
},
animation: false,
series: []
});
//上面的部分是echarts的配置，需要注意的是amap，這裏的配置就是針對 高德地圖 的配置了，而支持哪些配置
//可以去高德地圖的開發平臺去查看
var map = myChart.getModel().getComponent('amap').getAMap();
var layer = myChart.getModel().getComponent('amap').getLayer();
AMap.plugin(["AMap.ControlBar"], function () {
var bar = new AMap.ControlBar();
map.addControl(bar);
});
AMap.plugin(["AMap.ToolBar"], function () {
map.addControl(new AMap.ToolBar());
});
AMap.event.addListener(map, 'zoomend', function () {
console.log('當前縮放級別：' + map.getZoom());
console.log('俯視視角' + map.getPitch());
console.log('俯視視角' + map.getPitch());
});
var series = [
{
type: 'effectScatter',
coordinateSystem: 'amap',
data: convertData(data),
symbolSize: function (val) {
if (val[2] < 3) {
return val[2] * 3;
} else if (val[2] < 5) {
return 3 * 3;
} else {
return 5 * 3;
}
},
showEffectOn: 'render',
rippleEffect: {
period: 4,
brushType: 'fill',
scale: 8
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
}
},
zlevel: 1
}
];
myChart.setOption({
series: series
});
//下面是確保高德地圖渲染的時候，echarts同時也需要再次渲染一次，保持位置的同步
layer.render = function () {
// let series = myChart.getOption().seriesIndexes;
// myChart.setOption({
// series: []
// });
myChart.setOption({
series: series
});
// console.log('當前縮放級別：' + map.getZoom());
// console.log('俯視視角：' + map.getPitch());
// console.log('順時針：' + map.getRotation());
}
/**
* 高德座標轉百度座標
* @param gg_lng
* @param gg_lat
* @returns {{bd_lat: number, bd_lng: number}}
*/
function bd_encrypt(gg_lng, gg_lat) {
var X_PI = Math.PI * 3000.0 / 180.0;
var x = gg_lng, y = gg_lat;
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
var bd_lng = z * Math.cos(theta) + 0.0065;
var bd_lat = z * Math.sin(theta) + 0.006;
return {
bd_lat: bd_lat,
bd_lng: bd_lng
};
}
</script>
</body>
</html>
