申请百度AK
高德地图也差不多： https://lbs.amap.com/api/webservice/summary/
http://lbsyun.baidu.com/apiconsole/key?application=key
在控制台创建应用，根据自己的需求填写即可。
提交之后你就可以在"应用管理–>我的应用"里看到创建的应用，列表会有一个AK（API就需要这个AK）
用echarts + 百度地图绘制散点图
1、准备工作
以下所需的文件可评论区找我拿。
①引入echarts.min.js
②引入jquery-3.3.1.min.js（不使用异步数据的可以忽略这一步）
③引入bmap.js文件（百度地图扩展）
bmap.js 是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’ 。
可以直接在官网下载或者以下我找到的一个百度网盘的下载（可用）
下载地址为：http://pan.baidu.com/s/1hrPEdGK
④引入百度API
AK：是你刚刚第一步申请的AK，我后续就用AK或者***代替
getscript：这里本身是api，但是会出一个警告（不影响效果），强迫症的可以改成getscript，就不会出现那个警告（A parser-blocing…）了
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=AK"></script>
后续的显示其实还是会出现一个<冲突>，可忽略不影响。
⑤创建一个放地图的div
<div id="map-wrap" style="height: 800px;"></div>
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map 单车调度情况</title>
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/bmap.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=**********"></script>
</head>
<body>
<div id="map-wrap" style="height: 800px;"></div>
2、绘制地图
设置配置项option，添加bmap的相关设置即可加载百度地图。
ECharts 将百度地图部分配置集成在了 bmap 中，包括：
| 参数 | 说明 | 格式 |
|---|---|---|
| center | 中心点的百度坐标 | 坐标数组, 如：[116.307698, 40.056975] |
| zoom | 初始缩放比 | number |
| roam | 是否允许用户缩放操作 | boolean |
| mapStyle | 地图自定义样式 | object, 如：{ styleJson: […] } |
代码
<script>
var bmapChart = echarts.init(document.getElementById('map-wrap'));
var option = {
bmap: {
center: [116.307698, 40.056975], // 中心位置坐标
zoom: 5, // 地图缩放比例
roam: true // 开启用户缩放
},
};
bmapChart.setOption(option);
</script>
3、绘制散点图
①导入数据。
PS：坐标点一定一定不要有双引号什么的，不然出不来点的
随后需要对数据进行处理，将坐标信息和对应value量的值合在一起。
var mydata = [
{
"name":"[121.172, 31.35]",
"value":2
},
{
"name":"[121.315, 31.313]",
"value":23
},
{
"name":"[121.345, 31.25]",
"value":39
},
{
"name":"[121.36, 31.218000000000004]",
"value":117
},
........
];
//首先先定义需要显示对应信息的位置坐标，按照[纬度,精度]的格式
var geoCoordMap = {
"[121.172, 31.35]":[121.172, 31.35],
"[121.315, 31.313]":[121.315, 31.313],
"[121.345, 31.25]":[121.345, 31.25],
"[121.36, 31.218000000000004]":[121.36, 31.218000000000004],
"[121.376, 31.314]":[121.376, 31.314],
"[121.377, 31.322]":[121.377, 31.322],
"[121.396, 31.229]":[121.396, 31.229],
"[121.406, 31.282]":[121.406, 31.282],
"[121.398, 31.291]":[121.398, 31.291],
"[121.407, 31.283]":[121.407, 31.283],
"[121.412, 31.271]":[121.412, 31.271],
"[121.421, 31.258000000000006]":[121.421, 31.258000000000006],
"[121.428, 31.184]":[121.428, 31.184],
"[121.436, 31.331]":[121.436, 31.331],
"[121.428, 31.379]":[121.428, 31.379],
"[121.451, 31.274]":[121.451, 31.274],
"[121.447, 31.332]":[121.447, 31.332],
"[121.438, 31.34]":[121.438, 31.34],
"[121.445, 31.288]":[121.445, 31.288],
"[121.483, 31.32]":[121.483, 31.32],
"[121.501, 31.286]":[121.501, 31.286],
"[121.492, 31.308000000000003]":[121.492, 31.308000000000003],
"[121.471, 31.31]":[121.471, 31.31],
"[121.493, 31.311]":[121.493, 31.311],
"[121.524, 31.193]":[121.524, 31.193],
"[121.511, 31.197]":[121.511, 31.197],
"[121.516, 31.178]":[121.516, 31.178],
"[121.507, 31.201]":[121.507, 31.201],
"[121.52, 31.32]":[121.52, 31.32],
"[121.531, 31.323]":[121.531, 31.323],
"[121.588, 31.338]":[121.588, 31.338]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
//首先根据data中的name作为键值读入地理坐标
var geoCoord = geoCoordMap[data[i].name];
//var rjj1 = data[i].value;
if (geoCoord) {
res.push({
name: data[i].name,
//随后将地理坐标与对应信息值衔接起来
value: geoCoord.concat(data[i].value)
//成为了 [name 经度 纬度 value]的形式
});
}
}
return res;
};
然后就是具体值的一个配置问题，详见后面的完整代码处。
4、自定义百度地图样式
参考：
http://lbsyun.baidu.com/index.php?title=jspopular/guide/custom
http://lbsyun.baidu.com/index.php?title=open/custom
相关代码配置项含义会有备注，就不一一说明了、
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map 单车调度情况</title>
<script src="../static/js/echarts.min.js"></script>
<script src="../static/js/jquery-3.3.1.min.js"></script>
<script src="../static/js/bmap.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=*******************"></script>
</head>
<body>
<div id="map-wrap" style="height: 800px;"></div>
<!-- 这里以后是地图 -->
<script>
var bmapChart = echarts.init(document.getElementById('map-wrap'));
// $.get('../static/30_result.json', function (data) {
var mydata = [
{
"name":"[121.172, 31.35]",
"value":2
},
{
"name":"[121.315, 31.313]",
"value":23
},
{
"name":"[121.345, 31.25]",
"value":39
},
{
"name":"[121.36, 31.218000000000004]",
"value":117
},
{
"name":"[121.376, 31.314]",
"value":2
},
{
"name":"[121.377, 31.322]",
"value":99
},
{
"name":"[121.396, 31.229]",
"value":24
},
{
"name":"[121.398, 31.291]",
"value":101
},
{
"name":"[121.406, 31.282]",
"value":10
},
{
"name":"[121.407, 31.283]",
"value":57
},
{
"name":"[121.412, 31.271]",
"value":92
},
{
"name":"[121.421, 31.258000000000006]",
"value":87
},
{
"name":"[121.428, 31.379]",
"value":126
},
{
"name":"[121.436, 31.331]",
"value":37
},
{
"name":"[121.438, 31.34]",
"value":97
},
{
"name":"[121.445, 31.288]",
"value":39
},
{
"name":"[121.447, 31.332]",
"value":69
},
{
"name":"[121.451, 31.274]",
"value":380
},
{
"name":"[121.471, 31.31]",
"value":344
},
{
"name":"[121.483, 31.32]",
"value":279
},
{
"name":"[121.492, 31.308000000000003]",
"value":28
},
{
"name":"[121.493, 31.311]",
"value":254
},
{
"name":"[121.501, 31.286]",
"value":154
},
{
"name":"[121.507, 31.201]",
"value":112
},
{
"name":"[121.511, 31.197]",
"value":92
},
{
"name":"[121.516, 31.178]",
"value":91
},
{
"name":"[121.52, 31.32]",
"value":84
},
{
"name":"[121.524, 31.193]",
"value":180
},
{
"name":"[121.531, 31.323]",
"value":65
},
{
"name":"[121.533, 31.253]",
"value":1312
},
{
"name":"[121.588, 31.338]",
"value":317
}
];
var mydata1 = [
{
"name":"[121.315, 31.313]",
"value":31
},
{
"name":"[121.345, 31.25]",
"value":68
},
{
"name":"[121.36, 31.218000000000004]",
"value":165
},
{
"name":"[121.376, 31.314]",
"value":5
},
{
"name":"[121.377, 31.322]",
"value":113
},
{
"name":"[121.396, 31.229]",
"value":26
},
{
"name":"[121.398, 31.291]",
"value":81
},
{
"name":"[121.406, 31.282]",
"value":6
},
{
"name":"[121.407, 31.283]",
"value":59
},
{
"name":"[121.412, 31.271]",
"value":114
},
{
"name":"[121.421, 31.258000000000006]",
"value":110
},
{
"name":"[121.428, 31.379]",
"value":154
},
{
"name":"[121.436, 31.331]",
"value":41
},
{
"name":"[121.438, 31.34]",
"value":129
},
{
"name":"[121.445, 31.288]",
"value":34
},
{
"name":"[121.447, 31.332]",
"value":91
},
{
"name":"[121.451, 31.274]",
"value":467
},
{
"name":"[121.471, 31.31]",
"value":352
},
{
"name":"[121.483, 31.32]",
"value":339
},
{
"name":"[121.492, 31.308000000000003]",
"value":43
},
{
"name":"[121.493, 31.311]",
"value":270
},
{
"name":"[121.501, 31.286]",
"value":180
},
{
"name":"[121.507, 31.201]",
"value":111
},
{
"name":"[121.511, 31.197]",
"value":98
},
{
"name":"[121.516, 31.178]",
"value":92
},
{
"name":"[121.52, 31.32]",
"value":101
},
{
"name":"[121.524, 31.193]",
"value":222
},
{
"name":"[121.531, 31.323]",
"value":92
},
{
"name":"[121.533, 31.253]",
"value":1374
},
{
"name":"[121.588, 31.338]",
"value":383
}
];
//首先先定义需要显示对应信息的位置坐标，按照[纬度,精度]的格式
var geoCoordMap = {
"[121.172, 31.35]":[121.172, 31.35],
"[121.315, 31.313]":[121.315, 31.313],
"[121.345, 31.25]":[121.345, 31.25],
"[121.36, 31.218000000000004]":[121.36, 31.218000000000004],
"[121.376, 31.314]":[121.376, 31.314],
"[121.377, 31.322]":[121.377, 31.322],
"[121.396, 31.229]":[121.396, 31.229],
"[121.406, 31.282]":[121.406, 31.282],
"[121.398, 31.291]":[121.398, 31.291],
"[121.407, 31.283]":[121.407, 31.283],
"[121.412, 31.271]":[121.412, 31.271],
"[121.421, 31.258000000000006]":[121.421, 31.258000000000006],
"[121.428, 31.184]":[121.428, 31.184],
"[121.436, 31.331]":[121.436, 31.331],
"[121.428, 31.379]":[121.428, 31.379],
"[121.451, 31.274]":[121.451, 31.274],
"[121.447, 31.332]":[121.447, 31.332],
"[121.438, 31.34]":[121.438, 31.34],
"[121.445, 31.288]":[121.445, 31.288],
"[121.483, 31.32]":[121.483, 31.32],
"[121.501, 31.286]":[121.501, 31.286],
"[121.492, 31.308000000000003]":[121.492, 31.308000000000003],
"[121.471, 31.31]":[121.471, 31.31],
"[121.493, 31.311]":[121.493, 31.311],
"[121.524, 31.193]":[121.524, 31.193],
"[121.511, 31.197]":[121.511, 31.197],
"[121.516, 31.178]":[121.516, 31.178],
"[121.507, 31.201]":[121.507, 31.201],
"[121.52, 31.32]":[121.52, 31.32],
"[121.531, 31.323]":[121.531, 31.323],
//"[121.533, 31.253]":[121.533, 31.253],
"[121.588, 31.338]":[121.588, 31.338]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name]; //首先根据data中的name作为键值读入地理坐标
//var rjj1 = data[i].value;
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value) //随后将地理坐标与对应信息值衔接起来
//成为了 [name 经度 纬度 value]的形式
});
}
}
//console.log(res)
return res;
};
var option = {
title:{
text:'上海Mobike单车分布'
},
legend: {
data: ['30号', '31号', '差值'], // 要对应series的name
opsition: "center", // 图例位置
},
tooltip : {
trigger: 'item' //提示框
},
bmap: {
center: [116.307698, 40.056975], // 初始化中心位置坐标
zoom: 5, // 地图缩放比例
roam: true // 开启用户缩放
},
series: [
{
name: '30号',
type: 'effectScatter', // 特效散点图，也可用普通散点图scatter
coordinateSystem: 'bmap', // 坐标系使用bmap，以地图作为底图
data: convertData(mydata),
symbolSize: function (val) {
return val[2] / 10; // 用值的大小调整点的大小
},
encode: {
value: 2
},
label: {
formatter: '{c}',
position: 'right',
show: false
},
itemStyle: {
color: 'purple' // 点的颜色
},
emphasis: {
label: {
show: true
}
}
},
{
name: '31号',
type: 'effectScatter',
coordinateSystem: 'bmap', // 坐标系使用bmap
data: convertData(mydata1),
symbolSize: function (val) {
return val[2] / 10;
},
encode: {
value: 2
},
label: {
formatter: '{c}',
position: 'right',
show: false
},
itemStyle: {
color: 'red'
},
emphasis: {
label: {
show: true
}
}
},
]
};
bmapChart.setOption(option);
</script>
</body>
</html>
最后呈现的地图API+散点图如下图所示：
扫一扫
2109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
