arcgis 与 claygl 引擎结合做地图可视化

2022-12-15 16:55:00 浏览数 (1)

相信大家都用过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

0 人点赞