Estoy tratando de permitir que un usuario use diferentes funcionalidades de representación de capas de OpenLayers 6 en una sola aplicación de mapa, por ejemplo, el " espía de capa " y el "deslizamiento de capa " para dos capas de TileWMS.
Idealmente, estas funcionalidades deberían activarse/activarse mediante un botón de alguna descripción. Para esto, creé una casilla de verificación html llamada spy_toggle , con un detector de eventos adjunto como:
checkbox_spy.addEventListener('change', function() { if (this.checked) { spy_toggle(true); //layer spy is inactive } else { spy_toggle(false); //layer spy is active } }); La función spy_toggle es principalmente un envoltorio para la magia de renderizado OL, con un parámetro de render para alternar el renderizado de la siguiente manera:
function swipe_toggle(render) { if (render === true) { // code from the example starts here layer1.on('prerender', function (event) { const ctx = event.context; ctx.save(); ctx.beginPath(); if (mousePosition) { // only show a circle around the mouse 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.7)'; ctx.stroke(); } ctx.clip(); }); // code from the example ends here } else { // inversing the rendering? layer1.on('prerender', function (event) { const ctx = event.context; ctx.restore(); }); ... Puedo detener el recorte de la capa real llamando a restaurar el contexto del lienzo a través ctx.restore(); .
Sin embargo, lucho por eliminar el trazo del círculo negro alrededor del mouse. Supongo que obteniendo el radio actual del círculo y llamando a ctx.clearRect(coords); , que parece poco práctico.
En este punto, me pregunto si este enfoque para alternar la funcionalidad es sensato, posible o demasiado complicado.