需求:要求在百度地图上绘制矢量折线统计图,模拟A点对周边环境影响值
两种处理方式:
一、采用点标注方式,标注内容替换成echarts统计图,统计图不能随地图缩放,统计数据与地图坐标没有关联,只能简单示意
二、采用绘制矢量图形方式,绘制坐标轴,绘制数据线,坐标轴刻度线,刻度文本,数据点文本:采用series: scatter方式
本案例不是最终处理代码,只是简单示意。
标注点方式:
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
</style>
</head>
<body>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E4805d16520de693a3fe707cdc962045"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=xxxx&services=&t=20200327103013"></script>
<script type="text/javascript" src="js/complexCustomOverlay.js"></script>
<div id="container"></div>
<script>
var map = new BMap.Map("container"); // 创建Map实例
map.centerAndZoom(new BMap.Point(121.620523, 31.290215), 18);
map.enableScrollWheelZoom(true);
var drawPie = function(obj) {
var echarts2 = echarts.init(obj);
var xAxisData = [];
var data1 = [];
var data2 = [];
for (var i = 0; i < 100; i++) {
xAxisData.push('类目' + i);
data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
}
option = {
legend: {
data: ['bar', 'bar2']
},
toolbox: {
// y: 'bottom',
feature: {
magicType: {
type: ['stack', 'tiled']
},
dataView: {},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: xAxisData,
splitLine: {
show: false
}
},
yAxis: {
},
series: [{
name: 'bar',
type: 'bar',
data: data1,
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'bar2',
type: 'bar',
data: data2,
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
echarts2.setOption(option);
};
// 实例化自定义Overlay,传入经纬度以及回调方法
var myCompOverlay = new ComplexCustomOverlay(121.620483, 31.291102, drawPie);
map.addOverlay(myCompOverlay);
</script>
</body>
complexCustomOverlay.js代码,网上抄的,忘了是哪位仁兄写的了,抱歉
!function(baiduMap) {
/**
* 自定义覆盖物类, 取名 ComplexCustomOverlay 使用时直接 new ComplexCustomOverlay 即可
* 示例 new ComplexCustomOverlay(121.620483, 31.291102, function(div_obj){});
* @param {*} lng 经度
* @param {*} lat 维度
* @param {*} callback 回调方法
*/
ComplexCustomOverlay = function(lng, lat, callback) {
this._point = new baiduMap.Point(lng, lat);
this._callback = callback;
};
//继承Overlay基类
ComplexCustomOverlay.prototype = new baiduMap.Overlay();
/**
* 实现initialize方法,此方法在map.addOverlay(--)时会自动调用,完成初始化工作
*/
ComplexCustomOverlay.prototype.initialize = function(map) {
this._map = map;
//生成div,用来承载ECharts
var div = this._div = document.createElement("div");
// 可以根据情况添加些样式信息
// div.style.backgroundColor = "#fff";
div.style.zIndex = baiduMap.Overlay.getZIndex(this._point.lat);
div.style.width = "500px";
div.style.height = "500px";
// marginLeft marginTop 的设置可以让这个div的中心点和给定的经纬度重合
div.style.marginLeft = '-50px';
div.style.marginTop = '-50px';
//必须是绝对定位,不然会偏离原来位置
div.style.position='absolute';
//将该覆盖物添加到标签覆盖物列表
map.getPanes().labelPane.appendChild(div);
//调用传入的回调方法
this._callback(div);
return div;
};
/**
* 当地图发生变化,会自动调用此方法,进行覆盖物的重绘工作
* 例如 拖动地图、地图放大缩小等操作,都会自动调用draw方法进行重绘
*/
ComplexCustomOverlay.prototype.draw = function(){
//饼图的位置设置,需要获取该地图点的像素位置x,y
var pixel = this._map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x + "px";
this._div.style.top = (pixel.y - 30) + "px";
}
}(BMap); // 将BMap作为参数传入
绘制矢量图形方式:
<!DOCTYPE html>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<head>
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxx"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<div id="container"></div>
<script>
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var pt1s = [
[116.3205, 40.0613],
[116.3205, 40.0811],
[116.3205, 40.1009]
];
var pt2s = [
[116.3188, 40.0811],
[116.3700, 40.0811]
];
var pt3s = [
[116.3205, 40.0811],
[116.3215, 40.0821],
[116.3225, 40.0827],
[116.3235, 40.0831],
[116.3245, 40.0831],
[116.3249, 40.0833],
[116.3259, 40.0839],
[116.3269, 40.0845],
[116.3269, 40.0834],
]
var _data = [{
name: 'y轴',
coords: pt1s,
lineStyle: {
color: '#6ea500',
type: 'solid'
},
}, {
name: 'x轴',
coords: pt2s,
lineStyle: {
color: '#ff5500',
type: 'solid', //'dashed'
},
},
{
name: '数据',
coords: pt3s,
lineStyle: {
color: '#0000ff',
type: 'solid',
curveness: 1
}
}
];
var geoCoordMap = {
'Y轴': [116.3205, 40.1009],
'100': [116.3205, 40.0989],
'101': [116.3205, 40.0940],
'180': [116.3205, 40.0910],
'190': [116.3205, 40.0860],
'200': [116.3205, 40.0833],
};
//随后定义每个位置需要显示的量的值
var data = [{
name: 'Y轴',
value: 0
},
{
name: '100',
value: 100
},
{
name: '101',
value: 101
},
{
name: '180',
value: 180
},
{
name: '190',
value: 190
},
{
name: '200',
value: 200
},
];
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 = {
bmap: {
center: [116.3205, 40.0811],
zoom: 15,
roam: true,
},
series: [{
type: 'lines',
coordinateSystem: 'bmap',
polyline: true,
data: _data,
silent: false,
lineStyle: {
color: '#fff',
opacity: 1,
width: 2,
}
},
//画点
{
name: 'Y轴',
type: 'scatter',
coordinateSystem: 'bmap',
data: convertData(data),
symbolSize: 5,
symbol: 'circle', //'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'也可以自定义用图片表示
label: {
normal: {
formatter: '{b}',
position: 'left',
show: true,
fontSize: 18,
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: 'green' //点的颜色
}
}
},
]
}
myChart.setOption(option, true);
</script>
</body>