Mapboxgl + KrigingJS 实现插值图

最新推荐文章于 2025-11-21 09:43:15 发布

原创

最新推荐文章于 2025-11-21 09:43:15 发布 · 2.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #canvas

（1）主要过程：结合Kriging.js 实现 Mapboxgl 上的插值图

（2）效果：

（3）代码

HTML 、CSS：

<head>
    <meta charset="UTF-8" />
    <title>Mapboxgl(canvas) + kriging.js</title>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="../lib/js/geoglobe/mapbox-gl.css" type="text/css" />
    <script type="text/javascript" src="../lib/js/geoglobe/mapbox-gl.js"></script>
    <script type="text/javascript" src="../lib/js/turf/turf_new.min.js"></script>
    <script type="text/javascript" src="../lib/js/interpolation/kriging_noModule.js"></script>
    <!-- 行政区划数据 （为了偷懒使用了js的形式） -->
    <script src="./data/wuhanShi.js"></script>
    <body>
        <!-- 用于绘制插值图的canvas -->
        <canvas id="canvasMap" style="display: none; opacity: 0.2"></canvas>
        <div id="map"></div>
        <script src="./js/mapboxKriging.js"></script>
    </body>
</head>

完整 JS：