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

相关推荐
Smile_Gently1 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
安迪小宝2 小时前
20 FastAPI 性能优化
oracle·性能优化·fastapi
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
祈澈菇凉8 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj8 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架
顾比魁9 小时前
XSS盲打:当攻击者“盲狙”管理员
前端·网络安全·xss
黑客老李9 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞(利用xss钓鱼)
java·运维·服务器·前端·xss
晚风予星9 小时前
简记|LogicFlow自定义BPMN元素节点
前端