易航海webSdk

Appearance

Sources 数据源简介 ​

数据源（Source）用于定义地图数据的格式和位置。添加数据源后，必须通过 Layers 引用它才能在地图上显示。

Sources 数据源详解 ​

sources 对象定义了地图数据的来源。图层（Layers）通过引用数据源的 key 来渲染内容。

GeoJSON Source ​

type: 'geojson'

最常用的数据源，用于加载本地或远程的 GeoJSON 数据（点、线、面）。

参数说明类型可选值默认值
dataGeoJSON 数据。可以是 URL 字符串，也可以是直接的 GeoJSON 对象。String, Object--
maxzoom索引生成的最大缩放级别。超过此级别的数据将不再进行切片优化。Number0 ~ 2418
attribution数据归属版权信息（显示在地图右下角）。StringHTML Stringnull
buffer切片缓冲区大小（像素）。用于解决切片边缘的符号裁剪问题。Number0 ~ 512128
toleranceDouglas-Peucker 简化算法的容差。值越大细节越少，性能越好。NumberNumber0.375
cluster是否开启点聚合功能。Booleantrue, falsefalse
clusterRadius聚合半径（像素）。在此范围内的点会被合并。NumberNumber50
clusterMaxZoom聚合的最大缩放级别。超过此级别后，点将不再聚合。Number0 ~ 24maxzoom-1
clusterMinPoints形成聚合所需的最小点数。少于此数量的点将不会聚合。NumberNumber2
clusterProperties定义聚合点的自定义属性计算规则（如 sum, max）。ObjectExpression-
lineMetrics是否计算线的距离度量（用于 line-gradient）。Booleantrue, falsefalse
generateId是否自动为每个 Feature 生成唯一的数字 ID。Booleantrue, falsefalse
promoteId指定 GeoJSON 属性中的某个字段作为 Feature 的唯一 ID。StringStringnull

示例场景：加载本地或远程的 GeoJSON 数据

html
<script>
  map.on('load', () => {
    // 添加数据源
    map.addSource('mySource', {
      type: 'geojson',
      // 方式 A: 直接使用 URL
      data: 'https://xxxx.geojson',

      // 方式 B: 直接使用 GeoJSON 对象
      // data: {
      //   "type": "FeatureCollection",
      //   "features": [{ ... }]
      // },
    })

    // 添加图层引用该数据源
    map.addLayer({
      id: 'earthquakes-circle',
      type: 'circle',
      source: 'earthquakes',
      paint: {
        'circle-color': '#11b4da',
        'circle-radius': 8,
        'circle-stroke-width': 1,
        'circle-stroke-color': '#fff',
      },
    })
  })
</script>

Raster Source ​

type: 'raster'

用于加载栅格切片（PNG/JPG 图片），如卫星图。

参数说明类型可选值默认值
url指向 TileJSON 资源的 URL。StringURL String-
tiles切片 URL 模板数组。如果未提供 url，则必须提供此参数。ArrayArray-
tileSize切片的像素尺寸。NumberNumber512
minzoom最小缩放级别。Number0 ~ 240
maxzoom最大缩放级别。Number0 ~ 2422
scheme切片坐标系方案。String'xyz', 'tms''xyz'
bounds限制切片请求的地理边界 [minLng, minLat, maxLng, maxLat]。Array[Num, Num, Num, Num][-180,-90,180,90]
attribution数据版权信息。StringHTML Stringnull
volatile是否激进地卸载不可见切片。Booleantrue, falsefalse

示例场景：加载瓦片地图。

html
<script>
  map.on('load', () => {
    map.addSource('myTilesSource', {
      type: 'raster',
      // XYZ 格式的瓦片服务
      tiles: ['https://xxx/{z}/{y}/{x}.jpg'],
      tileSize: 512,
    })

    map.addLayer({
      id: 'myTilesLayer',
      type: 'raster',
      source: 'myTilesSource',
      paint: {
        'raster-opacity': 0.8,
      },
    })
  })
</script>

Image Source ​

type: 'image'

将单张图片叠加到地图的特定地理范围内（如建筑平面图、老地图）。

参数说明类型可选值默认值
url图片的 URL。StringURL String-
coordinates定义图片四个角的经纬度坐标（左上、右上、右下、左下）。Array[[lng,lat], ...]-

示例场景：将一张静态图片贴在地图特定范围内。

html
<script>
  map.on('load', () => {
    map.addSource('myImageSource', {
      type: 'image',
      url: 'https://xxxx.gif',
      coordinates: [
        [-80.425, 46.437], // 左上
        [-71.516, 46.437], // 右上
        [-71.516, 37.936], // 右下
        [-80.425, 37.936], // 左下
      ],
    })

    map.addLayer({
      id: 'myImageLayer',
      type: 'raster', // image source 使用 raster 图层渲染
      source: 'myImageSource',
      paint: {
        'raster-fade-duration': 0,
      },
    })
  })
</script>

Video Source ​

type: 'video'

将视频文件叠加到地图上（如动态云图）。

参数说明类型可选值默认值
urls视频文件的 URL 数组。支持多种格式以兼容不同浏览器。ArrayArray-
coordinates定义视频四个角的经纬度坐标（左上、右上、右下、左下）。Array[[lng,lat], ...]-

示例场景：将视频贴在地图上。

html
<script>
  map.on('load', () => {
    map.addSource('myVideoSource', {
      type: 'video',
      urls: ['http:/xxxx/drone.mp4'],
      coordinates: [
        [-122.51596391201019, 37.56238816766053],
        [-122.51467645168304, 37.56410183312965],
        [-122.51309394836426, 37.563391708549425],
        [-122.51423120498657, 37.56161849366671],
      ],
    })

    map.addLayer({
      id: 'myVideoLayer',
      type: 'raster',
      source: 'myVideoSource',
    })
  })
</script>

Canvas Source ​

type: 'canvas'

使用 HTML Canvas 元素作为数据源，适用于实时绘制的动态内容（如风场、波浪动画）。

参数说明类型可选值默认值
canvascanvas 的 DOM ID 或 HTMLCanvasElement 本身。ID, HTMLElement--
coordinates定义 canvas 四个角的经纬度坐标（左上、右上、右下、左下）。Array[[lng,lat], ...]-
animate是否在每一帧都重新渲染 canvas（触发重绘）。Booleantrue, falsetrue

示例场景：将canvas元素贴在地图上。

html
<canvas id="myCanvas" width="400" height="400" style="display: none;"></canvas>
<script>
  map.on('load', () => {
    // 1. 获取并绘制 Canvas
    const canvas = document.getElementById('myCanvas')
    const ctx = canvas.getContext('2d')
    ctx.fillStyle = 'red'
    ctx.fillRect(50, 50, 300, 300) // 画个红框

    // 2. 添加 Source
    map.addSource('canvas-source', {
      type: 'canvas',
      canvas: 'myCanvas',
      animate: true,
      coordinates: [
        [-122.5159, 37.5623],
        [-122.5146, 37.5641],
        [-122.513, 37.5633],
        [-122.5142, 37.5616],
      ],
    })

    // 3. 添加 Layer
    map.addLayer({
      id: 'canvas-layer',
      type: 'raster',
      source: 'canvas-source',
    })
  })
</script>