效果演示
地图初始化
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();
});