十万地图数据使用canvas转图片绘制

前言：需求是天地图绘制十万条数据管线展示，直接绘制会出现明显卡顿，因此使用canvas计算绘制转图片后，再将图片绘制在天地图上。

缺陷：管线不可单独操作！因为合并成了一个图层了，需要操作的部分单独绘制了，暂时未找到更好的渲染方式。

思路：计算数据经纬度范围确定canvas画布大小，计算各管线在画布中偏移位置再绘制，绘制完成转图片base64，再将图片绘制到天地图中。这里只做线绘制，面绘制同理，以下为关键性代码：

原始数据实例：

// 假定从接口中获取到的数据格式
const data = [
    {
        coordinates: [
            {
                lng: '104.0321956',
                lat: '30.6072443'
            },
            {
                lng: '104.0321928',
                lat: '30.6072494'
            },
            ... // 多段经纬度
        ],
        ... // 其它属性信息
    },
    ...
]

canvas绘制方法封装(pinia)，原始数据获取及经纬度范围获取过程省略：

/*** 这里封装成了一个pinia ***/

// 地图各级别显示配置，这里针对天地图不同的缩放级别分别绘制了不同的图层，因为图片清晰度不通用，根据自己需求调整
const pipeLevelOption = [
    {
        level: 16, // 地图级别
        k: 100000, // 图片放大系数, k值越高，图片越大，地图加载卡顿越明显！这里大概是10m左右大小
        lineWidth: 3 // canvas绘制线条宽度
    },
    {
        level: 13,
        k: 20000,
        lineWidth: 2
    },
    {
        level: 1,
        k: 5000,
        lineWidth: 1
    }
]

const usePipeStore = defineStore(
  'pipe',
  {
    state: () => ({
        data: null, // 原始数据，比如以上示例data
        // 雨水管网地图各缩放级别图片
        pipeLayer: {
            16: null,
            13: null,
            1: null
        },
        // 示例雨水管网经纬度范围，可通过原始数据data循环找到，也可通过接口找到最大/最小 经度/纬度
        pipeRange: {
            maxLng: '30.9072443',
            maxLat: '104.5321956',
            minLng: '30.1072443',
            minLat: '104.1321956'
        },
        imgDiffLng: 0.000052, // 雨水管网图片校验经度
        imgDiffLat: -0.000032 // 雨水管网图片校验纬度
    }),
    actions: {
        // 获取雨水管网地图各缩放级别图片图层
        getPipeImgLayer() {
            return new Promise((resolve, reject) => {
                if (this.pipeLayer['16'] && this.pipeLayer['13'] && this.pipeLayer['1']) {
                    // 已经获取过图层信息
                    resolve(this.pipeLayer)
                } else {
                        this.pipeLayer['16'] = this.renderPipeImg(this.data, pipeLevelOption[0].k, pipeLevelOption[0].lineWidth)
                        this.pipeLayer['13'] = this.renderPipeImg(this.data, pipeLevelOption[1].k, pipeLevelOption[1].lineWidth)
                        this.pipeLayer['1'] = this.renderPipeImg(this.data, pipeLevelOption[2].k, pipeLevelOption[2].lineWidth)
                        resolve(this.pipeLayer)
                }
               
            })
        },
        // 绘制canvas管线
        renderPipeImg(list, k, lineWidth) {
            let canvas = document.createElement('canvas')
            canvas.width = (this.pipeRange.maxLng - this.pipeRange.minLng) * k // 最大经度 - 最小经度
            canvas.height = (this.pipeRange.maxLat - this.pipeRange.minLat) * k // 最大纬度 - 最小纬度
            canvas.style.width = canvas.width + 'px'
            canvas.style.height = canvas.height + 'px'
            let ctx = canvas.getContext('2d')
            ctx.lineWidth = lineWidth // 设置绘制线宽度
            ctx.strokeStyle = 'rgb(255, 255, 255)' // 设置绘制线颜色
            list.forEach((item) => {
                ctx.beginPath() // 开始绘制
                for (let i = 0; i < item.coordinates.length; i++) {
                    // 中国范围内，经度从西到东递增，纬度从南到北递增
                    let x = (item.coordinates[i].lng - this.pipeRange.minLng) * k
                    let y = (this.pipeRange.maxLat - item.coordinates[i].lat) * k
                    if (i == 0) {
                        ctx.moveTo(x, y) // 首次绘制，起点
                    } else if (i == item.coordinates.length - 1) {
                        // 绘制结束
                        ctx.lineTo(x, y)
                        ctx.closePath()
                        ctx.stroke()
                    } else {
                        ctx.lineTo(x, y)
                    }
                }
            })
            let imgSrc = canvas.toDataURL('image/png') // canvas 转 图片base64
            return imgSrc
        }
    }
  })

 关键代码调用方式：

  import usePipeStore from '@/store/pipe' // 引用上面封装的pinia

  const pipeStore = usePipeStore()
  let map = null // 天地图对象

  pipeStore.getPipeImgLayer().then((res) => {
      console.log(res) // 这里应该是3个图层的url
      // 天地图初始化
      nextTick(() => {
          map = new T.Map('map')
          // 根据当前地图缩放级别绘制对应图片
          let mapLevel = map.getZoom()
          let imgUrl = mapLevel >= 16 ? res['16'] : mapLevel >= 13 ? res['13'] : res['1']
          // 根据需要设置经纬度校验偏差
          addMapImgOverLay(`${pipeStore.minLng + pipeStore.imgDiffLng},${pipeStore.maxLat + pipeStore.imgDiffLat}`, `${pipeStore.maxLng + pipeStore.imgDiffLng},${pipeStore.minLat + pipeStore.imgDiffLat}`, imgUrl)
      })
  })

  // 天地图添加图片覆盖物，这里省略了天地图图片覆盖物的引入
  const addMapImgOverLay = (coordinate1, coordinate2, imgUrl, option = {}) => {
      let lng1 = coordinate1.split(',')[0]
      let lat1 = coordinate1.split(',')[1]
      let lng2 = coordinate2.split(',')[0]
	  let lat2 = coordinate2.split(',')[1]
	  let bd = new T.LngLatBounds(new T.LngLat(lng1, lat1), new T.LngLat(lng2, lat2))
	  let imgMarker = new T.ImageOverlay(imgUrl, bd, option)
	  map.addOverLay(imgMarker)
	  return imgMarker
	}