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

Myth丶恋晨 2022-06-01 12:39 481阅读 0赞

先上图

![SouthEast][]

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
    			...
    			
    		}
              
    );

[SouthEast]: /images/20220601/e8921062d30c49fbbcfcf3cd45e155f8.png