1、GitHub地址：https://github.com/oeo4b/kriging.js

2、核心代码

var variogram = kriging.train(t, x, y, model, sigma2, alpha):使用gaussian、exponential或spherical等模型对数据集进行训练，返回的是一个variogram对象；
var grid = kriging.grid(polygons,variogram,width)；polygons是插值之后需要裁切的图形边界信息，最后一个参数，是插值格点精度大小
kriging.plot(canvas,grid,xlim,ylim,colors);将得到的格网grid渲染至canvas上。

3、离散的点如果过多，js会报异常，因此如果遇到这种情况，需要对点进行抽稀。

4、实现功能效果：

5、示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>leaflet克里金空间插值</title>
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            cursor: default;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/esri-leaflet@2.2.4/dist/esri-leaflet.js"></script>
    <script src="kriging.js"></script>
    <script src="point.js"></script>
    <script src="world.js"></script>
</head>
<body>
<canvas id="canvasMap" style="display: none;" ></canvas>
<div id="map"></div>
<script>
  var map = L.map('map', {
    center: [38.65953686, 120.8696333],
    zoom: 9
  });

  L.esri.tiledMapLayer({
    url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
  }).addTo(map);

  //world.js,是插值之后需要裁切的图形边界信息
  //point.js,是要插值的离散的点

  //遍历world边界数据，生成scope边界线
  var positions = [];
  world[0].forEach(function (point) {
    positions.push([point[1], point[0]]);
  });
  var scope = L.polyline(positions, {color: 'red'}).addTo(map);
  map.fitBounds(scope.getBounds());

  //根据scope边界线，生成范围信息
  var xlim =[scope.getBounds()._southWest.lng,scope.getBounds()._northEast.lng];
  var ylim =[scope.getBounds()._southWest.lat,scope.getBounds()._northEast.lat];

  //进行克里金插值
  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].attributes.TN_);
      x.push(points[i].geometry.x);
      y.push(points[i].geometry.y);
      L.circle([y[i], x[i]], {radius: 1}).addTo(map);
    }

    //对数据集进行训练
    var variogram = kriging.train(t, x, y, "exponential", 0, 100);

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

    var colors = ["#006837", "#1a9850", "#66bd63", "#a6d96a", "#d9ef8b", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d73027", "#a50026"];
    //将得到的格网grid渲染至canvas上
    kriging.plot(canvas, grid, [xlim[0], xlim[1]], [ylim[0], ylim[1]], colors);
  }

  //将canvas对象转换成image的URL
  function returnImgae() {
    var mycanvas = document.getElementById("canvasMap");
    return mycanvas.toDataURL("image/png");
  }

  loadkriging();

  var imageBounds =[[ylim[0], xlim[0]], [ylim[1], xlim[1]]];
  L.imageOverlay(returnImgae(), imageBounds, {opacity: 0.8}).addTo(map);

</script>
</body>
</html>

leaflet 使用kriging.js实现前端自定义插值的更多相关文章

  1. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

  2. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

  3. Vue.js高效前端开发 • 【初识Vue.js】

    全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...

  4. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  5. JS高级前端开发群加群说明及如何晋级

    JS高级前端开发群加群说明 一.文章背景: 二. 高级群: 三. 加入方式: 四. 说明:   一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在“前端开发”关键字搜索结果第一名.当然取得这 ...

  6. 前端进阶试题css（来自js高级前端开发---豪情）既然被发现了HOHO，那我就置顶了嘿嘿！觉得自己技术OK的可以把这套题目做完哦，然后加入高级前端的社区咯

    http://www.cnblogs.com/jikey/p/4426105.html js高级前端开发加群方法(此群很难进,里面纯技术,严禁广告,水群) 完整题目做完发邮箱(jikeytang@16 ...

  7. HTML、CSS、JS在前端开发中都扮演怎样的角色

    前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...

  8. js在前端json字符串和对象互相转化

    js在前端json字符串和对象互相转化 //对象转json串 注意:参数必须是对象,数组不起作用,对象格式{'0'=>'a'} JSON.stringify( arr ); //json字符串转 ...

  9. JS高级前端开发群加群说明

    JS高级前端开发群加群说明 *一.文章背景: *二. 高级群: *三. 加入方式: *四. 说明: 一.文章背景: 去年年初建了几个群,在不经意间火了,一直排在"前端开发"关键字搜 ...

  10. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

随机推荐

  1. sublime text 笔记

    问题: Sublime Text编辑器开启或关闭Vim模式 插件: 使用sublime server启动本地服务器进行调试

  2. System.gc 之后到底发生了什么 ？

    本文基于 OpenJDK17 进行讨论 在 JDK NIO 针对堆外内存的分配场景中,我们经常会看到 System.gc 的身影,比如当我们通过 FileChannel#map 对文件进行内存映射的时 ...

  3. 微服务集成Spring Cloud Zipkin实现链路追踪并集成Dubbo

    1.什么是ZipKin Zipkin 是一个根据 Google 发表的论文" Dapper" 进行开源实现的分布式跟踪系统. Dapper是Google 公司内部的分布式追踪系统, ...

  4. JVM—垃圾收集器

    JVM-垃圾收集器 什么是垃圾 没有被引用的对象就是垃圾. 怎么找到垃圾 引用计数法 当对象引用消失,对象就称为垃圾. 对象消失一个引用,计数减去一,当引用都消失了,计数就会变为0.此时这个对象就会变 ...

  5. HarmonyOS 3百机升级计划，来了！

    HarmonyOS 3规模升级来了! 为大家奉上百余款机型升级计划! 你的手机什么时候可以升级? 赶快下滑查看!

  6. CentOS 防火墙配置实战精要

    防火墙是服务器最重要的安全屏障,正确的操作对应用也是非常非常关键,本文参考了一些实战经验并经过实验验证,集众家之长做了简单的归纳整理,希望能帮助你更好地操作防火墙. 设置CentOS防火墙开放端口 在 ...

  7. 简单写一个eventbus

    前言 闲暇之余,简单写一个eventbus. 正文 什么是eventbus? eventbus 是一个开源的发布订阅模式的框架,用于简化程序间不同组件的通信. 它允许不同组件间松耦合通信,组件之间不通 ...

  8. docker 应用篇————swarm[二十]

    前言 简单介绍一下swarm. 正文 前提,docker 安装. 有3台机器,全部按照了docker. 现在开始搭建集群. 首先需要初始化: 然后需要注入: 注入之后,那么需要就是启动节点加入进来,那 ...

  9. 鸿蒙HarmonyOS实战-ArkUI组件（Tabs）

    一.Tabs Tabs组件是一种常见的用户界面(UI)组件,它是一个可以容纳多个选项卡的容器组件.每个选项卡通常包含一个面板和一个标签,用户可以通过点击标签来切换面板.Tabs组件通常用于展示多个相关 ...

  10. 【Nano Framework ESP32篇】WS2812 彩色灯带实验

    地球人皆知,许多物联网教程作者的心中都深爱着一灯大师,所以第一个例程总喜欢点灯,高级一点的会来个"一闪一闪亮晶晶".老周今天要扯的也是和灯有关的,但不单纯地点个灯,那样实在不好玩, ...