利用openlayer6中實現：圖層級別1-4使用熱力圖，圖層5-7使用點圖層表示，高於7使用圖標圖層表示
分三層：三個圖層，實際上是利用同一組座標數據，不同層級表現形式不同
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map"></div>
<script type="text/javascript">
var layerMap = new Map();
var features = [];
var features2 = [];
var features3 = [];
let points = [];
for (let i = 0; i < 1100; i++) {
let point = [130 + 30 * Math.random() - 40 * Math.random(), 262 * Math.random() - 2 * Math.random()]
points.push(point)
}
for (let i = 0; i < 1100; i++) {
features.push(new ol.Feature({
geometry: new ol.geom.Point(points[i])
}))
features2.push(new ol.Feature({
geometry: new ol.geom.Point(points[i])
}))
features3.push(new ol.Feature({
geometry: new ol.geom.Point(points[i])
}))
}
var pointSource = new ol.source.Vector({
features: features
})
var IconSource = new ol.source.Vector({
features: features2
})
var heatMapSource = new ol.source.Vector({
features: features3
})
//新建點圖層
var pointLayer = new ol.layer.Vector({
source: pointSource,
style: function () {
return new ol.style.Style({
image: new ol.style.Circle({
color: 'red',
radius: 5,
fill: new ol.style.Fill({
color: 'red'
}),
stroke: new ol.style.Stroke({
color: 'gray', width: 3
})
})
})
}
})
pointLayer.layerId = 'pointLayerId'
layerMap.set(pointLayer.layerId, pointLayer)
//新建熱力圖層
var heatMap = new ol.layer.Heatmap({
source: heatMapSource
})
heatMap.layerId = 'heatMapId'
layerMap.set(heatMap.layerId, heatMap)
//新建圖標圖層
var iconLayer = new ol.layer.Vector({
source: IconSource,
style: function () {
return new ol.style.Style({
image: new ol.style.Icon({
src: 'F:\\workspaces\\precode\\code2\\two\\car.png',
color: 'red',
radius: 5,
})
})
}
})
iconLayer.layerId = 'iconLayerId'
layerMap.set(iconLayer.layerId, iconLayer)
//現在有三個圖層，首先在找到地圖上現在呈現出來的圖層，然後判斷是否刪除該圖層。
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
pointLayer
],
view: new ol.View({
center: [130, 26],
zoom: 6,
projection: 'EPSG:4326'
})
});
//刪除地圖上多餘的圖層，然後添加一個正確的圖層的id
var toCurrentLayer = function (layerId) {
let layers = map.getLayers().getArray();
let curLayerId;
for (let i = 0; i < layers.length; i++) {
if (layers[i].layerId) {
curLayerId = layers[i].layerId
break;
}
}
if (curLayerId) {
map.removeLayer(layerMap.get(curLayerId));
map.addLayer(layerMap.get(layerId))
}
}
map.getView().on('change:resolution', zoomCallback);
var isFindLayerById = function (layerId) {
let result = false;
let layers = map.getLayers().getArray()
for (let i = 0; i < layers.length; i++) {
if (layers[i].layerId == layerId) {
return true
}
}
return false
}
function zoomCallback(event) {
window.viewEvent = event;
console.log(event);
let zoom = event.target.getZoom()
console.log(zoom)
if (zoom <= 5 && !isFindLayerById("heatMapId")) {
//層級小於5，顯示是熱力圖
toCurrentLayer("heatMapId");
} else if (5 < zoom && zoom <= 7 && !isFindLayerById("pointLayerId")) {
//顯示點圖層
toCurrentLayer("pointLayerId");
} else if (zoom > 7 && !isFindLayerById("iconLayerId")) {
//顯示圖標圖層
toCurrentLayer("iconLayerId");
}
}
</script>
</body>
</html>
運行展示如下：（網絡原因，底圖顯示不出來）
