cesium 图层构建的那些事 （十三）

我们来构建echart 图层

import {Layer} from "./Layer";
import echarts from 'echarts';

class E3CoordinateSystem {
_viewer: any;
_mapOffset = [0, 0];
dimensions = ["x", "y"]

constructor(viewer: any) {
this._viewer = viewer;
}
 
create(t: any, api: any) {
var coordinateSystem: any = new E3CoordinateSystem(this._viewer);
t.eachComponent("cesium", (t: any) => {
coordinateSystem.setMapOffset(t.__mapOffset || [0, 0]);
t.coordinateSystem = coordinateSystem;
});
t.eachSeries(function (e: any) {
"cesium" === e.get("coordinateSystem") && (e.coordinateSystem = coordinateSystem)
})
}
 
getDimensionsInfo = function () {
return ["x", "y"]
}
 
setMapOffset(mapOffset: any) {
this._mapOffset = mapOffset
}
 
dataToPoint(data: any) {
var scene = this._viewer.scene
var defaultPoint = [0, 0];
var point = Cesium.Cartesian3.fromDegrees(data[0], data[1]);
if (!point) {
return defaultPoint;
}
if (scene.mode === Cesium.SceneMode.SCENE3D && Cesium.Cartesian3.angleBetween(scene.camera.position, point) > Cesium.Math.toRadians(80)) {
return false;
}
var cesiumPoint = scene.cartesianToCanvasCoordinates(point);
if (!cesiumPoint) {
return defaultPoint;
}
return [cesiumPoint.x - this._mapOffset[0], cesiumPoint.y - this._mapOffset[1]]
}
 
pointToData(point: any) {
var mapOffset = this._mapOffset;
var ellipsoid = this._viewer.scene.globe.ellipsoid;
var cartesian3 = new Cesium.cartesian3(point[1] + mapOffset[1], point[2] + mapOffset[2], 0);
var p = ellipsoid.cartesianToCartographic(cartesian3);
return [p.lng, p.lat]
}
 
getviewerRect() {
var canvas = this._viewer.canvas;
return new echarts.graphic.BoundingRect(0, 0, canvas.width, canvas.height)
}
 
getRoamTransform() {
return echarts.matrix.create()
}
}

export class EchartLayer extends Layer {
private visible: boolean = true;
chartOption: any;//echart的option参数
chart: any;//echart对象
cesiumHandler: any;//cesium事件
extent: any;//外包围盒
constructor(option: any) {
super(option.name)
// console.log(option);
option.tooltip = {
trigger: 'item'
}
option.animation = false;
this.chartOption = option;
this.isAdd2LoadCesium = true;
}

set show(visible: boolean) {
if (this.cesiumObj && this.visible !== visible) {
this.cesiumObj.hidden = !visible;
this.visible = visible,
visible && this.setCharts()
}
}
 
get show(): boolean {
return this.visible;
}
 
protected _addToMap(map: any) {
this.init(map);
}
 
protected _removeByMap(destroy?: boolean) {
this.map.container.removeChild(this.cesiumObj);
this.cesiumObj = null;
this.chart = null;
this.chartOption = null;
 更多参考 https://xiaozhuanlan.com/topic/7623980154