当前位置：首页 > news >正文

五十三、openlayers官网示例Layer Spy解析——跟随鼠标透视望远镜效果、图层剪裁

news 来源：原创 2024/9/29 9:27:44

官网demo地址：

Layer Spy

这篇实现了鼠标跟随望远镜效果，鼠标移动时绘制一个圆形的剪裁区剪裁上层图层。

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

通过map.render()触发prerender，postrender两个函数来完成裁剪，其原理和上篇的卷帘效果一样。

上篇地址：

完整代码：

<template><div class="box"><h1>Layer Spy</h1><div id="map" class="map"></div></div>
</template><script>
import StadiaMaps from "ol/source/StadiaMaps.js";
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";
export default {name: "",components: {},data() {return {map: null,};},computed: {},created() {},mounted() {const container = document.getElementById("map");const layer = new TileLayer({source: new StadiaMaps({layer: "stamen_terrain_background",}),zIndex: 2,});const map = new Map({layers: [layer,new TileLayer({source: new StadiaMaps({layer: "outdoors",}),}),],target: "map",view: new View({center: [0, 0],zoom: 2,projection: "EPSG:4326",}),});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();}});let mousePosition = null;container.addEventListener("mousemove", function (event) {mousePosition = map.getEventPixel(event);map.render();});container.addEventListener("mouseout", function () {mousePosition = null;map.render();});layer.on("prerender", function (event) {const ctx = event.context;ctx.save();ctx.beginPath();if (mousePosition) {const pixel = getRenderPixel(event, mousePosition);const offset = getRenderPixel(event, [mousePosition[0] + radius,mousePosition[1],]);const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);ctx.lineWidth = (5 * canvasRadius) / radius;ctx.strokeStyle = "rgba(0,0,0,0.5)";ctx.stroke();}ctx.clip();});layer.on("postrender", function (event) {const ctx = event.context;ctx.restore();});},methods: {},
};
</script><style lang="scss" scoped>
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}</style>