├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .npmrc
├── .nvmrc
├── .prettierignore
├── .prettierrc.js
├── CHANGELOG.md
├── LICENSE
├── README.md
├── build
    └── RemoveGlobalNamePlugin.js
├── lint-staged.config.js
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── rollup.config.js
├── scripts
    ├── .eslintrc.js
    └── publish.sh
├── src
    ├── index.ts
    ├── packages
    │   ├── event
    │   │   └── index.ts
    │   ├── gltf
    │   │   └── index.ts
    │   ├── index.ts
    │   └── layer
    │   │   └── index.ts
    └── utils
    │   └── threeUtil.js
├── test
    ├── ferrari.glb
    └── index.html
├── tsconfig.json
└── types
    └── global.d.ts


/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | !.*
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | // eslint-disable-next-line @typescript-eslint/no-var-requires,no-undef
  2 | const { defineConfig } = require('eslint-define-config')
  3 | 
  4 | // eslint-disable-next-line no-undef
  5 | module.exports = defineConfig({
  6 |   root: true,
  7 |   parserOptions: {
  8 |     parser: '@typescript-eslint/parser',
  9 |     sourceType: 'module',
 10 |     ecmaFeatures: {
 11 |       jsx: true,
 12 |       tsx: true,
 13 |     },
 14 |   },
 15 |   env: {
 16 |     browser: true,
 17 |     node: false,
 18 |   },
 19 |   globals: {
 20 |     jest: 'readonly',
 21 |     "AMap": true,
 22 |     "particlesJS": true,
 23 |     "expect": true,
 24 |     "sinon": true,
 25 |     "Loca": true,
 26 |     "VueAmap": true
 27 |   },
 28 |   plugins: ['@typescript-eslint', 'import'],
 29 |   extends: [
 30 |     'eslint:recommended',
 31 |     'plugin:@typescript-eslint/recommended'
 32 |   ],
 33 |   overrides: [
 34 |     {
 35 |       files: ['*.ts', '*.vue'],
 36 |       rules: {
 37 |         'no-undef': 'off',
 38 |       },
 39 |     },
 40 |     {
 41 |       files: ['**/__tests__/**', '**/gulpfile.ts'],
 42 |       rules: {
 43 |         'no-console': 'off',
 44 |       },
 45 |     },
 46 |   ],
 47 |   rules: {
 48 |     // js/ts
 49 |     'no-console': ['warn', { allow: ['error'] }],
 50 |     'no-restricted-syntax': ['error', 'LabeledStatement', 'WithStatement'],
 51 |     camelcase: ['error', { properties: 'never' }],
 52 | 
 53 |     'no-var': 'error',
 54 |     'no-empty': ['error', { allowEmptyCatch: true }],
 55 |     'no-void': 'error',
 56 |     'prefer-const': [
 57 |       'warn',
 58 |       { destructuring: 'all', ignoreReadBeforeAssign: true },
 59 |     ],
 60 |     'prefer-template': 'error',
 61 |     'object-shorthand': [
 62 |       'error',
 63 |       'always',
 64 |       { ignoreConstructors: false, avoidQuotes: true },
 65 |     ],
 66 |     'block-scoped-var': 'error',
 67 |     'no-constant-condition': ['error', { checkLoops: false }],
 68 | 
 69 |     '@typescript-eslint/explicit-module-boundary-types': 'off',
 70 |     '@typescript-eslint/no-explicit-any': 'off',
 71 |     '@typescript-eslint/no-non-null-assertion': 'off',
 72 |     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
 73 |     '@typescript-eslint/consistent-type-imports': [
 74 |       'error',
 75 |       { disallowTypeAnnotations: false },
 76 |     ],
 77 |     '@typescript-eslint/no-this-alias': ['off'],
 78 | 
 79 |     // vue
 80 |     'vue/no-v-html': 'off',
 81 |     'vue/require-default-prop': 'off',
 82 |     'vue/require-explicit-emits': 'off',
 83 |     'vue/multi-word-component-names': 'off',
 84 | 
 85 |     // import
 86 |     'import/first': 'error',
 87 |     'import/no-duplicates': 'error',
 88 |     'import/order': [
 89 |       'error',
 90 |       {
 91 |         groups: [
 92 |           'builtin',
 93 |           'external',
 94 |           'internal',
 95 |           'parent',
 96 |           'sibling',
 97 |           'index',
 98 |           'object',
 99 |           'type',
100 |         ],
101 | 
102 |         pathGroupsExcludedImportTypes: ['type'],
103 |       },
104 |     ],
105 |   },
106 | })
107 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Build and Release Folders
 2 | bin-debug/
 3 | bin-release/
 4 | [Oo]bj/
 5 | [Bb]in/
 6 | 
 7 | # Other files and folders
 8 | .settings/
 9 | 
10 | # Executables
11 | *.swf
12 | *.air
13 | *.ipa
14 | *.apk
15 | 
16 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties`
17 | # should NOT be excluded as they contain compiler settings and other important
18 | # information for Eclipse / Flash Builder.
19 | 
20 | dist
21 | node_modules
22 | .idea
23 | *.log
24 | .temp
25 | .cache
26 | dist.zip
27 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist = true
2 | @fj:registry=https://npm.fjdynamics.com/repository/npm-hosted/
3 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | v16
2 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | *.sh
 2 | node_modules
 3 | *.md
 4 | *.woff
 5 | *.ttf
 6 | .vscode
 7 | .idea
 8 | dist
 9 | /public
10 | .husky
11 | .local
12 | /bin
13 | Dockerfile
14 | .eslintrc.js
15 | lint-staged.config.js
16 | postcss.config.js
17 | .prettierrc.js
18 | .commitlintrc.js
19 | tailwind.config.js
20 | config
21 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   endOfLine: 'auto', // 允许代码结尾是回车或者换行，\n\r
 3 |   printWidth: 120, // 换行字符串阈值
 4 |   htmlWhitespaceSensitivity: "ignore",
 5 |   tabWidth: 2, // 水平缩进的空格数
 6 |   useTabs: false,
 7 |   semi: false, // 句末是否加分号
 8 |   vueIndentScriptAndStyle: true,
 9 |   singleQuote: true, // 用单引号
10 |   trailingComma: 'none', // 最后一个对象元素加逗号
11 |   bracketSpacing: true, // 对象，数组加空格
12 |   bracketSameLine: true, // > 是否另起一行
13 |   arrowParens: 'always' // (x) => {} 是否要有小括号
14 | }
15 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ### 0.0.5
 2 | * 解决与loca一起使用时坐标转换异常问题
 3 | * Gltf增加configLoader,用于扩展gltf配置，增加扩展能力
 4 | * 修改打包，es包后缀更改为mjs
 5 | 
 6 | ### 0.0.4
 7 | * 解决发包问题
 8 | 
 9 | ### 0.0.3
10 | * ThreeLayer初始化参数增加onInit 和 onRender函数
11 | * Gltf增加 onLoaded 参数
12 | 
13 | ### 0.0.2
14 | 修改GLTF的scale参数类型，从数组调整为Vec3
15 | 
16 | ### 0.0.1
17 | 初始版本，完成threelayer图层和gltf加载
18 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 amap
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # @amap/three-layer
  2 | [![npm (tag)](https://img.shields.io/npm/v/@amap/three-layer)](https://www.npmjs.org/package/@amap/three-layer)
  3 | [![NPM downloads](http://img.shields.io/npm/dm/@amap/three-layer.svg)](https://npmjs.org/package/@amap/three-layer)
  4 | ![JS gzip size](http://img.badgesize.io/https://unpkg.com/@amap/three-layer/dist/index.js?compression=gzip&label=gzip%20size:%20JS)
  5 | [![NPM](https://img.shields.io/npm/l/@amap/three-layer)](https://github.com/AMap-Web/amap-three)
  6 | [![star](https://badgen.net/github/stars/amap-web/amap-three)](https://github.com/AMap-Web/amap-three)
  7 | 
  8 | ### 示例
  9 | [codepen示例](https://codepen.io/yangyanggu/pen/jOxyJqp)
 10 | 
 11 | ### 简介
 12 | 本项目为高德地图的threejs图层插件，包含ThreeLayer图层、ThreeGltf加载
 13 | 
 14 | ### 加载方式
 15 | 当前项目支持CDN加载和npm加载两种方式。
 16 | 
 17 | #### CDN加载
 18 | CDN加载需要先加载高德地图JS和threejs的库，代码如下
 19 | ```js
 20 | <!--加载高德地图JS 2.0 -->
 21 | <script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
 22 | <!--加载threejs -->
 23 | <script src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.js"></script>
 24 | <!--加载threejs的GLTFLoader -->
 25 | <script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/loaders/GLTFLoader.js"></script>
 26 | <!--加载three-layer插件 -->
 27 | <script src="https://cdn.jsdelivr.net/npm/@amap/three-layer/dist/index.js"></script>
 28 | ```
 29 | 
 30 | #### npm加载
 31 | npm加载可以直接使用安装库
 32 | ```shell
 33 | npm install '@amap/three-layer'
 34 | ```
 35 | 
 36 | ### 使用示例
 37 | 
 38 | #### CDN方式
 39 | ```js
 40 | <script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
 41 | <script src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.js"></script>
 42 | <script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/loaders/GLTFLoader.js"></script>
 43 | <script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/loaders/DRACOLoader.js"></script>
 44 | <script src="https://cdn.jsdelivr.net/npm/@amap/three-layer/dist/index.js"></script>
 45 | <script type="text/javascript">
 46 |   const map = new AMap.Map('app', {
 47 |       center: [120,31],
 48 |       zoom: 14,
 49 |       viewMode: '3D',
 50 |       pitch: 35
 51 |     })
 52 |   const layer = new AMap.ThreeLayer(map)
 53 |   layer.on('complete', () => {
 54 |       const light = new THREE.AmbientLight('#ffffff', 1);
 55 |       layer.add(light);
 56 |       const gltf = new AMap.ThreeGltf(layer, {
 57 |           url: 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf',
 58 |           configLoader: (loader) =>{
 59 |               const dracoLoader = new THREE.DRACOLoader()
 60 |               dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.143/examples/js/libs/draco/');
 61 |               loader.setDRACOLoader( dracoLoader );
 62 |           },
 63 |           position: [120, 31],
 64 |           scale: 800,
 65 |           rotation: {
 66 |               x:90,
 67 |               y:0,
 68 |               z:0
 69 |           }
 70 |       })
 71 |       console.log('layer: ', layer)
 72 |       console.log('gltf: ', gltf)
 73 |   })
 74 | </script>
 75 | ```
 76 | 
 77 | #### npm方式
 78 | ```js
 79 | import {AmbientLight} from 'three'
 80 | import {ThreeLayer, ThreeGltf} from '@amap/three-layer'
 81 | const map = new AMap.Map('app', {
 82 |   center: [120,31],
 83 |   zoom: 14,
 84 |   viewMode: '3D',
 85 |   pitch: 35
 86 | })
 87 | const layer = new ThreeLayer(map)
 88 | layer.on('complete', () => {
 89 |   const light = new AmbientLight('#ffffff', 1);
 90 |   layer.add(light);
 91 |   const gltf = new ThreeGltf(layer, {
 92 |     url: 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf',
 93 |     position: [120, 31],
 94 |     scale: 800,
 95 |     rotation: {
 96 |       x:90,
 97 |       y:0,
 98 |       z:0
 99 |     }
100 |   })
101 |   console.log('layer: ', layer)
102 |   console.log('gltf: ', gltf)
103 | })
104 | ```
105 | 
106 | ### API文档说明
107 | 
108 | #### ThreeLayer图层说明
109 | 基于threejs实现的three图层类，提供了基础的添加、删除物体、转换坐标等功能<br/>
110 | ``  new AMap.ThreeLayer(map: AMap.Map, options: ThreeLayerOptions)  ``<br/>
111 | ###### 参数说明
112 | map: 地图实例对象<br/>
113 | options: ThreeLayer初始化参数，参数内容如下：
114 | 
115 | | 属性名 | 属性类型            | 属性描述                               |
116 | | ---- |-----------------|------------------------------------|
117 | | zIndex | Number          | 图层的层级，默认为 120                      |
118 | | visible | Boolean         | 图层是否可见，默认为 true                    |
119 | | zooms  | [Number,Number] | 图层缩放等级范围，默认 [2, 20]                |
120 | | opacity | Number          | 图层透明度，默认为 1                        |
121 | | alpha   | Boolean         | canvas是否包含alpha (透明度)。默认为 false    |
122 | | antialias | Boolean | 是否执行抗锯齿。默认为false                   |
123 | | customCoordsCenter | [Number,Number] | gl自定义图层渲染的中心点，默认为初始化时的地图中心点        |
124 | | onInit | Function(render: WebGLRenderer, scene: Scene, camera: Camera) | GlCustomLayer的init执行后触发回调，用于扩展处理能力 |
125 | | onRender | render: WebGLRenderer, scene: Scene, camera: Camera) | GlCustomLayer的render触发时触发该回调，用于替换刷新功能，可以用于增加threejs的后期处理 | 
126 | 
127 | ###### 成员函数
128 | 
129 | | 函数名 | 入参                                 | 返回值                                              | 描述                                 |
130 | |-----|------------------------------------|--------------------------------------------------|------------------------------------|
131 | | update | 无                                  | 无                                                | 更新图层，执行后将在下次帧刷新时更新图层               |
132 | | convertLngLat | [Number,Number] (经纬度)              | [Number,Number]                                  | 将经纬度转化为世界坐标                        |
133 | | add | Object(threejs的对象，包括灯光、Object3D等等) | 无                                                | 添加对象到场景中，支持所有可添加到场景的对象             |
134 | | remove | Object                             | 无                                                | 从场景中移除对象                           |
135 | | getScene | 无 | THREE.Scene                                      | 获取Threejs的场景对象                     |
136 | | getCamera | 无 | THREE.PerspectiveCamera或THREE.OrthographicCamera | 获取Threejs的相机对象，根据viewMode不同获取的相机不同 |
137 | | getRender | 无 | THREE.WebGLRenderer                                           | 获取Threejs的webglRender              |
138 | | getMap | 无 | AMap.Map | 获取地图实例                             |
139 | | getOpacity | 无 | Number | 获取图层透明度                            |
140 | | setOpacity | Number | 无 | 设置图层透明度 值范围：0 - 1                  |
141 | | getZooms | 无 | [Number,Number] | 获取显示层级范围  |
142 | | setZooms | [Number,Number] | 无 | 设置图层显示的层级范围 |
143 | | getzIndex | 无 | Number | 获取图层层级 |
144 | | setzIndex | Number | 无 | 设置图层层级 |
145 | | show | 无 | 无 | 显示图层 |
146 | | hide | 无 | 无 | 隐藏图层 |
147 | |destroy | 无 | 无 | 销毁图层 |
148 | 
149 | ###### 事件列表
150 | 
151 | | 事件名 | 参数 | 描述 |
152 | | ---- | ---- | ---- |
153 | | complete | 无 | 图层初始化成功 |
154 | 
155 | #### ThreeGltf类说明
156 | 基于threejs实现的GLTF加载类，提供了基础的gltf模型加载，位置移动、缩放、旋转、高度等功能<br/>
157 | ``  new AMap.ThreeGltf(layer: AMap.ThreeLayer, options: ThreeGltfOptions)  ``<br/>
158 | ###### 参数说明
159 | layer: ThreeLayer实例对象<br/>
160 | options: ThreeGltf初始化参数，参数内容如下：
161 | 
162 | | 属性名 | 属性类型                                                        | 属性描述                              |
163 | | ---- |-------------------------------------------------------------|-----------------------------------|
164 | | url | String                                                      | 模型加载地址                            |
165 | | position | [Number,Number]                                             | 模型的经纬度位置信息                        |
166 | | height  | Number                                                      | 模型离地高度，默认0                        |
167 | | rotation | {x:Number, y: Number, z: Number}                            | 模型旋转角度，用于调整模型方向  默认 {x:0,y:0,z:0} |
168 | | scale   | Number，{x:Number, y: Number, z: Number}                     | 模型缩放比例，可以传入数值或者VEC3数据，默认 1        |
169 | | angle | Number                                                      | 模型旋转角度，一般用于车辆模型角度使用，默认 0          |
170 | | onLoaded | Function(gltf: Group, animations:  AnimationClip[]) | 模型加载完成后触发回调                       | 
171 | | configLoader | (loader: GLTFLoader) => void                                                      | 配置loader，用于添加draco等扩展               |
172 | 
173 | ###### 成员函数
174 | 
175 | | 函数名 | 入参                               | 返回值          | 描述               |
176 | |-----|----------------------------------|--------------|------------------|
177 | | setScale | Number，{x:Number, y: Number, z: Number}    | 无            | 设置缩放比例           |
178 | | setPosition | [Number,Number] (经纬度)            | 无            | 设置模型位置           |
179 | | setRotation | {x:Number, y: Number, z: Number} | 无            | 旋转模型             |
180 | | setAngle | Number                           | 无            | 设置模型旋转角度 0 - 360 |
181 | | setHeight | Number                           | 无            | 设置离地高度           |
182 | | getAnimations | 无 | animations数组 | 获取gltf中携带的动画信息   |
183 | | getObject | 无 | Object3D     | 获取模型对象           |
184 | | refresh | 无                                | 无            | 刷新图层             |
185 | | show | 无                                | 无            | 显示模型             |
186 | | hide | 无                                | 无            | 隐藏模型             |
187 | | startAnimations | 无                                | 无            | 执行gltf模型中的动画     |
188 | | stopAnimations | 无                                | 无            | 停止gltf模型中的动画     |
189 | | remove | 无                                | 无            | 从layer中移出模型      |
190 | | destroy | 无                                | 无            | 销毁模型             |
191 | 
192 | ###### 事件列表
193 | 
194 | | 事件名 | 参数                               | 描述                                     |
195 | | ---- |----------------------------------|----------------------------------------|
196 | | complete | {target: Object3D, animations: animations} | 模型初始化成功后触发，返回模型对象和gltf自带的的animations对象 |
197 | 


--------------------------------------------------------------------------------
/build/RemoveGlobalNamePlugin.js:
--------------------------------------------------------------------------------
 1 | import MagicString from 'magic-string'
 2 | 
 3 | export default function RemoveGlobalNamePlugin () {
 4 |   return {
 5 |     name: 'remove-global-name-plugin', // this name will show up in warnings and errors
 6 |     renderChunk ( code , chunk) {
 7 |       const id = chunk.fileName;
 8 |       const magicString = new MagicString(code);
 9 |       if (!codeHasReplacements(code, id, magicString)) {
10 |         return null;
11 |       }
12 | 
13 |       const result = { code: magicString.toString() };
14 |       result.map = magicString.generateMap({ hires: true });
15 |       return result;
16 |     }
17 |   };
18 |   function codeHasReplacements(code, id, magicString) {
19 |     const pattern = /global.AMap\s=\s\{\}/
20 |     let result = false;
21 |     let match;
22 | 
23 |     // eslint-disable-next-line no-cond-assign
24 |     if ((match = pattern.exec(code))) {
25 |       result = true;
26 |       const start = match.index;
27 |       const end = start + match[0].length;
28 |       const replacement = 'global.AMap = global.AMap || {}';
29 |       magicString.overwrite(start, end, replacement);
30 |     }
31 |     return result;
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/lint-staged.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   'src/**/*.{js,ts,vue}': ['eslint --fix --ext .js,.ts,.vue']
3 | }
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@amap/three-layer",
 3 |   "version": "0.0.5",
 4 |   "description": "高德地图amap的threejs图层插件",
 5 |   "keywords": [
 6 |     "amap",
 7 |     "threejs",
 8 |     "高德地图",
 9 |     "threejs图层"
10 |   ],
11 |   "exports": {
12 |     ".": {
13 |       "require": "./dist/index.cjs",
14 |       "import": "./dist/index.mjs",
15 |       "types": "./dist/index.d.ts"
16 |     },
17 |     "./*": "./*"
18 |   },
19 |   "main": "dist/index.cjs",
20 |   "module": "dist/index.mjs",
21 |   "unpkg": "dist/index.js",
22 |   "jsdelivr": "dist/index.js",
23 |   "packageManager": "pnpm@7.9.4",
24 |   "workspaces": [
25 |     "src/*"
26 |   ],
27 |   "engines": {
28 |     "node": ">= 16"
29 |   },
30 |   "scripts": {
31 |     "build": "npm run clean:dist && cross-env NODE_ENV=production rollup -c rollup.config.js",
32 |     "dev": "npm run clean:dist && cross-env NODE_ENV=development rollup -c rollup.config.js -w",
33 |     "clean:dist": "rimraf dist",
34 |     "lint": "eslint --fix --ext .js,.vue src/",
35 |     "prettier": "prettier --write src/",
36 |     "prepublishOnly": "npm run build"
37 |   },
38 |   "browserslist": [
39 |     "> 1%",
40 |     "not ie 11",
41 |     "not op_mini all"
42 |   ],
43 |   "repository": "https://github.com/AMap-Web/amap-three",
44 |   "author": "guyangyang <407042815@qq.com>",
45 |   "license": "MIT",
46 |   "bugs": {
47 |     "url": "https://github.com/AMap-Web/amap-three/issues"
48 |   },
49 |   "homepage": "https://github.com/AMap-Web/amap-three",
50 |   "dependencies": {
51 |     "@amap/amap-jsapi-types": "^0.0.8",
52 |     "@types/three": "0.143.0",
53 |     "three": "0.143.0"
54 |   },
55 |   "devDependencies": {
56 |     "@pnpm/logger": "4.0.0",
57 |     "@pnpm/types": "8.5.0",
58 |     "@rollup/plugin-commonjs": "^22.0.2",
59 |     "@rollup/plugin-node-resolve": "^13.3.0",
60 |     "@rollup/plugin-replace": "4.0.0",
61 |     "@rollup/plugin-typescript": "^8.3.0",
62 |     "@typescript-eslint/eslint-plugin": "5.35.1",
63 |     "@typescript-eslint/parser": "5.35.1",
64 |     "cross-env": "^7.0.3",
65 |     "esbuild": "^0.15.5",
66 |     "eslint": "8.22.0",
67 |     "eslint-config-prettier": "8.3.0",
68 |     "eslint-define-config": "1.6.0",
69 |     "eslint-plugin-import": "2.25.3",
70 |     "eslint-plugin-prettier": "^4.2.1",
71 |     "fast-glob": "3.2.7",
72 |     "fs-extra": "10.0.0",
73 |     "gulp": "4.0.2",
74 |     "lint-staged": "^12.4.0",
75 |     "magic-string": "^0.25.7",
76 |     "prettier": "^2.7.1",
77 |     "rimraf": "3.0.2",
78 |     "rollup": "^2.78.1",
79 |     "rollup-plugin-esbuild": "4.9.3",
80 |     "rollup-plugin-filesize": "9.1.2",
81 |     "rollup-plugin-livereload": "^2.0.5",
82 |     "rollup-plugin-serve": "^2.0.1",
83 |     "typescript": "^4.7.4"
84 |   },
85 |   "types": "dist/index.d.ts",
86 |   "files": [
87 |     "dist",
88 |     "src"
89 |   ]
90 | }
91 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | #
2 | packages:
3 |   - 'src/**'
4 |   - '!packages/__mocks__'
5 |   - '!**/__tests__/**'
6 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | // 将CommonJS模块转换为ES6
 2 | import commonjs from '@rollup/plugin-commonjs'
 3 | // 在node_模块中查找并绑定第三方依赖项
 4 | import nodeResolve from '@rollup/plugin-node-resolve'
 5 | // 开发服务器
 6 | import serve from 'rollup-plugin-serve'
 7 | // 热更新服务
 8 | import livereload from 'rollup-plugin-livereload'
 9 | 
10 | import esbuild from 'rollup-plugin-esbuild'
11 | import typescript from '@rollup/plugin-typescript';
12 | 
13 | import RemoveGlobalNamePlugin from "./build/RemoveGlobalNamePlugin";
14 | 
15 | 
16 | function isProd(){
17 |   return process.env.NODE_ENV === 'production';
18 | }
19 | 
20 | export default {
21 |   external: [/^three/],
22 |   input: 'src/index.ts',
23 |   output: [
24 |     {
25 |       file: './dist/index.js',
26 |       format: 'umd',
27 |       sourcemap: true,
28 |       name: 'AMap',
29 |       plugins: [RemoveGlobalNamePlugin()],
30 |       globals: {
31 |         three: 'THREE',
32 |         'three/examples/jsm/loaders/GLTFLoader.js': 'THREE'
33 |       }
34 |       //当入口文件有export时，'umd'格式必须指定name
35 |       //这样，在通过<script>标签引入时，才能通过name访问到export的内容。
36 |     },
37 |     {
38 |       file: './dist/index.mjs',
39 |       format: 'es',
40 |       sourcemap: true
41 |     },
42 |     {
43 |       file: './dist/index.cjs',
44 |       format: 'cjs',
45 |       sourcemap: true
46 |     }
47 |   ],
48 |   // 监听的文件
49 |   watch: {
50 |     exclude: 'node_modules/**'
51 |   },
52 |   // 不参与打包
53 |   plugins: [
54 |     typescript({
55 |       tsconfig: 'tsconfig.json'
56 |     }),
57 |     nodeResolve({
58 |       extensions: ['.mjs', '.js', '.json', '.ts'],
59 |     }),
60 |     commonjs(),
61 |     esbuild({
62 |       // All options are optional
63 |       include: /\.[jt]sx?$/, // default, inferred from `loaders` option
64 |       exclude: /node_modules/, // default
65 |       sourceMap: true, // default
66 |       minify: isProd(),
67 |       target: 'es2017', // default, or 'es20XX', 'esnext'
68 |       jsx: 'transform', // default, or 'preserve'
69 |       // Like @rollup/plugin-replace
70 |       tsconfig: 'tsconfig.json', // default
71 |       // Add extra loaders
72 |       loaders: {
73 |         // Add .json files support
74 |         // require @rollup/plugin-commonjs
75 |         '.json': 'json',
76 |       },
77 |     }),
78 |     // 热更新
79 |     !isProd() && livereload({
80 |       watch: ['dist', 'test'],
81 |       verbose: false
82 |     }),
83 |     // 开发模式开启静态服务器
84 |     !isProd() && serve({
85 |       open: true,
86 |       port: 8080,
87 |       contentBase: ['dist', 'test', './'],
88 |       openPage: '/index.html'
89 |     })
90 |   ]
91 | }
92 | 


--------------------------------------------------------------------------------
/scripts/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   rules: {
3 |     'no-console': 'off',
4 |   },
5 | }
6 | 


--------------------------------------------------------------------------------
/scripts/publish.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | set -e
 4 | 
 5 | pnpm run build
 6 | 
 7 | cd ..
 8 | 
 9 | npm publish --access public
10 | cd -
11 | 
12 | echo "Publish completed"
13 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './packages'
2 | 


--------------------------------------------------------------------------------
/src/packages/event/index.ts:
--------------------------------------------------------------------------------
 1 | interface ListenerItem{
 2 |   callback: Callback
 3 |   isOnce?: boolean
 4 | }
 5 | interface Listeners {
 6 |   [key: string]: ListenerItem[]
 7 | }
 8 | type Callback = <T>(e: T) => void
 9 | abstract class BaseEvent {
10 |   private _listeners: Listeners = {}
11 | 
12 |   /**
13 |    * 绑定事件
14 |    * @param name 事件名称
15 |    * @param cb  事件回调
16 |    * @param isOnce 是否只执行一次
17 |    */
18 |   on(name:string, cb: Callback, isOnce?: boolean):void{
19 |     if(this._listeners[name]){
20 |       this._listeners[name].push({
21 |         callback: cb,
22 |         isOnce
23 |       })
24 |     }else{
25 |       this._listeners[name] = [{
26 |         callback: cb,
27 |         isOnce
28 |       }]
29 |     }
30 |   }
31 |   off(name:string, cb: Callback){
32 |     if(!cb){
33 |       throw new Error('取消事件时需要传入原回调函数')
34 |     }
35 |     const listeners = this._listeners[name]
36 |     if(listeners && listeners.length > 0){
37 |       for(let i=0;i<listeners.length;i++){
38 |         const current = listeners[i]
39 |         if(current.callback === cb){
40 |           listeners.splice(i, 1)
41 |           break
42 |         }
43 |       }
44 |     }
45 |   }
46 |   emit(name:string, data?: any){
47 |     const listeners = this._listeners[name]
48 |     if(listeners && listeners.length > 0){
49 |       for(let i=0;i<listeners.length;i++){
50 |         const current = listeners[i]
51 |         current.callback.call(this, data)
52 |         if(current.isOnce){
53 |           listeners.splice(i, 1)
54 |           i--
55 |         }
56 |       }
57 |     }
58 |   }
59 | }
60 | 
61 | export default BaseEvent
62 | 


--------------------------------------------------------------------------------
/src/packages/gltf/index.ts:
--------------------------------------------------------------------------------
  1 | import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
  2 | import { AnimationMixer, Clock} from 'three';
  3 | import BaseEvent from '../event';
  4 | import {clearGroup} from '../../utils/threeUtil';
  5 | import type {AnimationClip, Group} from 'three';
  6 | 
  7 | interface Vec {
  8 |   x: number
  9 |   y: number
 10 |   z: number
 11 | }
 12 | 
 13 | export interface GltfOptions {
 14 |   url: string //模型下载地址
 15 |   position: number[] // 模型的经纬度
 16 |   height: number  // 高度，模型的离地高度
 17 |   rotation: Vec // 模型旋转角度
 18 |   scale: number | Vec  //模型缩放级别，可以整体缩放和按X Y Z缩放
 19 |   angle: number //  模型旋转角度
 20 |   configLoader: (loader: GLTFLoader) => void // 配置loader，用于添加draco等扩展
 21 |   onLoaded: (gltf: Group, animations:  AnimationClip[]) => void // gltf加载并且处理完成后回调
 22 | }
 23 | 
 24 | class ThreeGltf extends BaseEvent{
 25 |   object: any; // 加载模型后的Object3D对象
 26 |   animations: any; // 模型的动画
 27 |   layer: any; // threejs的图层对象
 28 |   linerAnimationFrame = -1; //gltf动画
 29 | 
 30 |   constructor(layer: any, options: GltfOptions) {
 31 |     super();
 32 |     this.layer = layer;
 33 |     const defaultOptions = {
 34 |       url: '',
 35 |       position: [0,0],
 36 |       height: 0,
 37 |       rotation: {
 38 |         x: 0,
 39 |         y: 0,
 40 |         z: 0
 41 |       },
 42 |       scale: 1,
 43 |       angle: 0
 44 |     }
 45 |     options = Object.assign({}, defaultOptions, options);
 46 |     this.init(options);
 47 |   }
 48 | 
 49 |   init(options: GltfOptions) {
 50 |     const loader = new GLTFLoader(); // 读取模型
 51 |     if (options.configLoader){
 52 |       options.configLoader(loader)
 53 |     }
 54 |     loader.load(options.url, (gltf) => {
 55 |       const object = gltf.scene;
 56 |       const animations = gltf.animations;
 57 |       this.layer.add(object);
 58 |       this.object = object;
 59 |       this.animations = animations;
 60 |       this.setScale(options.scale);
 61 |       this.setRotation(options.rotation);
 62 |       this.setAngle(options.angle);
 63 |       this.setPosition(options.position);
 64 |       this.setHeight(options.height);
 65 |       if(options.onLoaded){
 66 |         options.onLoaded(object,animations);
 67 |       }
 68 |       this.emit('complete', {
 69 |         target: object,
 70 |         animations
 71 |       });
 72 |     });
 73 |   }
 74 | 
 75 |   setScale(scale: number | Vec) {
 76 |     let scaleVec: Vec;
 77 |     if (typeof scale === 'number') {
 78 |       scaleVec = {
 79 |         x: scale,
 80 |         y: scale,
 81 |         z: scale
 82 |       };
 83 |     } else {
 84 |       scaleVec = scale;
 85 |     }
 86 |     this.object.scale.set(scaleVec.x, scaleVec.y, scaleVec.z);
 87 |     this.refresh();
 88 |   }
 89 | 
 90 |   setPosition(position) {
 91 |     const positionConvert = this.layer.convertLngLat(position);
 92 |     this.object.position.setX(positionConvert[0]);
 93 |     this.object.position.setY(positionConvert[1]);
 94 |     this.refresh();
 95 |   }
 96 | 
 97 |   setRotation(rotation: Vec) {
 98 |     if (rotation) {
 99 |       const x = Math.PI / 180 * (rotation.x || 0);
100 |       const y = Math.PI / 180 * (rotation.y || 0);
101 |       const z = Math.PI / 180 * (rotation.z || 0);
102 |       this.object.rotation.set(x, y, z);
103 |       this.refresh();
104 |     }
105 |   }
106 | 
107 |   setAngle(angle: number) {
108 |     const x = this.object.rotation.x;
109 |     const z = this.object.rotation.z;
110 |     const y = Math.PI / 180 * angle;
111 |     this.object.rotation.set(x, y, z);
112 |     this.refresh();
113 |   }
114 | 
115 |   setHeight(height) {
116 |     if (height !== undefined) {
117 |       this.object.position.setZ(height);
118 |       this.refresh();
119 |     }
120 |   }
121 | 
122 |   getAnimations() {
123 |     return this.animations;
124 |   }
125 | 
126 |   getObject() {
127 |     return this.object;
128 |   }
129 | 
130 |   refresh() {
131 |     this.layer.update();
132 |   }
133 | 
134 |   show() {
135 |     this.object.visible = true;
136 |     this.refresh();
137 |   }
138 | 
139 |   hide() {
140 |     this.object.visible = false;
141 |     this.refresh();
142 |   }
143 | 
144 |   animate(callback) {
145 |     this.linerAnimationFrame = requestAnimationFrame(() => {
146 |       this.animate(callback);
147 |     });
148 |     callback();
149 |   }
150 | 
151 |   startAnimations() {
152 |     if (this.animations) {
153 |       const animations = this.animations;
154 |       const mixer = new AnimationMixer(this.object);
155 |       const actions = {};
156 |       for (let i = 0; i < animations.length; i++) {
157 |         const clip = animations[i];
158 |         actions[clip.name] = mixer.clipAction(clip);
159 |       }
160 |       const clock = new Clock();
161 |       for (const name in actions) {
162 |         actions[name].play();
163 |       }
164 |       this.animate(() => {
165 |         const dt = clock.getDelta();
166 |         if (mixer) mixer.update(dt);
167 |         this.refresh();
168 |       });
169 |     }
170 |   }
171 | 
172 |   stopAnimations() {
173 |     cancelAnimationFrame(this.linerAnimationFrame);
174 |   }
175 | 
176 |   remove(){
177 |     if (this.object) {
178 |       this.layer.remove(this.object);
179 |     }
180 |   }
181 | 
182 |   destroy() {
183 |     this.stopAnimations();
184 |     if (this.object) {
185 |       clearGroup(this.object);
186 |       this.object = null;
187 |       this.layer = null;
188 |     }
189 |   }
190 | }
191 | 
192 | export {ThreeGltf}
193 | 


--------------------------------------------------------------------------------
/src/packages/index.ts:
--------------------------------------------------------------------------------
1 | export * from './layer'
2 | export * from './gltf'
3 | 


--------------------------------------------------------------------------------
/src/packages/layer/index.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   PerspectiveCamera,
  3 |   OrthographicCamera,
  4 |   WebGLRenderer,
  5 |   Scene,
  6 |   Cache,
  7 | } from 'three';
  8 | import Event from '../event'
  9 | import {clearScene} from "../../utils/threeUtil";
 10 | import type {Camera} from 'three';
 11 | 
 12 | export interface ThreeLayerOptions{
 13 |   zIndex?: number
 14 |   visible?: boolean //  是否显示
 15 |   zooms?: number[] // 支持的缩放级别范围，默认范围 [2, 20]
 16 |   opacity?: number // 透明度，默认1
 17 |   alpha?: boolean // canvas是否包含alpha (透明度)。默认为 false
 18 |   antialias?: boolean //是否执行抗锯齿。默认为false
 19 |   customCoordsCenter?: number[] // 默认gl自定义图层渲染的中心点
 20 |   onInit?: (render: WebGLRenderer, scene: Scene, camera: Camera) => void // 初始化完成做处理，主要用于GlCustom的init执行后做一些处理
 21 |   onRender?: (render: WebGLRenderer, scene: Scene, camera: Camera) => void // 渲染时候执行，用于替换默认的render，可以扩展后期处理等功能
 22 | }
 23 | 
 24 | class ThreeLayer extends Event{
 25 |   customCoords: any
 26 |   center: number[] // 图层显示的中心点，默认是初始化时的地图中心，尽量使用模型的第一个点
 27 |   layer: any // GLCustomLayer图层实例
 28 |   renderer?: WebGLRenderer;
 29 |   camera?: PerspectiveCamera | OrthographicCamera; // 相机实例
 30 |   scene?: Scene; //场景实例
 31 |   options: ThreeLayerOptions //初始化参数
 32 |   map: any; // 地图实例
 33 |   frameTimer = -1; // 刷新图层的定时器
 34 |   needsUpdate = false; //是否需要更新图层，默认false
 35 | 
 36 |   constructor(map: any, options?: ThreeLayerOptions) {
 37 |     super();
 38 |     options = options || {};
 39 |     this.customCoords = (map as any).customCoords;
 40 |     this.center = options.customCoordsCenter || map.getCenter().toArray();
 41 |     this.customCoords.lngLatsToCoords([
 42 |       this.center
 43 |     ])
 44 |     const defaultOptions = {
 45 |       zooms: [2,20],
 46 |       opacity: 1,
 47 |       alpha: false,
 48 |       antialias: false,
 49 |       visible: true,
 50 |       zIndex: 120
 51 |     }
 52 |     this.options = Object.assign({}, defaultOptions, options);
 53 |     this.map = map;
 54 |     this.init();
 55 |   }
 56 | 
 57 |   init() {
 58 |     const map = this.map;
 59 |     const options = this.options;
 60 |     const layerOptions = {
 61 |       zooms: options.zooms,
 62 |       opacity: options.opacity,
 63 |       visible: options.visible,
 64 |       zIndex: options.zIndex,
 65 |       init: (gl) => {
 66 |         // 这里我们的地图模式是 3D，所以创建一个透视相机，相机的参数初始化可以随意设置，因为在 render 函数中，每一帧都需要同步相机参数，因此这里变得不那么重要。
 67 |         // 如果你需要 2D 地图（viewMode: '2D'），那么你需要创建一个正交相机
 68 |         const container = map.getContainer();
 69 |         const width = container.offsetWidth;
 70 |         const height = container.offsetHeight;
 71 |         let camera;
 72 |         if (map.getView().type === '3D') {
 73 |           camera = new PerspectiveCamera(60, width / height, 100, 1 << 30);
 74 |         } else {
 75 |           camera = new OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);
 76 |         }
 77 |         const renderer = new WebGLRenderer({
 78 |           context: gl, // 地图的 gl 上下文
 79 |           alpha: options.alpha,
 80 |           antialias: options.antialias
 81 |           // canvas: gl.canvas,
 82 |         });
 83 |         renderer.setSize(width, height);
 84 | 
 85 |         // 自动清空画布这里必须设置为 false，否则地图底图将无法显示
 86 |         renderer.autoClear = false;
 87 |         const scene = new Scene();
 88 |         this.camera = camera;
 89 |         this.renderer = renderer;
 90 |         this.scene = scene;
 91 |         if(options.onInit){
 92 |           options.onInit(renderer,scene,camera);
 93 |         }
 94 |         this.animate();
 95 |         this.emit('complete');
 96 |       },
 97 |       render: () => {
 98 |         // 这里必须执行！！重新设置 three 的 gl 上下文状态。
 99 |         this.renderer?.resetState();
100 |         this.customCoords.setCenter(this.center);
101 |         const camera = this.camera;
102 |         // 2D 地图下使用的正交相机
103 |         if (map.getView().type === '3D') {
104 |           const {near, far, fov, up, lookAt, position} = this.customCoords.getCameraParams() as {
105 |             near: number;
106 |             far: number;
107 |             fov: number;
108 |             up: [number, number,number];
109 |             lookAt: [number, number,number];
110 |             position: [number, number,number]
111 |           };
112 |           // 2D 地图下使用的正交相机
113 |           // 这里的顺序不能颠倒，否则可能会出现绘制卡顿的效果。
114 |           (camera as PerspectiveCamera).near = near;
115 |           (camera as PerspectiveCamera).far = far;
116 |           (camera as PerspectiveCamera).fov = fov;
117 |           (camera as PerspectiveCamera).position.set(...position);
118 |           (camera as PerspectiveCamera).up.set(...up);
119 |           (camera as PerspectiveCamera).lookAt(...lookAt);
120 |           (camera as PerspectiveCamera).updateProjectionMatrix();
121 |         } else {
122 |           const {top, bottom, left, right, position} = this.customCoords.getCameraParams() as {
123 |             top: number;
124 |             bottom: number;
125 |             left: number;
126 |             right: number;
127 |             position: [number, number, number]
128 |           };
129 |           // 2D 地图使用的正交相机参数赋值
130 |           (camera as OrthographicCamera).top = top;
131 |           (camera as OrthographicCamera).bottom = bottom;
132 |           (camera as OrthographicCamera).left = left;
133 |           (camera as OrthographicCamera).right = right;
134 |           (camera as OrthographicCamera).position.set(...position);
135 |           (camera as OrthographicCamera).updateProjectionMatrix();
136 |         }
137 |         this.camera = camera;
138 |         if(options.onRender){
139 |           options.onRender(this.renderer as WebGLRenderer,this.scene as Scene,this.camera as Camera);
140 |         }else{
141 |           this.renderer?.render(this.scene as Scene, camera as Camera);
142 |         }
143 |         this.renderer?.resetState();
144 |       }
145 |     }
146 |     this.layer = new AMap.GLCustomLayer(layerOptions);
147 |     this.layer.setMap(map);
148 |   }
149 | 
150 |   update(){
151 |     this.needsUpdate = true;
152 |   }
153 | 
154 |   animate() {
155 |     if (this.needsUpdate) {
156 |       this.refreshMap();
157 |       this.needsUpdate = false;
158 |     }
159 |     this.frameTimer = requestAnimationFrame(() => {
160 |       this.animate();
161 |     });
162 |   }
163 | 
164 |   refreshMap() {
165 |     if (this.map) {
166 |       this.map.render();
167 |     }
168 |   }
169 | 
170 |   convertLngLat(lnglat) {
171 |     this.customCoords.setCenter(this.center)
172 |     const data = this.customCoords.lngLatsToCoords([
173 |       lnglat
174 |     ]);
175 |     return data[0];
176 |   }
177 | 
178 |   // 往场景中添加对象
179 |   add(object) {
180 |     this.scene?.add(object);
181 |     this.refreshMap();
182 |   }
183 | 
184 |   // 从场景中移除对象
185 |   remove(object) {
186 |     this.scene?.remove(object);
187 |     this.refreshMap();
188 |   }
189 | 
190 |   getScene() {
191 |     return this.scene
192 |   }
193 | 
194 |   getCamera() {
195 |     return this.camera;
196 |   }
197 | 
198 |   getRender() {
199 |     return this.renderer;
200 |   }
201 | 
202 |   destroy() {
203 |     cancelAnimationFrame(this.frameTimer);
204 |     this.layer.setMap(null);
205 |     this.customCoords = null;
206 |     clearScene(this.scene);
207 |     this.scene = undefined;
208 |     this.camera = undefined;
209 |     this.renderer?.dispose();
210 |     this.renderer = undefined;
211 |     this.layer = null;
212 |     this.map = null;
213 |     Cache.clear();
214 |     this.options = null as any;
215 |   }
216 | 
217 |   getMap(){
218 |     if(this.map){
219 |       return this.map;
220 |     }
221 |     return null;
222 |   }
223 | 
224 |   getOpacity() : number{
225 |     return this.layer.getOpacity();
226 |   }
227 | 
228 |   setOpacity(opacity: number){
229 |     this.layer.setOpacity(opacity);
230 |   }
231 | 
232 |   getZooms() : number[]{
233 |     return this.layer.getZooms();
234 |   }
235 | 
236 |   setZooms(zooms: number[]){
237 |     this.layer.setZooms(zooms);
238 |   }
239 | 
240 |   getzIndex() : number{
241 |     return this.layer.getzIndex();
242 |   }
243 | 
244 |   setzIndex(zIndex: number){
245 |     this.layer.setzIndex(zIndex);
246 |   }
247 | 
248 |   show(){
249 |     this.layer.show();
250 |   }
251 | 
252 |   hide(){
253 |     this.layer.hide();
254 |   }
255 | 
256 | }
257 | 
258 | export {ThreeLayer}
259 | 


--------------------------------------------------------------------------------
/src/utils/threeUtil.js:
--------------------------------------------------------------------------------
 1 | export function clearScene(scene) {
 2 |   scene.traverse(child => {
 3 |     clearGroup(child);
 4 |   });
 5 | }
 6 | 
 7 | export function clearGroup(group) {
 8 |   const clearCache = (mesh) => {
 9 |     if (mesh.geometry) {
10 |       mesh.geometry.dispose(); // 删除几何体
11 |     }
12 |     if (mesh.material && mesh.material.dispose) {
13 |       mesh.material.dispose(); // 删除材质
14 |     }
15 |     if (mesh.material.texture && mesh.material.texture.dispose) {
16 |       mesh.material.texture.dispose();
17 |     }
18 |   };
19 |   const removeObj = (item) => {
20 |     let array = item.children.filter((x) => x);
21 |     array.forEach(v => {
22 |       if (v.children.length) {
23 |         removeObj(v);
24 |       } else {
25 |         if (v.isMesh) {
26 |           clearCache(v);
27 |         }
28 |       }
29 |     });
30 |     array = null;
31 |   };
32 |   removeObj(group);
33 | }
34 | 


--------------------------------------------------------------------------------
/test/ferrari.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AMap-Web/amap-three/0277513ad34aa5eda845f3fc02aa5995e5cb7c31/test/ferrari.glb


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>测试</title>
 7 |     <script src = 'https://webapi.amap.com/maps?v=2.0&key=747f980f217a31ba68d99301045a3fa7'></script>
 8 |     <script src="https://webapi.amap.com/loca?v=2.0.0&key=747f980f217a31ba68d99301045a3fa7"></script>
 9 |     <script src="https://cdn.jsdelivr.net/npm/three@0.142/build/three.js"></script>
10 |     <script src="https://cdn.jsdelivr.net/npm/three@0.142/examples/js/loaders/GLTFLoader.js"></script>
11 |     <script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/loaders/DRACOLoader.js"></script>
12 |     <script src="/index.js" ></script>
13 |   </head>
14 |   <body>
15 |     <div id="app" style="height: 600px;"></div>
16 |     <script type="text/javascript">
17 |       const map = new AMap.Map('app', {
18 |         center: [116.54, 39.79],
19 |         zoom: 14,
20 |         viewMode: '3D',
21 |         pitch: 35
22 |       })
23 |       const layer = new AMap.ThreeLayer(map, {
24 |         onInit(){
25 |           console.log('init layer')
26 |         },
27 |       })
28 |       layer.on('complete', () => {
29 |         const light = new THREE.AmbientLight('#ffffff', 1);
30 |         layer.add(light);
31 |         let position = [116.54, 39.79]
32 |         const gltf = new AMap.ThreeGltf(layer, {
33 |           url: './ferrari.glb',
34 |           configLoader: (loader) =>{
35 |             const dracoLoader = new THREE.DRACOLoader()
36 |             dracoLoader.setDecoderPath('https://cdn.jsdelivr.net/npm/three@0.143/examples/js/libs/draco/');
37 |             loader.setDRACOLoader( dracoLoader );
38 |           },
39 |           position: position,
40 |           scale: 800,
41 |           rotation: {
42 |             x:90,
43 |             y:0,
44 |             z:0
45 |           },
46 |           angle: 0
47 |         })
48 |         console.log('layer: ', layer)
49 |         console.log('gltf: ', gltf)
50 |       })
51 | 
52 |       let loca = new Loca.Container({
53 |         map,
54 |       });
55 | 
56 |       let geo = new Loca.GeoJSONSource({
57 |         url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/bj_bus.json',
58 |       });
59 | 
60 |       let ll = new Loca.LineLayer({
61 |         loca
62 |       });
63 |       let colors = ['#f7fcf5', '#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#41ab5d', '#238b45', '#006d2c', '#00441b'].reverse();
64 |       ll.setSource(geo, {
65 |         color: function (index, prop) {
66 |           let i = index % colors.length;
67 |           return colors[i];
68 |         },
69 |         lineWidth: (index, prop) => {
70 |           let i = index % colors.length;
71 |           return i * 0.1 + 2;
72 |         },
73 |         altitude: function (index, feature) {
74 |           let i = index % colors.length;
75 |           return 100 * i;
76 |         },
77 |         dash: [10, 4, 10, 2],
78 |       });
79 | 
80 |     </script>
81 |   </body>
82 | </html>
83 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": true,
 4 |     "strict": true,
 5 |     "module": "ES6",
 6 |     "target": "ES2018",
 7 |     "noImplicitAny": false,
 8 |     "declaration": true,
 9 |     "outDir": "dist",
10 |     "moduleResolution": "Node",
11 |     "esModuleInterop": true,
12 |     "jsx": "preserve",
13 |     "sourceMap": true,
14 |     "lib": ["ES2018", "DOM"],
15 |     "allowSyntheticDefaultImports": true,
16 |     "forceConsistentCasingInFileNames": true,
17 |     "resolveJsonModule": true
18 |   },
19 |   "include": [
20 |     "src",
21 |     "types"
22 |   ],
23 |   "exclude": ["node_modules", "**/__test?__", "**/dist"]
24 | }
25 | 


--------------------------------------------------------------------------------
/types/global.d.ts:
--------------------------------------------------------------------------------
1 | declare let AMap: any
2 | 


--------------------------------------------------------------------------------