本示例中根据企业位置经纬度，在页面右侧百度地图中标注企业名称。同时页面左侧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图谱数据可视化，仅供参考。
如有疏漏错误之处，还请不吝赐教！
