前言

关于本篇功能实现用到的 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. 『OGG 03』Win7 配置 Oracle GoldenGate 一次性成功(包括Adapter Java)

    安装Oracle: 安装 Oracle_11g 32位[Oracle 32位的话,OGG 也必须是 32位,否则会有0xc000007b无法正常启动 错误] 安装目录为 D:\oracle\produ ...

  2. pfSense配置基于时间的防火墙规则

    基于时间的规则允许防火墙规则在指定的日期和/或时间范围内激活.基于时间的规则与任何其他规则的功能相同,只是它们在预定时间之外的规则集中实际上不存在. 基于时间的规则逻辑处理基于时间的规则时,调度计划确 ...

  3. 结合JDK源码看设计模式——观察者模式

    前言: 现在我们生活中已经离不开微信,QQ等交流软件,这对于我们来说不仅是交流,更有在朋友圈中或空间中进行分享自己的生活,同时也可以通过这个渠道知道别人的生活.我们在看朋友圈的时候其实我们扮演的就是一 ...

  4. JavaScript对象类型判断注意点

    注意点 不要使用 new Number() . new Boolean() . new String() 创建包装对象:用 parseInt() 或 parseFloat() 来转换任意类型到numb ...

  5. 历经15个小时,终于评出这8本最受欢迎的SQL书籍

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 来源 | 程序员书库(ID:OpenSourceTop) 原文链接 | https://www.lif ...

  6. HNOI2019 苟命记

    Day0 瞎看了看博客,然后看了看wf题,看了一下午柯南剧场版... 后来发现,复习根本没用,因为我根本没学过. Day1 首先随便看了看三道题,觉得 \(T1\) 挺可做的,\(T2\) 看起来是什 ...

  7. 使用maven生成可执行jar包(包含依赖)

    零零散散找了一些文章,有些感觉好乱,自己整理一下 以下是pom.xml里的配置,本来有很多依赖包,为了不让配置看着很长,我删了一些dependencies中我自己项目中引入的jar包 <proj ...

  8. Java核心技术第八章——泛型程序设计(1)

    1.泛型程序设计 泛型程序设计意味着编写的代码可以被很多不同类型的对象所重用.例如:不希望为了聚集String和Integer对象分别设计不同的类.(个人觉得此处说的聚集译为:创建一个对象,属性可以为 ...

  9. Activity 之生命周期

    Activity 之生命周期 本文内容: 1. Activity 介绍 2. Activity 的生命周期 2.1 生命周期图 2.2 常见情况下生命周期的回调 2.3 关于生命周期常见问题 2.4 ...

  10. 知乎专栏开放性api

    概述 这是我在工作中扒的知乎专栏的开放性api,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: zhihu库 zhihu-oauth库 开放性api 其中hemingke是专栏名字,可以换 ...