如何将视频叠加层与集群标记结合起来

Question

我改编了本教程：

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();
        });

我不知道在哪里放置/集成此代码。在我的第一次尝试中，它被放置在“L.tileLayer”之下，现在的结果是不再有制造商（而不是很多）......这可能是markerCluster示例适用于传单0.7.7和我的 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

感谢任何提示！

Answer 1

集成 Video Overlay 和 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>