TileMap 创建

注意

three-tile V0.10.3 版本做了较大的重构，与之前的版本不兼容。更改主要有 2 点：

1. 代码结构做了调整，将原来的 three-tile.plugin 命名空间独立成一个子包，需要单独引入。
2. 应广大网友要求，地图坐标单位由公里改为米，以与主流 GIS 类软件保持一致。

改动较大，升级需要谨慎

瓦片地图类 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; //最大缩放级别，默认19
  lon0?: ProjectCenterLongitude; //地图投影中央经线经度，默认0
  loader?: ITileLoader; //地图加载器，默认加载器
  rootTile?: RootTile; //根瓦片
};

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

• imgSource/demSource

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

• lon0

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

• minLevel

  指定从哪个级别开始加载瓦片，推荐 2 级（代码中是小于这个级别瓦片树不再合并，真正控制是否加载是根据瓦片数据源的 minLevel 属性，0-1 级瓦片太小没必要加载）。

• maxLevel

  指定到哪个级别开始不再加载瓦片，推荐 19 级（代码中是从这个级别开始瓦片树不再细分，真正控制是否加载是根据瓦片数据源的 maxLevel 属性，一般地图服务商瓦片最大到 18 级）。

• loader

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

• rootTile

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

TIP

TileMap 和数据源 TileSource 都要的 minLevel 和 maxLevel 属性，但它们的意义并不相同，TileMap 的用来控制瓦片树的细分和合并，数据源的用来控制瓦片数据的加载，两者也不一定要一致。

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 方法可以将经纬度转换为三维场景坐标。