dmp-three-layer v0.0.3

@amap/three-layer

示例

codepen示例

简介

本项目为高德地图的threejs图层插件，包含ThreeLayer图层、ThreeGltf加载

加载方式

当前项目支持CDN加载和npm加载两种方式。

CDN加载

CDN加载需要先加载高德地图JS和threejs的库，代码如下

<!--加载高德地图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>
<!--加载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>

npm加载

npm加载可以直接使用安装库

npm install '@amap/three-layer'

使用示例

CDN方式

<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/GLTFLoader.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/@amap/three-layer/dist/index.js"></script>
<script type="text/javascript">
  const map = new AMap.Map('app', {
      center: [120,31],
      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 gltf = new AMap.ThreeGltf(layer, {
          url: 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf',
          configLoader: (loader) =>{
              const dracoLoader = new THREE.DRACOLoader()
              dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.143/examples/js/libs/draco/');
              loader.setDRACOLoader( dracoLoader );
          },
          position: [120, 31],
          scale: 800,
          rotation: {
              x:90,
              y:0,
              z:0
          }
      })
      console.log('layer: ', layer)
      console.log('gltf: ', gltf)
  })
</script>

npm方式

import {AmbientLight} from 'three'
import {ThreeLayer, ThreeGltf} from '@amap/three-layer'
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 gltf = new ThreeGltf(layer, {
    url: 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf',
    position: [120, 31],
    scale: 800,
    rotation: {
      x:90,
      y:0,
      z:0
    }
  })
  console.log('layer: ', layer)
  console.log('gltf: ', gltf)
})

API文档说明

ThreeLayer图层说明

基于threejs实现的three图层类，提供了基础的添加、删除物体、转换坐标等功能 new AMap.ThreeLayer(map: AMap.Map, options: ThreeLayerOptions)

参数说明

map: 地图实例对象 options: ThreeLayer初始化参数，参数内容如下：

成员函数

事件列表

ThreeGltf类说明

基于threejs实现的GLTF加载类，提供了基础的gltf模型加载，位置移动、缩放、旋转、高度等功能 new AMap.ThreeGltf(layer: AMap.ThreeLayer, options: ThreeGltfOptions)

参数说明

layer: ThreeLayer实例对象 options: ThreeGltf初始化参数，参数内容如下：

成员函数

事件列表

以上都是 amap-three 的文档说明，下面是扩展的部分，保持跟 ThreeGltf 同风格 API

GeoBuilding 类说明

import {GeoBuilding} from '@amap/three-layer'

new GeoBuilding(layer, {
  source,
  sideMapUrl: mapImageUrl,
  sideAlphaMapUrl: alphaMapImageUrl,
  topAlphaMapUrl: alphaMapImageUrl,
  topMapUrl: mapImageUrl,
  tooltip(properties) {
    if (properties.floor_status) {
      const [done, doing, todo] = properties.floor_status
      return `<div class="city-label">${properties.title}：<br/>建成${done}层, 建设中${doing}层, 待建${todo}层</div>`
    }
    return `<div class="city-label">${properties.title}：${properties.floor_count}层</div>`
  }
})

参数说明

map: 地图实例对象 options: GeoBuilding 初始化参数，参数内容如下：

更多类型说明看 src/packages/geoBuilding/index.ts