Openlayers actual combat: double-click the mouse to display the information business card

Overlay is an important display form in openlayer. It can display data flexibly through a custom div, and can customize css to achieve a good information display. In this actual combat, we click on an information point by double-clicking, and the information card pops up.

renderings

source code

/*
* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
* @Email: [email protected]
* @First published in CSDN
* @First published time: 2023-07-09
*/
<template>
    <div class="container"