leaflet加载geojson热力图&加载坐标组热力图

最新推荐文章于 2024-08-08 08:19:05 发布

Q行天下

最新推荐文章于 2024-08-08 08:19:05 发布

阅读量873

点赞数 1

分类专栏： leaflet 文章标签： javascript

本文链接：https://blog.csdn.net/shanshanqwertyuiop/article/details/127576723

版权

leaflet 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

通过SuperMap Leaflet加载geojson热力图，geojson通过数据服务查询获取到。
geojson需要转换为4326坐标。

geojson热力图加载

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="geojson热力图加载"></title>
    <script type="text/javascript" include="randomcolor" src="../js/include-web.js"></script>
    <style>
        #heatNumbers, #heatRadius {
            width: 50px;
            display: inline-block;
        }
    </style>
</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" include="leaflet.heat" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    //地图服务和数据服务都为3857地图
    var map, resultLayer,
        url = "http://106.13.148.29:8090/iserver/services/map-kh_L2/rest/maps/China_Province_3857%40kh_L2";
    var url_ds = "http://106.13.148.29:8090/iserver/services/data-kh_L2/rest/data";
    map = L.map('map', {
        preferCanvas: true,
        center: [39.89, 110],
        maxZoom: 18,
        zoom: 3
    });
    new L.supermap.TiledMapLayer(url).addTo(map);
    query();

    function query() {
        var sqlParam = new L.supermap.GetFeaturesBySQLParameters({
            queryParameter: {
                // name: "Countries@World",
                // attributeFilter: "SMID >= 0 "
            },
            datasetNames: ["kh_L2:Airport_pt"],
            fromIndex: 0,
            toIndex: -1,//全部返回的话必须是-1
            maxFeatures: 2000000//返回数量必须大于等于总数
        });
        new L.supermap
            .FeatureService(url_ds)
            .getFeaturesBySQL(sqlParam, function (serviceResult) {
                console.log(serviceResult);
                var result = L.supermap.Util.transform(serviceResult.result.features, L.CRS.EPSG3857, L.CRS.EPSG4326);
                // resultLayer = L.geoJSON(result).addTo(map);
                //把geojson图层加载成热力图层
                loadHeatMap(result);
            });
    }

    function loadHeatMap(geojson) {
        let heatMapLayer = new L.supermap.HeatMapLayer("heatMap", {
            id: "heatmap",
            map: map,
            radius: 10,
            featureWeight: "value"//热力值权重字段
        });
        heatMapLayer.addFeatures(geojson);
        heatMapLayer.addTo(map);
    }
</script>
</body>
</html>

数组坐标热力图

摘抄自
https://iclient.supermap.io/dev/examples/leaflet/editor.html#12_heatMap


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title data-i18n="resources.title_heatMap"></title>
<script type="text/javascript" include="randomcolor" src="../js/include-web.js"></script>
<style>
        #heatNumbers, #heatRadius {
            width: 50px;
            display: inline-block;
        }
    </style>
</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" include="leaflet.heat" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, resultLayer,
        url = host + "/iserver/services/map-china400/rest/maps/China";
    map = L.map('map', {
        preferCanvas: true,
        center: [39.89, 116.35],
        maxZoom: 18,
        zoom: 11
    });
    new L.supermap.TiledMapLayer(url).addTo(map);
    loadHeatMap();

    function loadHeatMap() {
        var heatNumbers = 150, heatRadius = 30;
        var num = parseInt(heatNumbers);
        num = (num > 0) ? num : 0;
        var radius = parseInt(heatRadius);
        radius = (radius > 0) ? radius : 0;
        var heatPoints = [];
        for (var i = 0; i < num; i++) {
            heatPoints[i] = [Math.random() * 0.28 + 39.78, Math.random() * 0.5 + 116.12, Math.random() * 80];
        }
        resultLayer = L.heatLayer(heatPoints, {
            radius: radius,
            minOpacity: 0.5
        }).addTo(map);
    }
</script>
</body>
</html>