我們來構(gòu)建echart 圖層
```javascript
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參數(shù)
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
