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

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

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

矢量切片的优点

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

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

  • 更加灵活

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

  • 数据更新快

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

矢量切片的原理

  • 金字塔模型

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

  • 切片存储格式

    常见的矢量切片存储格式为 GeoJSONTopoJSONGoogle Protocol Buffers(pbf)

矢量切片的加载(高德)

  • 服务地址以及参数

    js 复制代码
    const serviceAddress = 'https://app.slice.com/[z]/[x]/[y].pbf'

    z 表示地图的缩放级别

    xy 表示瓦片坐标,用于标识瓦片在特定缩放级别下的位置坐标,表示瓦片在瓦片网格中的位置

    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 表示地图的缩放级别

    xy 表示瓦片坐标,用于标识瓦片在特定缩放级别下的位置坐标,表示瓦片在瓦片网格中的位置

    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 指定在矢量瓦片数据源中想要显示的特定图层的名称,一定要和服务端同学确认,一旦对应不上地图上将不显示任何元素

相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek