[Openlayers] Openlayers Heatmap Usage

---

 

How can I use Heatmap() in openlayer?

 

It's easy to use than you think about it.

 

---

Method

 

 

If you finished this script You can handle heatmap Method that you want

 

That's an example.

 

achacha 

 

⭐ Don't forget to inherit openlayers ⭐

 

---

 

Create map

 

 

You need to make a map to put layers on.

 

const openStreetMap = new ol.Map ({
    target: 'o2map2',
    layers : [ new ol.layer.Tile({
        source: new ol.source.OSM(),
    })
    ],
    view : new ol.View ({
        center : [127, 33],
        zoom : 5,
        projection : 'EPSG:4326'
    })
})

 

 

This's mean openstreetmap setting.

 

 

 

#o2map2 {
    width: 100%;
    height: 100%;
    float: left;
    /* position: absolute; */
    background: white;
    z-index: 0;
    font-size: 0px;
}

 

 

Don't forget setting css style like this!

 

 

 

<div class="map-area">
    <div id="o2map2"></div>
</div>

 

 

 

This is html section.

 

 

 

---

 

Now we're starting setting heatmap method.

 

 

const heatmapData = new ol.Feature ({
    geometry: new ol.geom.Point([126,37])
})

const heatmapLayer = new ol.layer.Heatmap({
    source: new ol.source.Vector({
        features: [heatmapData]
    }),
    blur: 5,
    radius: 10
})

map.addLayer(heatmapLayer);

 

 

This is heatmap setting code.

 

If you write heatmap code, You have to be careful

 

1. ol.source.Vector should be inside in heatmap

2. feature: [source] <- don't forget surrounding bracket.

 

 

 

 

 

 

If you clear the mission you can see a heatmap like this.

 

---

 

Control blur and radius

How can we change blur or radius ?  come on 

 

I'll teach it

 

It doesn't care about How can you make input range. Just Make it the way you want it.

 

 

    const heatmapControl = document.querySelector("#liContents1");

            heatmapControl.innerHTML += `<input type="range" id="radiusControl" min="0" max="15" step="1"> `
            heatmapControl.innerHTML += `<input type="range" id="blurControl" min="0" max="15" step="1"> `

            const radiusControl = document.querySelector('#radiusControl');
            const blurControl = document.querySelector('#blurControl');

            radiusControl.addEventListener('input', () => {
                heatmapLayer.setRadius(radiusControl.value);
            });

            blurControl.addEventListener('input', () => {
                heatmapLayer.setBlur(blurControl.value);
            })

 

 

input mean when we swing from side to side on input range method,

 

We can change a data instantly.

 

And We should input min = 0, if you're not do that you can see strange error!

 

 

 

 

 

 

Now we can control blur and radius data directly.

 

Maybe we call it "asynchronization"

 

 

---

 

To be continue..