如何在Open Layers地图上插入一个标记？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何在Open Layers地图上插入一个标记？

P粉099145710 2023-09-12 18:30:03

[JavaScript讨论组]

988

当前正在构建一个地图应用。尝试在互联网上找到的所有方法来添加标记，但仍然不起作用。我是不是做错了什么？

这是我的Angular代码：

不知何故，使用Leaflet要容易得多，但我不想那么早就放弃Open Layers。

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 : 0
      }),
      layers : [

         new LayerVector({
          source : new SourceVector({
            features : [this.iconFeature]
          }),
          style : new Style({
            image : new Icon({
              anchor : [0.5, 46],
              src : '../assets/istockphoto-1153114937-2048x2048-removebg-preview.png'
            })
          })
         }),
         new TileLayer({
           source : new OSM()
         })
      ],
      target :  "map"
    })   
  }

}

P粉099145710

全部回复(1)

P粉1419112442023-09-13 17:31:16 1楼

can u try this example of code

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

export class MapComponent implements OnInit{
  
  map!: Map;
  center = fromLonLat([5.5697, 50.6330]);

  ngOnInit(): void {

    const marker = new Feature({
      geometry: new Point(fromLonLat([5.5697, 50.6330]))
    });

    const markerLayer = new LayerVector({
      source: new SourceVector({
        features: [marker]
      }),
      style: new Style({
        image: new Icon({
          anchor: [0.5, 1],
          src: '../assets/istockphoto-1153114937-2048x2048-removebg-preview.png'
        })
      })
    });

    this.map = new Map({
      view: new View({
        center: this.center,
        zoom: 0
      }),
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        markerLayer
      ],
      target: 'map'
    });
  }
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>