這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 做地圖開發，往往需要掌握專題地圖製作的技能。今天用OpenLayers6來做一個熱力圖的效果。 頁面效果： 代碼部分: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta char ...
這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
做地圖開發，往往需要掌握專題地圖製作的技能。今天用OpenLayers6來做一個熱力圖的效果。
頁面效果：
代碼部分:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>熱力圖</title>
<link rel="stylesheet" href="/css/ol.css">
<script src="/js/ol.js"></script>
<script src="heatmap.js"></script>
<script type="text/javascript">
window.onload = function () {map();}
</script>
<style>
#map{
position: fixed;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<form style="position: absolute;left: 200px;z-index: 999;color: blue;">
<label>半徑大小</label>
<input id="radius" type="range" min="1" max="50" step="1" value="20" />
<label>模糊大小</label>
<input id="blur" type="range" min="1" max="50" step="1" value="25" />
</form>
<div id="map"></div>
</body>
</html>
JavaScript部分：
/*
* heatmap.js
*/
var map1;
function map(){
map1 = new ol.Map({
target: 'map', //地圖容器div的id
loadTilesWhileInteracting: true,
layers: [],
view: new ol.View({
center: [12622513, 2636878], //地圖初始中心點
zoom: 9, //地圖初始顯示級別
}),
controls: ol.control.defaults({}).extend([])
});
// 開始做熱力圖相關功能
let blur = document.getElementById("blur");
let radius = document.getElementById("radius");
var wandaVector = new ol.source.Vector({
url: "/熱力圖/wanda.geojson",
format: new ol.format.GeoJSON()
});
//定義熱力圖圖層
let vector = new ol.layer.Heatmap({
source: wandaVector,
blur: parseInt(blur.value, 10),
radius: parseInt(radius.value, 10),
});
// 模糊按鈕的回調函數
let blurHandler = function (){
vector.setBlur(parseInt(blur.value, 10));
};
blur.addEventListener("input", blurHandler);
blur.addEventListener("change", blurHandler);
// 半徑按鈕的回調函數
let radiusHandler = function () {
vector.setRadius(parseInt( radius.value, 10));
};
radius.addEventListener("input", radiusHandler);
radius.addEventListener("change", radiusHandler);
//添加OSM地圖作為底圖
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map1.addLayer(osm);
map1.addLayer(vector);
}
數據部分：wanda.geojson
{
"type": "FeatureCollection",
"name": "wanda",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "name": "萬達影城(增城萬達廣場店)", "lng": 113.821841, "lat": 23.281847, "address": "廣州市增城區荔城街增城大道69號萬達廣場F4" }, "geometry": { "type": "Point", "coordinates": [ 113.821841, 23.281847 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(南沙萬達廣場店)", "lng": 113.538016, "lat": 22.800097, "address": "廣州市南沙區雙山大道3號萬達廣場4層" }, "geometry": { "type": "Point", "coordinates": [ 113.538016, 22.800097 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(萬勝廣場店)", "lng": 113.388917, "lat": 23.103397, "address": "廣東省廣州市海珠區新港東路1236號萬勝廣場五層" }, "geometry": { "type": "Point", "coordinates": [ 113.388917, 23.103397 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(融創茂店)", "lng": 113.240693, "lat": 23.431699, "address": "廣州市花都區鳳凰北路63號融創茂購物中心3樓" }, "geometry": { "type": "Point", "coordinates": [ 113.240693, 23.431699 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(廣州番禺萬達廣場店)", "lng": 113.356523, "lat": 23.012651, "address": "廣州市番禺區南村鎮漢溪大道東389號番禺萬達廣場4層" }, "geometry": { "type": "Point", "coordinates": [ 113.356523, 23.012651 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城（廣州海珠萬達廣場店）", "lng": 113.320582, "lat": 23.089375, "address": "廣州市海珠區廣州大道南978號601鋪" }, "geometry": { "type": "Point", "coordinates": [ 113.320582, 23.089375 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(白雲萬達廣場店)", "lng": 113.273067, "lat": 23.178271, "address": "廣州市白雲區雲城東路503號萬達廣場娛樂樓三層" }, "geometry": { "type": "Point", "coordinates": [ 113.273067, 23.178271 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(盈熙廣場店)", "lng": 113.293956, "lat": 23.07975, "address": "廣州市海珠區江南大道南689-709號盈熙廣場2層" }, "geometry": { "type": "Point", "coordinates": [ 113.293956, 23.07975 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(蘿崗萬達店)", "lng": 113.47294, "lat": 23.174362, "address": "廣州市黃埔區開創大道與科豐路交匯處萬達廣場F4" }, "geometry": { "type": "Point", "coordinates": [ 113.47294, 23.174362 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(萬科廣場店)", "lng": 113.411133, "lat": 23.172774, "address": "廣州市天河區華觀路天河萬科廣場4層" }, "geometry": { "type": "Point", "coordinates": [ 113.411133, 23.172774 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(廣州萬達影城番禺奧園廣場店)", "lng": 113.365178, "lat": 22.929663, "address": "廣州市番禺區橋南街福德路281號奧園廣場三樓萬達影城" }, "geometry": { "type": "Point", "coordinates": [ 113.365178, 22.929663 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城(亞運城廣場店)", "lng": 113.482628, "lat": 22.94697, "address": "廣東省廣州市番禺區石樓鎮康體路43號亞運城廣場3樓" }, "geometry": { "type": "Point", "coordinates": [ 113.482628, 22.94697 ] } },
{ "type": "Feature", "properties": { "name": "廣州永和萬達電影城(永和里享家店)", "lng": 113.574286, "lat": 23.201214, "address": "廣東省廣州市黃埔區新業路23號" }, "geometry": { "type": "Point", "coordinates": [ 113.574286, 23.201214 ] } },
{ "type": "Feature", "properties": { "name": "萬達國際影城(廣州新塘萬達廣場店)", "lng": 113.624387, "lat": 23.158623, "address": "廣州市增城區新塘鎮新福路9號新塘萬達廣場4F萬達影城" }, "geometry": { "type": "Point", "coordinates": [ 113.624387, 23.158623 ] } },
{ "type": "Feature", "properties": { "name": "萬達影城", "lng": 113.237061, "lat": 23.430949, "address": "廣州市花都區藍楹街融創茂" }, "geometry": { "type": "Point", "coordinates": [ 113.237061, 23.430949 ] } }
]
}
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
