优化实战 第 66 期 - 百万数据高效可视化秒级上图

使用标准的 MVT 瓦片服务作为数据源，通过创建矢量瓦片图层，实现地图百万数据高效可视化渲染。这样浏览器既不会卡死，也不会在拖动地图的时候出现卡顿

瓦片服务将根据提供的 z、x 和 y 参数来提供相应的瓦片，以实现地图的分块加载，从而实现快速且高效的地图显示

矢量切片的优点

• 存储粒度小，信息接近无损

  瓦片以 mvt 的格式进行存储，是以每一个瓦片号为基准进行存储的（大小都是 256*256）

• 更加灵活

  前端可以根据数据定制渲染样式，实现多变的业务逻辑

• 数据更新快

  格式 .mvt 的瓦片压缩率更高，体积更小

矢量切片的原理

• 金字塔模型

  

  基于四叉树金字塔模型，将矢量数据的数据描述文件进行切片操作，存储的是文件信息的形式，包括矢量数据的几何信息和属性信息

• 切片存储格式

  常见的矢量切片存储格式为 GeoJSON、TopoJSON、 Google Protocol Buffers（pbf）

矢量切片的加载（高德）

• 服务地址以及参数

  const serviceAddress = 'https://app.slice.com/[z]/[x]/[y].pbf'

  z 表示地图的缩放级别

  x 和 y 表示瓦片坐标，用于标识瓦片在特定缩放级别下的位置坐标，表示瓦片在瓦片网格中的位置

  x 表示水平坐标，y 表示垂直坐标。可以通过坐标来确定要请求的特定瓦片

• 创建矢量瓦片图层

  const mvtLayer = new AMap.MapboxVectorTileLayer({
    url: 'https://app.slice.com/[z]/[x]/[y].pbf'
  })

  通过 AMap.MapboxVectorTileLayer 插件创建矢量瓦片图层

• 根据数据定制渲染样式

  mvtLayer.setStyle({
    point: {
      injection,
      color: function(props, inject) {
        return '#3E6EFF'
      },
      visible: function(props, inject) {
        return 1
      }
    },
    line: {
      injection,
      color: function(props, inject) {
        return '#3E6EFF'
      },
      visible: function(props, inject) {
        return 1
      }
    },
    polygon: {
      injection,
      color: function(props, inject) {
        return '#3E6EFF'
      },
      visible: function(props, inject) {
        return 1
      }
    },
  })

矢量切片的加载（mapbox-gl）

• 服务地址以及参数

  const serviceAddress = 'https://app.slice.com/[z]/[x]/[y].pbf'

  z 表示地图的缩放级别

  x 和 y 表示瓦片坐标，用于标识瓦片在特定缩放级别下的位置坐标，表示瓦片在瓦片网格中的位置

  x 表示水平坐标，y 表示垂直坐标。可以通过坐标来确定要请求的特定瓦片

• 添加地图源数据

  map.addSource('custom-tiles-source', {
    type: 'vector',
    tiles: 'https://app.slice.com/[z]/[x]/[y].pbf'
  })

  通过 type 指定数据源类型为矢量瓦片；通过 url 指定矢量瓦片数据集的服务地址

• 添加矢量瓦片图层

  map.addLayer({
    id: 'custom-tiles-layer',
    type: 'fill',
    source: 'custom-tiles-source',
    paint: {
      'fill-color': '#FF5733',
      'fill-opacity': 0.7
    },
    'source-layer': YOUR_SOURCE_LAYER_NAME,
  })

  通过 source 指定地图源数据，必须要与 addSource 的数据源保持一致

  注意：通过 source-layer 指定在矢量瓦片数据源中想要显示的特定图层的名称，一定要和服务端同学确认，一旦对应不上地图上将不显示任何元素