前言

关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。

内容概览

  1. 基于 arcgis api 3.x 实现克里金插值渲染图
  2. 源代码 demo 下载

本篇的亮点是利用 kriging.js 结合 arcgis api 3.x for js,实现克里金插值渲染图,截图如下:

具体实现的思路

  • kriging.js 开源 js,可以实现针对容器 canvas 克里金插值效果,但是没有结合地图一起的,不能随着地图拖动缩放的,需要跟地图绑定在一起才行的,这里先实现 canvas 渲染插值效果,kriging.js 的 plot 函数可以达到这样的目的:
kriging.plot(canvas, grid, [113.220276, 113.476929], [29.737915, 29.965698], colors);

colors:渲染颜色分级数组;
canvas:渲染容器;
[113.220276, 113.476929], [29.737915, 29.965698]:渲染的最大最小值范围;
grid:渲染的插值,跟 point 插值点有关系,具体的如下:

var grid = kriging.grid(world, variogram, width);

world:插值范围,点数组构成,比如:

var world =
[ [
[
113.33752441406284,
29.881896972656477
],
[
113.3394713498775,
29.879479149706071
],
[
113.34130859375034,
29.876525878906421
],
... ],
]

variogram:

var variogram = kriging.train(t, x, y, "exponential", 0, 10);
  • kriging.js 渲染效果叠加在 map 对象,绑定一起展示,以 layer 形式叠加在 map 即可

首先在地图初始化里面创建 MapImageLayer 图层

var mil = new MapImageLayer({ 'id': 'usgs_screen_overlay', 'opacity': 0.5 });
mymap.addLayer(mil);

其次,地图加载完成事件调用

//地图加载函数
mymap.on("load", function () {
//渲染克里斯插值
loadkriging();
RefleshPNG2(mymap,mil);
});

更多的详情见GIS之家小专栏

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

arcgis api 3.x for js 实现克里金插值渲染图不依赖 GP 服务(附源码下载)的更多相关文章

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

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

  2. Cesium专栏-克里金插值(全国温度为例,附源码下载)

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  3. arcgis api 3.x for js 共享干货系列之一自写算法实现地图量算工具(附源码下载)

    0.内容概览 Geometry 地图服务方式实现地图距离以及面积的量算,简单描述 arcgis api 提供的接口类 geometryEngine 实现地图距离以及面积的量算,简单描述 自定义距离以及 ...

  4. arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)

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

  5. arcgis api 3.x for js 解决 textSymbol 文本换行显示(附源码下载)

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

  6. openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  7. leaflet 实现克里金插值功能(附源码下载)

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

  8. R语言:克里金插值

    基于空间自相关,R语言克里金插值 library(gstat) Warning message: In scan(file = file, what = what, sep = sep, quote ...

  9. 克里金插值 调用matlab工具箱

    克里金插值 克里金插值是依据协方差函数对随机过程或随机场进行空间建模和插值的回归算法. 克里金插值法的公式为: 式中为待插入的各点的重金属污染值,为已知点的重金属污染值,为每个点的权重值. 用BLUP ...

随机推荐

  1. 微信小程序之表单验证

    表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...

  2. JS常用正则表达式备忘录

    摘要: 玩转正则表达式. 原文:JS常用正则表达式备忘录 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 正则表达式或"regex"用于匹配字符串的各个部分 下面是 ...

  3. TOTP 介绍及基于C#的简单实现

    TOTP 介绍及基于C#的简单实现 Intro TOTP 是基于时间的一次性密码生成算法,它由 RFC 6238 定义.和基于事件的一次性密码生成算法不同 HOTP,TOTP 是基于时间的,它和 HO ...

  4. 记一次mongodb聚合查询

    先说一下场景,产品中用到了简单的表单构造器,开始提供了一系列的控件,例如单行文本框.多行文本框.单选.复选.时间等,之后你可以拖拽控件自己组装你想要的表单……网上有很多的表单构造器,这里就不细说了,可 ...

  5. PIC单片机基础2

    PIC中档系列单片机,每条指令14位,共有35条汇编指令,根据操作对象不同,可将其分为三类: 字节操作类指令 位操作类指令 立即数与控制类操作指令 1.字节操作类指令,以MOVF指令为例: 指令:MO ...

  6. 开源:Taurus.MVC 框架 (已支持.NET Core)

    为什么要创造Taurus.MVC: 记得被上一家公司忽悠去负责公司电商平台的时候,情况是这样的: 项目原版是外包给第三方的,使用:WebForm+NHibernate,代码不堪入目,Bug无限,经常点 ...

  7. 宝塔面板设置腾迅COS自动备份网站

    之前写了如何配置腾迅云COS并挂载到服务器中,今天看到宝塔面板中有腾迅云COS的插件,不过研究了下,只是将COS绑定在宝塔面板中,不能自动备份,需要用到宝塔的计划任务功能 1.下载腾迅云COS插件 2 ...

  8. property相关补充

    # Author : Kelvin # Date : 2019/1/25 15:20 class Foo: def __init__(self): self.original_price = 100 ...

  9. 在Linux系统配置Nodejs环境的最简单步骤,部署多个thinkjs(nodejs)项目

    发现一台服务器部署管理多个nodejs服务,可以采用二级域名weekly.mwcxs.top,也可以采用固定后缀www.mwcxs.top/weekly的方式,本文先从固定后缀的方式部署管理多个nod ...

  10. Mybatis之旅第一篇-初识Mybatis

    一.JDBC的问题 为什么我们要使用Mybatis,是因为JDBC存在以下问题 1. 数据库连接创建.释放频繁造成系统资源浪费,从而影响系统性能.如果使用数据库连接池可解决此问题. 2. Sql语句在 ...