地图生态

Appearance

栅格图层 (Raster Layers) ​

  • 作用：栅格图层由像素网格组成，通常用于显示预渲染的地图瓦片（如街道地图、卫星图像）或静态图片。它们是地图的基础背景。

  • 特点：

  • 由像素数据构成，放大到一定程度会失真（出现马赛克）。

  • 通常是预渲染的图片，加载速度快。

  • 不包含地理要素的属性信息，仅是视觉呈现。

  • 常见的有瓦片图层（TileLayer）和图片覆盖物（ImageOverlay）。

常见类型 ​

瓦片图层 (TileLayer) ​

  1. 作用：最常见的栅格图层，通过加载一系列预渲染的图片瓦片来构建地图。
  2. 实例化：L.tileLayer(urlTemplate, options?)
  3. 示例：
javascript
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
配置项 ​
选项名类型默认值说明
minZoomNumber0图层可显示的最小缩放级别。
maxZoomNumber18图层可显示的最大缩放级别。
tileSizeNumber256瓦片的像素大小。
subdomainsString'abc'用于瓦片 URL 的子域名，例如 '{s}' 会被替换为 a, b, c。
errorTileUrlString''瓦片加载失败时显示的图片 URL。
zoomOffsetNumber0用于调整瓦片的缩放级别。
tmsBooleanfalse如果为 true，会将 Y 轴坐标反转，用于与 TMS 瓦片服务兼容。
zoomReverseBooleanfalse如果设置为 true，瓦片 URL 中使用的缩放级别将被反转
attributionString''显示在地图右下角的版权信息。
opacityNumber1.0图层透明度（0-1）。
zIndexNumber1图层的 Z 轴顺序，值越大越靠上。
noWrapBooleanfalse如果为 true，地图不会在水平方向上重复。
boundsLatLngBoundsnull限制图层只在指定地理边界内显示。
detectRetinaBooleanfalse如果为 true，会在 Retina 屏幕上请求 @2x 瓦片（如果可用）。
crossOriginBooleanfalse设置瓦片图片的 crossOrigin 属性，用于 CORS。
referrerPolicyBoolean/Stringfalse设置瓦片图片的 referrerPolicy 属性，用于 CORS。
updateWhenIdleBooleanfalse仅在平移结束时加载新瓦片。
updateWhenZoomingBooleantrue平滑缩放动画（在触摸缩放或 flyTo() 时）会在每个整数缩放级别更新网格层
updateIntervalNumber200在平移时，瓦片不会在每 updateInterval 毫秒更新超过一次。
maxNativeZoomNumberundefined瓦片源可提供的最大缩放级别数
minNativeZoomNumberundefined瓦片源可提供的最小缩放级别数
paneString'tilePane'图层的 DOM 元素将附加到的窗格名称
classNameString''分配给瓦片图层的自定义类名
keepBufferNumber2在平移地图时，在卸载它们之前保持这些行和列的瓦片
事件 ​
事件名说明
tileabort瓦片正在加载但现在不再需要时触发
方法 ​
方法名说明
setUrl获取指定坐更新层的 URL 模板并重新绘制它标的瓦片
createTile创建指定坐标的瓦片元素
getTileUrl根据其坐标返回瓦片的 URL

图片覆盖物 (ImageOverlay) ​

  1. 作用：在地图的指定地理边界内叠加一张静态图片。
  2. 实例化：L.imageOverlay(imageUrl, bounds, options?)
  3. 示例：
javascript
const imageUrl = "https://leafletjs.com/examples/crs-simple/uqm_map_full.png";
const imageBounds = [
  [-26.5, -25],
  [102.5, 100],
]; // [southWest, northEast]
L.imageOverlay(imageUrl, imageBounds).addTo(map);
配置项（Options） ​
选项名类型默认值说明
attributionString''显示在地图右下角的版权信息。
opacityNumber1.0图层透明度（0-1）。
zIndexNumber1图层的 Z 轴顺序，值越大越靠上。
noWrapBooleanfalse如果为 true，地图不会在水平方向上重复。
boundsLatLngBoundsnull限制图层只在指定地理边界内显示。

WMS 瓦片图层 (TileLayer.WMS) ​

  1. 作用：通过 Web Map Service (WMS) 标准从服务器请求地图图像。
  2. 实例化：L.tileLayer.wms(baseUrl, options?)
  3. 示例：
javascript
L.tileLayer
  .wms("http://ows.mundialis.de/services/service?", {
    layers: "OSM-Overlay-WMS",
    format: "image/png",
    transparent: true,
    attribution: "Mundialis WMS",
  })
  .addTo(map);
配置项（Options） ​
选项名类型默认值说明
layersString''WMS 服务中要请求的图层名称（逗号分隔）。
stylesString''WMS 服务中要请求的样式名称（逗号分隔）。
formatString'image/jpeg'请求的图像格式，如 'image/png', 'image/jpeg'。
transparentBooleanfalse如果为 true，请求透明背景的图像。
versionString'1.1.1'WMS 服务的版本。
crsCRSnull用于请求 WMS 图像的坐标参考系统。如果为 null，则使用地图的 CRS。
uppercaseBooleanfalse如果为 true，WMS 请求参数将转换为大写。
常用方法 ​

TileLayer.WMS 继承了 TileLayer 的所有方法，并增加了以下特有方法：

方法名返回值说明
setParams(params, noRedraw?)this更改 WMS 请求参数并重新加载瓦片。