前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >arcgis 与 claygl 引擎结合做地图可视化

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

原创
作者头像
haibalai
发布2022-12-15 16:55:00
2910
发布2022-12-15 16:55:00
举报
文章被收录于专栏:GIS 地图可视化GIS 地图可视化

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档