优化实战 第 64 期 – 高德地图千百万数据秒级上图

使用标准的 MVT 瓦片服务作为数据源，通过高德的 AMap.MapboxVectorTileLayer 插件创建矢量瓦片图层，实现千百万数据秒级上图，这样浏览器不会卡死，地图拖动也不会卡顿

矢量切片的优点

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

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

• 更加灵活

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

• 数据更新快

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

矢量切片的原理

• 金字塔模型

  

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

• 切片存储格式

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

矢量切片的加载

• 服务地址以及参数

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

• 创建矢量瓦片图层

  const mvtLayer = new AMap.MapboxVectorTileLayer({
    url: serviceAddress, tileSize: 256,
  })
  

• 根据数据定制渲染样式

  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
      }
    },
  })
  

  点击 MVT图层 可查看高德地图官方示例

• 注意事项

  如果需要通过条件来筛选渲染数据，前端可以在 visible 的函数体内进行逻辑处理，并且在每次筛选的时候都要把地图上前一次的图层进行清除，然后重新创建图层

  一起学习，加群交流看 沸点