实现百度迁徙地图。和标签点击事件

dap.prototype.getIngoingData = function() {
		var that = this;
		$.ajax({
					url : 'dapController/geoCoordMap.do',
					dataType : 'json',
					type : 'post',
					data : {
						regionid : this.regionid
					},
					success : function(res) {
						if (res.success && res.data != null) {
							var obj = res.data;
							var geoCoordMap = {}, data = [],chuxiaqu=[], sum_clzs = 0, temp = [], map_table = [ "进入辖区排名" ];
							for ( var i = 0, len = obj.length; i < len; i++) {
								var clzs = obj[i].clzs;
								var mc=obj[i].qhmc;
								var xx=geoCoordProvince[mc];
								if(xx==null){
									continue;
								}
								var x = xx[0];
								var y = xx[1];
								var qhmc = xx[2];
								sum_clzs += clzs;
								temp.push({
									name : qhmc,
									value : clzs
								});
								geoCoordMap[qhmc] = [ x, y ];
								data.push([ {
									name : qhmc
								}, {
									name : '湖南',
									value : clzs
								} ]);
								chuxiaqu.push([ {
									name : '湖南',
									value : clzs
									
								}, {
									name : qhmc
								} ]);
							}
							geoCoordMap['湖南'] = [ 112.979352788,
							                      28.2134782309 ];
							that.setGeoCoordMap(geoCoordMap, data,chuxiaqu);
							var geo_height = $('#geo').height()
									- $('#geoContainer').height() - 17;
							// 表头占1行
							var sizes = Math.round(geo_height / 22) - 1;

							for ( var i = 0, len = temp.length; i < len; i++) {
								var name = temp[i].name;
								var value = temp[i].value;
								var _value = (value / sum_clzs * 100)
										.toFixed(2);
								if (i < sizes) {
									map_table.push(""
													+ (i + 1)
													+ '.'
													+ ""
													+ name
													+ ""
													+ toThousands(value)
													+ ' 辆'
													+ "占比"
													+ _value
													+ ' %'
													+ "");
								} else {
									break;
								}
							}
							$('#map_table').empty();
							$('#map_table')
									.html(
											'' + map_table.join('')
													+ '');
						}
					},
					error : function() {
						layer.msg(that.errorMsg);
					}
				});
	};

	/**
	 * 车辆迁入地图
	 */
	dap.prototype.setGeoCoordMap = function(geoCoordMap, data,chuxiaqu) {
		var option = null;

		var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

		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 color = [ '#a6c84c', '#ffa022', '#46bee9' ];
		var series = [];
		[ [ '进辖区', data ],['出辖区',chuxiaqu] ].forEach(function(item, i) {
			series.push({
				name : item[0],
				type : 'lines',
				zlevel : 1,
				effect : {
					show : true,
					period : 6,
					trailLength : 0.7,
					color : '#fff',
					symbolSize : 3
				},
				lineStyle : {
					normal : {
						color : color[i],
						width : 0,
						curveness : 0.2
					}
				},
				data : convertData(item[1])
			}, {
				name : item[0],
				type : 'lines',
				zlevel : 2,
				symbol : [ 'none', 'arrow' ],
				symbolSize : 0,
				effect : {
					show : true,
					period : 6,
					trailLength : 0,
					symbolSize : 0
				},
				lineStyle : {
					normal : {
						color : color[i],
						width : 1,
						opacity : 0.6,
						curveness : 0.2
					}
				},
				data : convertData(item[1])
			}, {
				name : item[0],
				type : 'effectScatter',
				coordinateSystem : 'geo',
				zlevel : 10,
				rippleEffect : {
					brushType : 'stroke'
				},
				itemStyle : {
					normal : {
						color : color[i]
					}
				},
				tooltip : {
					show : true,
					formatter : function(item) {
						return item.name + ' : ' + item.value[2] + '辆';
					}
				},
				data : item[1].map(function(dataItem) {
					//根据标签序号实现迁入迁出方向和标记点的更改
					if(i==1){
						return {
							name : dataItem[1].name,
							value : geoCoordMap[dataItem[1].name]
									.concat([ dataItem[0].value ])
						};
					}else{
						return {
							name : dataItem[0].name,
							value : geoCoordMap[dataItem[0].name]
									.concat([ dataItem[1].value ])
						};
					}
				})
			});
		});

		option = {
			backgroundColor : '',
			legend : {
				orient : 'vertical',
				top : 'bottom',
				left : 'right',
				data : [ '进辖区', '出辖区' ],
				textStyle : {
					color : '#fff'
				},
				selectedMode : 'single',
				selected :{
					'出辖区':true,
					'进辖区':false
				}
			},
			tooltip : {
				show : true,
				trigger : 'item'
			},
			geo : {
				map : 'china',
				label : {
					emphasis : {
						show : false
					}
				},
				roam : true,
				itemStyle : {
					normal : {
						areaColor : '#323c48',
						borderColor : '#404a59'
					},
					emphasis : {
						areaColor : '#2a333d'
					}
				}
			},
			series : series
		};
		if (option && typeof option === "object") {
			this.map_Chart.setOption(option, true);
			this.map_Chart.on('legendselectchanged', function(obj) {//echarts  api标签切换事件。
			        var selected = obj.selected;
			        var legend = obj.name;
			        console.log(selected+"--"+legend);
			        
			        // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event,导致本函数重复运行
			        // 使得 无 selected 对象
			        if (selected != undefined) {
			            if (isFirstUnSelect(selected)) {
			                triggerAction('legendToggleSelect', selected);
			            } else if (isAllUnSelected(selected)) {
			                triggerAction('legendSelect', selected);

			            }
			        }
			})
		}

	};

↑ 看注释内容

你可能感兴趣的:(js,前端)