如何修復天藍色地圖中重疊的簇氣泡文本？
[英]How can fix the cluster bubbles text overlapping in azure maps?
問題描述
我在給定示例中使用Azure map Spider Cluster 。 在這個示例中一切正常。 我也不想更改集群設置，如果可能的話應該是這樣。 我只想在集群氣泡重疊時僅顯示頂部集群氣泡的文本，並且應該隱藏集群氣泡的其余文本（在重疊的情況下位於底部）。 （只有底部氣泡的文本應該隱藏，而不是氣泡）。 以下是我的示例代碼和一些屏幕截圖，以了解我面臨的問題：
先感謝您。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
<script src="https://raw.githubusercontent.com/Azure-Samples/azure-maps-html-marker-layer/main/dist/azure-maps-html-marker-layer.min.js"></script>
<script src="https://raw.githubusercontent.com/Azure-Samples/azure-maps-spider-clusters/main/dist/azure-maps-spider-clusters.min.js"></script>
<style>
.customInfobox {
max-width: 240px;
padding: 10px;
font-size: 12px;
margin-right: 20px;
white-space: normal
}
.customInfobox .name {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px
}
.popup-content-container .popup-close {
top: 12px !important;
right: 6px !important;
color: #ffffff !important;
font-size: 16px !important;
line-height: 18px !important;
height: 15px !important;
background: #000000 !important;
width: 15px !important;
border-radius: 50px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.atlas-map-canvas {
width: 100% !important
}
</style>
</head>
<body onload="GetMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<script>
var map, datasource, popup, spiderManager;
function GetMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-110, 50],
view: 'Auto',
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
}
});
var deviceList = [
{
"id": 8042,
"mac": "21june1",
"label": "21-Jun-01 - Test-1",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8043,
"mac": "21june2",
"label": "21june2-Test-2",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8044,
"mac": "21june3",
"label": "21june3-Test-3",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8045,
"mac": "21june4",
"label": "21june4 - Test- 4",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 7842,
"mac": "00c3f407dc6c",
"label": "47 Billion",
"dType": "tizen",
"latitude": 22.685824,
"longitude": 75.8722663,
"status": "online",
"space": null
},
{
"id": 7934,
"mac": "b82e6e318ed3556f",
"label": "8f888a7c1385f848",
"dType": "mp",
"latitude": 22.685824,
"longitude": 75.8722663,
"status": "offline",
"space": null
},
{
"id": 7953,
"mac": "8f888a7c1385f848",
"label": "8f888a7c1385f848-kamlesh",
"dType": "mp",
"latitude": 22.1737063,
"longitude": 75.4568386,
"status": "offline",
"space": null
},
{
"id": 7949,
"mac": "a28f8e61e68b45a6",
"label": "a28f8e61e68b45a6 - MS App",
"dType": "mp",
"latitude": 22.557139462283,
"longitude": 75.810245901271,
"status": "offline",
"space": null
},
{
"id": 8048,
"mac": "45",
"label": "ak",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 7946,
"mac": "a28f8e61e68b45a6123",
"label": "App - MS - 2",
"dType": "mp",
"latitude": 22.685824,
"longitude": 75.8722663,
"status": "offline",
"space": null
},
{
"id": 8041,
"mac": "b25a9ba7d15a",
"label": "b25a9ba7d15a-pwa",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8029,
"mac": "20180e107277",
"label": "COD - Eslide",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 7844,
"mac": "d003df7e5d96-1",
"label": "d003df7e5d96 - Samsung TIzen",
"dType": "tizen",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 7969,
"mac": "d06d4e782d67ca3f",
"label": "d06d4e782d67ca3f - ankit3",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8039,
"mac": "53cc155a70d8",
"label": "d88d704262ca - PWA",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8010,
"mac": "f1sadsa",
"label": "f1f1f1msf1f1f1ms-f1f1f1ms-f1f1f1msf1f1f1ms-f1f1f1msf1f1f1msf1f1f1ms-f1f1f1msf1f1f1msf1f1f1msf1f1f1ms",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8046,
"mac": "f9846974-24fc-4271-b75a-84a7601c5b7b",
"label": "geo Device",
"dType": "gf",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8040,
"mac": "d72492ca-5814-4e05-b8ae-b7f8b4cff5ce",
"label": "Geo fence Device",
"dType": "gf",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8015,
"mac": "6905cdc3-6efb-4727-8305-018244003b18",
"label": "GF-AK",
"dType": "gf",
"latitude": 22.557139462283,
"longitude": 75.810245901271,
"status": "offline",
"space": null
},
{
"id": 7888,
"mac": "grtest1",
"label": "grtest - update",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 7916,
"mac": "hs-test-22",
"label": "hs-test-2 edit",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8034,
"mac": "785dc8c72f6e",
"label": "Left Device\"",
"dType": "webos",
"latitude": 22.685824,
"longitude": 75.8722663,
"status": "online",
"space": 3897624
},
{
"id": 7945,
"mac": "c0de742442c77ccc",
"label": "MS - App\"",
"dType": "mp",
"latitude": 24.756808311193,
"longitude": 72.92724609375,
"status": "offline",
"space": null
},
{
"id": 8047,
"mac": "mc1",
"label": "MS - App\"-1",
"dType": "mc",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8035,
"mac": "b4b291180119",
"label": "Right Device",
"dType": "webos",
"latitude": 22.1737063,
"longitude": 75.4568386,
"status": "online",
"space": 3836160
},
{
"id": 7962,
"mac": "91581699f87d1663",
"label": "Samsung Tab",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 7965,
"mac": "e244e6cc9c428e50",
"label": "Samsung Tab - release version",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 7960,
"mac": "ebfd9c9d0931e463",
"label": "shivam-mob",
"dType": "mp",
"latitude": null,
"longitude": null,
"status": "offline",
"space": null
},
{
"id": 8016,
"mac": "8c8d28396f25",
"label": "Vipul",
"dType": "mp",
"latitude": 23.324307764205,
"longitude": 69.406630365414,
"status": "offline",
"space": null
}
];
var cordinates = [];
deviceList.forEach(function (item) {
if (item.latitude != null && item.longitude != null) {
cordinates.push({ "type": "Feature", "geometry": { "type": "Point", "coordinates": [item.longitude, item.latitude] }, "properties": { "Name": item.label, "Status": item.status } })
}
});
var positions = { "type": "FeatureCollection", "features": cordinates };
map.setCamera({
//center map
bounds: atlas.data.BoundingBox.fromData(positions),
padding: 50
});
map.events.add('ready', function () {
//Create a popup.
popup = new atlas.Popup();
//Hide popup when user clicks or moves the map.
map.events.add('click', hidePopup);
map.events.add('movestart', hidePopup);
//Load customized icons for use with the symbol layer.
var iconPromises = [
map.imageSprite.createFromTemplate('onlineIcon', 'marker', '#4cae4c', '#fff'),
map.imageSprite.createFromTemplate('offlineIcon', 'marker', '#808080', '#fff')
];
//Wait for icons to load into the map sprite.
Promise.all(iconPromises).then(() => {
//Create a data source to add your data to.
datasource = new atlas.source.DataSource(null, {
//Tell the data source to cluster point data.
cluster: true,
//radius will be always 0.1
clusterRadius: 0.1,
clusterProperties: { //Calculate counts for each entity type in a cluster
'online': ['+', ['case', ['==', ['get', 'Status'], 'online'], 1, 0]],
'offline': ['+', ['case', ['==', ['get', 'Status'], 'offline'], 1, 0]]
},
//The maximium zoom level in which clustering occurs.
//If you zoom in more than this, all points are rendered as symbols.
clusterMaxZoom: 24,
maxZoom: 24
});
//set data to datasource
datasource.setShapes(positions)
map.sources.add(datasource);
//Create a layer for rendering clustered data in the data source.
var clusterBubbleLayer = new atlas.layer.BubbleLayer(datasource, null, {
//Scale the size of the clustered bubble based on the number of points inthe cluster.
radius: [
'step',
['get', 'point_count'],
20, //Default of 20 pixel radius.
100, 30, //If point_count >= 100, radius is 30 pixels.
750, 40 //If point_count >= 750, radius is 40 pixels.
],
//Change the color of the cluster based on the value on the point_cluster property of the cluster.
color: [
'case', //Use a conditional case expression.
// all offline
['>', ['get', 'offline'], 0] && ['==', ['get', 'online'], 0],
'#a5a5a5',
// 'rgba(165, 165, 165,0.8)',
// all online
['>', ['get', 'online'], 0] && ['==', ['get', 'offline'], 0],
'#6aa84f',
// 'rgba(106, 168, 79,0.8)',
// online and offline both
'#ff9900',
// 'rgba(255, 153, 0,0.8)',
],
strokeWidth: 0,
// textOptions:{
// textField: '{point_count}',
// },
filter: ['has', 'point_count'] //Only rendered data points which have a point_count property, which clusters do.
});
//Create a layer to render the individual locations.
var shapeLayer = new atlas.layer.SymbolLayer(datasource, null, {
//Define style for individual points.
iconOptions: {
allowOverlap: true,
ignorePlacement: true,
//Use a case expression to select the image icon based on the Status property of the data point.
image: [
'case',
//Check if status is online
['==', ['get', 'Status'], 'online'],
'onlineIcon',
//Offline/default icon.
'offlineIcon'
]
},
filter: ['!', ['has', 'point_count']] //Filter out clustered points from this layer.
});
//Add the clusterBubbleLayer and two additional layers to the map.
map.layers.add([
clusterBubbleLayer,
//Create a symbol layer to render the count of locations in a cluster.
new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
image: 'none', //Hide the icon image.
},
filter: ['!', ['has', 'point_count']]
}),
shapeLayer
]);
markerLayer = new atlas.layer.HtmlMarkerLayer(datasource, null, {
markerCallback: function (id, position, properties) {
//Check to see if marker represents a cluster.
if (properties.cluster) {
return new atlas.PieChartMarker({
text: properties.point_count_abbreviated
});
} else {
//for single marker
return new atlas.HtmlMarker({
visible: false
});
}
}
});
map.layers.add(markerLayer);
//Create an instance of the spider manager.
spiderManager = new atlas.SpiderClusterManager(map, clusterBubbleLayer, shapeLayer);
//Add event handler for when a feature is selected.
map.events.add('featureSelected', spiderManager, function (e) {
if (e.cluster) {
showPopup(e.cluster.geometry.coordinates, e.shape.getProperties(), [0, 0]);
} else {
showPopup(e.shape.getCoordinates(), e.shape.getProperties(), [0, -20]);
}
});
//Add event handler for when a feature is unselected.
map.events.add('featureUnselected', spiderManager, function () {
hidePopup();
});
});
});
}
var popupTemplate = '<div class="customInfobox"><div class="name">{name} ({status})</div></div>';
showPopup = function (position, properties, pixelOffset) {
var content = popupTemplate.replace(/{name}/g, properties.Name).replace(/{status}/g, properties.Status);
popup.setOptions({
//Update the content of the popup.
content: content,
//Update the position of the popup with the symbols coordinate.
position: position,
//Offset the popups position for better alignment with the layer.
pixelOffset: pixelOffset
});
//Open the popup.
popup.open(map);
}
hidePopup = function () {
popup.close();
}
</script>
</body>
</html>
1 個解決方案
解決方案1
0 2022-06-23 15:08:02
增加數據源上的集群半徑設置。 這是以像素為單位測量的。 您將其設置為 0.1，這非常小。 半徑至少應為最小圖標/氣泡的大小。 查看您的代碼，20 看起來是一個更合理的最小數字。 30 到 40 是更常用的值范圍。
如何根據頁面上輸入的文字讓對話氣泡變大變小
[英]How can I make the speech bubbles get bigger and smaller according to the text entered on the page
我可以在Google Maps API v3中刪除POI的彈出氣泡嗎？
[英]Can I remove just the popup bubbles of POI's in Google Maps API v3?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.