openlayer点击地图时，添加点位图片和弹窗

在OpenLayers中，当你想要在用户点击地图时动态地添加标记图片并显示相关信息的弹窗，可以按照以下步骤操作：

1. **初始化地图**：
首先，你需要加载OpenLayers库，并创建一个地图容器。例如：

   var map = new ol.Map({
       target: 'map', // 地图容器id
       layers: [your_layer], // 添加基础地图层
       view: new ol.View({
           center: [lon, lat], // 中心坐标
           zoom: 8 // 初始缩放级别
       })
   });

2. **监听click事件**：
使用`map.on('click', function(event) { ... })`来监听地图的点击事件。在这个回调函数里处理点击动作：

   map.on('click', function(event) {
       // event.coordinate 是鼠标点击的位置
   });

3. **添加标记和图片**：
在点击事件的回调中，你可以创建一个新的标记（marker）实例，附上图片：

   var marker = new ol.Feature({
       geometry: new ol.geom.Point(event.coordinate),
       properties: {
           imgUrl: 'path/to/your/image.png', // 图片URL
           popupContent: '<div>这里是弹窗内容</div>' // 弹窗HTML
       }
   });

   var source = new ol.source.Vector({features: [marker]});
   var layer = new ol.layer.Vector({
       source: source,
       style: your_style_function(marker) // 样式函数根据需求定制
   });
   map.addLayer(layer);

4. **显示弹窗**：
当标记被添加到地图上时，可以利用OpenLayers的Popup组件来显示弹窗信息：

   var popup = new ol.control.Popup();
   map.addControl(popup);
   popup.showAt(event.coordinate, marker.getPopup().content);

5. **样式定制**：
`style_function(marker)` 可能需要自定义，以便调整标记的外观，比如颜色、图标等。