# @maptalks/3dtiles

> 3d tiles layer for maptalks

Latest version **0.124.4** (published 2026-03-04) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @maptalks/3dtiles
pnpm add @maptalks/3dtiles
yarn add @maptalks/3dtiles
bun add @maptalks/3dtiles
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.124.4 |
| Published | 2026-03-04 |
| First published | 2021-06-17 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | fuzhenn |
| Maintainers | fuzhenn |
| Keywords | maptalks, 3dtiles, 3d, maps |

## Links

- npm: https://www.npmjs.com/package/@maptalks/3dtiles
- Repository: https://github.com/maptalks/maptalks.3dtiles
- Homepage: https://github.com/fuzhenn/3dtiles-issues/
- Issues: https://github.com/fuzhenn/3dtiles-issues/
- npm.io page: https://npm.io/package/@maptalks/3dtiles

## Dependencies (8)

- [pako](https://npm.io/package/pako.md) ^2.0.4
- [color](https://npm.io/package/color.md) ^3.0.0
- [maptalks](https://npm.io/package/maptalks.md) 1.12.1
- [gl-matrix](https://npm.io/package/gl-matrix.md) ^3.4.0
- [parse-dds](https://npm.io/package/parse-dds.md) ^1.2.1
- [frustum-intersects](https://npm.io/package/frustum-intersects.md) ^0.2.4
- [@maptalks/tbn-packer](https://npm.io/package/@maptalks/tbn-packer.md) ^1.4.5
- [@maptalks/function-type](https://npm.io/package/@maptalks/function-type.md) ^1.4.1

## Recent versions

- 0.124.4 (latest) — 2026-03-04
- 0.98.1 (snapshot) — 2024-08-15
- 0.124.3 — 2026-02-11
- 0.124.2 — 2026-02-10
- 0.124.1 — 2026-02-06
- 0.124.0 — 2026-02-06
- 0.123.0 — 2026-01-28
- 0.122.0 — 2026-01-27
- 0.121.0 — 2026-01-26
- 0.120.0 — 2026-01-16
- 0.119.0 — 2026-01-12
- 0.118.1 — 2025-12-26
- 0.118.0 — 2025-12-26
- 0.117.1 — 2025-11-12
- 0.117.0 — 2025-11-11
- … 119 more at https://npm.io/package/@maptalks/3dtiles/versions

## README

# 3dtiles插件
[![NPM Version](https://img.shields.io/npm/v/@maptalks/3dtiles.svg)](https://www.npmjs.com/package/@maptalks/3dtiles)

maptalks用于载入3dtiles数据的图层插件

# 示例代码
```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/maptalks@next/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@maptalks/gl/dist/maptalksgl.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@maptalks/3dtiles@latest/dist/maptalks.3dtiles.js"></script>
<script>
const layer = new maptalks.Geo3DTilesLayer('3dtiles', {        
    maxCacheSize : 1000, //缓存的最大瓦片数
    // loadingLimitOnInteracting : 1, //地图交互过程中瓦片请求最大数量
    // loadingLimit : 0, //瓦片请求最大数量
    services : [
        {
            url : 'path/to/tileset.json',
            // maximumScreenSpaceError值越小，加载的模型越清晰，但加载的数据量会变大
            // 清晰度可以接受的情况下，推荐把这个值设得越大越好，性能会越好
            maximumScreenSpaceError : 24.0,
            // urlParams : 'v=0.0',
            // ajaxOptions : { credentials : 'include' },
            // 把模型降低1200米
            heightOffset : -1200,
            ambientLight : [0.0, 0.0, 0.0],
            // maxExtent : maxExtent
            // ajaxInMainThread : true, //从主线程发起ajax请求，用于worker发起ajax报跨域错误
        },
        // 其他的3dtiles数据源
    ]
});
layer.addTo(map);
</script>

```

# 配置说明
## I3S数据gzip解压

i3s数据默认都进行了gzip压缩（以.gz结尾），需要在http服务中配置url rewrite和gzip解压。

### IIS配置
* 下载安装[url rewrite模块](https://www.iis.net/downloads/microsoft/url-rewrite)
* 在文件夹目录下创建web.config，配置gz解压和url write:
```xml
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <remove fileExtension=".json.gz" />
      <remove fileExtension=".bin.gz" />
      <mimeMap fileExtension=".json.gz" mimeType="application/json" />
      <mimeMap fileExtension=".bin.gz" mimeType="application/octet-stream" />
    </staticContent>
    <rewrite>
      <outboundRules rewriteBeforeCache="true">
        <rule name="Custom gzip file header">
          <match serverVariable="RESPONSE_CONTENT_ENCODING" pattern=".*" />
          <conditions>
            <add input="{REQUEST_URI}" pattern="\.gz$" />
          </conditions>
          <action type="Rewrite" value="gzip"/>
        </rule>
      </outboundRules>
      
      <rules>
        <rule name="Rewrite gzip file">
          <match url="(.*)"/>
          <conditions>
            <add input="{HTTP_ACCEPT_ENCODING}" pattern="gzip" />
            <add input="{REQUEST_FILENAME}.gz" matchType="IsFile" />
          </conditions>
          <action type="Rewrite" url="{R:1}.gz" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
```

---
_Source: https://npm.io/package/@maptalks/3dtiles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._