通用接口

Object3D 的添加/移除

对 Object3D 对象进行添加和移除的基本操作。

// 添加 Object3DLayer 图层，用于添加 3DObject 对象var object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer);// 以不规则棱柱体 Prism 为例，添加至 3DObjectLayer 图层中var paths = [[116.395951,39.907129],[116.399127,39.907178]];var bounds = paths.map(function(path) {return new AMap.LngLat(path[0], path[1]);});// 创建 Object3D 对象var prism = new AMap.Object3D.Prism({path: bounds,height: 500,color: 'rgba(100, 150, 230, 0.7)' // 支持 #RRGGBB、rgb()、rgba() 格式数据});// 开启透明度支持prism.transparent = true;// 添加至 3D 图层object3Dlayer.add(prism);//绑定按钮事件document.querySelector("#add-obj3d-btn").onclick = function() {// 添加至 3D 图层object3Dlayer.add(prism);};document.querySelector("#rm-obj3d-btn").onclick = function() {// 从 3D 图层中移除object3Dlayer.remove(prism);};

模型变换（雷达扫描）

使用 Object3D 类型的 position 和 rotateZ 等方法可对三维对象进行模型变换，本例模拟了雷达扫描的实现。
本示例难度较大，需要时，可直接使用。

立体Mesh

不规则棱柱体

使用Prism类型创建和展示朝阳区的棱柱体，并给地图设置光照，实现三维地块的展示。

// 设置光照map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);map.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1);var object3Dlayer = new AMap.Object3DLayer();map.add(object3Dlayer);new AMap.DistrictSearch({subdistrict: 0,   //返回下一级行政区extensions: 'all',  //返回行政区边界坐标组等具体信息level: 'city'  //查询行政级别为 市}).search('朝阳区', function (status, result) {var bounds = result.districtList[0].boundaries;var height = 5000;var color = '#0088ffcc'; // rgbavar prism = new AMap.Object3D.Prism({path: bounds,height: height,color: color});prism.transparent = true;object3Dlayer.add(prism);var text = new AMap.Text({text: result.districtList[0].name + '</br>(' + result.districtList[0].adcode + ')',verticalAlign: 'bottom',position: [116.528261, 39.934313],height: 5000,style: {'background-color': 'transparent','-webkit-text-stroke': 'red','-webkit-text-stroke-width': '0.5px','text-align': 'center','border': 'none','color': 'white','font-size': '24px','font-weight': 600}});text.setMap(map);});

该示例将文字立起来了，可用在之后的3D地图中。

线Line

基础 Line

Object3D.Line 用来创建基于 gl.LINES 绘制的纯粹的线样式的三维图形。

var object3Dlayer = new AMap.Object3DLayer({zIndex: 10});map.add(object3Dlayer);var Line3D = new AMap.Object3D.Line();Line3D.transparent = true;var geometry = Line3D.geometry;console.log(city_line);for (var i = 0; i < city_line.length; i++) {// 线段var od = city_line[i].line;var origin = od[0].split(',');// 将经纬度坐标转换成大地坐标origin = map.lngLatToGeodeticCoord([origin[0], origin[1]]);geometry.vertices.push(origin.x, origin.y, 0);geometry.vertexColors.push(0, 0.4, 1, 0.3);var des = od[1].split(',');des = map.lngLatToGeodeticCoord([des[0], des[1]]);geometry.vertices.push(des.x, des.y, 0);geometry.vertexColors.push(0, 0.4, 1, 0.3);}object3Dlayer.add(Line3D);

将两点间的连线坐标转成三维坐标系下的xy坐标，渲染到3D视图中。
示例数据：

细线 ThinLine

AMap.Object3D.ThinLine可以利用经纬度路径来绘制细线

 var object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });map.add(object3Dlayer);var opts = {subdistrict: 0,extensions: 'all',level: 'province'};//利用行政区查询获取路径var district = new AMap.DistrictSearch(opts);district.search('河北省', function (status, result) {var bounds = result.districtList[0].boundaries;// rgbavar color = '#0055ff';for (var i = 0; i < bounds.length; i += 1) {var line = new AMap.Object3D.ThinLine({path: bounds[i],color: color});object3Dlayer.add(line)}});

气球

本例子组合使用了Object3D.RoundPoints和Object3D.Line，实现了气球点的效果

var object3Dlayer = new AMap.Object3DLayer({zIndex: 110,opacity: 1});map.add(object3Dlayer);function lnglatToG20(lnglat) {lnglat = map.lngLatToGeodeticCoord(lnglat);lnglat.x = AMap.Util.format(lnglat.x, 3);lnglat.y = AMap.Util.format(lnglat.y, 3);return lnglat;}var lines = new AMap.Object3D.Line();var lineGeo = lines.geometry;new AMap.DistrictSearch({subdistrict: 1, //返回下一级行政区extensions: 'base'}).search('中国', function (status, result) {var provinces = result.districtList[0].districtList;var points3D = new AMap.Object3D.RoundPoints();points3D.transparent = true;var pointsGeo = points3D.geometry;for (var p = 0; p < provinces.length; p += 1) {var center = lnglatToG20(provinces[p].center);var size = Math.max(10, Math.round(Math.random() * 40));var height = -size * 100000;// 连线lineGeo.vertices.push(center.x, center.y, 0);lineGeo.vertexColors.push(0, 1, 1, 1);lineGeo.vertices.push(center.x, center.y, height);lineGeo.vertexColors.push(0, 1, 1, 1);pointsGeo.vertices.push(center.x, center.y, 0); // 尾部小点pointsGeo.pointSizes.push(5);pointsGeo.vertexColors.push(0, 0, 1, 1);pointsGeo.vertices.push(center.x, center.y, height); // 空中点pointsGeo.pointSizes.push(size);pointsGeo.vertexColors.push(p * 0.029, p * 0.015, p * 0.01, 1);}points3D.borderColor = [0.4, 0.8, 1, 1];points3D.borderWeight = 3;object3Dlayer.add(lines);object3Dlayer.add(points3D);});

本例可用于3D视图的信息展示。

高德地图 Web JS API示例学习笔记（12）——Object3D 图形（通用接口、立体Mesh、线Line）相关推荐

高德地图 Web JS API示例学习笔记（11）——覆盖物（矢量图形）
文章目录矢量图形折线的绘制和编辑多边形的绘制和编辑矩形的绘制和编辑圆的绘制和编辑绘制矢量图形(重点) 带洞多边形遮罩 GeoJSON(重点) 自定义折线方向箭头矢量图形折线的绘制和编 ...
高德地图 Web JS API示例学习笔记（3）——地图（三维地图）
文章目录三维地图 3D地图区域掩膜三维地图 3D地图 map = new AMap.Map('container', {resizeEnable: true,rotateEnable: true ...
高德地图 Web JS API示例学习笔记（1）——地图（生命周期、地图属性）
文章目录生命周期地图的创建异步加载地图地图属性获取地图中心点/级别设置地图中心点/级别获取地图当前行政区属性信息设置地图当前行政区设置/获取地图显示范围限制地图显示范围地图的平移 ...
corodva中使用高德地图web js api
高德地图web js api有一个其他的地图插件都没有的功能,就是地图俯角可以达到80°,而其他的地图api(百度45°,mapbox60°),包括高德地图的Android sdk都无法达到这样的大角 ...
java aoi 服务器地图_GitHub - WanZixin/getShp: 利用高德地图web服务API获取坐标串，生成行政区和aoi的shp文件...
爬取数据生成shp文件 1.功能简介共有两大功能,一个功能是根据高德地图web服务API获取行政区划坐标串,写入行政区shp文件:另一个功能是根据高德地图的接口获取poi坐标串,写入aoi(area ...
QT+高德地图Web服务API开发—静态地图开发Demo。QT组件提升、QT鼠标事件处理、Qt图片显示与移动、QT网络操作
说明在本次项目中,我们使用QT开发框架,高德地图Web服务地图API,完成一个项目Demo,进行一次对QT.对编程的学习. 本系类文章所包含内容包括: 1.QT组件提升 2.QT鼠标事件处理 3.Q ...
高德h5定位误差_高德地图定位JS API不准确问题
到网上找了个解决高德偏移量的代码 https://blog.csdn.net/woshimu... 我的是ip定位转换过的定位就准确了 this.map.plugin('AMap.Geolocati ...
好程序员web前端分享Nodejs学习笔记之Stream模块
好程序员web前端分享Nodejs学习笔记之Stream模块一,开篇分析流是一个抽象接口,被 Node 中的很多对象所实现.比如对一个 HTTP 服务器的请求是一个流,stdout 也是一个流.流 ...
高德 php,高德地图WEB版的使用
最近学习了一下高德地图web版的使用,总结了一下高德基础控件的应用,高德地图是开源可编辑的,方法不是很难,有兴趣的朋友可以试一试自己编辑一下. 之前想自己做一个旅游导航的项目,在网上一搜发现了高德地图 ...
【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）
前言本篇文章是高德地图web开发入门篇,实现地图搜索等基本功能,后续会继续更新地图标记点.驾车.骑行.货车等单地点\多地点导航.公交路线.兴趣周边点.及其他地图功能开发文章,所有功能均使用js实现, ...

高德地图 Web JS API示例学习笔记（12）——Object3D 图形（通用接口、立体Mesh、线Line）

文章目录