百度地图集成echarts并且在地图上显示动态告警图形

最新推荐文章于 2025-05-21 14:55:34 发布

阿杜_ardo

最新推荐文章于 2025-05-21 14:55:34 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端web 文章标签： echarts 百度地图

本文链接：https://blog.youkuaiyun.com/ardo_pass/article/details/79199666

前端web 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何使用ECharts和BMap实现地图数据可视化，包括配置文件路径、加载所需图表组件、设置地图样式及展示标记点等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上图

js代码:

require.config({
        paths: {
                echarts: './js/dist'
            },
        packages: [
            {
                name: 'BMap',
                //location: './js/migration/js/src',
		location: './js/extension/BMap/src',
                main: 'main'
            }
        ]
        });
        require(
            [
                'echarts',
				'BMap',
				'echarts/theme/macarons',
				'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
				'echarts/chart/bar',
				'echarts/chart/pie',
                'echarts/chart/radar',
                'echarts/chart/gauge',
                'echarts/chart/map'
			],
		function (echarts, BMapExtension){
			BMapExt = new BMapExtension($('#l-map')[0], BMap, echarts);
			map = BMapExt.getMap();
			container = BMapExt.getEchartsContainer();
			var point = new BMap.Point(121.473065,31.236176);//上海中心点坐标
			map.centerAndZoom(point, 12);
			map.enableScrollWheelZoom(true);//允许鼠标滑轮放大缩小
			
			//主题设置
		    var mapStyle = {
		        features: ["road", "building", "water", "land"],//隐藏地图上的poi
		        //style: "dark"  //设置地图风格为高端黑
		        style: "midnight"  //设置地图风格午夜蓝
		    }
			map.setMapStyle(mapStyle); 

			option = {
			series : [
				{
					type: 'map',
					mapType: 'none',
					data: [],
					geoCoord: {
						"上海站":[121.482264,31.267294],
						"长风公园":[121.410399,31.225801]
					},
					markPoint: {
						symbol: 'emptyCircle',
						symbolSize : 20,
						effect: {
							show: true,
							scaleSize: 1,
							period: 10,
							color: 'red',
							shadowBlur: 5
						},
						data: [
						   {name: "上海站", value: 39},
						   {name: "长风公园", value: 46}
						]
					}
				}
				]
			};
			myMapChart = BMapExt.initECharts(container);
			BMapExt.setOption(option);
			
			
			//图形start
			...
			
		}
          
);