效果
数据结构
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