给大家提供一个 three-tile 最小化应用示例

sxguojf commented 1 month ago

不用web服务器，将下面代码保存为html，用浏览器打开即可运行

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
        />
        <title>three-tile最小化应用</title>
    </head>
    <style>
        html,
        body {
            background-color: #333;
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            display: flex;
        }
        #map {
            flex: 1;
        }
    </style>

    <!-- 因three@v0.150+废弃了普通导入方式，需要改为使用importmap导入 -->
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.165.0/build/three.module.js",
                "three-tile": "https://unpkg.com/three-tile@0.6.1/dist/three-tile.js"
            }
        }
    </script>

    <body>
        <div id="map"></div>
        <script type="module">
            import * as THREE from "three";
            import * as tt from "three-tile";

            console.log(`three-tile v${tt.version} start!`);

            // MapBoxToken 请更换为你自己申请的key
            const MAPBOXKEY =
                "pk.eyJ1Ijoic3ZjLW9rdGEtbWFwYm94LXN0YWZmLWFjY2VzcyIsImEiOiJjbG5sMnBoMm0xeWZzMmtyaWl0b2wyN2FuIn0.-zx1KP3Oy-7YzWcvhbv22Q";

            // mapbox影像数据源
            const mapBoxImgSource = new tt.plugin.MapBoxSource({
                token: MAPBOXKEY,
                dataType: "image",
                style: "mapbox.satellite",
            });
            // mapbox地形数据源
            const mapBoxDemSource = new tt.plugin.MapBoxSource({
                token: MAPBOXKEY,
                dataType: "terrain-rgb",
                style: "mapbox.terrain-rgb",
                maxLevel: 15,
            });

            // 创建地图
            const map = tt.TileMap.create({
                // 影像数据源
                imgSource: mapBoxImgSource,
                // 地形数据源
                demSource: mapBoxDemSource,
                // 地图投影中心经度
                lon0: 90,
                // 最小缩放级别
                minLevel: 2,
                // 最大缩放级别
                maxLevel: 18,
            });
            // 地图旋转到xz平面
            map.rotateX(-Math.PI / 2);

            // 地图中心坐标(经度，纬度，高度)
            const centerGeo = new THREE.Vector3(105, 30, 0);
            // 摄像坐标(经度，纬度，高度)
            const camersGeo = new THREE.Vector3(105, 0, 5000);
            // 地图中心转为世界坐标
            const centerPostion = map.localToWorld(map.geo2pos(centerGeo));
            // 摄像机转为世界坐标
            const cameraPosition = map.localToWorld(map.geo2pos(camersGeo));
            // 初始化场景
            const viewer = new tt.plugin.GLViewer("#map", { centerPostion, cameraPosition });

            // 地图添加到场景
            viewer.scene.add(map);
        </script>
    </body>
</html>

操作：鼠标左键平移；右键旋转；滚轮缩放

zenghaiy commented 1 month ago

你好能够添加比例尺吗

sxguojf commented 1 month ago

你好能够添加比例尺吗

三维环境下由于透视关系，地图上每一点缩放都不同，没法用一个固定比例来衡量。比例尺只能是个装饰品。

如果你一定要一个，可以参考step1.3，用摄像机离地图中点的距离，它与缩放比例线性相关，可以给它乘个系数来估算。

上图红色标记的为摄像机离地图中心的距离

sxguojf / three-tile-example

给大家提供一个 three-tile 最小化应用示例 #10