openlayers 放大镜和地图底层瓦片查看功能

372 阅读1分钟

效果演示

GIF.gif

地图初始化

utils/MapLayer.js 公共方法请查看前面文章

<template>
  <div id="map" class="dynamic-component-demo cooy"></div>
</template>
<script>
import Map from "ol/Map";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
import { getRenderPixel } from "ol/render";
import {
  BingMapAerial,
  BingMapRoad,
  gaodeMapLayer,
  gaodeMapLayer3,
} from "@/utils/MapLayer.js";
  mounted() {
    const map = new Map({
      layers: [gaodeMapLayer, gaodeMapLayer3],
      target: 'map',
      view: new View({
        center: fromLonLat([-109, 46.5]),
        zoom: 6,
      }),
    });
  }

</script>

document监听事件

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

获得移动的像素位置

  let mousePosition = null;
    const container = document.getElementById("map");
    container.addEventListener("mousemove", function (event) {
      mousePosition = map.getEventPixel(event);
      map.render();
    });

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

瓦片图层监听

    gaodeMapLayer3.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();
    });
    gaodeMapLayer3.on("postrender", function (event) {
      const ctx = event.context;
      ctx.restore();
    });