1,在通过Echarts做地图操作的时候有三种方式:1种是利用Echarts官网的地图文件(js,json)地图导入到页面中进行展示,这些例子官网很多。还有就是SVG图片结合Echarts,这种操作在Echarts3.0之后我不是很清楚,所以在Echarts的2.2.7版本时可以这么做:在js中创建Echarts的基本环节,然后通过ajax读取svg然后再回调里面进行操作。
第三种就是:利用百度地图进行扩展
2,首先你需要在百度地图上申请一个类似开发账号的东西,将来在jsp中接入百度地图需要这个ak,还有就是Echarts操作的一些基本文件主要是两个一个是map.js一个是BMap下面的main.js这两个文件都可以在下载的Echarts的压缩包中找到,下载地址:http://echarts.baidu.com/build/echarts-2.2.7.zip
3,开始正式的操作:
在jsp中引入jQuery,引入echarts的js,接入百度地图:
<script type="text/javascript" src="${pageContext.request.contextPath}/js/commons/jquery-1.8.0.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/echart/echarts.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=********"></script>//ak后面的就是你在百度地图申请的接入key
然后就是创建你的div,用于展示你的地图啦,
剩下的操作就是比较复杂的地图的操作了,都是js代码所以需要写在外部js里面即可,然后将外部js引入
外部js:
(function () {
require.config({
paths: {
echarts: 'js/echart' //项目中前面所提到的map.js的文件路径
},
packages: [
{
name: 'BMap', //固定写法需要引入BMap
location: 'Bmap', //项目中全面所提到的Bmap下的main.js的文件路径
main: 'main '
}
]
});
require(
[
'echarts',
'BMap',
'echarts/chart/map'
],
function (echarts, BMapExtension) {
$('#main').css({
height:500,
width: 1200
});
// 初始化地图
var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{
enableMapClick: false
});
var map = BMapExt.getMap();
var container = BMapExt.getEchartsContainer();
var startPoint = {
x: 124.114129,
y: 47.550339
};
var point = new BMap.Point(startPoint.x, startPoint.y);
map.centerAndZoom(point, 5);
map.enableScrollWheelZoom(true);
option ={
//这里进行地图的具体详细设置,主要series里面type的类型为map而mapType的类型为none: type:'map',
mapType: 'none',
}
var myChart = BMapExt.initECharts(container);
window.onresize = myChart.onresize;
BMapExt.setOption(option);
}
}
这样就可以为Echarts扩展百度地图了,但是这些操作还是需要一个前提。你的项目必须可以接入外网,不然怎么接入百度地图啊。以上为个人的一些操作过程,达成了初步的目标,将百度地图接入,后续会继续为大家带来具体的详细的关于画点,画线,以及函数动画的操作,敬请期待?