cesium系列 - 错误收集

1.页面卡死

原因解析
1.viewer不能和vue绑定，不然会被vue数据劫持，导致浏览器卡死
2.实体集合也不要放在vue中，也容易卡死
3.viewer使用大量数据的实体聚合，因为viewer是在浏览器，所以造成浏览器线程的停顿，目前未找到解决办法（思路：用loading）

// 代码
window.currentEntity = null // 用于存储当前操作的实体，用于交互
window.stagDraw = [] // 暂存没有绑定（未存储数据库）的实体-用于交互（删除、保存）
window.stagDraw2 = [] // 暂存已绑定（以存储数据库）的实体
window.myDataSource = null // dataSource集合 1.必须存储在window中，不然会很卡，

2.实体聚合的数据源的更新-bug

bug分析
聚合的实体是一个billboard+label,聚合的是billboard，开始时直接修改viewer上dataSource的entities,会造成实体显示不全（比如label的一行只显示一半）
解决办法
用一个window.myDataSource存储dataSource，先更新dataSource的entities,然后add()给viewer

window.myDataSource = null // dataSource集合 1.必须存储在window中，不然会很卡，
function updataDataSource (data) {
  if (window.viewer.dataSources.length) window.viewer.dataSources.removeAll(true) // 清空viewer的dataSource（只会存在一个，所以直接用清空所有了）
  if (window.myDataSource) window.myDataSource.entities.removeAll(true) // removeAll(true)有销毁的作用，所以用这个释放空间，不知道有没有用，有没有多余
  window.myDataSource = null // 重置变量
  window.myDataSource = new window.Cesium.CustomDataSource('myDataSource')
  for (let i = 0, monitor; item = data[i++];) {
  	let {id, type, lng, lat, name} = item
  	myDataSource.entities.add({
  		id,
  		type,
  		position: window.Cesium.Cartesian3.fromDegrees(
         lng,
         lat
       ),
       billboard: new window.Cesium.BillboardGraphics({
         selectionIndicator: true,
         heightReference: window.Cesium.HeightReference.CLAMP_TO_GROUND,
         disableDepthTestDistance: Number.POSITIVE_INFINITY,
         image: '********',
         scale: 0.5,
         width: 100,
         height: 100,
         pixelOffset: new window.Cesium.Cartesian2(0, -20)
       }),
       label: {
          text: name,
          font: '25pt',
          fillColor: window.Cesium.Color.WHITE,
          outlineColor: window.Cesium.Color.BLACK,
          style: window.Cesium.LabelStyle.FILL_AND_OUTLINE,
          outlineWidth: 11,
          pixelOffset: new window.Cesium.Cartesian2(0, -60),
          heightReference: window.Cesium.HeightReference.CLAMP_TO_GROUND,
          disableDepthTestDistance: Number.POSITIVE_INFINITY
        }
     })
	}
	window.viewer.dataSources.add(myDataSource).then(dataSource => {
		//...... 实现聚合
	})
}

3.实体聚合的显示和隐藏的切换-bug

bug分析
直接使用window.viewer.dataSources.getByName(‘##’)[0].entities.show = true / false切换,会造成实体位置错位（比如重合、实体label不在原来的位置），分析应该是不能直接在window.viewer对象上修改
解决办法
因为dataSource有一个属性show可以控制实体集合数据源的显示与隐藏，所以使用window.myDataSource.show = true / false（entities.show属性是控制实体集合的显示与隐藏，应该也是没有错的）,然后重新window.viewer.dataSources.add(window.myDataSource)

if (window.myDataSource) {
   window.myDataSource.show = true
   window.viewer.dataSources.add(myDataSource).then(dataSource => {
   	//...... 实现聚合
   })
 }

4. Cesium 之加载在线底图（天地图、高德、百度、腾讯、谷歌等并实现偏移纠正）

1、WGS84
地心坐标系，是为GPS全球定位系统使用而建立的坐标系，Cesium地理坐标系默认采用该坐标系。
2、CGCS 2000
国家2000大地坐标系，天地图所采用的坐标系
3、GCJ-02
国测局坐标系，也叫火星坐标系，
1）国测局02年发布的坐标体系，它是一种对经纬度数据的加密算法，即加入随机的偏差。
2）互联网地图在国内必须至少使用GCJ-02进行首次加密，不允许直接使用WGS-84坐标下的地理数据，同时任何坐标系均不可转换为WGS-84坐标。
4、BD-09
由GCJ-02进行进一步的偏移算法得到，百度所采用的坐标系。
对于天地图CGCS2000与WGS84之间只存在微小的偏移，精度要求不是非常高的情况下，可以不需要进行偏移，其他GCJ02->WGS84与BD09->WGS84，网上也提供了相应的偏移算法。

名称	别名	标准	获取方式	应用场合
wgs84	地球坐标	国际标准	从GPS设备中获取的坐标数据	国际地图提供商，国歌国际地图
gcj02	火星坐标，国测局坐标	中国标准	从国行移动设备中定位获取的坐标数据	高德地图,谷歌地图,腾讯地图,阿里云地图
bd09	百度坐标	百度标准	百度在火星坐标上二次加密后的坐标数据	百度地图

export function gcj02towgs84 (lon, lat) { // 经纬度转化
  const PI = 3.14159265358979324 // 圆周率
  const a = 6378245.0 // 克拉索夫斯基椭球参数长半轴a
  const ee = 0.00669342162296594323 // 克拉索夫斯基椭球参数第一偏心率平方
  let dLon = transformLon(lon - 105.0, lat - 35.0)
  let dLat = transformLat(lon - 105.0, lat - 35.0)
  let radLat = lat / 180.0 * PI
  let magic = Math.sin(radLat)
  magic = 1 - ee * magic * magic
  let sqrtMagic = Math.sqrt(magic)
  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI)
  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI)
  return [(lon - dLon), (lat - dLat)]
}
function transformLat(x, y) { // gcj02towgs84 纬度转换
  const PI = 3.14159265358979324;//圆周率
  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0;
  ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0;
  return ret;
}
function transformLon(x, y) { // gcj02towgs84 经度转换
  const PI = 3.14159265358979324;//圆周率
  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0;
  ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0;
  return ret;
}

// wgs84togcj02
export function TransCj02(XL, YB) {
  var a = 6378245.0; // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
  var ee = 0.00669342162296594323; // ee: 椭球的偏心率。
  var dLat = transformlat(XL - 105.0, YB - 35.0);
  var dLon = transformlng(XL - 105.0, YB - 35.0);
  var radLat = YB / 180.0 * Math.PI;
  var magic = Math.sin(radLat);
  magic = 1 - ee * magic * magic;
  var sqrtMagic = Math.sqrt(magic);
  dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
  dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);

  var arraybdxy = new Array();
  arraybdxy = wgstogcj02(dLon, dLat);

  function wgstogcj02(dLon, dLat) {
    var mglat = YB + dLat;
    var mglng = XL + dLon;
    return [mglng, mglat]
  }
  return [arraybdxy[0], arraybdxy[1]]
}

function transformlat(lng, lat) { // wgs84togcj02 纬度转换
  var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
  ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(lat * Math.PI) + 40.0 * Math.sin(lat / 3.0 * Math.PI)) * 2.0 / 3.0;
  ret += (160.0 * Math.sin(lat / 12.0 * Math.PI) + 320 * Math.sin(lat * Math.PI / 30.0)) * 2.0 / 3.0;
  return ret
}

function transformlng(lng, lat) { // wgs84togcj02 经度转换
  var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
  ret += (20.0 * Math.sin(6.0 * lng * Math.PI) + 20.0 * Math.sin(2.0 * lng * Math.PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(lng * Math.PI) + 40.0 * Math.sin(lng / 3.0 * Math.PI)) * 2.0 / 3.0;
  ret += (150.0 * Math.sin(lng / 12.0 * Math.PI) + 300.0 * Math.sin(lng / 30.0 * Math.PI)) * 2.0 / 3.0;
  return ret
}