地图

初始化二维地图

框架中二维地图是Leaflet地图，继承自原生L.Map，所以创建地图方法与Leaflet中设置地图的方法类似。

首先创建具有特定mapId的div，并确保该div具有大小，放置在您希望地图所在的位置。

<div id="mapId" style="position:absolute;top:0px;left:0px;width:100%;height:100%;overflow:hidden"></div>

然后构建地图实例，LMap继承自原生L.Map，传参与L.map的参数一致。

import { LMap } from 'quickearth';
const map = new LMap("mapId", { crs: L.CRS.EPSG3857, fadeAnimation: false }).setView([35, 110], 5);

最后向地图中添加一个瓦片图层，这里与Leaflet一致。

L.tileLayer("http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=c38ce5b1e371c478a6788f01475fa2a7", {
    subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
}).addTo(map);

预设切片

QE中内置了大量的预设切片地址，具体切片名称请查看predefinedImageTiles

下面示例使用了天地图卫星地图的切片

const map = new LMap("mapId", { crs: L.CRS.EPSG3857, fadeAnimation: false, zoomControl: false }).setView([25.5, 116.5], 7);
const tileLayer = createTileLayer(predefinedImageTiles.tdtSatellite);
map.addLayer(tileLayer);

自定义pane

pane的概念和Leaflet中一致，表示图层的层级。除了可以使用Leaflet自带的pane，我们还创建了一些自定义的pane，以适用于矢量和栅格数据的渲染。

下面示例使用了windy的切片，并且设置了切片的层级为顶层地图。

const map = new LMap("mapId", { crs: L.CRS.EPSG3857, fadeAnimation: false, zoomControl: false }).setView([25.5, 116.5], 7);
const tileLayer = createTileLayer(predefinedImageTiles.windy, { pane: consts.customPanes.topmap.name });
map.addLayer(tileLayer);

QE中自定义的pane查看consts常量中的customPanes