Angular集成OpenLayers点击地图异常生成特写画布问题求助

修复步骤 #

1. 删除重复的样式引入
   删掉index.html里的OpenLayers远程样式链接，避免和组件内引入的本地ol.css版本冲突：

<!-- 删掉这行 -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.2.1/css/ol.css" type="text/css">

2. 修正选择图层的添加方式
   不要在VectorTileLayer构造参数里直接传map属性，改为手动调用addLayer添加图层，避免OpenLayers隐式创建额外渲染上下文：

// 原有selectionLayer创建去掉map参数，之后手动加进地图
const selectionLayer = new VectorTileLayer({
  renderMode: 'vector',
  source: vtLayer.getSource(),
  style: function (feature: any) {
    return feature.getId() in selection ? selectedCountry : undefined;
  },
});
map.addLayer(selectionLayer);

3. 增加组件销毁时的地图实例释放逻辑
   把map变量提升为组件实例属性，实现OnDestroy钩子销毁Map实例，避免组件重复挂载时生成多个地图：

import { Component, OnInit, OnDestroy } from '@angular/core';
// 其他导入不变

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, OnDestroy {
  private map?: Map;
  // 原有其他属性不变

  ngOnInit(): void {
    // 原有逻辑，创建Map的时候赋值给实例属性
    this.map = new Map({
      // 原有配置不变
    });
    // 其他逻辑不变
  }

  ngOnDestroy(): void {
    // 组件销毁时释放地图资源
    if (this.map) {
      this.map.dispose();
    }
  }
}

4. 简化点击事件绑定
   删掉重复的click、dblclick事件绑定，只保留singleclick即可，避免单次点击触发多次回调：

// 改为只绑定singleclick
this.map.on('singleclick', function (event: any) {
  // 原有回调逻辑不变
});

内容的提问来源于stack exchange，提问作者Jalf