第十五章 标签标注点击后的事件

效果

数据结构

 

TJiGouContractControllerList: {
	"total": 67,
	"rows": [{
		"id": 1489,
		"contractnumber": "代号",
		"projectchinesename": "名称",
		"projectforeignname": "英文名称",
		"continentcode": "0",
		"countrycode": "0",
		"statisticsonecode": "0",
		"statisticstwocode": "0",
		"contracttype": "0",
		"aggreementnumber": "0",
		"contractingtype": "0",
		"technologystandard": "0,1",
		"projectproperties": "2",
		"contractorgname": "名称",
		"contractorgid": "2",
		"contractdate": "2023-03-21",
		"maincontent": "描述",
		"financesource": "[{financeOneSourceCode=1, financeTwoSourceCode=null, financeSourcePrecent=100, remark=null}]",
		"ourdollar": 0,
		"ourrmb": 0,
		"ownerforeignname": "0",
		"ownerchinesename": "0",
		"remark": "",
		"leadorgcode": "0",
		"totalusd": 0,
		"totalrmb": 0,
		"jigouid": "0",
		"iscashremit": 1,
		"jgId": null,
		"approvaldate": "2023-07-31",
		"statisticsdate": "2023-07-25",
		"typelevelonecode": "0",
		"typeleveltwocode": "0",
		"countryname": "名称",
		"continentname": "名称",
		"contractingname": "名称",
		"typelevelonename": null,
		"typeleveltwoname": null,
		"projectpropertiesname": null,
		"oneroad": null,
		"longitude": null,
		"latitude": null,
		"orgfullname": null,
		"projectstatusname": null,
		"isgreatproject": null,
		"ismajorproject": null,
		"projectId": null,
		"projectZjId": null,
		"areaName": "名称"
	}, {
		"id": 1480,
		"contractnumber": "名称",
		"projectchinesename": "名称",
		"projectforeignname": "名称",
		"continentcode": "01",
		"countrycode": "41",
		"statisticsonecode": "13",
		"statisticstwocode": "1301",
		"contracttype": "contract",
		"aggreementnumber": "",
		"contractingtype": "4",
		"technologystandard": "4",
		"projectproperties": "0",
		"contractorgname": "名称",
		"contractorgid": "0",
		"contractdate": "2023-03-15",
		"maincontent": "描述",
		"financesource": "[{financeOneSourceCode=1, financeTwoSourceCode=null, financeSourcePrecent=100, remark=null}]",
		"ourdollar": 976.15,
		"ourrmb": 6704.2,
		"ownerforeignname": "Aldar",
		"ownerchinesename": "名称",
		"remark": "名称",
		"leadorgcode": "",
		"totalusd": 0,
		"totalrmb": 0,
		"jigouid": "0",
		"iscashremit": 1,
		"jgId": null,
		"approvaldate": "2023-06-30",
		"statisticsdate": "2023-06-25",
		"typelevelonecode": "0",
		"typeleveltwocode": "0",
		"countryname": "名称",
		"continentname": "名称",
		"contractingname": "名称",
		"typelevelonename": null,
		"typeleveltwoname": null,
		"projectpropertiesname": null,
		"oneroad": null,
		"longitude": null,
		"latitude": null,
		"orgfullname": null,
		"projectstatusname": null,
		"isgreatproject": null,
		"ismajorproject": null,
		"projectId": null,
		"projectZjId": null,
		"areaName": "名称"
	}],
	"totalMap": {
		"projectNum": 61,
		"totalOurDollar": 0,
		"totalOurRmb": 0
	}
},

1.当触发点击时

触发点击事件后调用方法

点击事件方法 

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);
	},

2.标注 

他flagLable点击事件后进行了点和点连线的标注,所以下面展现了两种方式

2.1标注点

获取数据

getXmData: function(json) {
		console.log(json);
		var code = json.code;
		var temp = {
			areaId: code
		};
		var sgzt_type2 = localStorage.getItem('sgzt_type2');
		if(sgzt_type2 == 1){
			var projectStatus = akglobe_config.underConstruction;
			if(projectStatus){
				projectStatus = projectStatus.join("','");
				projectStatus = "'" + projectStatus + "'";
			}
			temp.projectStatus = projectStatus;
		}else if(sgzt_type2 == 2){
			var year = (new Date).getFullYear();
			temp.statisticsdateBegin = ak_right.changeDateFormat2(new Date(year, 0, 1).getTime());
			temp.statisticsdateEnd = ak_right.changeDateFormat2(new Date(year, 11, 31).getTime());
		}
		var options = new Object();
		// options.url = "/manage-api/TJwProjectController/list";
		options.url = "/manage-api/TJiGouContractController/list";
		options.type = "get";
		options.data = temp;
		options.errorback = akglobe_config.errBack;
		 
		options.callback = function(data) {
			ak_right_sybgj.callBackGET(data);
		}
		// 如果是测试环境 使用假数据
		if(typep002==2){
			ak_right_sybgj.callBackGET(ak_ztqg.TJiGouContractControllerList);
		}else{
			akglobe_config.ajaxQuery(options);
		}
	},
	
	callBackGET:function(data){ 
		ak_right_sybgj.markerQysybXm(data);
	},

进行标注

	markerQysybXm: function(data) {
		this.clearBillboards();
		this.billboards = scene.primitives.add(new Cesium.BillboardCollection());
		var comlist = data.rows;
		var length = comlist.length;
		var table = [];
		for (var i = 0; i < length; i++) {
			var db = comlist[i];
			var id = db.projectZjId;	
			var obj = new Object();
			obj.id = "ztqgGj;" + config.addtypemarker.ceccXm + ";" + db.projectchinesename + ";" + id + ";" + db
				.projectId;
			obj.name = db.projectName;
			obj.address = db.countryname;
			obj.lat = db.longitude;
			obj.lng = db.latitude;

			var isxy = config.isXyobj(obj.lat, obj.lng);
			if (!isxy) {
				continue;
			}
			var src = config.markerImgProejct; //mark2
			obj.src = src;
			obj.width = config.markerImgProejctWidth;
			obj.height = config.markerImgProejctHeight;
			obj.addtypemarker = config.addtypemarker.ceccXm;
			ak_pm_tool.addPoint(this.billboards, obj);
		}
	},

清除点位

clearBillboards: function() {
		viewer.scene.primitives.remove(this.billboards);
	}

2.2连线点

说明:这是多点连线是根据flagLable的点去查询相关的数据的点位.

flagLable的点的进行添加光波

var waveCircle = new WaveCircle(viewer);
		    var obj = {};
			obj.x =  db.x;
			obj.y =  db.y;
			obj.color = Cesium.Color.YELLOW;
			waveCircle.createByPosition({
				lng: obj.x,
				lat: obj.y,
				radius: 200000,
				color: obj.color
			});
			ak_commonQuery.waveCircleArr.push(waveCircle);

获取数据

// 请求列表数据接口查询
	getDate: function() {
		var options = new Object();
		options.url = "/manage-api/IndexTjfx1Controller/getQysybtj";
		options.type = "GET";
		options.data = ak_qysybtj_gjtj.temp;
		options.errorback = akglobe_config.errBack;
		options.callback = function(data) {
		  ak_qysybtj_gjtj.callBackGET(data);
		}
		 
		// 如果是测试环境 使用假数据
		if(parent.typep002==2){
			ak_qysybtj_gjtj.callBackGET(ak_ztqg.getQysybtj);
		}else{
			akglobe_config.ajaxQuery(options);
		}

	},
	
	callBackGET:function(data){
		if(!data) return;
		ak_qysybtj_gjtj.initList(data);	// 初始化 html 内容
		parent.ak_right_sybgj.getAllByNameGoods(data.rows, true); // 区域和国家连线标注
	},
	

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

parent.ak_right_sybgj.getAllByNameGoods(data.rows, true); // 区域和国家连线标注

标注一点连多点

进行标注材质

htmlTable: function(r) {
		var comlist = r;
		var length = r.length;

		var table = [];
		this.gjname = "";

		var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
		material.uniforms.color = Cesium.Color.AQUAMARINE ; // SKYBLUE ORANGE MEDIUMSEAGREEN
		material.uniforms.speed = 15;
		material.uniforms.repeat = 8; 
		material.uniforms.brightness = 12; 
		material.uniforms.image = 'css/images/animateWall/lineAarrow.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1

		this.geoCollectionLine1 = new Cesium.PrimitiveCollection();
		viewer.scene.primitives.add(this.geoCollectionLine1);
		this.labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
		ak_right_sybgj.initTopQysybgj(r);
		for (var i = 0; i < length; i++) {
			var db = comlist[i];
			db.id = "ztqgGj;" + config.addtypemarker.ceccGj + ";" + db.name + ";" + db.code + ";" + db.code;
			var name = db.name;
			var code = db.code;
			var quantity = db.quantity; // 数量
			var value = db.value; //合同额 
			var x = db.latitude;
			var y = db.longitude;
			this.gjname += "'" + name + "'" + ",";
			db.addtypemarker = config.addtypemarker.ceccGj;
			var ids = db.id + "_rw";
			var jsonstr = JSON.stringify(db); //将json对象转换为json字符串
			var index = i + 1;
			var start = [this.sybX, this.sybY];
			var end = [x, y];
			var arr = [];
			arr.push(start);
			arr.push(end);
			var newcas = cCesium.lnglatArrToCartesianArr(arr);
			var obj = new Object();
			var id = Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
			obj.name = "ss"
			obj.address = "";
			obj.addtypemarker = config.addtypemarker.common;
			obj.cartions = newcas;
			
			obj.material = material;
			obj.width = 5;
			var line1 = ak_pm_tool.addLineReGeom(this.geoCollectionLine1, obj);
		}
	},

进行标注点

initTopQysybgj: function(object) {
		this.billboardsQysybgj = scene.primitives.add(new Cesium.BillboardCollection());

		for (var i = 0; i < object.length; i++) {
			var entity = object[i];

			var db = entity;
			var obj = new Object();
			var id = db.code;
			obj.id = "ztqgGj;" + config.addtypemarker.ceccGj + ";" + db.name + ";" + id + ";" + db.code;
			obj.name = db.name;
			obj.code = db.code;
			obj.lat = db.latitude;
			obj.lng = db.longitude;

			//var isxy=config.isXyobj(obj.lat,obj.lng);
			if (!obj.lat) {
				continue;
			}

			var src = config.markerImgQysybgj; //mark2
			obj.src = src;
			obj.width = config.markerImgProejctWidth;
			obj.height = config.markerImgProejctHeight;
			obj.addtypemarker = config.addtypemarker.ceccGj;

			ak_pm_tool.addPoint(this.billboardsQysybgj, obj);
		}
	},

设置材质样式
        var material = Cesium.Material.fromType("BlueWaterMaterialPropertyLgCz");
        material.uniforms.color = Cesium.Color.AQUAMARINE ; // SKYBLUE ORANGE MEDIUMSEAGREEN
        material.uniforms.speed = 15;
        material.uniforms.repeat = 8; 
        material.uniforms.brightness = 12; 
        material.uniforms.image = 'css/images/animateWall/lineAarrow.png'; //lineAarrow arrow_1 colors1 lineAarrow.png wh1