多种地图底图使用方案

[xiaoiver]

问题背景

在 L7 中使用地图底图存在三种场景：

1. 地图底图驱动 L7。根据用户传入的地图类型参数实例化，事件监听注册在地图上。
2. L7 驱动地图底图。用户负责实例化地图，事件监听注册在 L7 上，调用地图方同步方法。
3. 不使用地图底图。事件监听注册在 L7 上。

在第一种场景中，由于地图实例化由 L7 完成，因此 L7 可以提供统一的参数接口（直接传入场景中），兼容各个地图方差异，用户在不同地图间切换时仅需要修改地图类型。
而第二种场景更适合集成 L7 进已有的地图应用，该场景下用户负责实例化地图、监听 L7 视口改变事件，调用地图方提供的 API 完成底图的同步，同步效果好坏由地图方实现效果决定。

目前 L7 仅支持第一种场景，用户通过地图类型选择使用高德或者 Mapbox，地图参数通过场景传入：

import { Scene } from '@antv/l7';

const scene = new Scene({
  type: 'mapbox', // 高德传入 amap
  style: 'light',
  center: [ 121.412224, 31.26192438 ],
  // ...省略其他地图参数
});

不难发现目前的 API 存在一个明显的问题，@antv/l7 直接依赖各个地图实现，在运行时需要根据用户传入的地图类型完成实例化，依赖全部支持地图方，无法利用 TreeShaking。

新版 API

支持以上三种使用场景，尽可能保持 API 的易用稳定，按需引用。

地图底图驱动 L7

相比目前的 API，改动有两点：

• 不同地图不能通过字符串区分（去掉 type 参数），用户选择使用 L7 提供的地图实例化方法
• 地图参数传入地图而非场景中，不同地图依然保持统一的参数

import { Scene } from '@antv/l7';
import { Mapbox, AMap, GoogleMap } from '@antv/l7-maps';

const scene = new Scene({
  map: new Mapbox({
    style: 'light',
    center: [ 121.412224, 31.26192438 ],
    // ...省略其他地图参数
  }),
  // ...省略其他场景参数 
});

由于不同地图构造函数从 @antv/l7-maps 中获取，可以进行 TreeShaking，保证选择高德的用户不会引入 Mapbox 依赖。

目前 deck.gl 也提供了这种使用方法：
https://deck.gl/#/documentation/getting-started/using-with-base-map

L7 驱动地图底图

该场景下 L7 不需要考虑地图的存在，和第三种不使用地图的场景本质上是一致的。仅需要提供视口变化回调函数，传入当前地图参数。如何使用这些参数同步地图完全由用户决定：

import { Scene } from '@antv/l7';
import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'pg.xx';
// 用户负责初始化地图实例
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  // ...省略其他地图参数
});

const scene = new Scene({
  // 驱动地图进行缩放、平移、旋转操作
  onMapChange: ({ lng, lat, zoom, bearing, pitch }) => {
    // Mapbox API
    map.jumpTo({
      center: [lng, lat],
      zoom,
      bearing,
      pitch,
    });
  },
  // ...省略其他场景参数 
});

用户不需要使用 @antv/l7-layers。

deck.gl 中驱动 Mapbox 的例子：
https://github.com/uber/deck.gl/blob/7.3-release/examples/get-started/pure-js/mapbox/app.js#L37-L43

不使用地图底图

并不是不使用地图参数，而是指不使用第三方地图。L7 在内部实现了基础的地图相机：

import { Scene } from '@antv/l7';
import { L7Map } from '@antv/l7-maps';

const scene = new Scene({
  map: new L7Map({
    center: [ 121.412224, 31.26192438 ],
    zoom: 15,
    // ...省略其他地图参数
  }),
  // ...省略其他场景参数 
});

deck.gl 中也提供了这种使用方式：
https://deck.gl/#/documentation/getting-started/using-standalone

非地图场景

以上讨论均基于地图场景，或者说场景都在地图坐标系下。如果考虑非地图场景使用其他坐标系，例如 graph.gl 在常规笛卡尔坐标系中渲染点、线，设置坐标系 API 还需要进一步讨论。

[lzxue]

如果我们map类传入，把参数铺平通过scene内部实例化呢

import { Scene } from '@antv/l7';
import { Mapbox, AMap, GoogleMap } from '@antv/l7-maps';


const scene = new Scene({
  type:  Mapbox,
  center:[112,32],
  pitch:30
  ....
});

这样的写法可以实现，如果 L7Map 作为基础的坐标系，在不传type的情况 下也能够正常初始化。
我们可以认为Amap, mapbox ,googlemap 对L7而言更像是种扩展一种坐标系，
L7Map 是L7的基础的坐标系，这样L7 不依赖第三方map也可以渲染

还有一个问题需要思考：

如果用户已经有了基于AMap或者mapbox地图应用，L7可以支持传入地图实例，这样的需求的话。

const scene = new Scene({
  map: new Mapbox({
   map: mapinstance,
    // ...省略其他地图参数
  }),
  // ...省略其他场景参数 
});

这样的实例化方案是比较可行的。

总结

• 第三方map 可以 new 一个地图实例传入

• L7 内部坐标系直接通过scene初始化。

[Liquid-Zhangliquan]

hello,既然说到多种地图底图使用方案，给你们介绍maptalks，支持接入多种底图风格。
详细可以这个仓库maptalks-tileLayercollection

[lzxue]

hello,既然说到多种地图底图使用方案，给你们介绍maptalks，支持接入多种底图风格。
详细可以这个仓库maptalks-tileLayercollection

这种只是瓦片底图加载方式，layer级别的功能

[The-End-Hero]

讨论的结果可以理解为，L7在未来不会支持到除了AMap，mapbox以外的地图吗？例如BMap

[lzxue]

讨论的结果可以理解为，L7在未来不会支持到除了AMap，mapbox以外的地图吗？例如BMap

支持啊

import { Mapbox, AMap, GoogleMap } from '@antv/l7-maps';

这样拆分就是为了更好的支持其他第三方地图。

[543802360]

如果我们map类传入，把参数铺平通过scene内部实例化呢

import { Scene } from '@antv/l7';
import { Mapbox, AMap, GoogleMap } from '@antv/l7-maps';


const scene = new Scene({
  type:  Mapbox,
  center:[112,32],
  pitch:30
  ....
});

这样的写法可以实现，如果 L7Map 作为基础的坐标系，在不传type的情况 下也能够正常初始化。
我们可以认为Amap, mapbox ,googlemap 对L7而言更像是种扩展一种坐标系，
L7Map 是L7的基础的坐标系，这样L7 不依赖第三方map也可以渲染

还有一个问题需要思考：

如果用户已经有了基于AMap或者mapbox地图应用，L7可以支持传入地图实例，这样的需求的话。

const scene = new Scene({
  map: new Mapbox({
   map: mapinstance,
    // ...省略其他地图参数
  }),
  // ...省略其他场景参数 
});

这样的实例化方案是比较可行的。

总结

• 第三方map 可以 new 一个地图实例传入
• L7 内部坐标系直接通过scene初始化。

目前的版本支持传入map instance实例化吗？

[lzxue]

如果我们map类传入，把参数铺平通过scene内部实例化呢

import { Scene } from '@antv/l7';
import { Mapbox, AMap, GoogleMap } from '@antv/l7-maps';


const scene = new Scene({
  type:  Mapbox,
  center:[112,32],
  pitch:30
  ....
});

这样的写法可以实现，如果 L7Map 作为基础的坐标系，在不传type的情况 下也能够正常初始化。
我们可以认为Amap, mapbox ,googlemap 对L7而言更像是种扩展一种坐标系，
L7Map 是L7的基础的坐标系，这样L7 不依赖第三方map也可以渲染
还有一个问题需要思考：
如果用户已经有了基于AMap或者mapbox地图应用，L7可以支持传入地图实例，这样的需求的话。

const scene = new Scene({
  map: new Mapbox({
   map: mapinstance,
    // ...省略其他地图参数
  }),
  // ...省略其他场景参数 
});

这样的实例化方案是比较可行的。

总结

• 第三方map 可以 new 一个地图实例传入
• L7 内部坐标系直接通过scene初始化。

目前的版本支持传入map instance实例化吗？

已经支持持传入map instance实例化了

[pans0930]

是否支持CRS坐标系的选择呢？
🌰：3857||4326类的？