Echarts 结合百度地图使用总结

Posted 2020-10-29 canjianerguo

注：echarts结合china.js使用效果并不好，china.js是矢量图，显示的地图只有一个轮廓，所以正常会选择百度地图或者其他地图配合使用。

一.代码如下（参考网上，并加入自己的整理）

     function initHotMap(dataArr, domId, title){
          $.get("${ctxStatic}/resources/js/bmap/dataTool.js",function(){
          $.get(‘${ctxStatic}/resources/js/bmap/bmap.min.js‘, function () {
              setTimeout(function(){}, 3000);
              var hotMap = echarts.init(document.getElementById(domId));
               
              // 最终需整理成的数据格式 ：[{name:‘nanjing‘,value : [118.77801148172465,32.03102850827321,80]}]

                 var option = {
                      title: {
                          text: title,
                          left: ‘center‘
                      },
                      tooltip : {
                          trigger: ‘item‘,
                          formatter:function(v){
                              return ‘‘;
                          }
                      },
                      bmap: {
                          // 中心为南京
                          center: [118.725551,32.024621],
                          zoom: 16,
                          roam: true,
                          mapStyle: {
                              styleJson: [{
                                  ‘featureType‘: ‘water‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#d1d1d1‘
                                  }
                              }, {
                                  ‘featureType‘: ‘land‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#f3f3f3‘
                                  }
                              }, {
                                  ‘featureType‘: ‘railway‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘visibility‘: ‘off‘
                                  }
                              }, {
                                  ‘featureType‘: ‘highway‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#fdfdfd‘
                                  }
                              }, {
                                  ‘featureType‘: ‘highway‘,
                                  ‘elementType‘: ‘labels‘,
                                  ‘stylers‘: {
                                      ‘visibility‘: ‘all‘
                                  }
                              }, {
                                  ‘featureType‘: ‘arterial‘,
                                  ‘elementType‘: ‘geometry‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#fefefe‘
                                  }
                              }, {
                                  ‘featureType‘: ‘arterial‘,
                                  ‘elementType‘: ‘geometry.fill‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#fefefe‘
                                  }
                              }, {
                                  ‘featureType‘: ‘poi‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘visibility‘: ‘off‘
                                  }
                              }, {
                                  ‘featureType‘: ‘green‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘visibility‘: ‘all‘
                                  }
                              }, {
                                  ‘featureType‘: ‘subway‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘visibility‘: ‘off‘
                                  }
                              }, {
                                  ‘featureType‘: ‘manmade‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#d1d1d1‘
                                  }
                              }, {
                                  ‘featureType‘: ‘local‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#d1d1d1‘
                                  }
                              }, {
                                  ‘featureType‘: ‘arterial‘,
                                  ‘elementType‘: ‘labels‘,
                                  ‘stylers‘: {
                                      ‘visibility‘: ‘all‘
                                  }
                              }, {
                                  ‘featureType‘: ‘boundary‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#fefefe‘
                                  }
                              }, {
                                  ‘featureType‘: ‘building‘,
                                  ‘elementType‘: ‘all‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘#d1d1d1‘
                                  }
                              }, {
                                  ‘featureType‘: ‘label‘,
                                  ‘elementType‘: ‘labels.text.fill‘,
                                  ‘stylers‘: {
                                      ‘color‘: ‘purple‘
                                  }
                              }]
                          }
                      },
                      series : [
                           {
                              type: ‘scatter‘,
                              coordinateSystem: ‘bmap‘,
                              data: dataArr,
                              symbolSize: function (val) {
                                  return val[2] ;
                              },
                              label: {
                                  normal: {
                                      formatter: ‘{b}‘,
                                      position: ‘right‘,
                                      show: false
                                  },
                                  emphasis: {
                                      show: true
                                  }
                              },
                              itemStyle: {
                                  normal: {
                                      color: ‘purple‘
                                  }
                              }
                          }, 
                          {
                              type: ‘effectScatter‘,
                              coordinateSystem: ‘bmap‘,
                              data:  dataArr.sort(function(a, b){
                                  return b.value[20] - a.value[20];
                              }).slice(0,5),
                              symbolSize: function (val) {
                                  return val[2] ;
                              },
                              showEffectOn: ‘render‘,
                              rippleEffect: {
                                  brushType: ‘stroke‘
                              },
                              hoverAnimation: true,
                              label: {
                                  normal: {
                                      formatter: ‘{b}‘,
                                      position: ‘right‘,
                                      show: true
                                  }
                              },
                              itemStyle: {
                                  normal: {
                                      color: ‘purple‘,
                                      shadowBlur: 10,
                                      shadowColor: ‘#333‘
                                  }
                              },
                              zlevel: 1
                          } 
                      ]
                  };
              
              hotMap.setOption(option);
              
                // 添加百度地图插件
                var bmap = hotMap.getModel().getComponent(‘bmap‘).getBMap();
                bmap.addControl(new BMap.MapTypeControl());
                bmap.addControl(new BMap.NavigationControl());
                bmap.disableScrollWheelZoom();
          });
          });
      }

二。常见问题整理

　　1.地图显示不出来，或者只显示南沙群岛，而且浏览器控制台报错关于bmap.js加载等问题，是因为页面bmap.js引入方式错误的原因

　　　　解决方案：（1）首先要在页面首部引入百度地图        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak="></script>    其中ak的值需要自行到百度地图官网申请。

　　　　　　　　　（2）通过  $.get(‘${ctxStatic}/resources/js/bmap/bmap.min.js‘, function () {   ///处理逻辑  });这种方式引入bmap.min.js文件，即使使用china.js的时候也需要这种方式，否则会因为加载不全就执行产生报错。

　　　　　　　　　（3）如果想在echarts中操作百度地图，比如加上百度地图的相关控件，可以通过   var bmap = hotMap.getModel().getComponent(‘bmap‘).getBMap();  这种方式获取地图对象，然后就可以随心所欲的操作了，百度地图相关操作方法可以百度地图API。