Mesh指的是所有用三角形面组合成的三维物体,JS API 目前提供的 Mesh 类型有:Mesh、MeshAcceptLights、Prism、MeshLine 四种,MeshLine表现为带状线条,放在下一篇介绍

Mesh 和 MeshAcceptLights

Mesh 和 MeshAcceptLights 为 JS API 提供的比较底层的两个网格类型,默认的图元绘制类型为gl.TRIANGLES。以绘制一个垂直于地面的矩形为例,首先我们创建一个Mesh实例:

创建Mesh实例

var rectangle = new AMap.Object3D.Mesh()

var geometry = rectangle.geometry;//创建之后获取geometry

设置attribute属性

接着需要给实例的geometry的各个attribute属性填入数值。任何一个 Object3D 的形体都具有顶点坐标、顶点颜色两个基本属性;如果有大量重复顶点的时候可以使用顶点索引;如果用到贴图的话,就需要顶点纹理坐标,多纹理的时候还会用到纹理索引;需要光照的时候还会有顶点法向量。

Gometry的属性类型说明

verticesArray存放顶点位置的一维数组,三个元素代表一个顶点的位置

vertexColorsArray存放顶点颜色的一维数组,四个元素代表一个顶点的颜色

facesArray存放三角形顶点索引的一维数组,三个元素代表一个三角形面。

当faces长度不为0时,按照faces顶点索引来绘制;

否则当faces长度为0时,按照vertices来以此绘制三角形面。

vertexUVsArray存放顶点纹理坐标的一维数组,两个元素代表一个顶点的纹理坐标

textureIndicesArray存放顶点纹理索引的一维数组,一个元素元素代表一个顶点的纹理索引。

当Mesh的textures属性的长度大于1时,代表一个mesh使用多个纹理,

textureIndices表示每个顶点使用哪个纹理。

只使用一个纹理时,这个属性可以不设置

vertexNormalsArray存放顶点法向量的一维数组,三个元素元素代表一个顶点的法向量。

MeshAcceptLights专用。

以我们所要绘制垂直于地面的矩形为例,它拥有四个顶点V0、V1、V2、V3,首先我们要取得四个顶点的三维坐标,V0和V1的坐标的xy分量值我们通过 Map 实例对象的lngLatToGeodeticCoord方法可以算出,V2、V3在V0、V1的基础上增加 z 分量就可以了:

var lnglat1 = new AMap.LngLat(116.39, 39.9)

var lnglat2 = new AMap.LngLat(116.40, 39.9)

var v0xy = map.lngLatToGeodeticCoord(lnglat1);

var v1xy = map.lngLatToGeodeticCoord(lnglat2);

var z = -1000;//3D地图Z方向朝下,所以负值

geometry.vertices.push(v0xy.x, v0xy.y, 0);//V0

geometry.vertices.push(v1xy.x, v1xy.y, 0);//V1

geometry.vertices.push(v0xy.x, v0xy.y, z);//V3

geometry.vertices.push(v1xy.x, v1xy.y, z);//V2

矩形有两个三角形面F1(V0V1V3)、F2(V1V2V3)组成,我们这里使用了两个共享的顶点V1和V3所以可以启用faces顶点索引,顶点索引的内容为构成三角形面的顶点在vertices中的索引:

geometry.faces.push(0, 1, 3)

geometry.faces.push(1, 2, 3)

接着我们可以给四个顶点赋予相应的颜色值,默认情况下不开启颜色混合,如果使用了透明颜色或者透明贴图需要设置 Mesh实例的transparent属性为true方能看到透明混合的效果:

geometry.vertexColors.push(1, 0, 0, 1); //V0

geometry.vertexColors.push(0, 1, 0, 1); //V1

geometry.vertexColors.push(0, 0, 1, 1); //V2

geometry.vertexColors.push(0, 1, 1, 1); //V3

rectangle.transparent = false;

也可以使用纹理给进行填色,设定纹理坐标的同时需要给mesh的texturs中添加一张纹理图片

rectangle.textures.push("https://a.amap.com/jsapi_demos/static/tourist/crate.gif");

使用纹理时需要给所有顶点添加纹理坐标,纹理坐标以图片的左上角为原点,

x轴朝右,y轴朝下:

geometry.vertexUVs.push(0, 1); //V0

geometry.vertexUVs.push(1, 1); //V1

geometry.vertexUVs.push(1, 0); //V2

geometry.vertexUVs.push(0, 0); //V3

vertexNormals为MeshAcceptLights专有的属性,用作记录顶点法向量,来实现光照,这里不细说明。

添加到 Object3DLayer

做好上面的工作之后将 Mesh实例添加到Object3DLayer中即可,Mesh类型默认以顺时针为正面,默认显示反面,可以通过Mesh的backOrFront属性来控制显示正反面,这里我们开启两面。

rectangle.backOrFront = 'both';//'back'、'front'、'both'

object3DLayer.add(rectangle)

棱柱 Prism

为了简化使用,我们在 MeshAcceptLights 之上封装了Prism类型,Prism 可以基于经纬度、高度、颜色来构建不规则棱柱体,使用方法如下:

var bounds = [

new AMap.LngLat(116.5,39.25),

new AMap.LngLat(116.75,39.5),

new AMap.LngLat(116.5,39.75),

new AMap.LngLat(116.25,39.5)

]

var height = 500000;

var color = [0,0,1,0.6];

var prism2 = new AMap.Object3D.Prism({

path:island,

height:height,

color:color

});

垂面 Wall

垂面为垂直于地面的一个折面,用法同Prism,通过经纬度path、高度height、颜色color来定义,可接收全局光照。与Prism的区别是 Wall没有顶面,只有侧面。

立体栅格地图_网格Mesh-3D立体图形-教程-地图 JS API | 高德地图API相关推荐

  1. three.js和高德地图结合引入obj格式模型-效果演示

    代码要放在web服务中去访问,three.js只有在服务中才能获取模型的材质图片!! 源代码地址: three.js和高德地图结合引入obj格式模型.zip-Javascript文档类资源-CSDN下 ...

  2. java 编程动感相册_抖音3D立体动态相册实现代码下载

    今天这篇博客就分享下前端代码如何实现3D立体动态相册.赶紧学会了,来制作属于我们程序员的浪漫吧,别忘了发到自己抖音,让女朋友看一下!先上效果图,来引起下你们的兴趣. 再看看具体的效果: 一.新建一个i ...

  3. js添加多marker 高德地图_覆盖物-参考手册-地图 JS API | 高德地图API

    覆盖物 覆盖物是指叠加在地图底图之上的一些常见要素,包括 Marker类 点标记. 构造函数 说明 AMap.Marker( 构造一个点标记对象,通过MarkerOptions设置点标记对象的属性 M ...

  4. three.js根据高德地图的经纬度信息打造3D地图

    代码效果: 依据的数据: 高德地图 根据地图的经纬度,利用three.js框架打造3D地图,同时可以把飞机.高铁.汽车等元素加入其中,给他们指定的路线,让他们动起来. 源代码地址:three.js打造 ...

  5. echart 三维可视化地图_实测三个工具后,我终于找到了地图可视化的神器

    做过数据分析的人都知道,老板最喜欢的莫过于数据可视化,可视化中最喜欢的莫过于地图可视化.但是想要做地图可视化也并非易事,对于大多数人来说,Excel一直都是首选,但是Excel真的是实现地图可视化的最 ...

  6. 设置电子围栏 高德地图_地理围栏-API文档-开发指南-Web服务 API | 高德地图API

    产品介绍 地理围栏服务是一类HTTP接口,提供在服务端,增删改查地理围栏的功能,同时支持对于设备与围栏关系进行监控. 适用场景 地理围栏服务适用于需要针对特定区域,监控用户位置与区域关系的场景中.包括 ...

  7. 接口获取行政区划代码_行政区域查询-API文档-开发指南-Web服务 API | 高德地图API...

    产品介绍 行政区域查询是一类简单的HTTP接口,根据用户输入的搜索条件可以帮助用户快速的查找特定的行政区域信息. 使用API前您需先申请Key,若无高德地图API账号需要先申请账号. 例如:中国> ...

  8. js室内地图开发_概述-室内地图 JS API | 高德地图API

    室内地图 JavaScript API 简介 说明: 室内地图数据对新用户暂停开放,建议您使用 Javascript API 可实现室内外一体化效果. 高德室内地图 JavaScript API,是由 ...

  9. js室内地图开发_入门指南-室内地图 JS API | 高德地图API

    快速入门将带您迅速了解高德地图室内JS API的基本使用,学习如何创建和设置地图,是您在最短时间内成为JS API的开发者. 第1步 准备页面 在正式开始开发地图应用之前,您需要做如下几步: 申请JS ...

  10. android auto支持高德地图,【图】苹果新系统:CarPlay终于支持高德地图_汽车之家...

    [汽车之家 互联出行]  苹果在美国时间6月4日的苹果开发者大会上,发布了最新的iOS 12操作系统,其实关于交通互联的部分最重要的变化就是之后全面支持高德地图了. 本次苹果发布的iOS 12系统,重 ...

最新文章

  1. LaTex排版技巧:[15]公式太长如何换行
  2. 开源项目-基于Intel VT技术的Linux内核调试器
  3. getDimension()、getDimensionPixelOffset()和getDimensionPixelSize()区别详解
  4. Python持续更新的新特性
  5. 我一个女孩子居然做了十年硬件。​。。
  6. mysql2012更改表名_T-SQL入門攻略之13-修改数据表
  7. 解决谷歌浏览器所有页面崩溃问题
  8. CentOS 手工编译、手动编译安装 MongoDB
  9. DP动态规划之01背包问题
  10. Atitit 群控云控资料索引index cyonkon yunkon cyonkonYonkon群控云控方面资料.rar C:\Users\ATI\Documents\cyonkonYonko
  11. 如何批量生成UPC-E条码
  12. Nachos Lab3 同步机制
  13. Xutils-Android中数据存储和网络传输的框架
  14. 测量MATLAB安装哪些产品,matlab需要安装哪些工具箱
  15. WIN7系统做NTP服务器,大师教您win7系统搭建ntp服务器的图文技巧
  16. cmt obm odm 代工模式oem_什么是OEM,ODM与OBM
  17. 程序猿生存指南-63 贪心姑娘
  18. android 异源投屏,华为MATE10支持异源投屏是什么意思?
  19. 【Docker之Swarm详细讲解Swarm集群搭建管理节点工作节点Raft一致性协议overlay网络Docker结合Swarm部署WordPress个人博客实战】
  20. idea安装阿里巴巴java规范插件(代码质量管理)安装和使用

热门文章

  1. linux apache python wsgi,linux下apache2+django+mod_wsgi方式配置web站点
  2. 如何快速确定论文的选题?
  3. android同时预览多个监控,基于VLC的Android多路视频监控系统.pdf
  4. 为什么韭菜一定要割三次后开花?
  5. 云队友丨人生的管理,就是目标的管理——管理工具大盘点
  6. 移动 Web 最佳实践(干货长文,建议收藏)
  7. Error:Execution failed for task ':xst:process开发环境DebugResources'.
  8. java图片头像代码_用Java和OpenCV生成Github默认头像
  9. 埃塞俄比亚 - 阿姆哈拉语
  10. 膜拜!用最少的代码却实现了最牛逼的滚动动画