相信大家都用过echart和各种地图引擎做结合, echart 还有个开发包是echart-gl 是用来做三维图表开发的,但是echart-gl 很难在三维地图上做相机视角同步,这样就会很别扭,不能成为地图的一部分,echart-gl 开发的引擎正是 claygl 引擎,其中arcgis官方文档有指出和threejs 结合, 经过我研究一波可以用来做claygl 来做可视化,这样可以把echart-gl代码移植到地图引擎做到相机同步的效果让 三维图表‘留在地图上’!
先看下官方与threejs 几个关键的类和方法
Camera 类 (透视相机)
Matrix4 类
Vector3 类
相机透视矩阵projectionMatrix 和 Matrix4 decompose 方法
通过查看claygl 引擎文档
Camera 类 (透视相机)
Matrix4 类
Vector3 类
相机透视矩阵setProjectionMatrix和 Matrix4 decomposeMatrix方法
刚好他们坐标系方向都是一致的不像babylonjs 是反的 好弄一些 以下便是构建一个cube方块具体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create a local scene - 4.3</title>
<style>
html,
body,
#sss {
/*padding: 0;*/
/*margin: 0;*/
height: 500px;
width: 1000px;
}
#homeDiv {
left: 15px;
top: 130px;
z-index: 35;
position: absolute;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/claygl@1.3.0/dist/claygl.min.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></script>
更多信息参考小专栏 https://xiaozhuanlan.com/topic/6503871924