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

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

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

原始数据实例：

讯享网

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

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

讯享网/* 这里封装成了一个pinia */ // 地图各级别显示配置，这里针对天地图不同的缩放级别分别绘制了不同的图层，因为图片清晰度不通用，根据自己需求调整 const pipeLevelOption = [ { level: 16, // 地图级别 k: , // 图片放大系数, 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.', maxLat: '104.', minLng: '30.', minLat: '104.' }, 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 }