Mapboxgl + KrigingJS 实现插值图

最新推荐文章于 2024-03-15 09:36:10 发布
最新推荐文章于 2024-03-15 09:36:10 发布
阅读量1.7k 收藏 5
点赞数 1
分类专栏： Mapboxgl 文章标签： javascript canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/varlinke/article/details/115347201
版权

（1）主要过程：结合Kriging.js 实现 Mapboxgl 上的插值图

（2）效果：

（3）代码

HTML 、CSS：

<head>
    <meta charset="UTF-8" />
    <title>Mapboxgl(canvas) + kriging.js</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="../lib/js/geoglobe/mapbox-gl.css" type="text/css" />
    <script type="text/javascript" src="../lib/js/geoglobe/mapbox-gl.js"></script>
    <script type="text/javascript" src="../lib/js/turf/turf_new.min.js"></script>
    <script type="text/javascript" src="../lib/js/interpolation/kriging_noModule.js"></script>
    <!-- 行政区划数据 （为了偷懒使用了js的形式） -->
    <script src="./data/wuhanShi.js"></script>
    <body>
        <!-- 用于绘制插值图的canvas -->
        <canvas id="canvasMap" style="display: none; opacity: 0.2"></canvas>
        <div id="map"></div>
        <script src="./js/mapboxKriging.js"></script>
    </body>
</head>

完整 JS：


// 颜色范围 （自定义）
const colors = [
    'rgba(0,0,0,0)',
    'rgb( 82 , 184 , 70 )',
    'rgb(90,187,68)',
    'rgb(98,189,66)',
    'rgb(106,192,63)',
    'rgb(114,194,61)',
    'rgb(122,197,59)',
    'rgb(130,199,57)',
    'rgb(138,202,55)',
    'rgb(146,204,52)',
    'rgb(154,207,50)',
    'rgb(162,209,48)',
    'rgb(171,212,46)',
    'rgb(179,215,44)',
    'rgb(187,217,41)',
    'rgb(195,220,39)',
    'rgb(203,222,37)',
    'rgb(211,225,35)',
    'rgb(219,227,33)',
    'rgb(227,230,30)',
    'rgb(235,232,28)',
    'rgb( 243 , 235 , 26 )',
    'rgb(243,230,26)',
    'rgb(243,224,27)',
    'rgb(243,219,27)',
    'rgb(244,213,28)',
    'rgb(244,208,28)',
    'rgb(244,203,29)',
    'rgb(244,197,29)',
    'rgb(244,192,30)',
    'rgb(244,186,30)',
    'rgb(244,181,30)',
    'rgb(245,176,31)',
    'rgb(245,170,31)',
    'rgb(245,165,32)',
    'rgb(245,159,32)',
    'rgb(245,154,33)',
    'rgb(245,149,33)',
    'rgb(246,143,34)',
    'rgb(246,138,34)',
    'rgb(246,132,35)',
];

let canvasImg, // 用于插值的画布
    map, // 地图实例
    points, // 插值点 通过随机数产生;
    range; // 插值范围

// 插值范围 外边界
// 可以使用 turf.js 库，获取行政区划的bbox，即为外边界
let xlim = [113.70228083999996, 115.08257304000006];
let ylim = [29.96907695999994, 31.36125996000004];

// 用于将canvas导出的图片放置在地图上合适位置
let coordinates = [
    [xlim[0], ylim[1]],
    [xlim[0], ylim[0]],
    [xlim[1], ylim[0]],
    [xlim[1], ylim[1]],
];

// 地图初始化
function init() {
    map = new mapboxgl.Map({
        container: 'map',
        style: {
            version: 8,
            sources: {
                cartodb: {
                    tiles: ['http://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'],
                    tileSize: 256,
                    type: 'raster',
                },
            },
            layers: [
                {
                    id: 'cartodb',
                    type: 'raster',
                    source: 'cartodb',
                },
            ],
        },
        center: [114.44515001943142, 30.649477958235423],
        zoom: 8.3,
        pitch: 0,
    });
    // 地图加载
    map.on('load', () => {
        createPoints();
        addStateLayer();
        cavasLayer();
    });
}
// 添加边界图层
function addStateLayer() {
    let wuhanFeatures = [];
    wuhanShi.features.forEach((element) => {
        wuhanFeatures.push({
            type: 'Feature',
            properties: element.attributes,
            geometry: {
                type: 'Polygon',
                coordinates: element.geometry.rings,
            },
        });
    });
    map.addSource('wuhan', {
        type: 'geojson',
        data: {
            type: 'FeatureCollection',
            features: wuhanFeatures,
        },
    });
    map.addLayer({
        id: 'wuhan',
        source: 'wuhan',
        type: 'line',
        paint: {
            'line-color': 'black',
            'line-width': 2,
        },
    });

    //  插值范围
    range = wuhanFeatures[0].geometry.coordinates;
}
// 创建用于插值的随机数据点
function createPoints() {
    var randomPoints = turf.randomPoint(25, {
        bbox: [113.70228083999996, 29.96907695999994, 115.08257304000006, 31.36125996000004],
    });
    randomPoints.features.forEach((item, index) => {
        item.properties = {
            z: Math.round(Math.random() * 100),
            id: index,
        };
    });
    // console.log(randomPoints); // 打印randomPoints查看插值点数据
    // 插值点图层
    map.addSource('point', {
        type: 'geojson',
        data: randomPoints,
    });
    map.addLayer({
        id: 'point',
        source: 'point',
        type: 'circle',
        paint: {
            'circle-color': 'black',
        },
    });

    // 插值点数据
    points = randomPoints.features;
}
//进行克里金插值
function loadkriging() {
    var canvas = document.getElementById('canvasMap');
    canvas.width = 1000;
    canvas.height = 1000;
    var n = points.length;
    var t = []; // 数值
    var x = []; // 经度
    var y = []; // 纬度
    for (var i = 0; i < n; i++) {
        t.push(points[i].properties.z);
        x.push(points[i].geometry.coordinates[0]);
        y.push(points[i].geometry.coordinates[1]);
    }
    //对数据集进行训练
    var variogram = kriging.train(t, x, y, 'exponential', 0, 100);

    //使用variogram对象使polygons描述的地理位置内的格网元素具备不一样的预测值,最后一个参数，是插值格点精度大小
    var grid = kriging.grid(range, variogram, (ylim[1] - ylim[0]) / 250);

    //将得到的格网grid渲染至canvas上
    kriging.plot(canvas, grid, [xlim[0], xlim[1]], [ylim[0], ylim[1]], colors);

    // 将插值结果进行处理，转换为图片格式以便作为图层接入mapboxgl地图中
    return drawImage(0, 0, 0.5);
}
// canvas图片处理
function drawImage(x, y, alpha) {
    // 获取canvas元素对应的DOM对象
    var canvas = document.getElementById('canvasMap');
    // 获取在canvas上绘图的CanvasRenderingContext2D对象
    var ctx = canvas.getContext('2d');
    // 绘制图片
    // ctx.drawImage(image, x, y);
    // 获取从x、y开始，宽为image.width、高为image.height的图片数据
    // 也就是获取绘制的图片数据
    var imgData = ctx.getImageData(x, y, canvas.width, canvas.height);
    for (var 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');
}

// 添加一个raster图层到地图中，使用的数据源是canvas转换为的图片形式（插值结果）
function cavasLayer() {
    map.addSource('kriging', {
        type: 'image',
        url: loadkriging(),
        coordinates: [coordinates[0], coordinates[3], coordinates[2], coordinates[1]],
    });
    map.addLayer({
        id: 'kriging',
        type: 'raster',
        source: 'kriging',
        paint: {
            'raster-opacity': 1,
        },
    });
}


init();

我觉得应该不能再详细了...

（4）还存在的问题：目前够用。如有问题请联系我改正！

1H1R1M
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
探索地图绘制的艺术与科学: Mapbox GL Draw
gitblog_00098的博客
04-11 411
探索地图绘制的艺术与科学: Mapbox GL Draw 项目地址:https://gitcode.com/mapbox/mapbox-gl-draw Mapbox GL Draw 是一个强大的开源工具，旨在为开发人员和设计师提供在Web上交互式地创建、修改和管理地理数据的能力。基于 Mapbox GL JS，它利用 WebGL 技术呈现高效率、高性能的地图，并提供了直观的绘图接口，让地图绘制变得...
kriging-contour前端克里金插值
random720的专栏
08-14 439
基础上进行了封装，增加了自定义区域插值，gitbub地址。
基于leaflet的反距离权重插值插件的地图数据可视化
此爱如少年
07-06 3238
1、概念 反距离权重 (IDW) 插值显式假设：彼此距离较近的事物要比彼此距离较远的事物更相似。当为任何未测量的位置预测值时，反距离权重法会采用预测位置周围的测量值。与距离预测位置较远的测量值相比，距离预测位置最近的测量值对预测值的影响更大。反距离权重法假定每个测量点都有一种局部影响，而这种影响会随着距离的增大而减小。由于这种方法为距离预测位置最近的点分配的权重较大，而权重却作为距离的函数而减小，...
「AntV」和ChatGPT一起：基于L7、Turf.js与kriging.js实现Kriging插值并绘制
zhannny的博客
06-22 1005
基于L7、Turf.js与kriging.js实现Kriging插值并绘制
Kriging.js - 地统计插值库
gitblog_00069的博客
03-15 615
Kriging.js - 地统计插值库 Kriging.js 是一个用于地统计插值的 JavaScript 库。它提供了多种插值方法，并且可以在 Web 浏览器中运行。 什么是 Kriging？ Kriging 是一种用于估计未知点的变量值的技术，基于已知点的数据。这种方法广泛应用于地球科学、环境学、地理信息系统等领域。Kriging 的主要思想是利用空间相关性来预测未知点的变量值。 Krigin...
Cesium+kriging.js实现雨量插值
weixin_44265800的博客
11-17 9693
0.前言 网上有很多关于openlayers的克里金插值，但是最近在学习cesium，也想在cesium中做，但是好像网上相关的例子一个都没有。所以我就自己尝试去做。 1.克里金插值 克里金插值也称作空间局部插值法，或空间自协方差最佳插值法，它以变异函数理论和结构分析为基础， 在特定区域内对区域化变量进行无偏最优估计，被广泛应用于土壤制图领域，是一种非常重要的地统计学方法。 主要是用来预测一些地理...
kriging.zip
08-24
克里金差值渲染演示代码，基于vue+threejs
牛顿插值法.zic++牛顿插值法实现
05-21
c++牛顿插值法实现 附带代码注释及实验结果文档，插值结果精度高，并附带代码分块注释 以及插值点个数及几次插值可调。
FFT估计图像缩放因子+matlab+插值算法
07-24
已知现有图像尺寸128*128，及范围在1.1-1.9之间的9个不同拉伸系数，在对现有的图像进行不同拉伸后，测试将图像转到频域对拉伸变换后的图像进行重采样因子(拉伸系数)估计，...适合研究插值算法、FFT算法应用的新手小白
Matlab实现nearest+bilinear+bicubic插值resize图片
04-01
Matlab实现nearest+bilinear+bicubic插值resize图片 代码仅供参考、交流
kriging插值算法java实现
07-29
kriging插值工具
kriging插值工具 JAVA实现
03-17
kriging插值工具 JAVA实现
Ｃ＃　ＡｒｃＥｎｇｉｎｅ　加载地图
10-09
ａｒｃｅｎｇｉｎｅ和Ｃ＃　开发ＧＩＳ桌面版
java+wcount+geotools+克里金生成插值图
最新发布
05-27
java+wcount+geotools+克里金生成插值图
AE+C#实现各种空间插值源码与程序
09-05
arcengine进行的二次开发的经典案例，可以实现IDW，克里金插值，。适合C#初学者,以及从事ARCGIS二次开发的初学者。
Leaflet自定义图片作为地图
VaeEcho的博客
05-04 1093
vue中使用leaflet展示室内地图，并解决图片初始化问题；
kriging克里金插值以及前端渲染jS代码部分解释
振云博客
05-14 2697
.html中的方法调用 //训练使用高斯过程与贝叶斯先验 let variogram=kriging.train(positions.map(pos=>pos[2]),positions.map(pos=>pos[0]),positions.map(pos=>pos[1]),params.krigingModel,params.krigingSigma2,params.krigingAlpha); //网格矩阵或轮廓路径 let grid=kriging.grid(po
可视化，mapboxGL加载台风风场动画
m0_46478007的博客
11-01 1814
mapboxGL加载台风风场动画
matlab+gui实现双线性插值
12-26
以下是使用Matlab GUI实现双线性插值的示例代码： ```matlab % 创建GUI窗口 figure('Name', '双线性插值', 'NumberTitle', 'off', 'Position', [100, 100, 400, 300]); % 创建输入图像选择按钮 uicontrol('Style', 'pushbutton', 'String', '选择图像', 'Position', [50, 200, 100, 30], 'Callback', @selectImage); % 创建缩放比例输入框和标签 uicontrol('Style', 'text', 'String', '缩放比例:', 'Position', [50, 150, 80, 20]); scaleInput = uicontrol('Style', 'edit', 'Position', [140, 150, 100, 20]); % 创建插值按钮 uicontrol('Style', 'pushbutton', 'String', '双线性插值', 'Position', [50, 100, 100, 30], 'Callback', @bilinearInterpolation); % 创建显示图像的轴 axesHandle = axes('Units', 'pixels', 'Position', [250, 50, 120, 120]); % 选择图像的回调函数 function selectImage(~, ~) [filename, pathname] = uigetfile({'*.jpg;*.png;*.bmp', '图像文件 (*.jpg, *.png, *.bmp)'}); if isequal(filename, 0) || isequal(pathname, 0) return; end image = imread(fullfile(pathname, filename)); imshow(image, 'Parent', axesHandle); end % 双线性插值的回调函数 function bilinearInterpolation(~, ~) scale = str2double(get(scaleInput, 'String')); if isnan(scale) || scale <= 0 errordlg('请输入有效的缩放比例。', '错误'); return; end if ~exist('image', 'var') errordlg('请先选择图像。', '错误'); return; end outputImage = imresize(image, scale, 'bilinear'); imshow(outputImage, 'Parent', axesHandle); end ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值