-
地图容器初始化
-
使用隐藏的Canvas元素(
canvasMap
)作为后续插值渲染的绘图板 -
依赖Mapbox GL JS地图库进行地理空间数据展示
-
-
圆形区域生成
// 定义 createCircle 函数 const createCircle = (center, radius, points) => { if (!points) points = 64; const coords = { longitude: center[0], latitude: center[1] }; const km = radius / 1000.0; const ret = []; const distanceX = km / (111.32 * Math.cos((coords.latitude * Math.PI) / 180)); const distanceY = km / 110.574; let theta, x, y; for (let i = 0; i < points; i++) { theta = (i / points) * (2 * Math.PI); x = distanceX * Math.cos(theta); y = distanceY * Math.sin(theta); ret.push([coords.longitude + x, coords.latitude + y]); } ret.push(ret[0]); return ret; }; // 调用 createCircle 函数并绘制多边形 const polygonPoints = createCircle([120.199071, 30.010606], 2000, 64); const circlePolygon = turf.polygon([polygonPoints]);
-
基于圆心坐标和半径生成规则多边形
-
使用turf.js进行地理空间计算
-
-
地图图层叠加
window.glMap.addLayer({ id: 'unique-layer-id', // 添加唯一 ID type: 'fill', source: { type: 'geojson', data: circlePolygon }, paint: { 'fill-color': 'red', 'fill-opacity': 0.5 } });
-
为圆形区域添加填充层
-
半透明填充效果增强可视化层次感
-
-
克里金插值分析
const getValueTYZ = (points = []) => { // 构造插值数据 const t = []; const x = []; const y = []; points.forEach(site => { const { level = 0, longitude, latitude } = site; t.push(level); x.push(parseFloat(longitude)); y.push(parseFloat(latitude)); }); console.log(t, 't') return { t, x, y }; }; const { t, x, y } = getValueTYZ(points); let canvas = document.getElementById('canvasMap'); canvas.width = 6000; canvas.height = 6000; // 训练克里金模型 let variogram = kriging.train(t, x, y, 'exponential', 0, 255); console.log((ylim[1] - ylim[0]) / 1000) let grid = kriging.grid(range, variogram, 0.0003);
-
使用预设采样点数据(包含经纬度和污染等级)
-
采用指数型变异函数模型
-
生成高密度插值网格(步长0.0003度)
-
-
可视化渲染
//将得到的格网grid渲染至canvas上 kriging.plot(canvas, grid, [xlim[0], xlim[1]], [ylim[0], ylim[1]], this.colors); // canvas图片处理 function drawImage(x, y, alpha) { let ctx = canvas.getContext('2d'); // 启用抗锯齿 ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; // 可选值:'low', 'medium', 'high' // 绘制图片 let imgData = ctx.getImageData(x, y, canvas.width, canvas.height); for (let i = 0, len = imgData.data.length; i < len; i += 4) { // 改变每个像素的透明度 imgData.data[i + 3] = imgData.data[i + 3] * alpha; } // 将获取的图片数据放回去。 ctx.putImageData(imgData, x, y); return canvas.toDataURL('image/png'); } window.glMap.addSource('kriging', { type: 'image', url: drawImage(0, 0, 0.95), coordinates: [coordinates[0], coordinates[3], coordinates[2], coordinates[1]], }); window.glMap.addLayer({ id: 'kriging', type: 'raster', source: 'kriging', paint: { 'raster-opacity': 1, }, });
-
将插值结果渲染到6000x6000像素的Canvas
-
使用预设的渐变色谱进行颜色映射
-
调整整体透明度后转换为数据URL
-
将处理后的Canvas图像作为栅格图层叠加到地图
-
精确匹配地理边界坐标实现空间对齐
-
技术亮点分析:
-
多图层复合可视化
-
基础底图
-
半透明圆形区域
-
插值结果栅格图
-
采样点标记(注释状态)
-
通过图层叠加实现多维数据展示
-
-
性能优化策略
-
离屏Canvas渲染:避免直接操作地图DOM
-
大尺寸Canvas:保证插值结果精度(6000x6000px)
-
WebGL加速:依赖Mapbox GL的WebGL渲染能力
-
-
空间分析算法
-
克里金插值:适用于地理空间数据的统计插值方法
-
Turf.js:处理地理空间计算(质心计算、多边形生成等)
-