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

我无法确定放置/集成此代码的位置。在我的第一次尝试中，它被放置为beneth＆＃34; L.tileLayer＆＃34;，现在结果是没有制造商（而不是很多）....这可能是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>',
  },{

当提取页面时，应该播放视频，在视频消失后，可能会出现聚类标记，这最终会导致弹出一个包含罗马这个地方的图画。如果我可以使用自定义图像标记ikons显示绘图，如果我可以为不同的人贡献添加不同的图层，那也将是非常好的，但目前我的目标是将视频Overlay与聚集标记相结合......

PS：所有这一切都将成为一个关于罗马的开源guideook的网站 - 一本真实的实体书 - 自2009年以来我一直在销售：这个想法是你可以把这本书带到罗马有笔记和版本。到2020年，谁将这本书归还给我，成为集体展览的一部分：

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

感谢任何提示！

Answer 1

在集成Video Overlay和Leaflet.markercluster插件时似乎没有任何问题。

但是，在您的代码示例中，您使用的是mapid，而另一个map。确保不要混淆变量名称。

此外，您的初始视图可能会被放大，从初始视图中显示您的群集标记，让您相信它们不会显示。

例如，使用11的缩放显示标记在那里：

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

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

1 个答案: