如何将视频叠加层与聚类标记相结合

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

我不知道 place/integrate 这段代码在哪里。在我的第一次尝试中，它被放置在 "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

集成视频覆盖和 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>

如何将视频叠加层与聚类标记相结合

How to combine a Video Overlay with clustered markers

html

javascript

css

leaflet

leaflet.markercluster