五十六、openlayers官网示例Magnify解析——在地图上实现放大镜效果

最新推荐文章于 2024-06-28 14:33:15 发布
最新推荐文章于 2024-06-28 14:33:15 发布
阅读量648 收藏 15
点赞数 12
分类专栏： openlayers官网示例解析 文章标签： 前端 canvas openlayers 地图 openlayers官网示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaa_div/article/details/139853849
版权

官网demo地址：

Magnify 

 这篇讲了如何在地图上添加放大镜效果。

首先加载底图

   const layer = new TileLayer({
      source: new StadiaMaps({
        layer: "stamen_terrain_background",
      }),
    });
    const container = document.getElementById("map");

    const map = new Map({
      layers: [layer],
      target: container,
      view: new View({
        center: fromLonLat([-109, 46.5]),
        zoom: 6,
      }),
    });

鼠标移动的时候，调用render方法，触发postrender事件。

container.addEventListener("mousemove", function (event) {
      mousePosition = map.getEventPixel(event);
      map.render();
    });

    container.addEventListener("mouseout", function () {
      mousePosition = null;
      map.render();
    });

postrender事件中可以获取到鼠标移动的位置，实时绘制圆形和放大后的图像。

先用getRenderPixel将地理坐标转换为屏幕坐标，通过勾股定理（直角三角形的两条直角边的平方和等于斜边的平方）算出半径。         

 layer.on("postrender", function (event) {
      if (mousePosition) {
        const pixel = getRenderPixel(event, mousePosition);
        const offset = getRenderPixel(event, [
          mousePosition[0] + radius,
          mousePosition[1],
        ]);
        //计算半径
        const half = Math.sqrt(
          Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)
        );
      }
    });

获取放大镜范围内所需要的图像。

 //从画布上下文中提取放大镜区域的图像数据：
 const context = event.context;
 const centerX = pixel[0];
 const centerY = pixel[1];
 //正方形左边的顶点
 const originX = centerX - half;
 const originY = centerY - half;
 //计算直径
 const size = Math.round(2 * half + 1);
 const sourceData = context.getImageData(
    originX,
    originY,
    size,
    size
  ).data;
 //获取正方形范围下所有的像素点
 const dest = context.createImageData(size, size);
 const destData = dest.data;

 然后开始创建放大后的图像数据。

// 创建放大后的图像数据
        for (let j = 0; j < size; ++j) {
          for (let i = 0; i < size; ++i) {
            //dI 和 dJ 是相对于中心的偏移
            const dI = i - half;
            const dJ = j - half;
            //点到中心的距离
            const dist = Math.sqrt(dI * dI + dJ * dJ);
            let sourceI = i;
            let sourceJ = j;
            //如果 dist 小于 half，根据偏移和缩放因子计算新的像素位置
            if (dist < half) {
              sourceI = Math.round(half + dI / 2);
              sourceJ = Math.round(half + dJ / 2);
            }
            const destOffset = (j * size + i) * 4;
            const sourceOffset = (sourceJ * size + sourceI) * 4;
            destData[destOffset] = sourceData[sourceOffset];
            destData[destOffset + 1] = sourceData[sourceOffset + 1];
            destData[destOffset + 2] = sourceData[sourceOffset + 2];
            destData[destOffset + 3] = sourceData[sourceOffset + 3];
          }
        }

要看懂这段代码我们需要来好好分析一下。

放大的关键在于 dI / 2 和 dJ / 2 的计算。实际上是将像素距离中心点的偏移量减半，从而将像素“拉近”到中心点。放大镜区域内的像素将被集中在更小的区域内，看起来像是被放大了 。

简单来说，如果我们的圆形下本来有16个像素格子，每个格子展示不同的像素，放大效果就是让两个、三个、或者四个格子都展示同一个像素，那看起来中间部分就会比较大。

我们通过一个简单的 4x4 像素的例子来详细说明这段代码是如何实现放大镜效果的。

假设这是图像的像素点。

1  2  3  4
5  6  7  8
9  10 11 12
13 14 15 16

每个点用坐标表示就是这样：

(0,0) (1,0) (2,0) (3,0)
(0,1) (1,1) (2,1) (3,1)
(0,2) (1,2) (2,2) (3,2)
(0,3) (1,3) (2,3) (3,3)

 for (let j = 0; j < size; ++j) {
   for (let i = 0; i < size; ++i) {
       const dI = i - half;
       const dJ = j - half;
       const dist = Math.sqrt(dI * dI + dJ * dJ);
       let sourceI = i;
       let sourceJ = j;
       if (dist < half) {
          sourceI = Math.round(half + dI / 2);
          sourceJ = Math.round(half + dJ / 2);
        }
      }
   }

假设 half 是 2，我们要遍历 4x4 区域的所有像素，计算每个像素在放大镜效果下的新位置。 

循环第一行 (i = 0, j = 0 到 3)

  • (0, 0)：

    • dI = 0 - 2 = -2
    • dJ = 0 - 2 = -2
    • dist = Math.sqrt((-2)^2 + (-2)^2) = Math.sqrt(8) ≈ 2.83
    • 因为 dist > 2，所以 sourceI = 0，sourceJ = 0
    • 拷贝 (0, 0) 位置的像素数据

  • (1, 0)：

    • dI = 1 - 2 = -1
    • dJ = 0 - 2 = -2
    • dist = Math.sqrt((-1)^2 + (-2)^2) = Math.sqrt(5) ≈ 2.24
    • 因为 dist > 2，所以 sourceI = 1，sourceJ = 0
    • 拷贝 (1, 0) 位置的像素数据

  • (2, 0)：

    • dI = 2 - 2 = 0
    • dJ = 0 - 2 = -2
    • dist = Math.sqrt(0^2 + (-2)^2) = Math.sqrt(4) = 2
    • 因为 dist <= 2，所以 sourceI = Math.round(2 + 0 / 2) = 2
    • sourceJ = Math.round(2 + (-2) / 2) = 1
    • 拷贝 (2, 1) 位置的像素数据

  • (3, 0)：

    • dI = 3 - 2 = 1
    • dJ = 0 - 2 = -2
    • dist = Math.sqrt(1^2 + (-2)^2) = Math.sqrt(5) ≈ 2.24
    • 因为 dist > 2，所以 sourceI = 3，sourceJ = 0
    • 拷贝 (3, 0) 位置的像素数据
循环第二行 (i = 0, j = 1 到 3)

  • (0, 1)：

    • dI = 0 - 2 = -2
    • dJ = 1 - 2 = -1
    • dist = Math.sqrt((-2)^2 + (-1)^2) = Math.sqrt(5) ≈ 2.24
    • 因为 dist > 2，所以 sourceI = 0，sourceJ = 1
    • 拷贝 (0, 1) 位置的像素数据

  • (1, 1)：

    • dI = 1 - 2 = -1
    • dJ = 1 - 2 = -1
    • dist = Math.sqrt((-1)^2 + (-1)^2) = Math.sqrt(2) ≈ 1.41
    • 因为 dist <= 2，所以 sourceI = Math.round(2 + (-1) / 2) = 1.5 ≈ 2
    • sourceJ = Math.round(2 + (-1) / 2) = 1.5 ≈ 2
    • 拷贝 (2, 2) 位置的像素数据

  • (2, 1)：

    • dI = 2 - 2 = 0
    • dJ = 1 - 2 = -1
    • dist = Math.sqrt(0^2 + (-1)^2) = Math.sqrt(1) = 1
    • 因为 dist <= 2，所以 sourceI = Math.round(2 + 0 / 2) = 2
    • sourceJ = Math.round(2 + (-1) / 2) = 1.5 ≈ 2
    • 拷贝 (2, 2) 位置的像素数据

  • (3, 1)：

    • dI = 3 - 2 = 1
    • dJ = 1 - 2 = -1
    • dist = Math.sqrt(1^2 + (-1)^2) = Math.sqrt(2) ≈ 1.41
    • 因为 dist <= 2，所以 sourceI = Math.round(2 + 1 / 2) = 2.5 ≈ 3
    • sourceJ = Math.round(2 + (-1) / 2) = 1.5 ≈ 2
    • 拷贝 (3, 2) 位置的像素数据

通过这种方式，我们得到新的像素点坐标

(0,0) (1,0) (2,1) (3,0)
(0,1) (2,2) (2,2) (3,2)
(1,2) (2,2) (2,2) (3,2)
(0,3) (2,3) (2,3) (3,3)

跟原坐标对比下：

(0,0) (1,0) (2,0) (3,0)
(0,1) (1,1) (2,1) (3,1)
(0,2) (1,2) (2,2) (3,2)
(0,3) (1,3) (2,3) (3,3)

对比之下发现(2,2)坐标下的像素由原本的一个点展示变成了四个点展示，周围的像素点也发生了一些变化，由此，中间部分就被放大了。

接下里就是把像素点放进新数组中。

const destOffset = (j * size + i) * 4;
const sourceOffset = (sourceJ * size + sourceI) * 4;
destData[destOffset] = sourceData[sourceOffset];  //r
destData[destOffset + 1] = sourceData[sourceOffset + 1];  //g
destData[destOffset + 2] = sourceData[sourceOffset + 2];  //b
destData[destOffset + 3] = sourceData[sourceOffset + 3];  //a

因为图像数据在数组中的存储规则是：

[r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a...]

因此通过计算得到像素点在数组中的位置destOffset,而sourceOffset 则是计算的偏移后的数组位置。

最后再将放大镜的圆形绘制到地图上就可以了。

  //绘制圆形 
  context.beginPath();
  context.arc(centerX, centerY, half, 0, 2 * Math.PI);
  context.lineWidth = (3 * half) / radius;
  context.strokeStyle = "rgba(255,255,255,0.5)";
  context.putImageData(dest, originX, originY);
  context.stroke();
  context.restore();

完整代码：

<template>
  <div class="box">
    <h1>Magnify</h1>
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import XYZ from "ol/source/XYZ.js";
import { fromLonLat } from "ol/proj.js";
import { getRenderPixel } from "ol/render.js";
import StadiaMaps from "ol/source/StadiaMaps.js";
export default {
  name: "",
  components: {},
  data() {
    return {
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    const layer = new TileLayer({
      source: new StadiaMaps({
        layer: "stamen_terrain_background",
      }),
    });
    const container = document.getElementById("map");

    const map = new Map({
      layers: [layer],
      target: container,
      view: new View({
        center: fromLonLat([-109, 46.5]),
        zoom: 6,
      }),
    });

    let radius = 75;
    document.addEventListener("keydown", function (evt) {
      if (evt.key === "ArrowUp") {
        radius = Math.min(radius + 5, 150);
        map.render();
        evt.preventDefault();
      } else if (evt.key === "ArrowDown") {
        radius = Math.max(radius - 5, 25);
        map.render();
        evt.preventDefault();
      }
    });

    // get the pixel position with every move
    let mousePosition = null;

    container.addEventListener("mousemove", function (event) {
      mousePosition = map.getEventPixel(event);
      map.render();
    });

    container.addEventListener("mouseout", function () {
      mousePosition = null;
      map.render();
    });

    layer.on("postrender", function (event) {
      if (mousePosition) {
        const pixel = getRenderPixel(event, mousePosition);
        const offset = getRenderPixel(event, [
          mousePosition[0] + radius,
          mousePosition[1],
        ]);
        //计算半径
        const half = Math.sqrt(
          Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)
        );

        //从画布上下文中提取放大镜区域的图像数据：
        const context = event.context;
        const centerX = pixel[0];
        const centerY = pixel[1];
        //正方形左边的顶点
        const originX = centerX - half;
        const originY = centerY - half;
        //计算直径
        const size = Math.round(2 * half + 1);
        const sourceData = context.getImageData(
          originX,
          originY,
          size,
          size
        ).data;
        //获取正方形范围下所有的像素点
        const dest = context.createImageData(size, size);
        const destData = dest.data;

        // 创建放大后的图像数据
        for (let j = 0; j < size; ++j) {
          for (let i = 0; i < size; ++i) {
            //dI 和 dJ 是相对于中心的偏移
            const dI = i - half;
            const dJ = j - half;
            //点到中心的距离
            const dist = Math.sqrt(dI * dI + dJ * dJ);
            let sourceI = i;
            let sourceJ = j;
            //如果 dist 小于 half，根据偏移和缩放因子计算新的像素位置
            if (dist < half) {
              sourceI = Math.round(half + dI / 2);
              sourceJ = Math.round(half + dJ / 2);
            }
            const destOffset = (j * size + i) * 4;
            const sourceOffset = (sourceJ * size + sourceI) * 4;
            destData[destOffset] = sourceData[sourceOffset];
            destData[destOffset + 1] = sourceData[sourceOffset + 1];
            destData[destOffset + 2] = sourceData[sourceOffset + 2];
            destData[destOffset + 3] = sourceData[sourceOffset + 3];
          }
        }
        //绘制圆形 
        context.beginPath();
        context.arc(centerX, centerY, half, 0, 2 * Math.PI);
        context.lineWidth = (3 * half) / radius;
        context.strokeStyle = "rgba(255,255,255,0.5)";
        context.putImageData(dest, originX, originY);
        context.stroke();
        context.restore();
      }
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
#map {
  width: 100%;
  height: 500px;
  position: relative;
}
.box {
  height: 100%;
}

</style>

 

卷新心菜
关注
  • 12
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-openlayers实现地图坐标弹框效果
10-14
在本文中，我们将深入探讨如何使用Vue框架与OpenLayers库结合来实现在地图上点击时显示坐标信息的弹框效果。Vue是一个流行的前端JavaScript框架，而OpenLayers则是一个功能强大的开源JavaScript库，用于创建交互式...
openlayers 加载天地图示例
02-24
openlayers 加载天地图示例
三十五、openlayers官网示例Dynamic Data——在地图上加载动态数据形成动画效果
aaa_div的博客
06-03 382
绘制动画效果主要还是利用了postrender事件，其原理解析可以参考这篇。
五十四、openlayers官网示例LineString Arrows解析——在地图上绘制箭头
aaa_div的博客
06-21 289
绘制直线时，通过style函数将直线的末端添加箭头图标。通过forEachSegment 函数拿到箭头的起点和终点坐标，使用 Math.atan2计算出箭头图标的旋转角度。创建一个矢量数据源，将其绑定为draw的数据源并展示在矢量图层上。这篇介绍了在地图上绘制箭头。
二十五、openlayers官网示例CustomOverviewMap解析——实现鹰眼地图、预览窗口、小窗窗口地图、旋转控件
aaa_div的博客
05-23 720
因为地图设置了按住shift键旋转，所以这个小窗口也需要设置一下是否跟随旋转。new OverviewMap的className参数要么不传，要传自定义类名的话需要加上它的默认值.ol-overviewmap。首先加载了一个地图。翻看文档和源码后得知，展示/折叠的按钮点击事件中是通过是否加上ol-collapsed类名来控制小窗显隐的。而起隐藏作用的css是这样写的，带上了它原本的默认类名.ol-overviewmap。这个示例展示了如何在地图上增加一个小窗窗口的地图并跟随着地图的旋转而旋转视角。
三十九、openlayers官网示例Extent Interaction解析——在地图上绘制范围并获取数据
aaa_div的博客
06-06 299
在openlayers中可以使用ExtentInteraction添加交互事件，配合shiftKeyOnly实现按住shift键绘制边界区域。监听extentchanged事件，记录绘制的矩形数据。按住shift绘制矩形，按住shift键点击图形删除。
四十五、openlayers官网示例Icon modification解析——在地图上添加标记图形并随意移动它的位置
aaa_div的博客
06-14 271
Modify的主要作用是修改图形，之所以可以随意移动图形的位置，是因为点或者圆形只有一个顶点坐标构成。如果Modify用在多边形或直线身上， 它会捕获构成图形的任意一个点，通过鼠标拖动来移动点的坐标从而改变形状。图形能移动的核心代码是Modify类，Modify类可以捕获矢量图形上的点，移动点的位置来改变矢量图形的位置，而hitDetection的作用则是使鼠标更容易捕获到图形上，当用户与地图进行交互（例如点击或拖动要素）时，如果命中，则触发相应的修改操作，允许用户拖动顶点或整个几何要素进行修改。
四十一、openlayers官网示例Flight Animation解析——在地图上绘制飞机航线、牵引线效果、动态动画
aaa_div的博客
06-07 696
而绘制的线段点需要从coords坐标数组中取，每次都取0到index的坐标。elapsedPoints就是表示了当前需要取的index值，因为elapsedTime是毫秒值，会很快，所以没有直接使用elapsedTime去从数组里取值，而是乘以了一个系数const pointsPerMs = 0.02。绘制过程中需要实时设置一下绘制的样式，而绘制结束后，也需要保持线的样式，所以在图层里需要定义一个完成后的样式。animateFlights获取当前帧对象，利用时间差截取数组中的项，来实现线慢慢变长的效果。
三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据
aaa_div的博客
05-28 1004
已经绘制了一个图形，但是并没有获取到。this.vectorlayer.getSource().getFeatures()不能实时获取到绘制图形的数据，因为drawend事件里feature还没被加到图层上。features绑定的数组不是普通的数组，Collection是openlayers内部定义的一个类似数组的集合。总的来说，两种方法都可以，甚至可以定义一个数组，每次绘制完都push一下当前绘制的feature。想要在地图上绘制图形，需要用到一个交互类Draw，new Draw，设置绘制的图形类型。
五十五、openlayers官网示例Loading Spinner解析——给地图添加loading效果，瓦片图层加载时等待效果
aaa_div的博客
06-22 201
利用地图的loadstart和loadend事件，动态的添加和删除class名。这篇介绍了一个非常简单的loading效果。配合样式动画实现loading效果。
六、openlayers官网示例Attributions解析——地图上添加版权信息并随窗口大小控制显隐
aaa_div的博客
05-10 240
controls是地图上的默认控件，可以都设置为false，原本的attribution也设置为false。这里有个小坑，一开始我没有引入ol的样式文件，然后怎么设置都不成功，一直是这样。然后自己来创建一个Attribution，collapsible表示是否折叠。在地图上添加版权信息，地图容器大小小于600就隐藏，大于600才显示。所以要在main.js里加上ol样式的引入，大家记得引入哦，不要学我。就可以看到效果了，注意看右下角。今天来写个简单的例子。
四十、openlayers官网示例External map解析——打开一个外部小窗口展示地图
aaa_div的博客
06-06 418
打开external-map-map.html页面之后需要监听一下DOMContentLoaded事件，使用setTarget把小窗口的map容器绑定到map实例上。这里的external-map-map.html页面我是从openlayers源码中复制出来放到了public下。使用window.open打开了一个html页面，使用window.open的参数对小窗窗口做一些设置。写一个延时器，如果点击之后小窗口没有加载出来就显示异常文字提醒。小窗关闭的时候需要重新加载一下大地图。
基于openlayers实现图片地图，路径绘制，点是否在区域中判定，路径播放，回放控制
02-16
1、实现图片地图，图片地图比例尺 2、绘制点的路径 3、绘制多边形，定位不规则多边形中心点，显示名称 4、多边形编辑 5、地图全屏，地图截图 6、点是否在区域中判定 7、暂停，播放，向前，向后20s，倍速播放控制路径...
Openlayers实现地图全屏显示
10-14
OpenLayers 是一个流行的开源JavaScript库，用于在Web浏览器中创建交互式的地图应用。它支持多种地图数据源，包括WMS、WMTS、GeoJSON等，并提供了丰富的地图操作和可视化功能。在OpenLayers中，实现地图全屏显示是...
WebGIS之OpenLayers 全面解析第2版示例代码
04-13
WebGIS之OpenLayers全面解析第2版（2019年出版）示例代码，比OpenLayers 官方的示例好用多了，基于 OpenLayers 5.x 编写（可用于 6.x），含国内各种地图的配合调用，各类扩展组件的开发示例，有了这个，就不要在在...
JavaScript检查对象是否包含某个属性
最新发布
徐三岁的博客
06-28 431
当使用 Object.prototype.hasOwnProperty.call 时，实际上是在调用 hasOwnProperty 方法，并明确指定 this 的值，这使得可以检查任何对象是否拥有指定的属性。使用 Object.prototype.hasOwnProperty.call 的好处是，它允许将 hasOwnProperty 方法作为一个函数传递给其他函数，或者在不直接引用对象的情况下使用它。hasOwnProperty 方法会检查对象自身是否具有指定的属性，而不考虑原型链。
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等
haojiehero123的博客
06-23 495
整洁大气，非常漂亮，前端内容均可通过后台修改。
SPECweb2009调优指南
developersupport的博客
06-25 1008
 SPECweb2009 是衡量 Web 服务器性能和能效的标准化基准，可以对 Web 服务器的并发数进行性能测试，评测 Web 服务器能够支持的最大同时连接数的客户端/服务器（每秒能够响应的最大请求数）。为充分利用服务器性能，提升SPECweb2009测试结果，可通过增大系统进程数、优化服务器软件参数、绑核以及优化参数等。
新交友盲盒+付费进群二合一源码+视频教程
12年全栈程序开发
06-27 417
包括项目前端和后端的讲解、宝塔面板的安装教程，以及盲盒交友和付费进群二合一的搭建教程。无论你是技术小白还是有一定技术基础，都能轻松搭建出属于自己的盲盒交友平台。
Vue3 + OpenLayers 实现在高德地图上可视化展示--风场、海浪、洋流、气压、温度等
07-10
实现在高德地图上可视化展示风场、海浪、洋流、气压、温度等需要使用 Vue3 和 OpenLayers 进行开发。下面是一个简单的步骤： 1. 首先，在 Vue3 项目中引入 OpenLayers 库。可以通过 npm 或直接引入 CDN 的方式进行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值