Leaflet で circleMarker を手前側に表示
こんにちは。
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) の中の方法を参考にしました。 ↩
Author And Source
この問題について(Leaflet で circleMarker を手前側に表示), 我々は、より多くの情報をここで見つけました https://qiita.com/kkdd/items/a406cbde0d343d2061aa著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .