用echarts在百度地图bmap自定义形状

时间：2024-03-23 19:31:36

用echarts在百度地图bmap自定义形状

  1. 创建html文件
  2. 引入百度地图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>
  1. 初始化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);

下图中红色区域即为所绘制的自定义的轮廓
用echarts在百度地图bmap自定义形状
3.完整代码

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <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>

相关文章