Open sxguojf opened 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>
操作:鼠标左键平移;右键旋转;滚轮缩放
你好能够添加比例尺吗
三维环境下由于透视关系,地图上每一点缩放都不同,没法用一个固定比例来衡量。比例尺只能是个装饰品。
如果你一定要一个,可以参考step1.3,用摄像机离地图中点的距离,它与缩放比例线性相关,可以给它乘个系数来估算。
上图红色标记的为摄像机离地图中心的距离
不用web服务器,将下面代码保存为html,用浏览器打开即可运行
操作:鼠标左键平移;右键旋转;滚轮缩放