百度地图+Echarts+克里金插值算法实现等值图

最新推荐文章于 2024-08-08 07:23:16 发布

落寞如尘

最新推荐文章于 2024-08-08 07:23:16 发布

阅读量5.1k

点赞数 6

分类专栏： Bmap+Echarts+kriging 文章标签：前端 html5 jquery

本文链接：https://blog.csdn.net/qq_16643639/article/details/112765075

版权

本文介绍了如何利用百度地图、Echarts和克里金插值算法，将气象数据如气温、降雨量转化为等值图进行展示。作者通过将克里金插值算法生成的数据转换为Echarts可识别的矩形格子数据结构，并结合Echarts地图分箱功能，成功实现在百度地图上的等值图展示。过程中遇到坐标匹配问题，但最终解决了并给出了实现步骤。

摘要由CSDN通过智能技术生成

百度地图+Echarts+克里金插值算法实现等值图

效果图：

公司最近要我弄一套基于百度地图的发电站、气温、风场等一系列地图展示，这些Echarts上很多可以直接拿来使用。Echarts的点状图，路径迁移图，风场矢量图我都已经实现，但是到了气温和降雨的等值图时，进展不是很顺利。

我是一个半路做前端的，之前是做java后端的，对气象数据完全不是很懂，百度了不少资料，但是发现克里金（kriging）插值算法很符合我的需要，但是奈何本人完全搞不懂是怎么算的，不过可以直接拿来用也是好的，但是，目前网上很多都是用openlayer、arcgis或者leaflet来实现的，之前我的很多图表暂时都基于百度地图和Echarts，所以，就想着把网上现有的功能和百度地图结合，好在经过试验，已经成功，如果你也有类似需求，希望可以帮到你。

参考资料：https://codepen.io/jianxunrao/pen/oadBPq openlayer+kriging实现

https://echarts.apache.org/examples/zh/editor.html?c=map-bin echarts的在百度地图上分箱

我的实现就是基于两者的一个结合

先创建一个div用来展示地图，给他一个初始宽高。百度地图的ak请替换成自己的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Bmap+echarts热力图</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <script src='./js/kriging-original.js'></script>
        <script type="text/javascript" src="./js/bmap.js"></script>
        <script src="http://api.map.baidu.com/api?v=3.0&ak=qxtHlX3iHors0dHRMZE0N4OLE8Vu7wbH"></script>
        <style>
            html, body, #container {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
                cursor: default;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
 </body>
</html>

2.krigin