Leaflet 嵌入网络摄像头最新缩略图到地图弹窗问题咨询

问题根因 #

你遇到的报错是目标站点配置了X-Frame-Options响应头，禁止第三方网站通过iframe嵌入其页面，仅给链接追加&output=embed参数对没有开放嵌入权限的站点完全无效。

可行解决方案 #

方案1：优先使用摄像头公开的静态帧直链（推荐）

绝大多数公共网络摄像头都会对外开放最新快照的静态图片直链，你可以直接在GeoJSON的属性中新增Thumbnail字段存储对应摄像头的静态图地址，替换原有iframe为<img>标签加载即可，既不会触发跨域嵌入限制，加载速度也远高于iframe嵌入整站。
你也可以给图片链接追加实时时间戳参数，避免浏览器缓存旧图，实现打开弹窗自动加载最新帧的效果，修改后的代码参考如下：

onEachFeature: function (pointFeature, layer) {
  // 追加时间戳强制拉取最新截图
  const latestThumbnail = `${pointFeature.properties.Thumbnail}?t=${Date.now()}`
  const popupContent = `
    <p><h2 class='webcam_location'>${pointFeature.properties.Location}</h2></p>
    <h4 class='webcam_provider'>${pointFeature.properties.Provider}</h4>
    <img src="${latestThumbnail}" height="200" width="300" alt="摄像头缩略图" loading="lazy">
    <p><a href="${pointFeature.properties.Link}" target="_blank">跳转原站查看完整直播</a></p>
  `
  layer.bindPopup(popupContent)
}

方案2：自建代理服务解析资源

如果部分摄像头没有公开静态帧接口，你可以搭建轻量后端代理服务：由服务端请求目标站点页面，解析出页面内的最新帧图片地址、或者直接对页面截图后返回给前端，浏览器直接加载自家服务返回的资源就不会触发X-Frame-Options校验。

方案3：使用公共摄像头聚合API

如果你的摄像头均为公开可访问的公共资源，可直接使用封装好的公共摄像头聚合接口，这类接口会统一返回标准化的最新缩略图地址，无需你单独适配每个站点的资源规则。

内容的提问来源于stack exchange，提问作者Geographos