leaflet基础：覆盖（四）

最新推荐文章于 2025-02-18 15:20:48 发布

南希Libra

最新推荐文章于 2025-02-18 15:20:48 发布

阅读量1.4k

点赞数 3

文章标签： arcgis 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_54685571/article/details/140343178

版权

Leaflet API 中有 3 个覆盖层：

ImageOverlay：栅格图层、扩展图层
VideoOverlay：栅格图层，扩展 ImageOverlay
SVGOverlay：矢量图层，扩展 ImageOverlay

1. `ImageOverlay`

L.ImageOverlay用于在地图的特定边界上加载和显示单个图像

// 使用方法如下
var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, options);

①. 创建地图

const initMap = () => {
  var map = L.map("cover", {
    center: [39.89854, 116.3347],
    zoom: 7,
    maxZoom: 25,
    // zoomSnap: 0.25, //zoomSnap可以设置为零。这意味着 Leaflet 不会捕捉缩放级别。
    // zoomDelta: 0.25, //控制了使用缩放按钮时要放大/缩小的缩放级别数
    // wheelPxPerZoomLevel: 0.25, //选项控制鼠标滚轮放大或缩小的速度。
  });
  let url =
    "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
  L.tileLayer(url, {
    maxZoom: 7,
  }).addTo(map);
}

②. 创建一个包含多个选项的图像叠加层

const initMap=()=>{
 ....  // 省略上述创建地图代码

// 创建一个包含多个选项的图像叠加层
  var imageUrl =
    "https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg";
  var errorOverlayUrl = "https://cdn-icons-png.flaticon.com/512/110/110686.png";
  var altText =
    "Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.";
  var latLngBounds = L.latLngBounds([
    [39, 106],
    [35, 100],
  ]);

  var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
    opacity: 0.8, //opacity定义图像叠加的不透明度，默认等于1.0 。减小此值可使图像叠加层透明并显示基础地图图层。
    errorOverlayUrl: errorOverlayUrl, //errorOverlayUrl是覆盖图像的 URL，用于代替加载失败的覆盖。
    alt: altText, //alt设置 HTML alt 属性以提供图像的替代文本说明
    interactive: true, //interactive默认为false|true。如果 ，图像叠加将在单击或悬停时发出鼠标事件。
  }).addTo(map);
// 如果要查看 ImageOverlay 覆盖的区域，可以将具有相同内容的 L.Rectangle 添加到地图中：L.LatLngBounds
  L.rectangle(latLngBounds).addTo(map);
    map.fitBounds(latLngBounds);
}

2. `VideoOverlay`

①：叠加视频

const initMap=()=>{
   ...... 
  // 叠加视频
  var videoUrls = [
    "https://www.mapbox.com/bites/00188/patricia_nasa.webm",
    "https://www.mapbox.com/bites/00188/patricia_nasa.mp4",
  ];
  var errorOverlayUrl = "https://cdn-icons-png.flaticon.com/512/110/110686.png";
  var latLngBounds = L.latLngBounds([
    [42, 100],
    [20, 80],
  ]);

  var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
    opacity: 0.8,
    errorOverlayUrl: errorOverlayUrl,
    interactive: true,
    autoplay: true, //autoplay选项定义视频在加载时是否自动开始播放。这是默认的true。重要的是要知道，在某些浏览器上，功能仅在选项显式设置为 时才有效。
    muted: true, //muted选项定义视频在加载时是否以静音状态启动。这是默认的。false
    playsInline: true, //playsInline当设置为允许视频在移动浏览器中开始播放时，该选项不会自动进入全屏模式。这是默认是true
  }).addTo(map);
}

②：添加视频控件

const initMap=()=>{
   ......
   // 添加控件播放视频
  videoOverlay.on("load", function () {
    var MyPauseControl = L.Control.extend({
      onAdd: function () {
        var button = L.DomUtil.create("button");
        button.title = "Pause";
        button.innerHTML = '<span aria-hidden="true">⏸</span>';
        L.DomEvent.on(button, "click", function () {
          videoOverlay.getElement().pause();
        });
        return button;
      },
    });
    var MyPlayControl = L.Control.extend({
      onAdd: function () {
        var button = L.DomUtil.create("button");
        button.title = "Play";
        button.innerHTML = '<span aria-hidden="true">▶️</span>';
        L.DomEvent.on(button, "click", function () {
          videoOverlay.getElement().play();
        });
        return button;
      },
    });

    var pauseControl = new MyPauseControl().addTo(map);
    var playControl = new MyPlayControl().addTo(map);
  });
}

3. `SVGOverlay`

1. 用于在地图的特定边界上加载、显示和提供对 SVG 文件的 DOM 访问

var svgOverlay = L.svgOverlay(SVGElement, svgElementBounds, options);

注意：SVG 元素上需要 viewBox 属性才能正确放大和缩小

2. 创建一个 SVG 元素

  var svgElement = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "svg"
  );
  svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svgElement.setAttribute("viewBox", "0 0 200 200");
  svgElement.innerHTML =
    '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';


// 或者在html中编写svg，然后用querySelector 选择此 SVG 元素
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/></svg>
var svgElement = document.querySelector('#svg');

3.叠加svg

var latLngBounds = L.latLngBounds([
    [38, 110],
    [20, 100],
  ]);
  map.fitBounds(latLngBounds);

  var svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
    opacity: 0.7,
    interactive: true,
  }).addTo(map);

4. 综上所有代码

<script setup>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { onMounted } from "vue";

onMounted(() => {
  initMap();
});

/**
 * @author:南希Libra
 * @description:初始化地图
 */
const initMap = () => {
  var map = L.map("cover", {
    center: [39.89854, 116.3347],
    zoom: 7,
    maxZoom: 25,
    // zoomSnap: 0.25, //zoomSnap可以设置为零。这意味着 Leaflet 不会捕捉缩放级别。
    // zoomDelta: 0.25, //控制了使用缩放按钮时要放大/缩小的缩放级别数
    // wheelPxPerZoomLevel: 0.25, //选项控制鼠标滚轮放大或缩小的速度。
  });
  let url =
    "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}";
  // let url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
  L.tileLayer(url, {
    maxZoom: 7,
  }).addTo(map);
  // 创建一个包含多个选项的图像叠加层
  var imageUrl =
    "https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg";
  var errorOverlayUrl = "https://cdn-icons-png.flaticon.com/512/110/110686.png";
  var altText =
    "Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.";
  var latLngBounds = L.latLngBounds([
    [39, 106],
    [35, 100],
  ]);

  var imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
    opacity: 0.8, //opacity定义图像叠加的不透明度，默认等于1.0 。减小此值可使图像叠加层透明并显示基础地图图层。
    errorOverlayUrl: errorOverlayUrl, //errorOverlayUrl是覆盖图像的 URL，用于代替加载失败的覆盖。
    alt: altText, //alt设置 HTML alt 属性以提供图像的替代文本说明
    interactive: true, //interactive默认为false|true。如果 ，图像叠加将在单击或悬停时发出鼠标事件。
  }).addTo(map);
  // 查看 ImageOverlay 覆盖的区域
  L.rectangle(latLngBounds).addTo(map);
  map.fitBounds(latLngBounds);
  // 叠加视频
  var videoUrls = [
    "https://www.mapbox.com/bites/00188/patricia_nasa.webm",
    "https://www.mapbox.com/bites/00188/patricia_nasa.mp4",
  ];
  var errorOverlayUrl = "https://cdn-icons-png.flaticon.com/512/110/110686.png";
  var latLngBounds = L.latLngBounds([
    [42, 100],
    [20, 80],
  ]);

  var videoOverlay = L.videoOverlay(videoUrls, latLngBounds, {
    opacity: 0.8,
    errorOverlayUrl: errorOverlayUrl,
    interactive: true,
    autoplay: true, //autoplay选项定义视频在加载时是否自动开始播放。这是默认的true。重要的是要知道，在某些浏览器上，功能仅在选项显式设置为 时才有效。
    muted: true, //muted选项定义视频在加载时是否以静音状态启动。这是默认的。false
    playsInline: true, //playsInline当设置为允许视频在移动浏览器中开始播放时，该选项不会自动进入全屏模式。这是默认是true
  }).addTo(map);
  // 添加控件播放视频
  videoOverlay.on("load", function () {
    var MyPauseControl = L.Control.extend({
      onAdd: function () {
        var button = L.DomUtil.create("button");
        button.title = "Pause";
        button.innerHTML = '<span aria-hidden="true">⏸</span>';
        L.DomEvent.on(button, "click", function () {
          videoOverlay.getElement().pause();
        });
        return button;
      },
    });
    var MyPlayControl = L.Control.extend({
      onAdd: function () {
        var button = L.DomUtil.create("button");
        button.title = "Play";
        button.innerHTML = '<span aria-hidden="true">▶️</span>';
        L.DomEvent.on(button, "click", function () {
          videoOverlay.getElement().play();
        });
        return button;
      },
    });

    var pauseControl = new MyPauseControl().addTo(map);
    var playControl = new MyPlayControl().addTo(map);
  });
  // 叠加SVG
  var svgElement = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "svg"
  );
  svgElement.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svgElement.setAttribute("viewBox", "0 0 200 200");
  svgElement.innerHTML =
    '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>';
  var latLngBounds = L.latLngBounds([
    [38, 110],
    [20, 100],
  ]);
  map.fitBounds(latLngBounds);

  var svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
    opacity: 0.7,
    interactive: true,
  }).addTo(map);
};
</script>
 
<template name="Cover">
  <div>覆盖</div>
  <div id="cover"></div>
</template>
 
<style scoped lang='scss'>
#cover {
  height: 560px;
  width: 1200px;
  border: 1px solid #f00;
}

</style>

学习文档

1. Overlays - Leaflet - 用于交互式地图的 JavaScript 库 (leafletjs.com)

2. Documentation - Leaflet - a JavaScript library for interactive maps (leafletjs.com)