Angular OpenLayers не показывает функцию пользовательского указателя - PullRequest
Новая
       26

Angular OpenLayers не показывает функцию пользовательского указателя

1 голос
/ 05 апреля 2020

Я пытаюсь определить точку для карты с открытыми слоями и openstreetmap в angular, но точка не отображается.

Карта, однако, отображается и является функциональной. Чтобы отобразить саму карту, я впервые столкнулся с проблемой, что ширина и высота должны были быть изменены в css, может быть, это то же самое? Но я не знаю, как мне нужно стилизовать слой. 

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

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map;
  testp;
  vectorSource;
  vectorLayer;
  rasterLayer;
  constructor() { }

  ngOnInit(): void {
    this.testp = new Feature({
      geometry: new Point(fromLonLat([3.7219431, 51.054633]))
    });

    this.testp.setStyle(new Style({
      image: new Icon(({
        color: '#8959A8',
        crossOrigin: 'anonymous',
        src: '../assets/car-parking.svg',
        imgSize: [20, 20]
      }))
    }));

    this.vectorSource = new VectorSource({
      features: [this.testp]
    });

    this.vectorLayer = new VectorLayer({
      source: this.vectorSource
    });

    this.map = new Map({
      target: 'map',
      layers: [ new TileLayer({
        source: new OSM()
      }), this.vectorLayer ],
      view: new View({
        center: fromLonLat([3.7219431, 51.054633]),
        zoom: 15,
      })
    });
  }

}

1 Ответ

2 голосов
/ 05 апреля 2020

Может быть проблема с путем к вашей иконке. Это сработало для меня: 

import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';

...

this.testp.setStyle(new Style({
  image: new Icon(({
    color: '#8959A8',
    crossOrigin: 'anonymous',
    src: 'assets/car-parking.svg',
    imgSize: [20, 20]
  }))
}));
...