supermap for leaflet 热力图实例解析

最新推荐文章于 2024-05-09 09:20:26 发布

原创最新推荐文章于 2024-05-09 09:20:26 发布 · 550 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

Leaflet 专栏收录该内容

2 篇文章

订阅专栏

该代码示例展示了如何在SuperMapiServer服务上结合Leaflet库创建热力图。首先定义了地图的基本设置，然后使用TiledMapLayer加载地图数据。接着，通过PapaParse库解析CSV地震数据，筛选2000年至2015年的地震事件，将其转换为GeoJSON格式，并用这些数据创建HeatMapLayer，最后将热力图层添加到地图上进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对supermap for leaflet 中热力图实例代码解析

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <title data-i18n="resources.title_l_echartsEarthquake"></title>


    <script type="text/javascript" include="papaparse,jquery" src="../js/include-web.js"></script>


</head>

<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
 
    <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>



    <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>


    <script type="text/javascript">
      
        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        // 定义一个变量host,通过选择操作确定请求的服务地址(本地或SuperMap iServer REST API)

        var url = host + "/iserver/services/map-china400/rest/maps/China";
        // 将从SuperMap iServer REST API引用的数据集对象命名为url, 通过字符串拼接获得数据的完整请求地址 

        var map, heatMapLayer;

        map = L.map('map', {
            center: [32.67, 109.06],
            zoom: 5
        });
        // Leaflet中map方法创建了一个地图对象，根据参数设置(map容器元素ID、地图初始缩放级别、显示中心点坐标等)返回生成的对象

        new L.supermap.TiledMapLayer(url).addTo(map);
        // 采用SuperMap iServer REST API中提供的TiledMapLayer类，实现了通过基于瓦片(tiles)的多层数据来加载和渲染地图。使用函数链式调用将其添加到leaflet平台中生成的缺省地图对象上
        addHeatMapLayer();
        // 调用添加热图层的方法

        function addHeatMapLayer() {
            heatMapLayer = new L.supermap.HeatMapLayer("heatMap", {
                // 利用Leaflet的supermap扩展库中提供的HeatMapLayer类来创建一个具有指定id值的新热图层类
                id: "heatmap",
                map: map,
                radius: 10,
                featureWeight: "value"
            });

            // 使用JQuery中的get方法获取外部CSV文件的数据，并对获得的数据进行逐行解析处理 
            $.get("../data/chinaEarthquake.csv", function (response) {

                var dataObj = Papa.parse(response, {
                    skipEmptyLines: true,
                    header: true
                });
                // 在导入Papa Prase库之前，先进行读取；然后new一个对象，再传入response参数，用skipEmpytLines属性过滤掉空行，header:true表示第一行数据时表头，在后续的遍历中可以根据表头获取特定属性值.

                var data = dataObj.data;

                var geojson = {
                    "type": "FeatureCollection",
                    "features": []
                };

                // 定义geojson变量，对“特定年份下的特定地震事件”进行数据过滤和包装，并组合成一个JSON对象
                for (var i = 0; i < data.length; i++) {
                    var item = data[i];
                    var date = new Date(item.date);
                    var year = date.getFullYear();

                    // 只记录2000到2015年之间发生的地震数据
                    if (year > 2000 && year < 2015) {
                        var feature = {
                            "type": "feature",
                            "geometry": {
                                "type": "Point",
                                "coordinates": []
                            },
                            "properties": {
                                "value": parseFloat(item.level)
                            }
                            // 将筛选出的数据根据CSV中的格式处理为GeoJSON数据格式, 并添加至geojson.features数组
                        };
                        feature.geometry.coordinates = [parseFloat(item.X), parseFloat(item.Y)];

                        geojson.features.push(feature);
                    }
                }

                heatMapLayer.addFeatures(geojson);
                // 加载利用Papa Parse解析CSV文档，转化为GeoJSON数据结构的数据信息

                heatMapLayer.addTo(map);
                // 把空物体上没有添加过点状、线状或面状对象的 Leaflet map 上新增的热力图层 Heatmap 添加

            });
        }
    </script>
</body>

</html> ```