百度地图标注及结合ECharts图谱数据可视化

本示例中根据企业位置经纬度，在页面右侧百度地图中标注企业名称。同时页面左侧ECharts图谱饼状图用于统计企业行业与注册资本。当右侧百度地图缩放拖拽，左侧ECharts图谱根据右侧地图上出现的企业动态变化。详细过程如下两图所示：

本示例中有用到Vue.js，以及一个JQuery的表格插件DataTable。详细代码如下所示。

一、JSP代码

JSP中注意需要引用相关JS文件，如下所示：

 <script src="js/jquery-3.2.1.js"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=q7IDDpeG6pBgm2vRYOCLyI9phWdUD6jY"></script>
 <script src="js/echarts.js"></script>
 <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 <script type="text/javascript" src="js/map-vue.js"></script>

前端代码仅供参考，如下所示：

 <!--左侧信息展示、右侧地图-->
 <div id="wholeDiv">
     <!--企业信息区域-->
     <div id="mapinfo_div" style="position: absolute;top: 61px;left: 0px;width: 35%;height: 86%;">
         <div class="innerbox" style="position: absolute;top: 0px;left: 2px;width: 100%;height: 44%;border: 1px solid darkgray;overflow-x: auto">
             <div id="mapCorp1" style="position: absolute;left: 0px;top: 0px;width: 420px;height: 100%;float: left;"></div>
             <div id="mapCorp2" style="position: absolute;left: 450px;top: 0px;width: 420px;height: 100%;float: left;"></div>
             <font class="mapMessage" size="3" color="#808080" style="position: absolute;left: 33%;top: 45%;display: none">地图当前区域未搜到相关企业</font>
         </div>

         <div id="mapCorpList" class="innerbox" style="position: absolute;top: 45%;left: 2px;width: 100%;height: 60%;overflow-y: auto;border: 1px solid darkgray;" >
             <ul v-for="(corp, corpIndex) in corpList">
                 <li style="height: 100px;border-bottom:#1db5ee 1px dashed;padding-bottom:10px;margin-bottom:0px;overflow:hidden;">
                     <a href=""><img width="90" height="90" alt="logo" v-bind:src="corp.corpLogo" style="margin-top: 5px;border:#ccc 1px solid;padding:2px;float:left;"/></a>
                     <a target="_blank" v-bind:href="'http://localhost:8080/see_details.do?corp_id='+corp.corpId" >
                         <font id = "map_corpName" style="padding:10px;" size="3"><b>{{ corp.corpName}}</b></font>
                     </a><br/>
                     <font style="padding:10px;" size="3">法人：</font>
                     <font style="padding:0px;color: gray" size="3">{{ corp.operManName}}</font>
                     <font style="padding:10px;" size="3">注册资本：</font>
                     <font style="padding:0px;color: gray" size="3">{{ corp.regCapi}}万元</font><br/>
                     <font style="padding:10px;" size="3">行业：</font>
                     <font style="padding:0px;color: gray" size="3">{{ corp.belongTrade}}</font><br/>
                     <span v-if="corp.admitMain != '——'" style="margin-left: 10px;background-color: #1db5ee;"><font size="1.5" color="#ffffff">{{ corp.admitMain}}</font></span>
                 </li>
             </ul>
             <font class="mapMessage" size="3" color="#808080" style="position: absolute;left: 33%;top: 45%;display: none">地图当前区域未搜到相关企业</font>
         </div>

         <div id="mapCorpTable" class="innerbox" style="position: absolute;top: 45%;left: 2px;width: 100%;height: 60%;overflow-y: auto;border: 1px solid darkgray;display: none">
             <table id="showCorpTable" class="display" style="margin-top: 5px">
                 <thead>
                 <tr align="left">
                     <th>公司名称</th>
                     <th>法人</th>
                     <th>注册资本(万)</th>
                     <th>所属行业</th>
                     <th>详细地址</th>
                 </tr>
                 </thead>
             </table>
         </div>
     </div>

     <!--地图区域-->
     <div id="mapCorp_div" style="position: absolute;top: 61px;left: 36%;width: 64%;height: 90%;border: 1px solid lightgray;overflow: hidden;font-family: '微软雅黑';">
         <div id="allmap" style="width: 100%;height: 100%;float:left;">
         </div>

         <div style="position: absolute;top: 38%;left: 0px;width: 50px;height: 100px;border-radius:0 50px 50px 0;background-color: darkred;opacity:0.6;float:left;">
             <img id = "map_right" src="/icon/map_right.png" width="60" height="50" style="margin-top: 25px"/>
             <img id = "map_left" src="/icon/map_left.png" width="60" height="50" style="margin-top: 25px;display: none"/>
         </div>
     </div>

     <!--搜索区域-->
     <div id="search" style="position: fixed;top: 10%;left: 76%;width: 20%;height: 7%;background-color: white;box-shadow: 0px 4px 8px rgba(44, 35, 35, 0.6)">
         <input type="text" ref="cityName" placeholder="请输入城市名称" @keyup.enter="locationByCityName"
                style="height: 35px;width: 220px;border: none;outline:none;font-size: 18px;margin-top: 7px"/>
         <div style="position: absolute;top: 15%;left: 84%;height: 68%;width: 12%;background-image: url(/icon/map_search.png)" v-on:click="locationByCityName();">
         </div>
     </div>
 </div>

二、JavaScript代码，map-vue.js文件

 var vm = new Vue({
     el: "#wholeDiv",
     data: {
         map: "", // 百度地图全局变量
         //regionList: [],
         corpList: [],
     },
     mounted: function () {
         var _this = this;
         map = new BMap.Map("allmap");
         var initPoint = new BMap.Point(118.801372, 32.061892);
         map.centerAndZoom(initPoint, 15); // 初始化地图，设置中心坐标点和地图级别
         map.addControl(new BMap.NavigationControl({enableGeolocation: true})); // 添加比例尺控件
         map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); // 左上角
         map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

         this.getMapList();

         // 监听缩放事件
         map.addEventListener('zoomend', function (event) {
             console.log("缩放");
             _this.mapResize(event.target);
         });
         // 监听拖拽事件
         map.addEventListener('dragend', function (event) {
             console.log("拖拽");
             _this.mapResize(event.target);
         })
     },
     methods: {
         /**
          * 根据城市名称定位
          */
         locationByCityName: function () {
             var cityName = this.$refs.cityName.value;
             map.centerAndZoom(cityName,11);
             var _this = this;
             // 地图加载完成事件
             // 不加载完成，获取的是上一次的坐标
             map.addEventListener("tilesloaded", function (event){
                 _this.mapResize(event.target);
             });
         },
         /**
          * 获取数据
          */
         getMapList: function () {
             this.getAllCorp();
             this.getCorpDataTable();
         },

         /**
          * 获取所有公司坐标点
          */
         getAllCorp: function () {
             var _this = this;
             this.$http.get("http://localhost:8080/mapCorp.do").then(function (result) {
                 var mapCorpList = result.body;
                 _this.corpList = mapCorpList;
                 for (var i = 0; i < mapCorpList.length; i++) {
                     var point = new BMap.Point(mapCorpList[i].longitude, mapCorpList[i].latitude); // 标记坐标点
                     var label = new BMap.Label(mapCorpList[i].corpName, {offset: new BMap.Size(20, -10)});// 标记说明
                     _this.addMarker(point, label);
                 }
                 _this.getTradeEcharts(mapCorpList);
                 _this.getCapiEcharts(mapCorpList);
             });
         },

         /**
          * 获取地图范围内的公司
          */
         getCorpInsizeMap: function (leftLongitude, leftLatitude, rightLongitude, rightLatitude) {
             var _this = this;
             this.$http.get("http://localhost:8080/mapInside.do?leftLongitude=" + leftLongitude +
                 "&leftLatitude=" + leftLatitude +
                 "&rightLongitude=" + rightLongitude +
                 "&rightLatitude=" + rightLatitude).then(function (result) {
                 _this.corpList = result.body;
                 _this.getTradeEcharts(result.body);
                 _this.getCapiEcharts(result.body);
             });
         },

         /**
          * 企业行业图谱展示
          */
         getTradeEcharts: function (data) {
             var newList = data;
             var tempJSON = [];
             //遍历数组，并分类统计,放入tempJSON中
             for(var i = 0; i < newList.length; i++) {
                 if(!tempJSON[newList[i].belongTrade]) {
                     var arr = [];
                     arr.push(newList[i]);
                     tempJSON[newList[i].belongTrade] = arr;
                 }else {
                     tempJSON[newList[i].belongTrade].push(newList[i]);
                 }
             }
             console.log(tempJSON);
             console.log("tempJSON长度"+Object.keys(tempJSON).length);

             var tradeArr = [];
             var i = 0;
             for(var trade in tempJSON){
                 if(i > 4){
                     break;
                 }
                 tradeArr[i] = {
                     value: tempJSON[trade].length,
                     name: trade
                 }
                 i++;
             }

             var myChart = echarts.init(document.getElementById('mapCorp1'));
             option = {
                 title : {
                     text: '企业所属行业分析（TOP5）',
                     x:'center'
                 },
                 tooltip : {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                 },
                 series : [
                     {
                         name: '所属行业',
                         type: 'pie',
                         radius : '55%',
                         center: ['50%', '55%'],
                         data: tradeArr,
                         itemStyle: {
                             emphasis: {
                                 shadowBlur: 10,
                                 shadowOffsetX: 0,
                                 shadowColor: 'rgba(0, 0, 0, 0.5)'
                             }
                         }
                     }
                 ]
             };
             myChart.setOption(option);
         },

         /**
          * 企业资本图谱展示
          */
         getCapiEcharts: function (data) {
             if(data.length > 0){
                 $('#mapCorp1').css("display","block");
                 $('#mapCorp2').css("display","block");
                 $('.mapMessage').css("display","none");

                 var class1 = 0;
                 var class2 = 0;
                 var class3 = 0;
                 var class4 = 0;
                 var class5 = 0;
                 //遍历数组，并分类统计,放入tempJSON中
                 for(var i = 0; i < data.length; i++) {
                     if( 0 < data[i].regCapi && data[i].regCapi <= 100){
                         class1 += 1;
                     }else if( 100 < data[i].regCapi && data[i].regCapi <= 500){
                         class2 += 1;
                     }else if( 500 < data[i].regCapi && data[i].regCapi <= 1000){
                         class3 += 1;
                     }else if( 1000 < data[i].regCapi && data[i].regCapi <= 5000){
                         class4 += 1;
                     }else if( 5000 < data[i].regCapi){
                         class5 += 1;
                     }
                 }

                 var tradeArr = [];
                 if(class1 != 0){
                     tradeArr[0] = {
                         value: class1,
                         name: "0-100万"
                     }
                 };
                 if(class2 != 0){
                     tradeArr[1] = {
                         value: class2,
                         name: "101-500万"
                     }
                 };
                 if(class3 != 0){
                     tradeArr[2] = {
                         value: class3,
                         name: "501-1000万"
                     }
                 };
                 if(class4 != 0){
                     tradeArr[3] = {
                         value: class4,
                         name: "1001-5000万"
                     }
                 };
                 if(class5 != 0){
                     tradeArr[4] = {
                         value: class5,
                         name: "5001万以上"
                     }
                 };

                 var myChart = echarts.init(document.getElementById('mapCorp2'));
                 option = {
                     title : {
                         text: '企业注册资本统计',
                         x:'center'
                     },
                     tooltip : {
                         trigger: 'item',
                         formatter: "{a} <br/>{b} : {c} ({d}%)"
                     },
                     series : [
                         {
                             name: '注册资本',
                             type: 'pie',
                             radius : '55%',
                             center: ['50%', '55%'],
                             data: tradeArr,
                             itemStyle: {
                                 emphasis: {
                                     shadowBlur: 10,
                                     shadowOffsetX: 0,
                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
                                 }
                             }
                         }
                     ]
                 };
                 myChart.setOption(option);
             }else{
                 $('#mapCorp1').css("display","none");
                 $('#mapCorp2').css("display","none");
                 $('.mapMessage').css("display","block");
             }
         },

         /**
          * 表格展示
          */
         getCorpDataTable: function () {
             $('#showCorpTable').DataTable({
                 "ajax" : "http://localhost:8080/tableCorp.do",
                 "pageLength" : 5,
                 "pagingType" : "full_numbers",
                 "language" : {
                     "emptyTable" : "无可用数据",
                     "infoEmpty" : "没有记录可以显示",
                     "loadingRecords" : "请等待，数据正在加载中......",
                     "search" : "搜索",
                     "lengthMenu" : "Show _MENU_ entries",
                     "lengthMenu" : '显示 <select>'
                     + '<option value="5">5</option>'
                     + '<option value="10">10</option>'
                     + '<option value="20">20</option>'
                     + '<option value="30">30</option>'
                     + '<option value="40">40</option>'
                     + '<option value="-1">所有</option>'
                     + '</select> 记录',
                     "info" : "第_PAGE_页(共_PAGES_页）",
                     "paginate" : {
                         "first" : '首页',
                         "previous" : '上一页',
                         "next" : '下一页',
                         "last" : '尾页'
                     },
                     "aria" : {
                         "paginate" : {
                             "first" : 'First',
                             "previous" : 'Previous',
                             "next" : 'Next',
                             "last" : 'Last'
                         }
                     }
                 },
                 "columns" : [ {
                     "data" : "corpName"
                 }, {
                     "data" : "operManName"
                 }, {
                     "data" : "regCapi"
                 }, {
                     "data" : "belongTrade"
                 }, {
                     "data" : "corpAddr"
                 }  ]
             });
         },

         /**
          * 标记坐标点
          * @param corpPoint
          * @param corpNameLabel
          */
         addMarker: function (corpPoint, corpNameLabel) {
             var marker = new BMap.Marker(corpPoint);
             marker.setLabel(corpNameLabel);
             map.addOverlay(marker);
         },

         /**
          * 地图缩放
          */
         mapResize: function (_map) {
             // 获取当前地图边界
             var bounds = _map.getBounds(),
                 southWest = bounds.getSouthWest(),  // 西北角
                 northEast = bounds.getNorthEast();  // 东北角

             var zoomLevel = _map.getZoom();

             params = {
                 level: zoomLevel,
                 leftLongitude: southWest.lng,   // 左上角
                 leftLatitude: northEast.lat,
                 rightLongitude: northEast.lng,  // 右下角
                 rightLatitude: southWest.lat
             };

             // 搜索地图范围内的公司
             // 每当地图大小改变，就重新搜索
             this.getCorpInsizeMap(params.leftLongitude, params.leftLatitude,
                 params.rightLongitude, params.rightLatitude);

             // 默认缩放级别为15

             console.log("左上角：" + params.leftLongitude+ "," + params.leftLatitude);
             console.log("右下角：" + params.rightLongitude + "," + params.rightLatitude);
         }
     }
 });

 $('#map_right').click(function () {
     $(this).css("display","none");
     $("#map_left").css("display","block");
     $("#mapCorpList").css("display","none");
     $("#mapCorpTable").css("display","block");

     $("#mapinfo_div").width($("#mapinfo_div").width() + 400);
     $("#mapCorp_div").width($("#mapCorp_div").width() - 400);
     $("#mapCorp_div").css("margin-left",400);
 });
 $('#map_left').click(function () {
     $(this).css("display","none");
     $("#map_right").css("display","block");
     $("#mapCorpTable").css("display","none");
     $("#mapCorpList").css("display","block");

     $("#mapinfo_div").width($("#mapinfo_div").width() - 400);
     $("#mapCorp_div").width($("#mapCorp_div").width() + 400);
     $("#mapCorp_div").css("margin-left",0);
 });

三、Controller层代码

 package controller;

 import entity.BaiduMapCorp;
 import net.sf.json.JSONArray;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.*;
 import service.BaiduMapService;

 import java.util.List;

 @Controller
 public class BaiduMapController {

     @Autowired
     BaiduMapService baiduMapService;

     //获取地图上所有企业
     @GetMapping("/mapCorp.do")
     @ResponseBody
     public List<BaiduMapCorp> mapPointList() {
         List<BaiduMapCorp> mapList = baiduMapService.getAllMapCorp();
         return mapList;
     }

     //获得当前位置所有公司
     @RequestMapping("/mapInside.do")
     @ResponseBody
     public List<BaiduMapCorp> getCorpInsideMap(@RequestParam(value = "leftLongitude") double leftLongitude,
                                                @RequestParam(value = "leftLatitude") double leftLatitude,
                                                @RequestParam(value = "rightLongitude") double rightLongitude,
                                                @RequestParam(value = "rightLatitude") double rightLatitude) {
         return baiduMapService.getCorpInsideMap(leftLongitude, leftLatitude, rightLongitude, rightLatitude);
     }

     //datatable获取地图上所有企业
     @RequestMapping(value = "/tableCorp.do", produces = "text/plain;charset=UTF-8")
     @ResponseBody
     public String getTableCorp() {
         List<BaiduMapCorp> mapList = baiduMapService.getTableCorp();
         String result = "{" +"\"data\""+":"+ JSONArray.fromObject(mapList).toString()+"}";
         System.out.println(result);
         return result;
     }

 }

四、实体类

 package entity;

 /**
  * 百度地图坐标点
  *
  */
 public class BaiduMapCorp {

     private Integer id;         //ID

     private String corpName;    //公司名称

     private double longitude;   //经度

     private double latitude;    //维度

     private String corpAddr;    //公司地址

     private Integer corpId;     //公司ID

     private String operManName; //公司法人

     private Integer regCapi;    //注册资本

     private String corpLogo;    //企业logo

     private String belongTrade; //所属行业

     private String admitMain;   //企业大类

     public BaiduMapCorp() {
     }

     public Integer getId() {
         return id;
     }

     public void setId(Integer id) {
         this.id = id;
     }

     public String getCorpName() {
         return corpName;
     }

     public void setCorpName(String corpName) {
         this.corpName = corpName;
     }

     public double getLongitude() {
         return longitude;
     }

     public void setLongitude(double longitude) {
         this.longitude = longitude;
     }

     public double getLatitude() {
         return latitude;
     }

     public void setLatitude(double latitude) {
         this.latitude = latitude;
     }

     public String getCorpAddr() {
         return corpAddr;
     }

     public void setCorpAddr(String corpAddr) {
         this.corpAddr = corpAddr;
     }

     public Integer getCorpId() {
         return corpId;
     }

     public void setCorpId(Integer corpId) {
         this.corpId = corpId;
     }

     public String getOperManName() {
         return operManName;
     }

     public void setOperManName(String operManName) {
         this.operManName = operManName;
     }

     public Integer getRegCapi() {
         return regCapi;
     }

     public void setRegCapi(Integer regCapi) {
         this.regCapi = regCapi;
     }

     public String getCorpLogo() {
         return corpLogo;
     }

     public void setCorpLogo(String corpLogo) {
         this.corpLogo = corpLogo;
     }

     public String getBelongTrade() {
         return belongTrade;
     }

     public void setBelongTrade(String belongTrade) {
         this.belongTrade = belongTrade;
     }

     public String getAdmitMain() {
         return admitMain;
     }

     public void setAdmitMain(String admitMain) {
         this.admitMain = admitMain;
     }

 }

至此是关于百度地图标注及结合ECharts图谱数据可视化，仅供参考。

如有疏漏错误之处，还请不吝赐教！