Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻

记录最近使用echarts制作地图的过程及部分代码：

其中在网络上借鉴了不少优秀的源码，在此感谢他们的开源精神。

先看效果：

（一）态势图、热点图、轨迹图及全屏功能

全屏效果：

（二）改普通地图为百度底图

（三）三级下钻地图

相关代码：

（一）

<div id="mapdiv"><div class="row"><div id="map1" class="col-sm-6 mapdiv" style="background-color: #0a6aa1"></div><div id="map2" class="col-sm-6 mapdiv" style="background-color: #1e9765"></div></div><div class="row"><div id="map3" class="col-sm-6 mapdiv" style="background-color: #6a5a8c"></div><div id="map4" class="col-sm-6 mapdiv" style="background-color: #3A87AD"></div></div>
</div><div id="mask" style="height: 100%;width: 100%;"><div id="mask-header"><button>退出</button></div><%--<div id="mask-body"></div>--%><%-- style="height: 600px;width: 100%;"--%>
</div>


// ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization
// Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen.//这是设置全屏的宽高随屏幕的不同宽度而变化
$("#mask-body").width($(document.body).width() - 100);
$("#mask-body").height($(document.body).height() - 20);
$("#mask").css('display', "none");
$("#mask-header>button").click(function () {$("#mask").css('display', "none");$("#mapdiv").css('display', 'block');
});// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
// require.config({
//     paths: {
//         echarts: '../html/www/js'
//     }
// });//图一
function createmap1(id, data) {$.get(_ctx + '/map/json/china.json', function (geoJson) {var map1 = echarts.init(document.getElementById(id))echarts.registerMap('china', geoJson)var option = {backgroundColor: '#D7E7FF',// title : {//     text: 'iphone销量',//     subtext: '纯属虚构',//     x:'center'// },tooltip: {trigger: 'item'},// legend: {//     orient: 'vertical',//     x:'left',//     data:['iphone3','iphone4','iphone5']// },dataRange: {min: 0,max: 2500,color: ["#E5672C", "#E0E52C", "#2D65BE"],x: 'left',y: 'bottom',text: ['高', '低'],           // 文本，默认为数值文本calculable: true},toolbox: {show: true,// orient : 'vertical',x: 'right',y: 'bottom',feature: {mark: {show: true},// dataView : {show: true, readOnly: false},restore: {show: true},// saveAsImage : {show: true}myTool2: {show: true,title: '全屏显示',icon: 'image://../img/fullscreen.png',onclick: function () {$("#mapdiv").css('display', 'none');$("#mask").css("display", "block");$("body").css("overflow-y", "hidden");$('#mask-body').remove();$('#mask').append('<div id="mask-body"></div>');$("#mask-body").width($(document.body).width() - 100);// $("#mask-body").height($(document.body).height()-20);$("#mask-body").height($(window).height() - 20);createmap1("mask-body", map1data);}}}},roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},series: [{name: 'iphone3',type: 'map',mapType: 'china',roam: false,itemStyle: {normal: {label: {show: true}},emphasis: {label: {show: true}}},data: data}]};map1.setOption(option, true)});
}//图二
function createmap2(id, data, geoCoordMap) {$.get(_ctx + '/map/json/china.json', function (geoJson) {var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};var option = {// backgroundColor: '#ffffff',backgroundColor: '#404a59',/*title: {text: '全国主要城市空气质量',subtext: 'data from PM25.in',sublink: 'http://www.pm25.in',left: 'center',textStyle: {color: '#fff'}},*/tooltip: {trigger: 'item',formatter: function (params) {return params.name + '<br/>' +params.seriesName + ": " + params.value[2]}},legend: {orient: 'vertical',y: 'bottom',x: 'left',data: ['pm2.5'],textStyle: {color: '#fff'}},toolbox: {show: true,// orient : 'vertical',x: 'right',y: 'bottom',feature: {mark: {show: true},// dataView : {show: true, readOnly: false},restore: {show: true},// saveAsImage : {show: true}myTool2: {show: true,title: '全屏显示',icon: 'image://../img/fullscreen.png',onclick: function () {$("#mapdiv").css('display', 'none');$("#mask").css("display", "block");$("body").css("overflow-y", "hidden");$('#mask-body').remove();$('#mask').append('<div id="mask-body"></div>');$("#mask-body").width($(document.body).width() - 100);// $("#mask-body").height($(document.body).height()-20);$("#mask-body").height($(window).height() - 20);createmap2("mask-body", map2data, geoCoordMap);}}}},geo: {map: 'china',label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#111'},emphasis: {areaColor: '#2a333d'}}},series: [{name: 'pm2.5',type: 'scatter',coordinateSystem: 'geo',data: convertData(data),symbolSize: function (val) {return val[2] / 10;},label: {normal: {formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: '#ddb926'}}},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 3)),symbolSize: function (val) {return val[2] / 10;},showEffectOn: 'render',rippleEffect: {brushType: 'fill'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: '#f4e925',shadowBlur: 10,shadowColor: '#333'}},zlevel: 1}]};var map2 = echarts.init(document.getElementById(id));echarts.registerMap('china', geoJson);map2.setOption(option);})
};//图三
function createmap3(id, geoCoordMap,BJData) {$.get(_ctx + '/map/json/china.json', function (geoJson) {var myChart=echarts.init(document.getElementById(id))echarts.registerMap('china',geoJson)var myHosName = ['张三','李四'];var option = null;var planePath = "path://M917.965523 917.331585c0 22.469758-17.891486 40.699957-39.913035 40.699957-22.058388 0-39.913035-18.2302-39.913035-40.699957l-0.075725-0.490164-1.087774 0c-18.945491-157.665903-148.177807-280.296871-306.821991-285.4748-3.412726 0.151449-6.751774 0.562818-10.240225 0.562818-3.450589 0-6.789637-0.410346-10.202363-0.524956-158.606321 5.139044-287.839661 127.806851-306.784128 285.436938l-1.014096 0 0.075725 0.490164c0 22.469758-17.854647 40.699957-39.913035 40.699957s-39.915082-18.2302-39.915082-40.699957l-0.373507-3.789303c0-6.751774 2.026146-12.903891 4.91494-18.531052 21.082154-140.712789 111.075795-258.241552 235.432057-312.784796C288.420387 530.831904 239.989351 444.515003 239.989351 346.604042c0-157.591201 125.33352-285.361213 279.924387-285.361213 154.62873 0 279.960203 127.770012 279.960203 285.361213 0 97.873098-48.391127 184.15316-122.103966 235.545644 124.843356 54.732555 215.099986 172.863023 235.808634 314.211285 2.437515 5.290493 4.01443 10.992355 4.01443 17.181311L917.965523 917.331585zM719.822744 346.679767c0-112.576985-89.544409-203.808826-199.983707-203.808826-110.402459 0-199.944821 91.232864-199.944821 203.808826s89.542362 203.808826 199.944821 203.808826C630.278335 550.488593 719.822744 459.256752 719.822744 346.679767z";//    简笔人2//    var  planePath="path://M621.855287 587.643358C708.573965 540.110571 768 442.883654 768 330.666667 768 171.608659 648.609267 42.666667 501.333333 42.666667 354.057399 42.666667 234.666667 171.608659 234.666667 330.666667 234.666667 443.22333 294.453005 540.699038 381.59961 588.07363 125.9882 652.794383 21.333333 855.35859 21.333333 1002.666667L486.175439 1002.666667 1002.666667 1002.666667C1002.666667 815.459407 839.953126 634.458526 621.855287 587.643358Z";var convertData = function(data) {var res = [];for (var i = 0; i < data.coords.length; i++) {var dataItem = data.coords[i];var fromCoord = geoCoordMap[dataItem.fromcity];var toCoord = geoCoordMap[dataItem.tocity];if (fromCoord && toCoord) {res.push({fromName: dataItem.fromcity,toName: dataItem.tocity,coords: [fromCoord, toCoord]});}}console.info(res)return res;};var convertData1 = function(data) {var res = [];var temparr=[];for (var i = 0; i < data.coords.length; i++) {var dataItem = data.coords[i];var fromCoord = geoCoordMap[dataItem.fromcity];var toCoord = geoCoordMap[dataItem.tocity];if (fromCoord && toCoord) {//对相同地点的轨迹值做叠加处理var hasname1=false,hasname2=false;var value1=0,value2=0;for(var j in temparr){var temip=temparr[j];if(temip.name==dataItem.fromcity){temip.value=temip.value+dataItem.value;value1=temip.value;hasname1=true;}if(temip.name==dataItem.tocity){temip.value=temip.value+dataItem.value;value2=temip.value;hasname2=true;}}if(!hasname1){value1=dataItem.value;temparr.push({name:dataItem.fromcity,value:dataItem.value});}if(!hasname2){value2=dataItem.value;temparr.push({name:dataItem.tocity,value:dataItem.value})}res.push({name:dataItem.fromcity,coord:fromCoord,value:value1    //dataItem.value});res.push({name:dataItem.tocity,coord:toCoord,value:value2    //dataItem.value});}}console.info(res)return res;};var color = ['#a6c84c', '#ffa022', '#46bee9','#793BE3','#D6DB1C'];var mySeries = [];BJData.forEach(function(item, i) {console.info(item)mySeries.push({ //移动 点name: item.name,type: 'lines',zlevel: 2,//需要动画效果可放开下方注释/*effect: {show: true,period: 6,trailLength: 0,symbol: planePath,symbolSize: 10},*/lineStyle: {normal: {color: color[i],width: 1,opacity: 0.4/*,curveness: 0.1*///线的弧度}},data: convertData(item),markPoint:{symbol:'emptyPin',symbolSize:20,itemStyle:{normal:{label: {show:true,position: 'inside',formatter: function (param) {return param.value+'\n\n'+param.name;}}}},data:convertData1(item)}});});option = {backgroundColor: '#404a59',toolbox: {show: true,// orient : 'vertical',x: 'right',y: 'bottom',feature: {mark: {show: true},// dataView : {show: true, readOnly: false},restore: {show: true},// saveAsImage : {show: true}myTool2: {show: true,title: '全屏显示',icon: 'image://../img/fullscreen.png',onclick: function () {$("#mapdiv").css('display', 'none');$("#mask").css("display", "block");$("body").css("overflow-y", "hidden");$('#mask-body').remove();$('#mask').append('<div id="mask-body"></div>');$("#mask-body").width($(document.body).width() - 100);// $("#mask-body").height($(document.body).height()-20);$("#mask-body").height($(window).height() - 20);createmap3("mask-body", geoCoordMap, BJData);}}}},tooltip: {trigger: 'item',formatter: function(params) {if(params.data.hasOwnProperty('fromName'))return params.data.fromName + '--' + params.data.toName;elsereturn params.data.name+':'+params.data.value;/*if (params.seriesIndex==1||params.seriesIndex == 2 || params.seriesIndex == 5 || params.seriesIndex == 8) {return params.name + '<br>' + '物理大师区域代理';} else if (params.seriesIndex == 0 || params.seriesIndex == 4 || params.seriesIndex == 7) {if(params.data.hasOwnProperty('fromName'))return params.data.fromName + '→' + params.data.toName;elsereturn params.data.name+':'+params.data.value;}*/}},legend: {orient: 'vertical',top: 'bottom',left: 'left',data: [myHosName[0],myHosName[1]],textStyle: {color: '#fff'}/*,selectedMode: 'single'*/},geo: {map: 'china',label: {emphasis: {show: true}},roam: true,itemStyle: {normal: {areaColor: '#323c48',borderColor: '#404a59'},emphasis: {areaColor: '#2a333d'}}},series: mySeries};if (option && typeof option === "object") {myChart.setOption(option, true);}window.onresize = function() {myChart.resize();}});};
//map1data、map2data、testData都是测试数据
//geoCoordMap是省市坐标数组
createmap1('map1', map1data);
createmap2('map2', map2data, geoCoordMap);
createmap3('map3', geoCoordMap,testData);

(二）

<body class="container">
<div id="hybrid" style="height: 600px;width:1100px;"></div><script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="${ctx}/js/bootstrap.min.js"></script>
<script src="${ctx}/metronic/global/plugins/bootstrap-toastr/toastr.min.js" type="text/javascript"></script>
<%--<script type="text/javascript" src="${ctx}/js/echarts.min.js"></script>--%>
<script type="text/javascript" src="${ctx}/js/echarts.js"></script>
<%--<script type="text/javascript" src="${ctx}/html/www/js/echarts.js"></script>--%>
<script type="text/javascript" src="${ctx}/js/bmap.js"></script>
<%--<script type="text/javascript" src="${ctx}/js/apiv2.0.min.js"></script>--%>
<script type="text/javascript" src="${ctx}/bdoffline_v2.1/offlinemap/map_load.js"></script>
<%--設定地圖显示范围用--%>
<%--<script type="text/javascript" src="${ctx}/offlinemap/tools/AreaRestriction_min.js"></script>--%>
<%--<script type="text/javascript" src="${ctx}/offlinemap/tools/DrawingManager_min.js"></script>--%><script type="text/javascript">/*//百度地图API配置var offmapcfg = {'imgext'      : '.jpg',   //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg'tiles_dir'   : '/bdoffline_v2.1/offlinemap/tiles_hybrid/',       //普通瓦片图的地址，为空默认在 offlineemap/tiles/ 目录'tiles_hybrid': '',       //卫星瓦片图的地址，为空默认在 offlineemap/tiles_hybrid/ 目录'tiles_self'  : ''        //自定义图层的地址，为空默认在 offlineemap/tiles_self/ 目录};//百度API功能function  loadJScript() {var script=document.createElement("script");script.type="text/javascript";script.src=_ctx+"/bdoffline_v2.1/offlinemap/map.js";document.body.appendChild(script);//异步加载增加代码window.BMap=window.BMap||{};window.BMap.apiLoad=function () {delete  window.BMap.apiLoad;if(typeof createmap=='function'){
//            if(typeof init=='function'){createmap('hybrid', geoCoordMap,data);
//                init();}}}window.onload=loadJScript;//异步加载地图*/var data = [{name: '海门', value: 9},{name: '鄂尔多斯', value: 12},{name: '招远', value: 12},{name: '舟山', value: 12},{name: '齐齐哈尔', value: 14},{name: '盐城', value: 15},{name: '赤峰', value: 16},{name: '青岛', value: 18},{name: '乳山', value: 18},{name: '金昌', value: 19},{name: '泉州', value: 21},{name: '莱西', value: 21},{name: '日照', value: 21},{name: '胶南', value: 22},{name: '南通', value: 23},{name: '拉萨', value: 24},{name: '云浮', value: 24},{name: '梅州', value: 25},{name: '文登', value: 25},{name: '上海', value: 25},{name: '攀枝花', value: 25},{name: '威海', value: 25},{name: '承德', value: 25},{name: '厦门', value: 26},{name: '汕尾', value: 26},{name: '潮州', value: 26},{name: '丹东', value: 27},{name: '太仓', value: 27},{name: '曲靖', value: 27},{name: '烟台', value: 28},{name: '福州', value: 29},{name: '瓦房店', value: 30},{name: '即墨', value: 30},{name: '抚顺', value: 31},{name: '玉溪', value: 31},{name: '张家口', value: 31},{name: '阳泉', value: 31},{name: '莱州', value: 32},{name: '湖州', value: 32},{name: '汕头', value: 32},{name: '昆山', value: 33},{name: '宁波', value: 33},{name: '湛江', value: 33},{name: '揭阳', value: 34},{name: '荣成', value: 34},{name: '连云港', value: 35},{name: '葫芦岛', value: 35},{name: '常熟', value: 36},{name: '东莞', value: 36},{name: '河源', value: 36},{name: '淮安', value: 36},{name: '泰州', value: 36},{name: '南宁', value: 37},{name: '营口', value: 37},{name: '惠州', value: 37},{name: '江阴', value: 37},{name: '蓬莱', value: 37},{name: '韶关', value: 38},{name: '嘉峪关', value: 38},{name: '广州', value: 38},{name: '延安', value: 38},{name: '太原', value: 39},{name: '清远', value: 39},{name: '中山', value: 39},{name: '昆明', value: 39},{name: '寿光', value: 40},{name: '盘锦', value: 40},{name: '长治', value: 41},{name: '深圳', value: 41},{name: '珠海', value: 42},{name: '宿迁', value: 43},{name: '咸阳', value: 43},{name: '铜川', value: 44},{name: '平度', value: 44},{name: '佛山', value: 44},{name: '海口', value: 44},{name: '江门', value: 45},{name: '章丘', value: 45},{name: '肇庆', value: 46},{name: '大连', value: 47},{name: '临汾', value: 47},{name: '吴江', value: 47},{name: '石嘴山', value: 49},{name: '沈阳', value: 50},{name: '苏州', value: 50},{name: '茂名', value: 50},{name: '嘉兴', value: 51},{name: '长春', value: 51},{name: '胶州', value: 52},{name: '银川', value: 52},{name: '张家港', value: 52},{name: '三门峡', value: 53},{name: '锦州', value: 54},{name: '南昌', value: 54},{name: '柳州', value: 54},{name: '三亚', value: 54},{name: '自贡', value: 56},{name: '吉林', value: 56},{name: '阳江', value: 57},{name: '泸州', value: 57},{name: '西宁', value: 57},{name: '宜宾', value: 58},{name: '呼和浩特', value: 58},{name: '成都', value: 58},{name: '大同', value: 58},{name: '镇江', value: 59},{name: '桂林', value: 59},{name: '张家界', value: 59},{name: '宜兴', value: 59},{name: '北海', value: 60},{name: '西安', value: 61},{name: '金坛', value: 62},{name: '东营', value: 62},{name: '牡丹江', value: 63},{name: '遵义', value: 63},{name: '绍兴', value: 63},{name: '扬州', value: 64},{name: '常州', value: 64},{name: '潍坊', value: 65},{name: '重庆', value: 66},{name: '台州', value: 67},{name: '南京', value: 67},{name: '滨州', value: 70},{name: '贵阳', value: 71},{name: '无锡', value: 71},{name: '本溪', value: 71},{name: '克拉玛依', value: 72},{name: '渭南', value: 72},{name: '马鞍山', value: 72},{name: '宝鸡', value: 72},{name: '焦作', value: 75},{name: '句容', value: 75},{name: '北京', value: 79},{name: '徐州', value: 79},{name: '衡水', value: 80},{name: '包头', value: 80},{name: '绵阳', value: 80},{name: '乌鲁木齐', value: 84},{name: '枣庄', value: 84},{name: '杭州', value: 84},{name: '淄博', value: 85},{name: '鞍山', value: 86},{name: '溧阳', value: 86},{name: '库尔勒', value: 86},{name: '安阳', value: 90},{name: '开封', value: 90},{name: '济南', value: 92},{name: '德阳', value: 93},{name: '温州', value: 95},{name: '九江', value: 96},{name: '邯郸', value: 98},{name: '临安', value: 99},{name: '兰州', value: 99},{name: '沧州', value: 100},{name: '临沂', value: 103},{name: '南充', value: 104},{name: '天津', value: 105},{name: '富阳', value: 106},{name: '泰安', value: 112},{name: '诸暨', value: 112},{name: '郑州', value: 113},{name: '哈尔滨', value: 114},{name: '聊城', value: 116},{name: '芜湖', value: 117},{name: '唐山', value: 119},{name: '平顶山', value: 119},{name: '邢台', value: 119},{name: '德州', value: 120},{name: '济宁', value: 120},{name: '荆州', value: 127},{name: '宜昌', value: 130},{name: '义乌', value: 132},{name: '丽水', value: 133},{name: '洛阳', value: 134},{name: '秦皇岛', value: 136},{name: '株洲', value: 143},{name: '石家庄', value: 147},{name: '莱芜', value: 148},{name: '常德', value: 152},{name: '保定', value: 153},{name: '湘潭', value: 154},{name: '金华', value: 157},{name: '岳阳', value: 169},{name: '长沙', value: 175},{name: '衢州', value: 177},{name: '廊坊', value: 193},{name: '菏泽', value: 194},{name: '合肥', value: 229},{name: '武汉', value: 273},{name: '大庆', value: 279}];var geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35],'舟山':[122.207216,29.985295],'齐齐哈尔':[123.97,47.33],'盐城':[120.13,33.38],'赤峰':[118.87,42.28],'青岛':[120.33,36.07],'乳山':[121.52,36.89],'金昌':[102.188043,38.520089],'泉州':[118.58,24.93],'莱西':[120.53,36.86],'日照':[119.46,35.42],'胶南':[119.97,35.88],'南通':[121.05,32.08],'拉萨':[91.11,29.97],'云浮':[112.02,22.93],'梅州':[116.1,24.55],'文登':[122.05,37.2],'上海':[121.48,31.22],'攀枝花':[101.718637,26.582347],'威海':[122.1,37.5],'承德':[117.93,40.97],'厦门':[118.1,24.46],'汕尾':[115.375279,22.786211],'潮州':[116.63,23.68],'丹东':[124.37,40.13],'太仓':[121.1,31.45],'曲靖':[103.79,25.51],'烟台':[121.39,37.52],'福州':[119.3,26.08],'瓦房店':[121.979603,39.627114],'即墨':[120.45,36.38],'抚顺':[123.97,41.97],'玉溪':[102.52,24.35],'张家口':[114.87,40.82],'阳泉':[113.57,37.85],'莱州':[119.942327,37.177017],'湖州':[120.1,30.86],'汕头':[116.69,23.39],'昆山':[120.95,31.39],'宁波':[121.56,29.86],'湛江':[110.359377,21.270708],'揭阳':[116.35,23.55],'荣成':[122.41,37.16],'连云港':[119.16,34.59],'葫芦岛':[120.836932,40.711052],'常熟':[120.74,31.64],'东莞':[113.75,23.04],'河源':[114.68,23.73],'淮安':[119.15,33.5],'泰州':[119.9,32.49],'南宁':[108.33,22.84],'营口':[122.18,40.65],'惠州':[114.4,23.09],'江阴':[120.26,31.91],'蓬莱':[120.75,37.8],'韶关':[113.62,24.84],'嘉峪关':[98.289152,39.77313],'广州':[113.23,23.16],'延安':[109.47,36.6],'太原':[112.53,37.87],'清远':[113.01,23.7],'中山':[113.38,22.52],'昆明':[102.73,25.04],'寿光':[118.73,36.86],'盘锦':[122.070714,41.119997],'长治':[113.08,36.18],'深圳':[114.07,22.62],'珠海':[113.52,22.3],'宿迁':[118.3,33.96],'咸阳':[108.72,34.36],'铜川':[109.11,35.09],'平度':[119.97,36.77],'佛山':[113.11,23.05],'海口':[110.35,20.02],'江门':[113.06,22.61],'章丘':[117.53,36.72],'肇庆':[112.44,23.05],'大连':[121.62,38.92],'临汾':[111.5,36.08],'吴江':[120.63,31.16],'石嘴山':[106.39,39.04],'沈阳':[123.38,41.8],'苏州':[120.62,31.32],'茂名':[110.88,21.68],'嘉兴':[120.76,30.77],'长春':[125.35,43.88],'胶州':[120.03336,36.264622],'银川':[106.27,38.47],'张家港':[120.555821,31.875428],'三门峡':[111.19,34.76],'锦州':[121.15,41.13],'南昌':[115.89,28.68],'柳州':[109.4,24.33],'三亚':[109.511909,18.252847],'自贡':[104.778442,29.33903],'吉林':[126.57,43.87],'阳江':[111.95,21.85],'泸州':[105.39,28.91],'西宁':[101.74,36.56],'宜宾':[104.56,29.77],'呼和浩特':[111.65,40.82],'成都':[104.06,30.67],'大同':[113.3,40.12],'镇江':[119.44,32.2],'桂林':[110.28,25.29],'张家界':[110.479191,29.117096],'宜兴':[119.82,31.36],'北海':[109.12,21.49],'西安':[108.95,34.27],'金坛':[119.56,31.74],'东营':[118.49,37.46],'牡丹江':[129.58,44.6],'遵义':[106.9,27.7],'绍兴':[120.58,30.01],'扬州':[119.42,32.39],'常州':[119.95,31.79],'潍坊':[119.1,36.62],'重庆':[106.54,29.59],'台州':[121.420757,28.656386],'南京':[118.78,32.04],'滨州':[118.03,37.36],'贵阳':[106.71,26.57],'无锡':[120.29,31.59],'本溪':[123.73,41.3],'克拉玛依':[84.77,45.59],'渭南':[109.5,34.52],'马鞍山':[118.48,31.56],'宝鸡':[107.15,34.38],'焦作':[113.21,35.24],'句容':[119.16,31.95],'北京':[116.46,39.92],'徐州':[117.2,34.26],'衡水':[115.72,37.72],'包头':[110,40.58],'绵阳':[104.73,31.48],'乌鲁木齐':[87.68,43.77],'枣庄':[117.57,34.86],'杭州':[120.19,30.26],'淄博':[118.05,36.78],'鞍山':[122.85,41.12],'溧阳':[119.48,31.43],'库尔勒':[86.06,41.68],'安阳':[114.35,36.1],'开封':[114.35,34.79],'济南':[117,36.65],'德阳':[104.37,31.13],'温州':[120.65,28.01],'九江':[115.97,29.71],'邯郸':[114.47,36.6],'临安':[119.72,30.23],'兰州':[103.73,36.03],'沧州':[116.83,38.33],'临沂':[118.35,35.05],'南充':[106.110698,30.837793],'天津':[117.2,39.13],'富阳':[119.95,30.07],'泰安':[117.13,36.18],'诸暨':[120.23,29.71],'郑州':[113.65,34.76],'哈尔滨':[126.63,45.75],'聊城':[115.97,36.45],'芜湖':[118.38,31.33],'唐山':[118.02,39.63],'平顶山':[113.29,33.75],'邢台':[114.48,37.05],'德州':[116.29,37.45],'济宁':[116.59,35.38],'荆州':[112.239741,30.335165],'宜昌':[111.3,30.7],'义乌':[120.06,29.32],'丽水':[119.92,28.45],'洛阳':[112.44,34.7],'秦皇岛':[119.57,39.95],'株洲':[113.16,27.83],'石家庄':[114.48,38.03],'莱芜':[117.67,36.19],'常德':[111.69,29.05],'保定':[115.48,38.85],'湘潭':[112.91,27.87],'金华':[119.64,29.12],'岳阳':[113.09,29.37],'长沙':[113,28.21],'衢州':[118.88,28.97],'廊坊':[116.7,39.53],'菏泽':[115.480656,35.23375],'合肥':[117.27,31.86],'武汉':[114.31,30.52],'大庆':[125.03,46.58]};var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;};
function createmap(id,geoCoordMap,data) {$.getJSON(_ctx + '/map/json/china.json', function () {/*var points = [].concat.apply([], data.map(function (track) {return track.map(function (seg) {return seg.coord.concat([1]);});}));*/var dom = document.getElementById(id);var myChart = echarts.init(dom);var app = {};var option = null;option = {bmap: {center: [104.114129, 37.550339],zoom: 5,roam: true,scaleLimit:{min:1,max:8}/*,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': 'off'}}, {'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': 'off'}}, {'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': 'off'}}, {'featureType': 'boundary','elementType': 'all','stylers': {'color': '#fefefe'}}, {'featureType': 'building','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'label','elementType': 'labels.text.fill','stylers': {'color': '#999999'}}]}*/},series : [{name: 'pm2.5',type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(data),symbolSize: function (val) {return val[2] / 10;},label: {normal: {formatter: '{b}',position: 'right',show: false},emphasis: {show: true}},itemStyle: {normal: {color: 'yellow'}}}/*,{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: function (val) {return val[2] / 10;},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}*/]/*animation: false,bmap: {center: [118.77,32.05],zoom: [1-8],roam: true},visualMap: {show: false,top: 'top',min: 0,max: 5,seriesIndex: 0,calculable: true,inRange: {color: ['blue', 'blue', 'green', 'yellow', 'red']}},*//*series: [{type: 'heatmap',coordinateSystem: 'bmap',data: points,pointSize: 5,blurSize: 6}]*/};if (option && typeof option === "object") {myChart.setOption(option, true);var bmap=myChart.getModel().getComponent('bmap').getBMap();
//            bmap.addControl(new BMap.NavigationControl());bmap.setMaxZoom(8);bmap.setMinZoom(5);/* var b = new BMap.Bounds(new BMap.Point(62.564774, 1.678857),new BMap.Point(139.244707, 55.51742)); // 范围 左下角，右上角的点位置try {    // js中尽然还有try catch方法，可以避免bug引起的错误BMapLib.AreaRestriction.setBounds(bmap, b); // 已map为中心，已b为范围的地图} catch (e) {// 捕获错误异常alert(e);}*/}});}createmap('hybrid', geoCoordMap,data);</script>
</body>

（三）

<div id="main"style="margin:10px auto;border:1px solid #ccc;background: #f2f2f2;"><%--position: relative;height:650px;width:1300px;--%><div id="china_map"style="margin:0 auto;display: block;"></div><%--width:960px;height:550px;position: absolute;top:10px;left:80px;--%><div id="proe_map"style="margin:0 auto;display: none;"></div><%--width:960px;height:550px;position: absolute;top:10px;left:80px;--%><div id="city_map"style="margin:0 auto;display: none;"></div><%--width:960px;height:550px;position: absolute;top:10px;left:80px;--%><%--<div class="retPro" style="z-index:999;position: absolute;top:50px;left:10px;display: block;"><a href="javascript:void(0);" onclick="goBackChinaMap()"style="height:30px;background:#fff;line-height: 30px;border:1px solid #ccc;padding:5px 10px;margin-left:20px;border-radius:5px;cursor: pointer;color:#393939;text-decoration:none;">返回全国</a></div><div class="retPro" style="z-index:999;position: absolute;top:50px;left:110px;display: block;"><a href="javascript:void(0);" onclick="goBackProeMap()"style="height:30px;background:#fff;line-height: 30px;border:1px solid #ccc;padding:5px 10px;margin-left:20px;border-radius:5px;cursor: pointer;color:#393939;text-decoration:none;">返回本省</a></div>--%></div>

$('#main').width($(window).width()-30);
$('#main').height($(window).height()-30);
$('#china_map').width($(window).width()-100);
$('#china_map').height($(window).height()-40);
$('#proe_map').width($(window).width()-100);
$('#proe_map').height($(window).height()-40);
$('#city_map').width($(window).width()-100);
$('#city_map').height($(window).height()-40);//存放上级地图信息
var firstMap={},    //全国secondMap={};   //省市
var chart,          //地图对象timeFn=null,currentLevel=1; //当前地图所在级别：1：全国，2：省市，3：地县var _xiazuanObj={/*** 创建地图* @param mapJsonFile 地图json文件位置* @param mapName 地图名称* @param _id 地图展示div的id* @param _title 地图title* @param _data 地图展示数据*/createMap:function (mapJsonFile,mapName,_id,_title,_data) {$.get(ctx +mapJsonFile, function (mapJson) {// $.get(ctx +'/json/china.json', function (mapJson) {if(mapJson) {if(mapName=='china'){//记录1级数据firstMap={mapJsonFile:mapJsonFile,mapName:mapName,id:_id,title:_title,data:_data,level:1};};//清空地图所在div，重新加载$('#mapdiv').remove();$('#'+_id).append('<div id="mapdiv"></div>');$('#mapdiv').width($(window).width()-100);$('#mapdiv').height($(window).height()-40);echarts.registerMap(mapName, mapJson);chart = echarts.init(document.getElementById('mapdiv'));// chart = echarts.init(document.getElementById(_id));chart.setOption({title: {text: _title,//subtext:'',x: 'center',y: 'top',textAlign: 'left'},tooltip: {trigger: 'item',formatter: function (result) {//回调函数，参数params具体格式参加官方APIreturn result.name + '<br />数据:' + (isNaN(result.value) ? 0 : result.value);}},dataRange: {min: 0,max: 50,splitNumber: 0,text: ['高', '低'],realtime: false,calculable: false,selectedMode: false,// show:false,// itemWidth:10,// itemHeight:60,color: ['lightskyblue', '#f2f2f2']},series: [{type: 'map',map: mapName,//要和echarts.registerMap（）中第一个参数一致roam: true,scaleLimit: {min: 0.5, max: 20},//缩放// mapLocation:{//     y:60// },itemSytle: {emphasis: {label: {show: false}}},label: {normal: {show: true},emphasis: {show: true}},data: _data//dataParam//人口数据：例如[{name:'济南',value:'100万'},{name:'菏泽'，value:'100万'}......]}]});//单击地图下钻chart.off('click');chart.on('click', function (result) {//回调函数，点击时触发，参数params格式参加官方APIif(timeFn)clearTimeout(timeFn);//由于单击事件和双击事件冲突，故单击的响应事件延迟250毫秒执行timeFn = setTimeout(function() {var name = result.name; //地区namevar mapCode =null;var thisData=[{name: '大方县', value: '5'},{name: '金沙县', value: '0'},{name: '织金县', value: '10'},{name: '七星关区', value: '30'},{name: '纳雍县', value: '50'},{name: '赫章县', value: '15'}];var thisId='proe_map';console.info(currentLevel)function contains(arr, obj) {var i = arr.length;while (i--) {if (arr[i] === obj) {return true;}}return false;}if(currentLevel==1){var arr = new Array('南海诸岛');if (contains(arr, name) == false) {mapCode='/json/' + name + '/' + name + '.json'; //地区的json数据}else{return;}}else if(currentLevel==2){var arr = new Array('北京', '上海', '天津', '台湾', '重庆','香港','澳门');if (contains(arr, secondMap.mapName) == false) {mapCode = '/json/' + secondMap.mapName + '/' + name + '.json'; //地区的json数据}else{return;}}elsereturn;if (!mapCode) {toastr.warning('无此区域地图显示');return;}console.info(mapCode)if(currentLevel==1) {currentLevel = 2;//记录2级地图数据secondMap={mapJsonFile:mapCode,mapName:name,id:_id,title:name+'数据总览',data:_data,level:2};}else if(currentLevel==2) currentLevel=3;_xiazuanObj.createMap(mapCode, name,_id,name+'数据总览',_xiazuanObj.getData(name));}, 250);});//双击地图返回上级chart.off('dblclick');chart.on('dblclick',function (params) {//当双击事件发生时，清除单击事件，仅响应双击事件clearTimeout(timeFn);var name = params.name; //地区namevar mapCode =null;var title='';var thisData=null;console.info(currentLevel)if(currentLevel==1) return;else if(currentLevel==2){currentLevel=1;mapCode=firstMap.mapJsonFile;name=firstMap.mapName;title=firstMap.title;thisData=_xiazuanObj.getData(firstMap.mapName);}else if(currentLevel==3){currentLevel=2;mapCode=secondMap.mapJsonFile;name=secondMap.mapName;title=secondMap.title;thisData=_xiazuanObj.getData(secondMap.mapName);}//返回全国地图_xiazuanObj.createMap(mapCode,name,_id,title,thisData );});}else{// toastr.warning('该地区不能下钻')}});},getData:function (mapname) {if(currentLevel==1){var data=[{name:'湖南',value:'5'},{name:'北京',value:'20'},{name:'内蒙古',value:'10'},{name:'贵州',value:'30'},{name:'福建',value:'50'},{name:'甘肃',value:'15'},{name:'云南',value:'33'},{name: '南海诸岛',value: 0// , itemStyle:{ normal:{opacity:0,label:{show:false}}}}];return data;}else if(currentLevel==2){var thisData=[{name: '淮北市', value: '5'},{name: '宿州市', value: '0'},{name: '黄山市', value: '10'},{name: '合肥市', value: '30'},{name: '蚌埠市', value: '50'},{name: '滁州市', value: '15'}];return thisData;}else if(currentLevel==3){var thisData=[{name: '濉溪县', value: '5'},{name: '杜集区', value: '0'},{name: '烈山区', value: '10'},{name: '相山区', value: '30'}];return thisData;}}}window.onload=function () {_xiazuanObj.createMap('/json/china.json','china','china_map','全国数据总览',_xiazuanObj.getData('china'));
}

----------------------------------------华丽的分割线--------------------------------------------------------

欢迎转载，转载请注明出处。

git地址：https://github.com/Jessica-bug/mapecharts/tree/master

Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻相关推荐

echarts制作多个纵轴的折线图
实现效果: 页面代码如下: <script type="text/javascript"> $(function (){var myChart = echarts.in ...
Matlab——图形绘制——三维立体图形剔透玲珑球动态图——彗星状轨迹图
三维绘图函数三维绘制工具函数view 实例:三维螺旋线 >> t=0:pi/50:10*pi; plot3(sin(t),cos(t),t) grid %添加网格 plot3可以画出 ...
matlab三维螺旋,Matlab——图形绘制——三维立体图形剔透玲珑球动态图——彗星状轨迹图...
三维绘图函数三维绘制工具函数view 实例:三维螺旋线 >> t=0:pi/50:10*pi; plot3(sin(t),cos(t),t) grid %添加网格 plot3可以画出空 ...
用Echarts 制作一个数据库表的关联关系图（一）
一.背景项目中要开发一个表示数据库表关联关系的图,在选型时费了些功夫.先后尝试了几种方案,Canvas和SVG(不好用),jsplumb(适合做流程图,太重),最终当看到echarts 中的grap ...
python +flask 制作一个实时热搜采集接口加入百度热搜和微博热搜并实时滚动代码嵌入到你的帝国CMS或WP博客或任意框架网站
示例帝国CMS网站效果: 超级简单的实现,两个步骤搞定: 1.写python采集接口,采集数据. 接口代码:需要安装对应的库. # coding=utf-8 import re import urll ...
SUMO轨迹图的绘制和traci接口的简单使用
文章目录前言一.SUMO绘制轨迹图二.Traci接口的简单使用 1.引入库 2.启动SUMO 3.Traci接口的简单调用总结前言本人小白,blog主要记录本人的一些学习过程和存在的疑惑, ...
百度离线地图示例之十二：混合图(街道图、卫星图)实现路径及打点
前言介绍: 主要是基于v3.0的API版本进行的离线,纯内网可操作,基本上实现了现有90%以上的功能点,能兼容jpg和png格式的瓦片图层,实现了原生和基于Vue两个版本(包含常用的55个示例),文末 ...
vue + echarts + ( bmap) 百度地图实现公交、骑行、车辆轨迹图
vue + echarts + ( bmap) 百度地图实现公交.骑行.车辆轨迹图最终目标最终目标:个性化的实现公交路线图先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看码起 ...
echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...

Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻

（一）态势图、热点图、轨迹图及全屏功能

（二）改普通地图为百度底图

（三）三级下钻地图

Echarts制作态势图、热点图、轨迹图，使用百度底图，地图下钻相关推荐

最新文章

热门文章