3D Tiles 图层

使用 AMap.3DTilesLayer 图层加载渲染标准 3D Tiles 数据,可支持 i3dm、b3dm、pnts 格式

源代码编辑器

 <!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta
 name="viewport"
 content="initial-scale=1.0, user-scalable=no, width=device-width"
 />
 <title>3dtiles</title>
 <link
 rel="stylesheet"
 href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
 />
 <style>
 html,
 body,
 #container {
 height: 100%;
 width: 100%;
 background: black !important;
 }
 .input-card {
 width: 25rem;
 }
 .input-card .btn {
 width: 7rem;
 margin-right: 0.7rem;
 }
 .input-card .btn:last-child {
 margin-right: 0;
 }
 </style>
 </head>
 <body>
 <div id="container" class="map" tabindex="0"></div>
 <script src="https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js"
 ></script>
 <script src="https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js"
 ></script>
 <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.3DTilesLayer"
 ></script>
 <script type="text/javascript">
 var map = new AMap.Map('container', {
 resizeEnable: true,
 viewMode: '3D',
 center: [121.502325, 31.238165],
 pitch: 90,
 rotation: -50,
 zoom: 16,
 mapStyle: 'amap://styles/darkblue', // 加载自定义样式
 features: ['bg', 'road'],
 });
 // 创建 3DTilesLayer
 var tiles = new AMap['3DTilesLayer']({
 map: map,
 url: 'https://a.amap.com/jsapi_demos/static/data3d/single.json', // 3d Tiles 入口文件
 style: {
 light: {
 color: 'rgb(44,59,75)', // 设置光照颜色
 intensity: 2, // 设置光照强度
 },
 },
 });
 </script>
 </body>
</html>

 
 

控制台

清空

示例中心常见问题