前言

关于本篇功能实现用到的 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. 金三银四,今年Python就业前,看看这篇文章找找感觉

    Python就业行情和前景分析之一爬取数据 最近Python大热,就想要分析一下相关的市场需求,看一下Python到底集中在哪些城市,企业对Python工程师的一些需求到底是怎样的,基于此,爬取了国内 ...

  2. 购物网站首页(学习ING)

    这几天在学着做购物网站,初步的完成了首页的框架吧,记录下.慢慢加强.主要难点,是样式的设置问题,如果自己想,自己摸索,可能会需要很长的调试.也是一个孰能生巧的过程吧,有些部分没有按照学习资料的方法也做 ...

  3. Lumen框架—升级改造之路-仓储层

    仓储层与逻辑层搭建  Lumen官方文档:https://lumen.laravel.com/docs/5.5 我的项目地址:https://github.com/BusinessL/big-lume ...

  4. 小程序顶部navbar(非Slider)

    wxml(该导航栏的实现原理是当你要显示哪个view在最前端的时候隐藏其他的view): <!-- 顶部navbar导航栏 --> <view class="navbar& ...

  5. 将一个html文件引入另一个html文件的div中

    width="" height=""属性可根据要求自己设定

  6. Ubuntu 18.04编译AOSP源码

    总结一下我从Ubuntu 18.04下编译成功AOSP的过程,以及遇到的坑 我的电脑配置: OS: Ubuntu 18.04 bionic Kernel: x86_64 Linux 4.18.0-17 ...

  7. 一文了解腾讯云数据库SaaS服务

    本文由云+社区发表 作者:邵宗文,2009年加入腾讯,现为腾讯云数据库专家产品经理.之前曾负责为OMG事业群构建数据库平台,部署,规划及运维支持,为腾讯网,新闻客户端,快报,视频,财经,体育等提供了稳 ...

  8. 听说你的MES系统又失败了?

    前些日子,一位前同事跟我抱怨,他们做的MES系统,凉凉了.这样的话,我从不同人口中听到过不止一次. 我们做的系统,做到一半做不下去了...... 我们的系统,工人都不爱用...... 不只是MES,所 ...

  9. 2019腾讯WXG移动客户端暑期实习面经

    微信这个比较迷,二面完官网流程灰了,但是过了一周多突然来三面,下午面完三面晚上HR面,第三天offer call, 莫名其妙过了 之前以为已经挂了,所以没有写面经,现在距一面已经快一个月了,只能还记得 ...

  10. 【源码学习】redux-thunk

    阅读 redux 源码之后,想要加深一下对中间件的理解,于是选择 redux-thunk(2.3.0)这个源码只有十几行的中间件. 之前 redux 的学习笔记 https://www.cnblogs ...