https://www.echartsjs.com/examples/zh/editor.html?c=heatmap-bmap
原鏈接
下方直接貼代碼
需要注意的是
- bmap.js的引入（https://github.com/apache/incubator-echarts/blob/master/dist/extension/bmap.js）
- var data =eval("(" + data + “)”);和結尾 json text的格式添加
其實原demo中的json格式我直接仿照了兩個，後續替換真實數據
格式如下
var dataget="[[{'coord':[120.14322240845,30.236064370321],'elevation':221},
{'coord': [120.14322240845,30.236064370321],'elevation':21}]]";
<body class="gray-bg">
<div class="containerbox">
<div class="wrapper animated fadeInRight">
</div>
<div id="chart" style="width:150%;height:150%;"></div>
</div>
<!-- 全局js -->
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/echarts.min.js"></script>
**<script src="/js/bmap.js"></script>**
<!-- layer javascript -->
<script src="/js/plugins/layer/layer.min.js"></script>
<!-- 自定義 -->
<script src="/js/public.js"></script>
<script type="text/javascript">
var BASE_URL = '${request.contextPath}';
/****************************地圖開始************************************/
var myChart = echarts.init(document.getElementById('chart'));
var app = {};
option = null;
app.title = '熱力圖與百度地圖擴展';
$.get("/hangzhou-tracks.json", function (data) {
console.log("testtest");
var dataget="[[{'coord':[120.14322240845,30.236064370321],'elevation':221},{'coord': [120.14322240845,30.236064370321],'elevation':21}]]";
data=dataget;
console.log(data);
var data =eval("(" + data + ")");
console.log(data);
var points = [].concat.apply([], data.map(function (track) {
return track.map(function (seg) {
return seg.coord.concat([1]);
});
}));
myChart.setOption(option = {
animation: false,
bmap: {
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: points,
pointSize: 5,
blurSize: 6
}]
});
if (!app.inNode) {
//百度地圖相關代碼在此處編寫
console.log(myChart.getModel().getOption())
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());
}
},"json",'text');
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
/*************************地圖結束*****************************/
</script>
</body>
更換真實數據後一些tips
返回時是json格式_，獲取其中內部屬性：慄：data的屬性
會發現無法獲取，使用**eval("(" + data + “)”);**可獲取
具體輸出如下所示
之後需要把返回數據中需要的字段拼接成demo中格式的字符串
如下所示
var dataget=data2.data;
var stringSUB="";
for(var i=0;i<dataget.length;i++){
stringSUB=stringSUB+"{'coord':["+dataget[i].point.pointLongitude+","+dataget[i].point.pointLatitude+"],'elevation':"+dataget[i].dataNum+"},";
}
stringSUB = stringSUB.substring(0, stringSUB.lastIndexOf(','));
stringSUB="[["+stringSUB+"]]"
data=stringSUB
console.log(data);
var data =eval("(" + data + ")");