第十四 标签标注

效果

数据结构

getQyHtXqTj: {
	"msg": "操作成功",
	"flag": true,
	"rows": [{
		"num": 133,
		"my": 0,
		"rmb": 0,
		"name": "名称",
		"code": 2,
		"x": 8.092329,
		"y": 10.137400
	}, {
		"num": 64,
		"my": 0,
		"rmb": 0,
		"name": "名称",
		"code": 3,
		"x": 24.778300,
		"y": -20.000000
	}],
	"status": "C00000"
},

1.请求数据

// 请求列表数据接口查询
	getDate: function() {
		var options = new Object();
		options.url = "/manage-api/IndexTjfx1Controller/getQyHtXqTj";
		options.type = "GET";
		options.data = ak_qysybtj.temp;
		options.errorback = akglobe_config.errBack;
	 	options.callback = function(data) {
			ak_qysybtj.callBackGET(data);
		}
		// 如果是测试环境 使用假数据
		if(parent.typep002==2){
			ak_qysybtj.callBackGET(ak_ztqg.getQyHtXqTj);
		}else{
			akglobe_config.ajaxQuery(options);
		}
	},
	callBackGET:function(data){
		if(!data) return;
		ak_qysybtj.initList(data);	// 初始化 html 内容
		parent.ak_gjtj.area_qysyb2_callback(data);	// 区域事业部的图层 	
	},

因点击事件后需要先初始化右侧页面,在初始化标注,所以这里不是直接调用的方法,而是父级的方法

 parent.ak_gjtj.area_qysyb2_callback(data);    // 区域事业部的图层     

2.渲染数据

top2ClickCallBack: function(data, type) {
		console.log(data);
		console.log(type);
		
		// ak_right_sybList.init(data);// 初始化区域 事业部右侧列表
		var arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5",
			"rgb(0,244,188)", "#139FF0"
		];
		var DEFAULT_STYLE22 = {
			position: "absolute",
			top: "0",
			left: "0",
			width: "120px",
			height: "120px"
		};
		var result = data.rows; // config.demodata_Department;
		var cities = [];
		for (var i = 0; i < result.length; i++) {
			var db = result[i];
			var name = db.name + "_" + db.num + "个"; // 显示文字
			var obj = new Object();
			obj.name = db.name;
			obj.code = db.code; // 区域事业部的编码
			// obj.address=db.address;
			obj.lat = db.x;
			obj.lng = db.y;
			obj.addtypemarker = config.addtypemarker.ceccDz;
			var position = new Cesium.Cartesian3.fromDegrees(obj.lat, obj.lng, 60)
			var options = new Object();
			options.style = DEFAULT_STYLE22;
			// var divicon = new DivIcon(viewer, position,obj.name)
			var json = JSON.stringify(db);
			if (i === 0) { // 红色标注  第一名
				// flag=ak_flagLabel.addLableDanger(obj.lat,obj.lng,name);
				var option = new Object();
				option.officetY = flagTop;
				option.css = "FlagLabelContent_c1";
				option.attr = json;
				option.callback = ak_left_click3.flagclick;
				flag = new FlagLabel2(viewer, [obj.lat, obj.lng], name, "danger", option);
			} else { // 蓝色标注 
				//  flag=ak_flagLabel.addLable(obj.lat,obj.lng,name);
				var option = new Object();
				option.officetY = flagTop;
				option.css = "FlagLabelContent_c2";
				option.attr = json;
				option.callback = ak_left_click3.flagclick;
				flag = new FlagLabel2(viewer, [obj.lat, obj.lng], name, "danger", option);
			}
			ak_left_click3.flags.push(flag);
		}
	},
flagclick: function(attr) {
		console.log('点击')
		// alert(attr);
		//  此处的传参 和  表格的传参不一样  需要转换成json 
		var json = JSON.parse(attr);
		var sgzt_type2 = localStorage.getItem('sgzt_type2');
		if(sgzt_type2 == 1){
			// var projectStatus = akglobe_config.underConstruction;
			// if(projectStatus){
			// 	projectStatus = projectStatus.join("','");
			// 	projectStatus = "'" + projectStatus + "'";
			// }
			json.projectstatus = akglobe_config.underConstruction;
		}else if(sgzt_type2 == 2){
			var year = (new Date).getFullYear();
			json.startTime = ak_right.changeDateFormat2(new Date(year, 0, 1).getTime()).trim();
			json.endTime = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime()).trim();
		}
		// alert(json);
		ak_right_sybgj.init(json, false);
		ak_right_sybgj.getXmData(json);
	},

 以下代码是根据数据内容来显示不同颜色的标签

样式是 option.css = "FlagLabelContent_c1";可改变FlagLabelContent_c1的内容来改变样式

var json = JSON.stringify(db);
            if (i === 0) { // 红色标注  第一名
                // flag=ak_flagLabel.addLableDanger(obj.lat,obj.lng,name);
                var option = new Object();
                option.officetY = flagTop;
                option.css = "FlagLabelContent_c1";
                option.attr = json;
                option.callback = ak_left_click3.flagclick;
                flag = new FlagLabel2(viewer, [obj.lat, obj.lng], name, "danger", option);
            } else { // 蓝色标注 
                //  flag=ak_flagLabel.addLable(obj.lat,obj.lng,name);
                var option = new Object();
                option.officetY = flagTop;
                option.css = "FlagLabelContent_c2";
                option.attr = json;
                option.callback = ak_left_click3.flagclick;
                flag = new FlagLabel2(viewer, [obj.lat, obj.lng], name, "danger", option);
            }

flagLable的点击事件,点击后所触发的方法

option.callback = ak_left_click3.flagclick;  //ak_left_click3.flagclick;在这里可是方法而不是变量

3.清除

clearTop2: function() {
		for (var i = 0; i < this.arrCharts1.length; i++) {
			var obj = this.arrCharts1[i];
			obj.destroy();
		}
		this.arrCharts1 = [];

		for (var i = 0; i < ak_left_click3.flags.length; i++) {
			var obj = ak_left_click3.flags[i];
			obj.destroy();
		}
	},