第十六章 Cesium 和echar的标注

效果

数据格式

getNationContractSum2: {
	"msg": "操作成功",
	"total": 55,
	"flag": true,
	"rows": [{
		"num": 133,
		"value": 11,
		"name": "名称",
		"longitude": 9.58529417191,
		"latitude": 8.09232859829,
		"countrycode": "101",
		"yearcomplete": 6.11,
		"totalcomplete": 56.11,
		"monthcomplete": 0.11,
		"rmb": 11.11
	}, {
		"num": 25,
		"value": 11,
		"name": "名称",
		"longitude": -6.26551634282,
		"latitude": 34.8255499213,
		"countrycode": "133",
		"yearcomplete": 2.11,
		"totalcomplete": 7.11,
		"monthcomplete": 0.11,
		"rmb": 11.11
	}],
	"status": "C00000"
},

1.获取数据

// 所有数据标注数据接口
	getDate2: function() {
		var options = new Object();
		options.url = "/manage-api/getNationContractSum";
		options.type = "GET";
		options.data = ak_gjhtje_jwxm.temp2;
		options.errorback = akglobe_config.errBack;
	 
			options.callback = function(data) {
				ak_gjhtje_jwxm.callBackGET2(data);
			}
			// 如果是测试环境 使用假数据
			if(parent.typep002==2){
				ak_gjhtje_jwxm.callBackGET2(ak_ztqg.getNationContractSum2);
			}else{
				akglobe_config.ajaxQuery(options);
			}
		
		},
		
		callBackGET2:function(data){
			if (!data) return;
			// parent.ak_left_click1.top4CallBack(data.rows, ak_gjhtje_jwxm.type); // 初始化三维标注
			parent.initZl.initZl(data);
		},

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

 parent.initZl.initZl(data);

2.进行标注

initZl: function(data) {
		
		var rows = data.rows;
		var data = [];
		var geoCoordMap = {};
		for(var i = 0;i < rows.length;i++){
			var name1 = rows[i].name;
			var value1 = rows[i].value;
			var object = {
				name:name1,
				value:value1,
				countrycode:rows[i].countrycode
			};
			data.push(object);
			var arr = [];
			var name = rows[i].name;
			arr[0] = rows[i].latitude;
			arr[1] = rows[i].longitude;
			var obj = {};
			obj = {
				[name]:arr
			}
			geoCoordMap = {...geoCoordMap,...obj}
		}
		for (var i = 0; i <= data.length - 1; i++) {
			for (var j = 0; j < data.length - i - 1; j++) {
				// 数据库中有坐标数据之后        
				if (data[j].value > data[j + 1].value) {
					var temp = data[j];
					data[j] = data[j + 1];
					data[j + 1] = temp;
				}
			}
		}
		data.reverse();
		var num = data.length/3;
		for(var i = 0;i < data.length;i++){
			if(i<num){
				data[i].value = 180
			}else if(i>num && i<2*num){
				data[i].value = 150
			}else{
				data[i].value = 100
			}
		}
		console.log(data);
		console.log(geoCoordMap);
		
		var  tgas=this;
		tgas.circleArr=[];
	
		var convertData = function(data) {
			var res = [];
			for (var i = 0; i < data.length; i++) {
				var geoCoord = geoCoordMap[data[i].name];
				if (geoCoord) {
					res.push({
						name: data[i].name,
						countrycode: data[i].countrycode,
						value: geoCoord.concat(data[i].value)
					});
				}
			}
			return res;
		};
		
		
		
		 var arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5", "rgb(0,244,188)", "#139FF0"]

		  var color= Cesium.Color.LAWNGREEN.withAlpha(0.01);
		  var material=ak_marker.getFenceMaterial("", color);
		 
		  var result=convertData(data);
		  for(var i=0;i< result.length;i++){
		  	var  id=Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
			var db = result[i];
			var name=db.name;
			var jwd=db.value;
			var  obj=new Object();
			obj.id=id;
			obj.name=db.name;
			obj.address=db.address;
			
			obj.lat=jwd[0];
			obj.lng=jwd[1];
			
			obj.z=60;
			obj.tag=1;
			obj.code=db.countrycode;
			obj.addtypemarker=config.addtypemarker.ceccGjFJ;

			obj.attributes=obj;//  设置属性
			obj.radius=100000;//设置半径
			obj.color=new Cesium.Color(1.0, 1.0, 0.0, 0.02);
			var tt=new geo_circle(obj);
			 tt.draw();
		  	tgas.circleArr.push(tt);
		
		}
	
		option = {
			animation: false,
			GLMap: {
	
			},
			title: {
				text: '', //全国主要城市空气质量
				//subtext: 'data from PM25.in',
				// sublink: 'http://www.pm25.in',
				left: 'center',
				textStyle: {
					color: '#fff'
				}
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {
				orient: 'vertical',
				y: 'bottom',
				x: 'right',
				data: ['pm2.5'],
				textStyle: {
					color: '#fff'
				}
			},
			series: [{
					name: '业绩分布',
					type: 'scatter',
					coordinateSystem: 'GLMap',
					data: convertData(data),
					symbolSize: function(val) {
						return val[2] / 10;
					},
					label: {
						normal: {
							formatter: '{b}',
							position: 'right',
							show: false
						},
						emphasis: {
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: '#0ff'
						}
					}
				},
				{
					name: 'Top 5',
					type: 'scatter',
					coordinateSystem: 'GLMap',
					data: convertData(data.sort(function(a, b) {
						return b.value - a.value;
					}).slice(0, data.length/3)),
					symbolSize: function(val) {
						return val[2] / 10;
					},
					label: {
						normal: {
							formatter: '{b}',
							position: 'right',
							show: false
						},
						emphasis: {
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: '#ddb926'
						}
					}
				},
				{
					name: 'Top 5',
					type: 'effectScatter',
					coordinateSystem: 'GLMap',
					data: convertData(data.sort(function(a, b) {
						return b.value - a.value;
					}).slice(0, 6)),
					symbolSize: function(val) {
						return val[2] / 10;
					},
					showEffectOn: 'render',
					rippleEffect: {
						brushType: 'stroke'
					},
					hoverAnimation: true,
					label: {
						normal: {
							formatter: '{b}',
							position: 'right',
							show: true
						}
					},
					itemStyle: {
						normal: {
							color: '#f46653',
							shadowBlur: 10,
							shadowColor: '#333'
						}
					},
					zlevel: 1
				}
			]
		};
		impMap(viewer, option);
	},

因这个标注不能点击,所以在这个标注最下面我们放置了一个透明的圆,用于识别点击

获取数据,然后放入id一些信息用于识别点击

 var result=convertData(data);
          for(var i=0;i< result.length;i++){
              var  id=Number((new Date()).getTime() + "" + Number(Math.random() * 1000).toFixed(0));
            var db = result[i];
            var name=db.name;
            var jwd=db.value;
            var  obj=new Object();
            obj.id=id;
            obj.name=db.name;
            obj.address=db.address;
            
            obj.lat=jwd[0];
            obj.lng=jwd[1];
            
            obj.z=60;
            obj.tag=1;
            obj.code=db.countrycode;
            obj.addtypemarker=config.addtypemarker.ceccGjFJ;

            obj.attributes=obj;//  设置属性
            obj.radius=100000;//设置半径
            obj.color=new Cesium.Color(1.0, 1.0, 0.0, 0.02);
            var tt=new geo_circle(obj);
             tt.draw();
              tgas.circleArr.push(tt);
        
        }

这是封装echarts的样式

var rows = data.rows;
        var data = [];
        var geoCoordMap = {};
        for(var i = 0;i < rows.length;i++){
            var name1 = rows[i].name;
            var value1 = rows[i].value;
            var object = {
                name:name1,
                value:value1,
                countrycode:rows[i].countrycode
            };
            data.push(object);
            var arr = [];
            var name = rows[i].name;
            arr[0] = rows[i].latitude;
            arr[1] = rows[i].longitude;
            var obj = {};
            obj = {
                [name]:arr
            }
            geoCoordMap = {...geoCoordMap,...obj}
        }
        for (var i = 0; i <= data.length - 1; i++) {
            for (var j = 0; j < data.length - i - 1; j++) {
                // 数据库中有坐标数据之后        
                if (data[j].value > data[j + 1].value) {
                    var temp = data[j];
                    data[j] = data[j + 1];
                    data[j + 1] = temp;
                }
            }
        }
        data.reverse();
        var num = data.length/3;
        for(var i = 0;i < data.length;i++){
            if(i<num){
                data[i].value = 180
            }else if(i>num && i<2*num){
                data[i].value = 150
            }else{
                data[i].value = 100
            }
        }
        console.log(data);
        console.log(geoCoordMap);
        
        var  tgas=this;
        tgas.circleArr=[];
   
        var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        countrycode: data[i].countrycode,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        

3.清除

3.1这是清除透明圆点

clearCircle:function(){
		var circleArr=this.circleArr;
		for(var i = 0;i<circleArr.length;i++){
		   var towerItem = circleArr[i];
		   towerItem.destroy();
	   }
	},

3.2清除echarts 

3.2.1第一步在nav.js调用清除所有方法

 3.2.2第二步在清除所有方法中有释放所有事件的方法,释放所有事件的方法中有清除echarts的方法

3.2.3第三步 清除echarts

echarts本质上在一个div上面写的,所以我们清除div中的内容即可

disableAllEcharts: function() { 
			var oid = document.getElementById('echarts_div');
			if (oid) {
				viewer.container.removeChild(oid);
			}
		
		},