Leafletのマーカーの削除方法

実現したいこと

Leafletでマーカーを削除する。
removeLayerを用いてマーカーを削除したいと考えているのですが、うまく削除することができません。どのようにすればレイヤーを変更した際に対象でないマーカーを削除することができるでしょうか。もちろん、removeLayerを用いずに上記を実現させる書き方があればそちらでも構いません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset = "utf-8">
5  <meta name = "viewport" content = "width = device-width, initial-scale = 1">
6  <link rel = "stylesheet" href = "https://unpkg.com/leaflet@1.3.0/dist/leaflet.css" />
7  <script src = "https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
8  <title>マップ</title>
9  <style>
10    html, body, #map {
11      height: 100%;
12      margin: 0;
13      padding: 0;
14    }
15  </style>
16</head>
17<body>
18  <div id = "map"></div>
19  <script>
20  features = {
21      Tokyo: [
22        ["東京", [35.6896, 139.6918], "地理院地図"]
23      ],
24      Kanagawa: [
25        ["川崎", [35.5299, 139.7024], "OpenStreetMap"],
26        ["横浜", [35.4477, 139.6425], "地理院地図"],
27      ],
28      Chiba: [
29        ["千葉", [35.6050, 140.1234], "地理院地図"]
30      ],
31    };
32    var map = L.map('map').setView([35.6896, 139.6918],10);
33    var gsi =L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {minZoom:2,maxZoom:18,attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"});
34    var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png', {attribution: "<a href='#' target='_blank'>OpenStreetMap</a> contributors" }).addTo(map);
35    L.control.layers({
36      "地理院地図": gsi,
37      "OpenStreetMap": osm
38    }).addTo(map);
39    var tileSelectName;
40    map.on('baselayerchange',function(e){
41      tileSelectName = e.name;
42      tileChange();
43    });
44    function tileChange(){
45      Object.keys(features).forEach(function(value){
46        var category = this[value];
47        for (var i = 0; i < category.length; i++) {
48          var marker = L.marker(category[i][1], { title: category[i][0]});
49          if(tileSelectName === category[i][2]){
50            map.addLayer(marker);
51          } else {
52            map.removeLayer(marker);
53          }
54        }
55      },features);
56    }
57  </script>
58</body>
59</html>

tmp

2023/10/30 08:58

私の思い違いかもしれませんが、恐らくちょっとした思い違い？勘違い？だとおもうのですが、４８行目で、新規にマーカーを作成しています。新規に作成したマーカーは、作成時にはまだ、マップにも追加されていません、また、既にマップに追加されているマーカーとは別ものなので、削除できません。自己解決できなければ、タグにjavascriptを追加すると、答えてくれる人がいると思います。

Hys

2023/10/30 11:55

コメントありがとうございます。タグにjavascriptを追加しました。どのように書けばよいのか分からなかったのですが、考えていただけないでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

tileChange()が呼ばれるたびに新しくマーカーを作っているのが原因です。
何度かレイヤーを変更した後にdevtoolなどで確認すれば、同じ場所にたくさんのマーカーが重なっていることが分かると思います。

解決方法としては、マーカーを一度だけ生成して（たとえばfeaturesの中などに）保持しておいて、その表示を切り替えるようにするのがいいかと思います。
たとえば：

js
1map.on('baselayerchange', function (e) {
2    tileSelectName = e.name;
3    tileChange();
4});
5Object.keys(features).forEach(function (value) {
6    var category = this[value];
7    for (var i = 0; i < category.length; i++) {
8        var marker = category[i][3] = L.marker(category[i][1], { title: category[i][0] });
9    }
10}, features);
11function tileChange() {
12    Object.keys(features).forEach(function (value) {
13        var category = this[value];
14        for (var i = 0; i < category.length; i++) {
15            var marker = category[i][3];
16
17            if (tileSelectName === category[i][2]) {
18                map.addLayer(marker);
19            } else {
20                map.removeLayer(marker);
21            }
22        }
23    }, features);
24}