用echarts在百度地图bmap自定义形状
用echarts在百度地图bmap自定义形状
- 创建html文件
- 引入百度地图API、Echarts、以及echarts的百度地图插件BMap
echarts和bmap可以到官网去下载, 这里的路径是本地的
<script src="http://api.map.baidu.com/api?v=2.0&ak=g3Ufu6jCRS2TNcCwsn5E3gZP">script>
<script src="./echarts.min.js">script>
<script src="./bmap.min.js">script>
- 初始化Echarts并配置选项，部分配置已在注释中说明
var div = document.getElementById('container');
var myChart = echarts.init(div);
//要显示的多边形
var area_data = [
//第一个多边形的经纬度坐标
[
[112.564881, 26.919803],
[112.564917, 26.908528],
[112.574547, 26.908496],
[112.574475, 26.916807],
[112.57372, 26.917065]
],
//第二个多边形的经纬度坐标
[
[112.579886, 26.908145],
[112.579994, 26.899431],
[112.584629, 26.899334],
[112.584288, 26.908016]
],
//第三个多边形的经纬度坐标
[
[112.564791, 26.908234],
[112.574565, 26.908202],
[112.574708, 26.899535],
[112.569606, 26.899471],
[112.564953, 26.899552]
]
];
//渲染函数
function renderItem(params, api) {
//由于render是对应data里边的每一项，而params里边没有传入data ，api的value也取不到这里所要取得的值
// 所以这里的数据取 area_data 里边的，而在 series.data 中只传入一个和area_data长度相同的简单数组即可。
var coords = area_data[params.dataIndex];
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]));
}
console.log(params, api);
return {
type: 'polygon',
shape: {
points: points
},
style: api.style()
};
}
//echarts 配置项
option = {
tooltip: {
trigger: 'item'
},
bmap: {
center: [112.572925, 26.903983],
zoom: 15,
roam: true,
},
series: [{
name: '轮廓',
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.5,
fill: '#00f',
},
emphasis: {
fill: '#f0f',
}
},
animation: false,
//silent: true,
data: ['社区1', '社区2', '社区3'],
z: -10
}]
};
myChart.setOption(option);
下图中红色区域即为所绘制的自定义的轮廓
3.完整代码
<html>
<head>
<title>demotitle>
<style>
#container {
width: 800px;
height: 800px;
}
style>
head>
<body>
<div id="container">div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=g3Ufu6jCRS2TNcCwsn5E3gZP">script>
<script src="./echarts.min.js">script>
<script src="./bmap.min.js">script>
<script>
var div = document.getElementById('container');
var myChart = echarts.init(div);
//要显示的多边形
var area_data = [
//第一个多边形的经纬度坐标
[
[112.564881, 26.919803],
[112.564917, 26.908528],
[112.574547, 26.908496],
[112.574475, 26.916807],
[112.57372, 26.917065]
],
//第二个多边形的经纬度坐标
[
[112.579886, 26.908145],
[112.579994, 26.899431],
[112.584629, 26.899334],
[112.584288, 26.908016]
],
//第三个多边形的经纬度坐标
[
[112.564791, 26.908234],
[112.574565, 26.908202],
[112.574708, 26.899535],
[112.569606, 26.899471],
[112.564953, 26.899552]
]
];
//渲染函数
function renderItem(params, api) {
//由于render是对应data里边的每一项，而params里边没有传入data ，api的value也取不到这里所要取得的值
// 所以这里的数据取 area_data 里边的，而在 series.data 中只传入一个和area_data长度相同的简单数组即可。
var coords = area_data[params.dataIndex];
var points = [];
for (var i = 0; i < coords.length; i++) {
points.push(api.coord(coords[i]));
}
console.log(params, api);
return {
type: 'polygon',
shape: {
points: points
},
style: api.style()
};
}
//echarts 配置项
option = {
tooltip: {
trigger: 'item'
},
bmap: {
center: [112.572925, 26.903983],
zoom: 15,
roam: true,
},
series: [{
name: '轮廓',
type: 'custom',
coordinateSystem: 'bmap',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.5,
fill: '#00f',
},
emphasis: {
fill: '#f0f',
}
},
animation: false,
//silent: true,
data: ['社区1', '社区2', '社区3'],
z: -10
}]
};
myChart.setOption(option);
script>
body>
html>