TileMap 创建

瓦片地图类 TileMap 是地图的核心类，它继承于 threejs 的 Object3D ，地图的绝大数操作均可通过对 TileMap 类完成。创建一个地图实例，并将它加入三维场景：

示例：

// 创建地图
const map = tt.TileMap.create({
  // 影像数据源
  imgSource: new plugin.ArcGisSource(),
  // 地形数据源
  demSource: new plugin.ArcGisDemSource(),
  // 地图最小缩放级别，默认为2
  minLevel: 2,
  // 地图最大缩放级别，默认为19
  maxLevel: 18,
  // 投影中央经线经度，默认为0
  lon0: 90,
});

// 地图旋转到xz平面
map.rotateX(-Math.PI / 2);
// 初始化场景
const viewer = new plugin.GLViewer("#map");
// 地图添加到场景
viewer.scene.add(map);

loading

1. 地图创建参数

type MapParams = {
  imgSource: ISource[] | ISource; //影像数据源，必选
  demSource?: ISource; //高程数据源，默认undefined
  minLevel?: number; //最小缩放级别，默认0
  maxLevel?: number; //最大缩放级别，V0.11.9已废弃，会根据数据源的 maxLevel 属性自动调整
  lon0?: ProjectCenterLongitude; //地图投影中央经线经度，默认0
  loader?: ITileLoader; //地图加载器，默认加载器
  rootTile?: RootTile; //根瓦片，默认0级瓦片
};

名称	类型	说明
imgSource	ISource[] | ISource	必选参数，默认为[]，用来指定地图瓦片的影像数据源，如果有多层影像数据可传入影像源数组，多层影像将以叠加混合方式显示。数据源的类型为 ISource，three-tile 已内置主流瓦片数据源，可直接创建使用。
demSource	ISource	可选参数，默认为 undefined，用来指定地图瓦片地形数据源，如果为空，地图将不显示地形，与影像数据源一样，可使用内置的地形数据源。
minLevel	number	可选参数，地图瓦片的最小缩放级别，默认为 2，当瓦片缩放级别小于它时地图瓦片将不再合并。
maxLevel	number	可选参数，地图瓦片的最最大放级别，默认为 19，当瓦片缩放级别小于它时地图瓦片将不再细分。（ V0.11.9 后已废弃，会根据数据源的 maxLevel 属性自动调整）。
lon0	ProjectCenterLongitude	可选参数，地图投影中央经线经度，默认为 0，它用来指定投影的中央经线的经度，注意它并不是用来指定地图中心位置的
loader	ITileLoader	可选参数，地图数据加载器，默认为内置的 TileLoader 类实例，用来指定用哪个加载器加载数据生成瓦片模型和材质，高级开发者可通过自定义 loader 实现自定义数据加载、瓦片模型创建过程。
rootTile	RootTile	可选参数，地图根瓦片，默认为 0 级瓦片，用来指定从哪个瓦片开始创建瓦片树，不需要手工传入。

• imgSource/demSource

  用来指定使用谁家的瓦片地图服务，先不要管它，后面会专门讲，包括自定义数据源。

• lon0

  用来指定地图投影的中央子午线，默认为 0°，要把中国放中间，那就设为 90，美国为中心设-90，欧洲为中心设 0。当 lon0 不为 0 时，minLevel 属性 必须>1。

• minLevel

  指定从哪个级别开始加载瓦片，推荐 2 级。如果你关注的是小区域地图，可以设大些，不加载低级别瓦片以提高速度。

• loader

  指定瓦片使用的加载器，一般默认值即可，除非你想自己重写瓦片加载过程。

• rootTile

  指定根瓦片，默认值即可。

TIP

TileMap.create 方法是静态方法，用来创建地图实例，也可以通过 new TileMap() 创建实例，效果一样，之所以增加 create 函数，是因为一些同学不喜欢面向对象语法。

2. 修改地图启动时的中心坐标

大多数时候，我们希望地图启动时能直接定位在某个位置，比如以北京为中心，以方位角为 180°，斜 45° 看向故宫。

与二维地图不同，三维场景并不能通过指定中心经纬度和缩放级别对地图进行定位，而是要指定摄像机位置以及摄像机朝向来解决。大部分三维地图采用修改摄像机的 yaw、pitch、roll 来完成，但这个概念并不直观，你很难估计出需要站在高空什么经纬度高度，以哪个角度看向地

three-tile 通过设置两个坐标来调整摄像机姿态，一个是摄像机位置坐标，一个是地图中心坐标，即你站在摄像机位置，看向地图中心。

// 地图中心经纬度高度（m）转为世界坐标
const centerPostion = map.geo2world(new THREE.Vector3(116.39180280130437, 39.915285657622775, 0));
// 摄像机经纬度高度（m）转为世界坐标
const cameraPosition = map.geo2world(new THREE.Vector3(116.39199596764485, 39.91047669278009, 1000));
// 调整摄像机位置
viewer.camera.position.copy(cameraPosition);
// 调整地图中心位置
viewer.controls.target.copy(centerPostion);

TIP

• 地图数据下载需要一定时间，可以通过定时器或用 tween 动态调整摄像机位置，提升用户体验。
• 坐标转换后面有一节专门会讲，这里你只需要知道，通过 map.geo2world 方法可以将经纬度转换为三维场景坐标。