1 回答

TA貢獻1770條經驗 獲得超3個贊
標記有一個zIndexOffset屬性:
zIndexOffset(數字,默認值:0)
默認情況下,標記圖像 zIndex 是根據其緯度自動設置的。如果要將標記放在所有其他標記的頂部(或下方),請使用此選項,指定一個高值,如 1000(或分別為高負值)。
您的pointToLayer函數可以根據您的z_index屬性設置此選項。就像是:
pointToLayer: function (feature, latlng) {
// beware the exact type of your property
// adapt your test to your context
var zindex = feature.properties.z_index && feature.properties.z_index !== "null";
return L.marker(latlng, {
zIndexOffset: zindex ? 1000 : 0,
icon: L.AwesomeMarkers.icon(
{
icon: feature.properties.icon,
markerColor: feature.properties.color,
prefix: 'fa',
iconColor: 'white',
}
)
}
);
},
和一個演示
var points = {
"type": "FeatureCollection",
"features": [
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9998241,
39.7471494
]
},
"type": "Feature",
"properties": {
color: 'green',
z_index: null
}
},
{
"geometry": {
"type": "Point",
"coordinates": [
-104.9983545,
39.7502833
]
},
"type": "Feature",
"properties": {
z_index: 1000
}
}
]
};
var map = L.map('map').setView([39.74739, -105], 13);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery ? <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox/light-v9',
tileSize: 512,
zoomOffset: -1
}).addTo(map);
var iconGreen = L.AwesomeMarkers.icon({icon: 'glass', prefix: 'fa', markerColor: 'green'});
var iconRed = L.AwesomeMarkers.icon({icon: 'spinner', prefix: 'fa', markerColor: 'red', spin:true});
L.geoJSON(points, {
pointToLayer: function (feature, latlng) {
var color = feature.properties.color || 'red';
var zIndex = feature.properties.z_index || 0;
return L.marker(latlng, {
zIndexOffset: zIndex,
icon: color === 'green' ? iconGreen: iconRed
});
}
}).addTo(map);
html, body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
<div id='map'></div>
添加回答
舉報