Echarts 地图结合高德地图实时显示车辆位置 | 赣州行政区完整代码示例
Echarts 地图结合高德地图实时显示车辆位置 - 赣州行政区完整代码示例
本示例演示如何使用 Echarts 和高德地图 API 实时显示车辆位置，并展示了以赣州行政区为地图的完整代码。教程涵盖地图加载、数据处理、样式设置等关键步骤。
注意：
由于涉及到高德地图的使用，需要先申请高德地图的 API Key。
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Echarts 结合高德地图显示车辆实时位置</title>
<style type='text/css'>
html,body{
height:100%;
margin:0px;
overflow:hidden;
}
#container{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id='container'></div>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js'></script>
<script src='https://webapi.amap.com/maps?v=1.4.15&key=您的API Key'></script>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/extension/bmap.min.js'></script>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<script src='https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'></script>
<script>
$(document).ready(function(){
var map = new AMap.Map('container',{
zoom:12, //地图缩放级别
center:[114.938792,25.865087], //地图中心点坐标
viewMode:'3D', //地图显示模式
pitch:30 //地图倾角
});
//使用echarts插件绘制地图和车辆
var myChart = echarts.init(document.getElementById('container'));
//按需加载echarts地图
echarts.registerMap('ganzhou', echarts.extendMap({
'ganzhou': {
getGeoJson: function (callback) {
$.getJSON('ganzhou.json', function (data) {
callback(data);
});
}
}
}));
//设置echarts地图选项
var option = {
tooltip:{
trigger:'item',
formatter:'{b}'
},
geo:{
map:'ganzhou',
roam:true,
label:{
show:true,
fontSize:14,
color:'#000',
formatter:function(params){
return params.name;
}
},
itemStyle:{
normal:{
borderColor:'#fff',
borderWidth:1,
areaColor:'#87CEFA',
shadowColor:'#fff',
shadowBlur:10
},
emphasis:{
areaColor:'#FFB6C1',
borderWidth:0
}
}
},
series:[]
};
myChart.setOption(option);
//设置定时器，每隔1秒更新一次车辆位置
setInterval(function(){
//模拟获取车辆位置的数据，这里用了一个随机数
var data = [
{name:'车辆1',value:[114.951611,25.844685,Math.random()*100]},
{name:'车辆2',value:[114.926558,25.847738,Math.random()*100]},
{name:'车辆3',value:[114.91842,25.86608,Math.random()*100]},
{name:'车辆4',value:[114.933972,25.876681,Math.random()*100]},
{name:'车辆5',value:[114.956371,25.875104,Math.random()*100]}
];
//将车辆位置数据转换为echarts地图系列数据
var seriesData = data.map(function(item){
return {
name:item.name,
type:'effectScatter',
coordinateSystem:'bmap',
zlevel:1,
rippleEffect:{
brushType:'stroke',
scale:4
},
label:{
show:true,
position:'right',
formatter:function(params){
return params.data.name+'
'+params.data.value[2].toFixed(2);
}
},
symbolSize:10,
itemStyle:{
color:'#F4A460'
},
data:[{name:item.name,value:[item.value[0],item.value[1],item.value[2]]}]
};
});
//将echarts地图系列数据添加到echarts选项中
myChart.setOption({
series:seriesData
});
},1000);
});
</script>
</body>
</html>
代码说明：
- 引入库: 代码中引入了 Echarts、高德地图、Echarts-Bmap、jQuery 和 Moment.js 等库的 CDN 链接。
- 申请 API Key: 请到高德地图开放平台申请 API Key，并将其替换代码中的
您的API Key部分。 - 加载赣州行政区地图数据:
ganzhou.json文件需放在与 HTML 文件同级的目录下。该文件包含赣州行政区的地理信息数据，可通过高德地图开放平台提供的工具生成。 - 地图初始化: 使用 AMap.Map 初始化地图，设置地图中心点坐标、缩放级别、显示模式和倾角等参数。
- Echarts 地图初始化: 使用 Echarts 初始化地图，注册
ganzhou地图，并设置地图选项，包括 tooltip、geo、series 等。 - 实时更新车辆位置: 使用 setInterval 定时器，每隔 1 秒更新一次车辆位置，并通过 Echarts 的 effectScatter 系列显示在地图上。
- 车辆数据: 代码中模拟获取车辆位置数据，并将其转换为 Echarts 地图系列数据。您可以根据实际情况修改车辆数据获取方式。
ganzhou.json 文件内容示例：
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "360702",
"properties": {
"name": "章贡区",
"cp": [114.938792,25.865087],
"childNum": 1
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[
[114.921784,25.915189],
[114.928756,25.91299],
[114.933473,25.914208],
[114.93662,25.912414],
[114.940148,25.916599],
[114.941638,25.913078],
[114.946003,25.910646],
[114.946891,25.906489],
...
]
]
]
}
}]
}
注意：
- 代码中的车辆位置数据是模拟的，请根据实际情况修改。
- 您可以根据需要修改地图样式和车辆图标。
- 使用高德地图 API 需要遵守相关使用规范，请查看高德地图开发文档。
希望以上内容对您有所帮助。如果您有任何问题，请随时提问。
相关资源：
原文地址: https://www.cveoy.top/t/topic/mOzW 著作权归作者所有。请勿转载和采集!