本项目为高德地图的3DTilesLayer图层插件,依赖@amap/three-layer
插件,因此如果使用npm安装时需要安装@amap/three-layer
当前项目支持CDN加载和npm加载两种方式。
CDN加载需要先加载高德地图JS、threejs的库和@amap/three-layer
,代码如下
<!--加载高德地图JS 2.0 -->
<script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
<!--加载threejs -->
<script src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.js"></script>
<!--加载draco -->
<script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/loaders/DRACOLoader.js"></script>
<!--加载threejs的GLTFLoader -->
<script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/loaders/GLTFLoader.js"></script>
<!--加载three-layer插件 -->
<script src="https://cdn.jsdelivr.net/npm/@amap/three-layer/dist/index.js"></script>
<!--加载layer-3dtiles插件 -->
<script src="https://cdn.jsdelivr.net/npm/@amap/layer-3dtiles/dist/index.js"></script>
npm加载可以直接使用安装库
npm install @amap/layer-3dtiles @amap/three-layer
<script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@amap/three-layer/dist/index.js"></script>
<!--加载layer-3dtiles插件 -->
<script src="https://cdn.jsdelivr.net/npm/@amap/layer-3dtiles/dist/index.js"></script>
<script type="text/javascript">
const map = new AMap.Map('app', {
center: [116.405242513021,39.909402940539],
zoom: 14,
viewMode: '3D',
pitch: 35
})
const layer = new AMap.ThreeLayer(map)
layer.on('complete', () => {
const light = new THREE.AmbientLight('#ffffff', 1);
layer.add(light);
const tiles = new AMap.Layer3DTiles(layer, {
url: './hutong/tileset.json',
position: [116.405242513021,39.909402940539]
})
tiles.setRotation({
x:0,
y:0,
z:0
})
tiles.setTranslate({x:15,y:15,z:0})
tiles.on('click',(e) => {
console.log('click: ', e)
})
console.log('layer: ', layer)
console.log('tiles: ', tiles)
})
</script>
import {AmbientLight} from 'three'
import {ThreeLayer} from '@amap/three-layer'
import {Layer3DTiles} from '@amap/layer-3dtiles'
const map = new AMap.Map('app', {
center: [120,31],
zoom: 14,
viewMode: '3D',
pitch: 35
})
const layer = new ThreeLayer(map)
layer.on('complete', () => {
const light = new AmbientLight('#ffffff', 1);
layer.add(light);
const tiles = new Layer3DTiles(layer, {
url: './hutong/tileset.json',
position: [116.405242513021,39.909402940539]
})
tiles.setRotation({
x:0,
y:0,
z:0
})
tiles.setTranslate({x:15,y:15,z:0})
tiles.on('click',(e) => {
console.log('click: ', e)
})
console.log('layer: ', layer)
console.log('tiles: ', tiles)
})
3dtiles图层类,提供了3dtils加载和常用事件功能
new AMap.Layer3DTiles(layer: AMap.ThreeLayer, options: Layer3DTilesOptions)
layer: ThreeLayer实例对象
options: Layer3DTiles初始化参数,参数内容如下:
属性名 | 属性类型 | 属性描述 |
---|---|---|
url | String | 模型加载地址 |
position | [number,number] | 3dtiles加载的经纬度位置 |
scale | Number,{x:Number, y: Number, z: Number} | 设置缩放比例 |
rotation | {x:Number, y: Number, z: Number} | 旋转模型 |
translate | {x:Number, y: Number, z: Number} | 模型偏移设置 |
dracoDecoderPath | String | DRACOLoader 的decoder路径,默认使用CDN路径,默认:https://cdn.jsdelivr.net/npm/three@0.143/examples/js/libs/draco/ |
fetchOptions | Object | 使用fetch下载文件的参数 |
mouseEvent | Boolean | 是否开启事件,默认false |
debug | Boolean | 是否开启debug,开启后将会在页面最顶部显示当前模型处理情况, 默认 false |
函数名 | 入参 | 返回值 | 描述 |
---|---|---|---|
setScale | Number,{x:Number, y: Number, z: Number} | 无 | 设置缩放比例 |
setPosition | [Number,Number] (经纬度) | 无 | 设置模型位置 |
setRotation | {x:Number, y: Number, z: Number} | 无 | 旋转模型 |
setTranslate | {x:Number, y: Number, z: Number} | 无 | 模型偏移设置 |
getGroup | 无 | Group | 获取3dtiles的Group对象 |
getTilesRenderer | 无 | TilesRenderer | 获取3dtile渲染的对象,该对象为3d-tiles-renderer 的对象,文档地址 |
refresh | 无 | 无 | 刷新图层 |
show | 无 | 无 | 显示模型 |
hide | 无 | 无 | 隐藏模型 |
destroy | 无 | 无 | 销毁模型 |
事件名 | 参数 | 描述 |
---|---|---|
loadTileSet | TileSet | tileSet加载成功后触发 |
loadModel | {scene, tile} | 加载模型后触发 |
disposeModel | {scene, tile} | 销毁模型后触发 |
click | null, {object: Object3D,batchData: Object} | 点击事件,可能会出现null值,object为点击的模型,batchData为模型所在的扩展数据,通过读取父节点获取 |
mousemove | null, {object: Object3D,batchData: Object} | 鼠标移动事件,可能会出现null值,object为滑动到的模型,batchData为模型所在的扩展数据,通过读取父节点获取 |
rightClick | null, {object: Object3D,batchData: Object} | 右击事件,可能会出现null值,object为点击的模型,batchData为模型所在的扩展数据,通过读取父节点获取 |