Echarts结合百度地图API

下面的代码运用到了Echarts 和百度地图API,地图的样式自定义的。(效果图在最下边)
运用到了百度API中的自定义控件，监听事件addEventListener(),添加控件addControl(),添加覆盖物addOverlay()
移除覆盖物removeOverlay()

  //运用Echarts图标表的标准步骤首先需要初始化一个Echarts对象，可以简单理解为定义显示图标显示的位置。<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/jquery/jquery.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=nfeXoUbpxqp5FTKyxtcLkEiKNaAGpa8H"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript">var dom = document.getElementById("allmap");var myChart = echarts.init(dom);var geoCoordMap = {'牛街北口':[116.370029,39.895302],'牛街南口':[116.370119,39.88933],'四条路口':[116.369055,39.892354],'输入胡同':[116.372527,39.892465],'吐鲁番餐厅':[116.370506,39.893743],'西城区牛街街道公共服务大厅':[116.370434,39.893221],'牛街清真超市':[116.369855,39.89312],'聚宝源':[116.369819,39.892671],'老城伊':[116.369891,39.891169],'圣芳商厦':[116.369742,39.890851],'牛街礼拜寺':[116.37131,39.891591],};var BJData=[];for(var x in geoCoordMap){
//        if(x=='牛街礼拜寺')
//            continue;BJData.push([{name: x,value: Math.random()*100}, {name: '牛街礼拜寺'}])}var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[0].name,toName: dataItem[1].name,coords: [fromCoord, toCoord],});}}return res;};var convertData2 = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[1].name];var toCoord = geoCoordMap[dataItem[0].name];if (fromCoord && toCoord) {res.push({fromName: dataItem[1].name,toName: dataItem[0].name,coords: [fromCoord, toCoord]});}}return res;};var covertColor = function(data){var value= data[1].value;var result = 'aqua';if(value>80){result = '#ff3333';}else if(value>60){result = 'orange';}else if(value>40){result = 'yellow';}else if(value>60){result = 'lime';}return result;};var color = ['#56e88c', '#ffa022'];var series = [];[['礼拜寺', BJData]].forEach(function (item, i) {series.push({name: item[2],type: 'lines',zlevel: 2,coordinateSystem: 'bmap',effect: {show: true,period: 6,trailLength: 0.1,symbol:'arrow',symbolSize: 10},lineStyle: {normal: {color: '#60ff44',width: 2,opacity: 0.4,curveness: 0.2}},//这个属性的作用是对图标的数据的说明，如同公告栏一样，他的强大之处在于可以自定义显示的样式tooltip : {trigger: 'item',formatter: function (obj) {var shtml = '';var tempKey = 0;if (obj.data.fromName == '牛街北口'){tempKey = 1;}else if (obj.data.fromName == '牛街南口'){tempKey = 2;}else if (obj.data.fromName == '四条路口'){tempKey = 3;}else if (obj.data.fromName == '输入胡同'){tempKey = 4;}for (var key in peopleOut.data){if (key == tempKey){shtml+= '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'shtml+= obj.data.fromName + '至'+obj.data.toNameshtml+= '</div>'shtml+='流入： ' + peopleIn.data[key] + '人<br>'}else continue;}return shtml;}},data: convertData(item[1])},{name: item[1],type: 'effectScatter',coordinateSystem: 'bmap',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}',textStyle:{fontSize:18}}},symbolSize: function (val) {return 3 + val[2] / 10;},itemStyle: {normal: {color: '#FBF90E',textStyle:{fontSize:1}}},tooltip : {trigger: 'item',formatter: function (obj) {var shtml ='';var tempKey = 0;if (obj.data.name == '牛街北口'){tempKey = 1;}else if (obj.data.name == '牛街南口'){tempKey = 2;}else if (obj.data.name == '四条路口'){tempKey = 3;}else if (obj.data.name == '输入胡同'){tempKey = 4;}for (var key in peopleIn.data){if (key == tempKey){shtml+= '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'shtml+= obj.data.name + '   人流量'shtml+= '</div>'shtml+= '流入： ' +peopleIn.data[key] + '人<br>'shtml+='流出： ' + peopleOut.data[key]+ '人<br>'if (peopleIn.data[key] - peopleOut.data[key] < 0)shtml+='街道人数： ' + (peopleOut.data[key] - peopleIn.data[key])+ '人'elseshtml+='街道人数： ' + (peopleIn.data[key] - peopleOut.data[key])+ '人'}else continue;}return shtml;}},data: item[1].map(function (dataItem) {return {name: dataItem[0].name,value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])};})},{name: item[2],type: 'lines',zlevel: 2,coordinateSystem: 'bmap',effect: {show: true,period: 6,trailLength: 0.1,symbol:'arrow',symbolSize:10},lineStyle: {normal: {color: '#ff3333',width: 2,opacity: 0.4,curveness: 0.3}},tooltip : {trigger: 'item',formatter: function (obj) {var shtml = '';var tempKey = 0;if (obj.data.toName == '牛街北口'){tempKey = 1;}else if (obj.data.toName == '牛街南口'){tempKey = 2;}else if (obj.data.toName == '四条路口'){tempKey = 3;}else if (obj.data.toName == '输入胡同'){tempKey = 4;}for (var key in peopleIn.data){if (key == tempKey){shtml+= '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'shtml+= obj.data.toName + '至'+obj.data.fromNameshtml+= '</div>'shtml+='流出： ' + peopleOut.data[key] + '人<br>'}else continue;}return shtml;}},data: convertData2(item[1])});});option = {backgroundColor: 'black',title : {left: 'center',textStyle : {color: 'white'}},tooltip : {trigger: 'item',},//此属性是作用是定义地图的样式bmap: {center:  [116.370793,39.891444],zoom: 18,roam: true,mapStyle: {'styleJson': [{'featureType': 'water','elementType': 'all','stylers': {'color': '#031628'}},{'featureType': 'land','elementType': 'geometry','stylers': {'color': '#000102'}},{'featureType': 'highway','elementType': 'all','stylers': {'visibility': 'off'}},{'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'arterial','elementType': 'geometry.stroke','stylers': {'color': '#0b3d51'}},{'featureType': 'local','elementType': 'geometry','stylers': {'color': '#000000'}},{'featureType': 'railway','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'railway','elementType': 'geometry.stroke','stylers': {'color': '#08304b'}},{'featureType': 'subway','elementType': 'geometry','stylers': {'lightness': -70}},{'featureType': 'building','elementType': 'geometry.fill','stylers': {'color': '#000000'}},{'featureType': 'all','elementType': 'labels.text.fill','stylers': {'color': '#857f7f'}},{'featureType': 'all','elementType': 'labels.text.stroke','stylers': {'color': '#000000'}},{'featureType': 'building','elementType': 'geometry','stylers': {'color': '#022338'}},{'featureType': 'green','elementType': 'geometry','stylers': {'color': '#062032'}},{'featureType': 'boundary','elementType': 'all','stylers': {'color': '#465b6c'}},{'featureType': 'manmade','elementType': 'all','stylers': {'color': '#022338'}},{'featureType': 'label','elementType': 'all','stylers': {'visibility': 'off'}}]}},series: series};//Echarts图层显示的内容定义在了option属性中，通过setOption()属性将内容赋值到Echarts对象上。if (option && typeof option === "object") {myChart.setOption(option, true);//var bmap =  new BMap.Map("container",{enableMapClick: false});//获取地图对象var bmap = myChart.getModel().getComponent('bmap').getBMap();//这个方法在此的作用是暴力的关掉的地图上点击某位置后弹出的覆盖窗口setInterval(function(){bmap.closeInfoWindow();}, 1);ToolbarControl.prototype = new BMap.Control();ToolbarControl.prototype.initialize = function(map){var div = document.createElement('DIV');div.style.cssText = 'padding:4px;clear:both;display:inline-block;';var shtml = '';shtml += '<div class="btn-group">';shtml += '<img style="cursor:pointer" src="../resources/img/camera.png" onclick="showMonitor()"><br>';shtml += '<img style="cursor:pointer" src="../resources/img/Aalertor3.png" onclick="alertorchange()" id="alertor">';shtml += '</div>';div.innerHTML = shtml;map.getContainer().appendChild(div);return div;}
//        bmap.setMapType(BMAP_PERSPECTIVE_MAP);     //修改地图类型为3D地图
//        bmap.setCurrentCity("北京市");  //设置当前城市bmap.addControl(new BMap.MapTypeControl());bmap.addControl(new ToolbarControl());}// 自定义控件(此控件的目的是在地图上添加覆盖物)function ToolbarControl(){this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;//定义覆盖物在地图上的位置(右上方)this.defaultOffset = new BMap.Size(10, 40);//定义覆盖物在地图上的偏移量}// 自定义控件function ToolbarControl2(){this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;this.defaultOffset = new BMap.Size(10, 150);}var markerArray = [];function showMonitor(){if(monitorShow){var points = [[116.370102,39.889124],[116.370022,39.89505],[116.372525,39.892665],[116.368753,39.892350],[116.370492,39.893951],[116.371705,39.891719],[116.370425,39.89339],[116.369581,39.893127],[116.369612,39.892702],[116.369576,39.891221],[116.369536,39.89083]];for( var i = 0;i < points.length; i++){var myIcon = new BMap.Icon("../resources/img/camera.png", new BMap.Size(60, 60), {// 指定定位位置offset: new BMap.Size(10, 25),});var point = new BMap.Point(points[i][0],points[i][1]);var marker = new BMap.Marker(point,{icon: myIcon});if (points[i][0] == 116.371705){//添加监听事件(属于百度API)marker.addEventListener("click", function(){var bmap = myChart.getModel().getComponent('bmap').getBMap();ToolbarControl2.prototype = new BMap.Control();ToolbarControl2.prototype.initialize = function(map){var div = document.createElement('DIV');div.style.cssText = 'padding:4px;clear:both;display:inline-block;position:relative;';var shtml = '';shtml += '<div onclick="remove();"  style="color:#FFF;text-align:right;font-size:18px;font-weight:900;height:30px;width:30px;position:absolute;top:20px;left:450px;z-index:20; cursor:pointer;">X</div><video src="../resources/viedo/viedo2.mp4" width="480" height="360" controls="controls"  style="margin-top:40px;"></video><br><video src="../resources/viedo/viedo1.mp4" width="480" height="360" controls="controls"></video>';div.innerHTML = shtml;map.getContainer().appendChild(div);return div;}bmap.addControl(new ToolbarControl2())});}else if (points[i][0] == 116.370102){marker.addEventListener("click", function(){var bmap = myChart.getModel().getComponent('bmap').getBMap();ToolbarControl2.prototype = new BMap.Control();ToolbarControl2.prototype.initialize = function(map){var div = document.createElement('DIV');div.style.cssText = 'padding:4px;clear:both;display:inline-block;position:relative;';var shtml = '';shtml += '<div onclick="remove();"  style="color:#FFF;text-align:right;font-size:18px;font-weight:900;height:30px;width:30px;position:absolute;top:20px;left:450px;z-index:20; cursor:pointer;">X</div><video src="../resources/viedo/viedo3.mp4" width="480" height="360" controls="controls" style="margin-top:40px;"></video><br>';div.innerHTML = shtml;map.getContainer().appendChild(div);return div;}bmap.addControl(new ToolbarControl2())});}else{}markerArray.push(marker);//此方法的作用是在地图上添加覆盖物(属于百度API)bmap.addOverlay(marker);}monitorShow = false;}else{for (var j = 0; j < markerArray.length; j++){bmap.removeOverlay(markerArray[j]);}monitorShow = true;}}function alertorchange(){if (alertorShow){$("#alertor").attr("src","../resources/img/Aalertor.gif");alertorShow = false;}else {$("#alertor").attr("src","../resources/img/Aalertor3.png");alertorShow = true;}}function remove(){$(this).remove();$("video").remove();}
</script>

Echarts结合百度地图API相关推荐

Echarts结合百度地图API绘制热力图
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图,在将其与百度地图结合的过程中遇到了一些问题,现将其过程与解决方案记录下,以供日后参考.echarts中结合百度地图API的热力 ...
echarts引入百度地图API，设置bmap属性问题
echarts option里的bmap属性结构如下: bmap: {center: [117.239346, 31.824116], // 当前视角中心位置的坐标zoom: 12,roam: tru ...
vue中使用echarts和百度地图实现飞机迁徙图
在vue-cli生成的项目中使用echarts和百度地图api实现飞机迁徙图,当然也可以实现其他效果. 1. 准备项目安装echarts 在已经生成的vue项目根目录npm install echa ...
数据视化Echarts+百度地图API实现市县区级下钻
开始这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
前端（echarts+百度地图api）后端（python+flask）完成绵阳餐饮消费数据可视化系统
一.可视化要求针对团购网站餐饮类消费数据的可视分析系统设计与开发大多数消费者在选择团购网站消费后会做出相应评价,从而产生海量的交易数据.这些数据包含了消费者对饮食比较全面的主观性评价和量化评分,因 ...
用百度地图API分析打交通大数据
百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...
Echarts与百度地图结合实现风场矢量图相关问题
这是部分js代码,代码里有一些标注,文章最后有相关问题,请耐心阅读,欢迎指导意见留言 function loadmap() { **这段是风场数据处理调用的方法,可以暂时忽略**// https:// ...
C#调用百度地图API，根据地名获取经纬度geocoding
前言公司的一个内部网站维护,需要根据地名填写经纬度,最终同echarts生成地图. 之前数据比较少,直接经纬度查询查的,https://jingweidu.bmcx.com/ 现在数据越来越多,手动 ...

Echarts结合百度地图API

Echarts结合百度地图API

Echarts结合百度地图API相关推荐

最新文章

热门文章