Mapbox-完全禁用群集
我已经开始使用Mapbox，一切都按照我的意愿进行，只是我还没有弄清楚如何禁用集群。这是我的密码：Mapbox-完全禁用群集,mapbox,mapbox-gl-js,Mapbox,Mapbox Gl Js,我已经开始使用Mapbox，一切都按照我的意愿进行，只是我还没有弄清楚如何禁用集群。这是我的密码： <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Add custom icons with Markers</title> <meta name='viewport' content='initial-scale=1,ma
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add custom icons with Markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.marker {
/*display: block;*/
border: none;
/*border-radius: 50%;*/
cursor: pointer;
padding: 0;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png');
background-size: cover;
width: 20px;
height: 27px;
/*border-radius: 50%;*/
/*cursor: pointer;*/
}
</style>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibmFiZWxla3QiLCJhIjoiY2p4ZXVubnQwMGVmcTN6cGU0c3JpZmM2diJ9.peecDCcSljWhChxCknv7AQ';
var coordinates = [
[6.73579, 78.72300],
[2.70886, 11.51694],
[34.05482, -57.09742],
[-39.05019, 89.79126],
[17.44893, 35.57014],
[23.60105, 168.12674],
[-4.87631, 72.99334],
[39.7392, -104.9903],
[39.79905,-105.78118],
[39.80266,-105.78692],
[39.79758,-105.78061],
[39.80314,-105.78978],
[39.80313,-105.78999],
[39.80103,-105.78272],
[39.80096,-105.78259],
[39.80187,-105.78407],
[39.80283,-105.78593],
[39.79937,-105.78134],
[39.80023,-105.78164],
[39.80272,-105.78765],
[39.80263,-105.78673],
[39.80264,-105.78676],
[39.80125,-105.78326],
[39.7976,-105.78028],
[39.80316,-105.7905],
]
var num_coordinates = Object.keys(coordinates).length
var geojson = {
"type": "FeatureCollection",
"features": []
}
for (var coord_ind = 0; coord_ind < num_coordinates; coord_ind++) {
geojson.features.push({
"type": "Feature",
"properties": {
"message": "Bar",
"iconSize": [300, 300]
},
"geometry": {
"type": "Point",
"coordinates": [coordinates[coord_ind][1], coordinates[coord_ind][0]] // Longitude then Latitude
}
})
}
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
// style: 'mapbox://styles/mapbox/satellite-v9', // stylesheet location
center: [-99.66, 38.46], // starting position [lng, lat]
zoom: 5.5 // starting zoom
});
map.on('load', function() {
map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png', function(error, image) {
if (error) throw error;
map.addImage('pin', image);
map.addSource("photo_locations", {
type: "geojson",
data: geojson,
cluster: false,
clusterMaxZoom: 1, // Max zoom to cluster points on
clusterRadius: 1 // Radius of each cluster when clustering points (defaults to 50)
});
map.addLayer({
"id": "points",
"type": "symbol",
"source": "photo_locations",
"layout": {
"icon-image": "pin",
"icon-size": 0.12
}
});
});
});
</script>
</body>
</html>
添加带有标记的自定义图标
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
.马克{
/*显示：块*/
边界：无；
/*边界半径：50%*/
光标：指针；
填充：0；
背景图像：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Map_pin_icon.svg/176px-Map_pin_icon.svg.png');
背景尺寸：封面；
宽度：20px；
高度：27px；
/*边界半径：50%*/
/*光标：指针*/
}
mapboxgl.accessToken='pk.eyj1ijoibmfizwxla3qiljhijoi2p4zxvubnqwmgvmctn6cgu0c3jpzmm2dij9.peecDCcSljWhChxCknv7AQ'；
变量坐标=[
[6.73579, 78.72300],
[2.70886, 11.51694],
[34.05482, -57.09742],
[-39.05019, 89.79126],
[17.44893, 35.57014],
[23.60105, 168.12674],
[-4.87631, 72.99334],
[39.7392, -104.9903],
[39.79905,-105.78118],
[39.80266,-105.78692],
[39.79758,-105.78061],
[39.80314,-105.78978],
[39.80313,-105.78999],
[39.80103,-105.78272],
[39.80096,-105.78259],
[39.80187,-105.78407],
[39.80283,-105.78593],
[39.79937,-105.78134],
[39.80023,-105.78164],
[39.80272,-105.78765],
[39.80263,-105.78673],
[39.80264,-105.78676],
[39.80125,-105.78326],
[39.7976,-105.78028],
[39.80316,-105.7905],
]
var num_coordinates=Object.keys（coordinates）.length
var geojson={
“类型”：“FeatureCollection”，
“功能”：[]
}
对于（var coord_ind=0；coord_indcluster:false如何使群集完全禁用，以便在任何缩放级别都可以看到每个单独的pin？任何想法都很感激。谢谢 正如geografa所建议的，添加
“icon allow overlap”：true布局...
"layout": {
"icon-image": "pin",
"icon-size": 0.08,
"icon-allow-overlap": true
}
...
禁用群集功能的效果与预期的一样，尽管您的pin看起来足够大，足以阻碍（重叠）附近的其他标记，这使得很难看到它们。我建议使用不同的标记，并使用
“icon allow overlap”：true“icon allow overlap”：true