openLay-热力图

@仗剑走天涯

于 2024-04-29 19:19:36 发布

阅读量69

点赞数 1

文章标签：前端 javascript html 图像处理图形渲染

本文链接：https://blog.csdn.net/zhushanlin/article/details/138322780

版权

WebGis-OL 地理分析、热力图、动画线专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、案例一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、导入openlayers的依赖 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 2、设置地图容器的挂载点 -->
    <div id="map">

    </div>
    <script>
        /* 3、设置一个瓦片图层 */
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        /* 4、实例化地图 */
        /* new Vue({
            el
        }) */
        const map = new ol.Map({
            /* 将实例化的地图挂载到对应的DOM元素上 */
            target: "map",
            layers: [gaode],
            /* 设置地图以中心点显示/坐标显示/方法级别显示 */
            view: new ol.View({
                center: [114.30, 30.50],
                zoom: 4,
                /* 坐标 */
                projection: "EPSG:4326"
            })

        })

        /* 1、构建数据 */
        let heatMapData = {
            "type": "FeatureCollection",
            "features": [
                {
                    "type": "Feature",
                    "properties": {
                        "weight": 0.5
                    },
                    "geometry": { "type": "Point", "coordinates": [114.307232, 30.602333] }
                },
                {
                    "type": "Feature",
                    "properties": {
                        "weight": 0.9
                    },
                    "geometry": { "type": "Point", "coordinates": [113.421538, 30.716048] }
                }
            ]
        }
        /* 2、构建热力图 */

        var heatMapLayer = new ol.layer.Heatmap({
            source: new ol.source.Vector({
                format:new ol.format.GeoJSON(),
                url:"./data/data.json"
                // features: new ol.format.GeoJSON().readFeatures(heatMapData),
            }),
            /* 模糊 */
            blur: 5,
            /* 半径 */
            radius: 8,
            /* 权重 0~1之间 */
            // weight: function (feature) {
            //     return feature.get('weight');
            // },
        })
        /* 3、添加到map */
        map.addLayer(heatMapLayer)
    </script>
</body>

</html>

2、案例二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
</head>

<body>
    <div id="menu">
        <div>
            设置热点图的参数：
        </div>
        <div>
            <div>
                <label>热点半径(radius size):</label><input type="range" id="radius" min="1" max="50" step="1" value="10" />
            </div>
            <div>
                <label>模糊尺寸(blur size):</label><input type="range" id="blur" min="1" max="50" step="1" value="15" />
            </div>
        </div>
    </div>
    <div id="map">
    </div>
    <script>
        const gaode = new ol.layer.Tile({
            title: "高德地图",
            source: new ol.source.XYZ({
                url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
                wrapX: false
            })
        });
        var map = new ol.Map({
            target: "map",
            layers: [gaode],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 4
            })
        })
        var blur = document.getElementById('blur');
        var radius = document.getElementById('radius');
        let heatMapLayer = null;
        $.ajax({
            url: "/data/data.json"
        }).then(data => {
            console.log(data);
            heatMapLayer = new ol.layer.Heatmap({
                source: new ol.source.Vector({
                    features: new ol.format.GeoJSON().readFeatures(data),
                }),
                blur: 4,
                radius: 8
            });
            map.addLayer(heatMapLayer);


            radius.addEventListener('input', function () {
                //设置热点图层的热点半径
                heatMapLayer.setRadius(parseInt(radius.value));
            });
            blur.addEventListener('input', function () {
                //设置热点图层的模糊尺寸
                heatMapLayer.setBlur(parseInt(blur.value));
            });

            //为矢量数据源添加addfeature事件监听
            heatMapLayer.getSource().on('addfeature', function (event) {
                console.log(event.feature)
            });
        })

    </script>
</body>

</html>