前言

leaflet 入门开发系列环境知识点了解:

内容概览

leaflet 实现克里金插值功能
源代码 demo 下载

本篇 demo 利用 leaflet api 结合 kriging 实现克里金插值功能,效果图如下:

实现思路
kriging 渲染空间插值在容器 canvas,然后 canvas 容器以图片图层形式叠加在 leaflet 地图上

  • 读取插值数据源,初始化渲染克里金插值
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);
……
  • 获取容器图片

完整demo源码见小专栏文章尾部GIS之家leaflet小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

leaflet 实现克里金插值功能(附源码下载)的更多相关文章

  1. leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  2. leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  3. leaflet结合turf.js实现多边形分割(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  4. leaflet 结合 geoserver 实现地图空间查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  5. leaflet 结合 geoserver 实现地图属性查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  6. cesium 入门开发系列地图鹰眼功能(附源码下载)

    前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 结合 leaflet 实现 ...

  7. openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)

    内容概览 1.openlayers6结合geoserver利用WFS服务实现图层新增功能2.源代码demo下载 效果图如下: 本篇主要是openlayers6通过调用geoserver发布的地图服务W ...

  8. arcgis api 3.x for js 实现克里金插值渲染图不依赖 GP 服务(附源码下载)

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  9. arcgis api for js实现克里金插值渲染图--不依赖GP服务

    本篇的亮点是利用kriging.js结合arcgis api for js,实现克里金插值渲染图,截图如下: 具体实现的思路如下: 1.kriging.js开源js,可以实现针对容器canvas克里金 ...

随机推荐

  1. Android Activity启动流程, app启动流程,APK打包流程, APK安装过程

    1.Activity启动流程 (7.0版本之前) 从startActivity()开始,最终都会调用startActivityForResult() 在该方法里面会调用Instrumentation. ...

  2. Dynamics 365中的Client API form context (formContext)

    适用于Dynamics 365 for Customer Engagement apps 9.x版本. 本文是一篇翻译,原文来源是微软官方文档. 本文链接:https://www.cnblogs.co ...

  3. Centos6、Centos7防火墙基本操作整理

    Centos7: 查看防火墙状态: firewall-cmd --state 开启防火墙: systemctl start firewalld.service 关闭防火墙(重启失效): systemc ...

  4. Nacos 集群部署

    关于nacos 集群部署,网上的示例往往不全或不可用,而官方的教程太简单了.官方也提供了一个 docker  + nacos 的伪集群的 部署示例.但毕竟是 伪, 不能实际生产使用. 全网就几乎就没有 ...

  5. 比较3个开源数据库:PostgreSQL,MariaDB和SQLite

    在现代企业技术世界里,开源软件已牢固地确立了自己作为不可忽视的,最大力量之一的地位.由于开源运动的出现,推动了几十年来的一些最著名的技术发展. 不难理解为什么:尽管基于Linux的开源网络标准可能不像 ...

  6. 拓展 centos 7

    查看端口的占用情况 Centos6/contos7(ECS) 使用 netstat 查询系统上有多少TCP 多少UDP会话 netstat -tun -t: tcp -u: udp -a: all 表 ...

  7. Git worktree 使用笔记【转】

    gitworktree 本地仓库的多个分支在对应的文件夹内管理,能够减少很多操作,便捷高效~ 一 worktree 的基本概念和操作 再也不用克隆多个仓库啦!git worktree 一个 git 仓 ...

  8. 松软科技web课堂:随机Math.random()

    Math.random() 返回 0(包括) 至 1(不包括) 之间的随机数: 实例 Math.random(); // 返回随机数 JavaScript 随机整数 Math.random() 与 M ...

  9. document.write() 为什么会清空页面

    很久以前遇到的问题,放着放着就忘记去研究了最近看到一篇文章总结一下作者:abloumeurl:   http://blog.csdn.net/u013451157/article/details/78 ...

  10. OSG嵌入QT的简明总结

    目录 1.解决方案 2.存在问题 1) 警告提示 2) 多线程问题 3) 其他 1.解决方案 不得不说关于OSG的资料实在太零散了,搜索了很多关于OSG在QT下的解决方案,都是各有各的说法,有的说的不 ...