如何在Open Layers地图中添加标记？Angular代码为何无效？

你的代码存在几个关键问题，导致标记无法正常显示，逐一修正即可解决：

1. 图层数组语法错误 #

LayerVector和TileLayer之间缺少逗号，JavaScript解析时会报错，直接中断地图初始化流程。

2. 缩放级别设置过低 #

zoom: 0是OpenLayers的最小缩放级别，此时地图显示全球范围，标记会小到完全不可见，需设置合理的缩放值（比如12）。

3. 图层顺序错误 #

矢量图层（VectorLayer）放在瓦片图层（TileLayer）前面会被底图覆盖，应将底图放在图层数组首位。

4. 图标路径与锚点问题 #

• 锚点[0.5, 46]可能与你的图标尺寸不匹配，建议先使用默认锚点[0.5, 0.5]测试，再根据图标实际尺寸调整。
• Angular中../assets/...路径可能无效，改用./assets/...，同时检查angular.json的assets配置是否包含该图标文件。

修正后的完整代码： #

import { Component, OnInit } from '@angular/core';
import { Map, View } from 'ol';
import { TileLayer, Vector as LayerVector } from 'ol/layer';
import { OSM, Vector as SourceVector } from 'ol/source';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { fromLonLat } from 'ol/proj';
import { Style, Icon } from 'ol/style';

export class MapComponent implements OnInit{
  
  map! : Map;
  marker! : any;
  center = fromLonLat([5.5697, 50.6330]);
  iconFeature = new Feature({
    geometry : new Point(fromLonLat([5.5697, 50.6330]))
  })
  
  ngOnInit(): void {
    this.map = new Map({
      view : new View({
        center : this.center,
        zoom : 12 // 调整为合适的缩放级别
      }),
      layers : [
        // 底图前置，避免覆盖矢量图层
        new TileLayer({
          source : new OSM()
        }),
        new LayerVector({
          source : new SourceVector({
            features : [this.iconFeature]
          }),
          style : new Style({
            image : new Icon({
              anchor : [0.5, 0.5], // 默认锚点适配多数图标
              src : './assets/istockphoto-1153114937-2048x2048-removebg-preview.png'
            })
          })
        })
      ],
      target :  "map"
    })   
  }
}

另外需确保组件模板中存在id="map"的DOM元素，并设置宽高样式：

<div id="map" style="width: 100%; height: 600px;"></div>

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