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

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

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

矢量切片的优点

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

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

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

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

矢量切片的原理

金字塔模型

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

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

矢量切片的加载（高德）

服务地址以及参数
js 复制代码
```
const serviceAddress = 'https://app.slice.com/[z]/[x]/[y].pbf'
```
z 表示地图的缩放级别

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

x 表示水平坐标，y 表示垂直坐标。可以通过坐标来确定要请求的特定瓦片
创建矢量瓦片图层
js 复制代码
```
const mvtLayer = new AMap.MapboxVectorTileLayer({
  url: 'https://app.slice.com/[z]/[x]/[y].pbf'
})
```
通过 AMap.MapboxVectorTileLayer 插件创建矢量瓦片图层

根据数据定制渲染样式

js 复制代码

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）

服务地址以及参数
js 复制代码
```
const serviceAddress = 'https://app.slice.com/[z]/[x]/[y].pbf'
```
z 表示地图的缩放级别

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

x 表示水平坐标，y 表示垂直坐标。可以通过坐标来确定要请求的特定瓦片
添加地图源数据
js 复制代码
```
map.addSource('custom-tiles-source', {
  type: 'vector',
  tiles: 'https://app.slice.com/[z]/[x]/[y].pbf'
})
```
通过 type 指定数据源类型为矢量瓦片；通过 url 指定矢量瓦片数据集的服务地址
添加矢量瓦片图层
js 复制代码
```
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 指定在矢量瓦片数据源中想要显示的特定图层的名称，一定要和服务端同学确认，一旦对应不上地图上将不显示任何元素

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

矢量切片的优点

矢量切片的原理

矢量切片的加载（高德）

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

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