Leaflet에서 circleMarker를 앞쪽에 표시

8988 단어 GISgeojsonleaflet
안녕하세요.
Leaflet 에서 GeoJSON 데이터 등을 표시할 때 circleMarker 가 앞쪽으로 오도록 표시했습니다. pane 을 지정하는 방법입니다 1



덧붙여 지정하지 않는 경우에는 :



index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Leaflet</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
</body>
<script>
var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);
map.setView([50.16, 2.3], 9);

var geojson = L.layerGroup([
    L.marker([50.16, 2.3]),  // "Point"
    L.marker([50.20, 2.3]),  // "Point"
    L.polyline([[50.16, 2.1], [50.16, 2.5]]),  // "LineString"
    L.polyline([[50.20, 2.1], [50.20, 2.5]]),  // "LineString"
]).toGeoJSON();

<!-- https://stackoverflow.com/questions/39767499/how-to-set-the-zindex-layer-order-for-geojson-layers -->
map.createPane("pane620").style.zIndex = 620;

var circleMarker = function(feature, latlng) {
    return new L.CircleMarker(latlng, {
        pane: "pane620",
        radius: 4,
        color: "#ff8",
        fillColor: "#f20",
        fillOpacity: 1,
    })
    .bindPopup("marker in pane620")
    .bindTooltip("tooltip").openTooltip();
};

L.geoJson(geojson, {pointToLayer: circleMarker}).addTo(map);

</script>
</html>



이것은 "How to set the zIndex layer order for geoJson layers? "(stackoverflow)의 방법을 참고했습니다.

좋은 웹페이지 즐겨찾기