顯示群聚裡面的資料數量
範例展示
原始碼
copy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>顯示群聚裡面的資料數量 - Map8 Platform Documentation</title>
<link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
<style>
#map{
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
<script type="text/javascript">
gomp.accessToken = '[YOUR_KEY_HERE]';
var map = new gomp.Map({
container: 'map', // 地圖容器 ID
style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
center: [121.22649, 24.95997], // 初始中心座標，格式為 [lng, lat]
zoom: 12.92, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
speedLoad: false,
attributionControl: false
}).addControl(new gomp.AttributionControl({
compact: false
}));
var imageEl = document.createElement('img');
imageEl.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAqCAYAAACgLjskAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjlJREFUeNrUl8FOwkAQhocVjAYJmBgveCDxBTTqwZN9A/EN8Amsid7x7EWfQHgC9A3grInwACZcuKiJEkI0ouBOnZJa2t2Bbk38k2VLd7ZfZ3d2Z5sYjUag0vbpc05WJVksKlmfSVeWOpXK3fnKq+p5iTAggcqyHMF0usR+YeBAoIQV8W0DvOEKvS5J6LW/QQTAbFnVIsCA+tbks0pKD8ngCszqUHpamQDSMNYgHh24w+sAKUDaEYdRN6cFDCR3Du0YYe6c2o6HWydPLO+Ggzd4f3mAz/4jjIaDn/kQKUimV2FheR1EapHlZVL+FHWwr48e9Du3Y5Ar/D/odZyXSOd3YG4+o/OyKAio9CwI5gejDdpq5AAtlQUOowrmhaKtRpbQDScOF1cM26zgvDlXHFuhmz/TUgIx1DH0ueLYaocU1xlXHFsENlQGuKg5b442aKtRQ1CmVg4rLmoVFNvQhrHbXAtKtErhDrK0tgupTP4XGK/xHrZpdpkx0M0W6OUexKuGzBaWN1vELXscpZLclNVZjLBjYkwcMTAr7xuG3UhYMWwd4pmmZRDWomcGL3w6S1qGoPgMy38+ndhpDEEDYaFbW0RoKEy5l84IVcK0m/eUUC1M+THjO/5vyOpeY7bprrVI6cmzMVRVX0wcGBtIKivaLoxkfJ+X7RAvq9QGpj100gvzXrSg8QWQt0NXepczdogKy2ue67rRU1uIvJDmXwCb/wo4ddBQ4LRpqRSm7ZucMf3UZ+wH3wIMAPnJ+VlcHpUWAAAAAElFTkSuQmCC';
let popup = new gomp.Popup(); //宣告訊息視窗
map.on('load', function () {
map.addSource("housesale", {
type: "geojson",
data: "./您的資料.json", //這邊範例資料是來自於 https://www.map8.zone/js/vector/housesale.json
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 58,
});
map.addLayer({
id: 'clusters_outline',
type: 'circle',
source: 'housesale',
filter: ['has', 'point_count'],
paint: {
"circle-color": [
"step",
["get", "point_count"],
"rgba(0,0,0,.6)",
10,
"rgba(0,0,0,.6)",
50,
"rgba(0,0,0,.6)"
],
'circle-radius': [
'step',
['get', 'point_count'],
21.2,
31.2,
41.2,
51.2,
61.2
]
}
});
map.addLayer({
id: 'clusters',
type: 'circle',
source: 'housesale',
filter: ['has', 'point_count'],
paint: {
"circle-color": [
"step",
["get", "point_count"],
// 數量小於 10
"#d8f5a2",
10,
"#8ce99a",
20,
"#40c057",
30,
"#40c057",
40,
"#37b24d",
50,
"#37b24d",
60,
"#2f9e44",
70,
"#2b8a3e",
80,
"#74b816",
90,
"#66a80f",
100,
"#5c940d"
],
'circle-radius': [
'step',
['get', 'point_count'],
20,
30,
40,
50,
60
]
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "housesale",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count}",
"text-size": 16,
"text-font": ["Noto Sans Regular"],
}
});
map.addImage("image", imageEl);
map.addLayer({
id: "unclustered-point",
type: "symbol",
source: "housesale",
filter: ["!", ["has", "point_count"]],
layout: {
"icon-image": "image",
"icon-size": 0.7
},
});
// 查看群聚點
map.on('click', 'clusters', function (e) {
showDetail(e.point);
});
map.on('zoom', function (e) {
popup.remove();
});
let canvasCoordinates = map.project([121.21837014953803, 24.963127633192784]); //假設第一個點擊的座標位置
let mapContainer = map.getCanvas();
// 計算地圖容器的位置
const mapContainerRect = mapContainer.getBoundingClientRect();
// 獲取瀏覽器窗口的滾動位置
const windowScrollX = window.pageXOffset || document.documentElement.scrollLeft;
const windowScrollY = window.pageYOffset || document.documentElement.scrollTop;
// 計算地圖左上角在 window 上的 clientX 和 clientY
const leftTopClientX = mapContainerRect.left + windowScrollX + canvasCoordinates.x;
const leftTopClientY = mapContainerRect.top + windowScrollY + canvasCoordinates.y;
const simulatedClick = new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
clientX: leftTopClientX,
clientY: leftTopClientY,
});
//此為模擬點擊事件
setTimeout(() => {
map.getCanvas().dispatchEvent(simulatedClick);
}, 500);
});
$(window).on('click', function(eDot){
console.log('eDot', eDot);
});
function showDetail(e){
let features = map.queryRenderedFeatures(e, { layers: ['clusters'] });
let clusterId = features[0].properties.cluster_id;
let pointCount = features[0].properties.point_count;
let clusterCoordinates = features[0].geometry.coordinates;
let clusterSource = map.getSource('housesale');
// 查看群聚點下所有features資訊
let allFeatures;
clusterSource.getClusterLeaves(clusterId, pointCount, 0, function (err, aFeatures) {
allFeatures = aFeatures;
popup.setLngLat(clusterCoordinates)
.setHTML(`群聚子數量為:${allFeatures.length}`)
.addTo(map)
})
}
</script>
</body>
</html>