Как совместить наложение видео с кластерными маркерами - PullRequest
Новая
       7

Как совместить наложение видео с кластерными маркерами

0 голосов
/ 27 мая 2018

Я адаптировал этот учебник:

https://github.com/asmaloney/Leaflet_Cluster_Example

Он загружает позиции маркера из файла Json.

Теперь я хочу интегрировать VideoOverlay, который ранее работал какэто: 

    var videoUrls = [
            'http://dominique.turzer.eu/media/mod_osmod/images/Film8.mp4'
    ];
        var bounds = L.latLngBounds([[ 41.92398333, 12.45647433], [ 41.863167640465, 12.502337292]]);

        var videoOverlay = L.videoOverlay( videoUrls, bounds, {
                opacity: 0.7,
            loop: false
        }).addTo(mapid);

        var videoElement = videoOverlay.getElement();

        L.DomEvent.on(videoElement, 'ended', function(){
            videoOverlay.remove();
        });

Я не могу понять, где разместить / интегрировать этот код.В моей первой попытке это было помещено beneth "L.tileLayer", который теперь приводит к тому, что больше нет создателя (а не многих) .... Возможно, проблема в том, что пример markerCluster для листовки 0.7.7 иmy VideoOverly работал с листовкой 1.3.1 -

Мой файл скрипта, с этой строкой связан с текстом моего html-файла 

<script type='text/javascript' src='maps/leaf-demo.js'></script>

Файл скрипта выглядит так: 

var map = L.map( 'map', {
  center: [41.8939551, 12.479556],
  minZoom: 2,
  zoom: 13
});

L.tileLayer( 'https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
 attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
 subdomains: ['a','b','c']
}).addTo( map );

var myURL = jQuery( 'script[src$="leaf-demo.js"]' ).attr( 'src' ).replace( 'leaf-demo.js', '' );

var myIcon = L.icon({
  iconUrl: myURL + 'images/pin24.png',
  iconRetinaUrl: myURL + 'images/pin48.png',
  iconSize: [29, 24],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14]
});

var markerClusters = L.markerClusterGroup();

for ( var i = 0; i < markers.length; ++i )
{
  var popup = markers[i].name +
              '<br/>' + markers[i].img;

  var m = L.marker( [markers[i].lat, markers[i].lng], {icon: myIcon} )
                  .bindPopup( popup );

  markerClusters.addLayer( m );
}

map.addLayer( markerClusters );

И, наконец, есть файл GeoJson, который структурирован следующим образом: 

var markers = [
  {
    "name":"Ponte Milvio",
    "lat":41.9361778,
    "lng":12.47166861,
    "img":'<img src="/images/banners/41-milvio.jpg" width=300 <p><strong style="color: #cd5c5c;">{loadposition position-12}</strong></p>',
  },{

При загрузке страницы видео должно воспроизводиться, а после исчезновения видео могут быть кластерные маркеры., что в итоге привело к появлению всплывающего окна с рисунком из этого места в Риме.Было бы также замечательно, если бы я мог использовать пользовательские значки маркеров изображений, показывающие рисунок, и если бы я мог добавить разные слои для разных людей, вносящих вклад, но на данный момент моя цель состоит в том, чтобы объединить наложение видео с кластерными маркерами ...

PS: Все это будет веб-сайтом для руководства с открытым исходным кодом о Риме - настоящей физической книги, которую я продаю с 2009 года. Идея состоит в том, что вы можете взять книгу в Рим, чтобы иметь заметки и наброски.И кто вернет мне книгу в 2020 году, станет частью коллективной выставки:

http://stinanickel.org/index.php/de/component/spsimpleportfolio/item/2-roman-notes

Спасибо за любой намек!

1 Ответ

0 голосов
/ 29 мая 2018

Похоже, что нет никакой проблемы в интеграции как оверлея Video, так и плагина Leaflet.markercluster.

Однако в ваших примерах кода вы используете mapid, а в другом - map.Убедитесь, что вы не перепутали имя переменных.

Кроме того, ваше начальное представление может быть сильно увеличено, отображая маркеры кластера вне начального представления, и вы уверены, что они не отображаются.

Использование масштабирования 11, например, показывает, что маркеры есть: 

var map = L.map('map', {
  center: [41.8939551, 12.479556],
  minZoom: 2,
  zoom: 11 //13
});

L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  subdomains: ['a', 'b', 'c']
}).addTo(map);

var videoUrls = [
  'http://dominique.turzer.eu/media/mod_osmod/images/Film8.mp4'
];
var bounds = L.latLngBounds([
  [41.92398333, 12.45647433],
  [41.863167640465, 12.502337292]
]);

var videoOverlay = L.videoOverlay(videoUrls, bounds, {
  opacity: 0.7,
  loop: false
}).addTo(map);

var videoElement = videoOverlay.getElement();

L.DomEvent.on(videoElement, 'ended', function() {
  videoOverlay.remove();
});

var markers = [{
  "name": "Ponte Milvio",
  "lat": 41.9361778,
  "lng": 12.47166861,
  "img": '<img src="/images/banners/41-milvio.jpg" width=300/> <p><strong style="color: #cd5c5c;">{loadposition position-12}</strong></p>',
}, {
  "name": "Ponte Milvio 2",
  "lat": 41.9361778,
  "lng": 12.47166861,
  "img": '<img src="/images/banners/41-milvio.jpg" width=300/> <p><strong style="color: #cd5c5c;">{loadposition position-12}</strong></p>',
}, {
  // Dummy marker to make sure it is visible on top of the video.
  "name": "dummy marker",
  "lat": 41.8939551,
  "lng": 12.479556,
  "img": "no img",
}];

var markerClusters = L.markerClusterGroup();

for (var i = 0; i < markers.length; ++i) {
  var popup = markers[i].name +
    '<br/>' + markers[i].img;

  var m = L.marker([markers[i].lat, markers[i].lng], {
      //icon: myIcon
    })
    .bindPopup(popup);

  markerClusters.addLayer(m);
}

map.addLayer(markerClusters);
<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js"></script>

<div id="map" style="height: 180px"></div>
...