基于leaflet的反距离权重插值插件的地图数据可视化

8 篇文章 0 订阅
5 篇文章 0 订阅

1、概念

反距离权重 (IDW) 插值显式假设:彼此距离较近的事物要比彼此距离较远的事物更相似。当为任何未测量的位置预测值时,反距离权重法会采用预测位置周围的测量值。与距离预测位置较远的测量值相比,距离预测位置最近的测量值对预测值的影响更大。反距离权重法假定每个测量点都有一种局部影响,而这种影响会随着距离的增大而减小。由于这种方法为距离预测位置最近的点分配的权重较大,而权重却作为距离的函数而减小,因此称之为反距离权重法。
以上来自(arcgis帮助文档
简单理解就是事物之间的相互影响,随着距离的增大而越来越小

2、leaflet-idw插件

在github上偶然发现了一个基于leaflet的反距离权重插值的插件,插件地址:
https://github.com/JoranBeaufort/Leaflet.idw

3、使用方法

下载插件后,所有的算法都在leaflet.js文件中。在文件末尾,定义了一个方法:

L.idwLayer = function (latlngs, options) {
    return new L.IdwLayer(latlngs, options);
};

它返回了一个插值结果图层,可以直接addTo到leaflet的L.map对象中。两个参数:
latlngs: 是一个二维数组对象,里面每个元素包含三个值:经度、纬度以及该点的采样值。
options: 是一个对象,来的142-151行可以看到定义如下:

options: {
    opacity: 0.5,
    maxZoom: 18,
    cellSize: 1,
    exp: 2,
    max: 100
},

其中:
opacity: 图层的透明度,
maxZoom: 图层最大缩放级别,
cellSIze: 用于插值计算时的单元格大小,越小越精细,越耗资源,
exp: 幂函数中的幂值,(幂函数可以在上面链接中了解下)
max: 最大样点值。

4、示例代码


(function(){
    var map = L.map('map').setView([35.87, 105.475], 5);

    var tiles = L.tileLayer('https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}', {
    }).addTo(map);

    $.getJSON('/data/city_air.geojson',function(data){
        var features = data.features;

        showidwLayer(features)

        showMark(features);
    })

    /**
     * 显示插值图层
     * @param {Array(point)} data 
     */
    function showidwLayer(data){
        var points = [];
        data.forEach(element => {
            var lng = element.geometry.coordinates[0];
            var lat = element.geometry.coordinates[1];
            var aqi = parseInt(element.properties.AQI);
            if(aqi){
                points.push([lat,lng,aqi]);
            }
        });

        var idw = L.idwLayer(points,{
            opacity: 0.3,
            maxZoom: 18,
            cellSize: 10,
            exp: 5,
            max: 300    
        });
        idw.addTo(map);
    }

    /**
     * 显示采样点
     * @param {*} data 
     */
    function showMark(data){
        data.forEach(element => {
            var lng = element.geometry.coordinates[0];
            var lat = element.geometry.coordinates[1];
            L.marker([lat, lng]).addTo(map) //这里纬度在前
        });
    }
})()

为了查看方便,我把采样点也显示在地图上。
完整代码下载:Demo
插值结果
反距离权重插值结果

5、后续

1)自定义色带-gradient

上面的插值结果,在值高的地方,颜色偏黄、红,在值低的地方,颜色片绿、蓝,色带颜色值在源码中的定义如下:

defaultGradient: {
    0.0: '#000066',
    0.1: 'blue',
    0.2: 'cyan',
    0.3: 'lime',
    0.4: 'yellow',            
    0.5: 'orange',
    0.6: 'red',
    0.7: 'Maroon',
    0.8: '#660066',
    0.9: '#990099',
    1.0: '#ff66ff'
},

有时候,我们并不满足与上面这种颜色搭配,就需要自定义颜色色带。怎么自定义?
options.gradient参数
即在options中增加一个gradient属性,按上面的方式定义色带即可。如

 var colors = {
     0:'#fff',
     0.3: '#A5CC82',
     0.6: '#00467F',
     0.9: '#292E49',
     1: '#000'
 }var options = {
    opacity: 0.5,
    maxZoom: 18,
    cellSize: 10,
    exp: 5,
    max: 300,
    gradient: colors 
}
idw = L.idwLayer(points,options);

渲染后的结果如下:
自定义色带

2)效率问题

这种方法,是在前端来直接进行插值、渲染,插值算法可能会导致页面卡顿,另外,每次放大缩小操作时,都会重新进行计算插值,需要注意。
因此,在资源有限的情况下,建议将optison参数中的cellSize,尽量设置为较高数值。

  • 0
    点赞
  • 9
    收藏
  • 打赏
    打赏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 7

打赏作者

此爱如少年

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值