Как динамически показать / скрыть LineString в Leaflet - PullRequest
Новая
       3

Как динамически показать / скрыть LineString в Leaflet

0 голосов
/ 06 мая 2019

Я загружаю файл треков самолетов GeoJSON в Leaflet.Я хотел бы отобразить текущие местоположения в виде значков, а предыдущие «дорожки» - в виде линий.Отображение всех дорожек становится все больше по мере увеличения количества самолетов, поэтому я хотел бы иметь возможность включать их только при нажатии на самолет.

Можно / как показать / скрыть LineString отдельно от маркерадинамически?

Я нашел предложения установить прозрачный стиль , но .setStyle применяется к элементу, а не к геометрии.

Example image

Обобщенный GeoJSON: 

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "reg": "G-CGWP",
        "type": "fixed",
        "model": "website.profile"
      },
      "id": 12,
      "geometry": {
        "type": "GeometryCollection",
        "geometries": [
          {
            "type": "LineString",
            "coordinates": [
              [
                -0.319281196282617,
                52.08664390758181
              ],
              [
                -1.076445537370006,
                52.79518475653341
              ],
              [
                -0.098191354875297,
                51.94810149137197
              ],
              [
                -0.940941846648286,
                53.508162348603435
              ]
            ]
          },
          {
            "type": "Point",
            "coordinates": [
              -0.940941846648286,
              53.508162348603435
            ]
          }
        ]
      }
    },
  ...
  ]
}

У меня есть контроль над GeoJSON, поэтому я могу это изменить.

1 Ответ

0 голосов
/ 12 мая 2019

Так как LineString коллекция представлена ​​как GeometryCollection, вы можете сгладить GeometryCollection в LineString геометрию (например, через Turf.js flatten function ): 

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "GeometryCollection",
        "geometries": [
          {
            "type": "LineString",
            "coordinates": [
              [-105.00341892242432, 39.75383843460583],
              [-105.0008225440979, 39.751891803969535]
            ]
          },
          {
            "type": "LineString",
            "coordinates": [
              [-105.0008225440979, 39.751891803969535],
              [-104.99820470809937, 39.74979664004068]
            ]
          }
        ]
      }
    }
  ]
}

в 

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-105.00341892242432, 39.75383843460583],
          [-105.0008225440979, 39.751891803969535]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [-105.0008225440979, 39.751891803969535],
          [-104.99820470809937, 39.74979664004068]
        ]
      }
    }
  ]
}

, а затем применить стиль к слою 

layer.on({
   click: function(e) {
      toggleLayerVisibility(e.target);
   }
});

, где 

var selectedLayerId = null;
function toggleLayerVisibility(layer) {
    if (selectedLayerId) {
      geojson.resetStyle(layer);
      selectedLayerId = null;
    } else {
      //hide a layer
      layer.setStyle({
        opacity: 0,
        fillOpacity: 0.0
      });
      selectedLayerId = layer._leaflet_id;
    }
}

Вот пример 

var data = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      geometry: {
        type: "GeometryCollection",
        geometries: [
          {
            type: "LineString",
            coordinates: [
              [-105.00341892242432, 39.75383843460583],
              [-105.0008225440979, 39.751891803969535]
            ]
          },
          {
            type: "LineString",
            coordinates: [
              [-105.0008225440979, 39.751891803969535],
              [-104.99820470809937, 39.74979664004068]
            ]
          },
          {
            type: "LineString",
            coordinates: [
              [-104.99820470809937, 39.74979664004068],
              [-104.98689651489258, 39.741052354709055]
            ]
          }
        ]
      }
    },
    {
      type: "Feature",
      geometry: {
        type: "MultiPolygon",
        coordinates: [
          [
            [
              [-105.00432014465332, 39.74732195489861],
              [-105.00715255737305, 39.7462000683517],
              [-105.00921249389647, 39.74468219277038],
              [-105.01067161560059, 39.74362625960105],
              [-105.01195907592773, 39.74290029616054],
              [-105.00989913940431, 39.74078835902781],
              [-105.00758171081543, 39.74059036160317],
              [-105.00346183776855, 39.74059036160317],
              [-105.00097274780272, 39.74059036160317],
              [-105.00062942504881, 39.74072235994946],
              [-105.00020027160645, 39.74191033368865],
              [-105.00071525573731, 39.74276830198601],
              [-105.00097274780272, 39.74369225589818],
              [-105.00097274780272, 39.74461619742136],
              [-105.00123023986816, 39.74534214278395],
              [-105.00183105468751, 39.74613407445653],
              [-105.00432014465332, 39.74732195489861]
            ],
            [
              [-105.00361204147337, 39.74354376414072],
              [-105.00301122665405, 39.74278480127163],
              [-105.00221729278564, 39.74316428375108],
              [-105.00283956527711, 39.74390674342741],
              [-105.00361204147337, 39.74354376414072]
            ]
          ],
          [
            [
              [-105.00942707061768, 39.73989736613708],
              [-105.00942707061768, 39.73910536278566],
              [-105.00685214996338, 39.73923736397631],
              [-105.00384807586671, 39.73910536278566],
              [-105.00174522399902, 39.73903936209552],
              [-105.00041484832764, 39.73910536278566],
              [-105.00041484832764, 39.73979836621592],
              [-105.00535011291504, 39.73986436617916],
              [-105.00942707061768, 39.73989736613708]
            ]
          ]
        ]
      }
    }
  ]
};




      var map = L.map("map").setView([39.74739, -105], 14);

      L.tileLayer(
        "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw",
        {
          maxZoom: 18,
          attribution:
            'Map data &copy; <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"
        }
      ).addTo(map);

      var data_flatten = turf.flatten(data);

      var geojson = L.geoJSON(data_flatten, {
        style: {
			fillColor: '#1c9099',
            weight: 8
        },
        onEachFeature: onEachFeature
      }).addTo(map);

      var selectedLayerId = null;
      function toggleLayerVisibility(layer) {
        if (selectedLayerId) {
          geojson.resetStyle(layer);
          selectedLayerId = null;
        } else {
          //hide a layer
          layer.setStyle({
            opacity: 0,
            fillOpacity: 0.0
          });
          selectedLayerId = layer._leaflet_id;
        }
      }

      function onEachFeature(feature, layer) {
        layer.on({
          click: function(e) {
            toggleLayerVisibility(e.target);
          }
        });
      }
 #map {
        width: 600px;
        height: 400px;
      }
<link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
      integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
      crossorigin=""
    ></script>

    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/5.1.5/turf.js"
    ></script>
<div id="map"></div>
...