Добавьте маркер на карту, используя OpenLayers и Angular 6 - PullRequest
Новая
       7

Добавьте маркер на карту, используя OpenLayers и Angular 6

0 голосов
/ 13 июня 2018

Я исследовал OpenLayers 4.3.4 для моего проекта в angular 6. Я реализовал его, чтобы показать карту :-) Но я не могу заставить его показывать маркеры.Я много смотрел на этот вопрос и ответ ( Как добавить маркер по методу, openlayers 4, угловой 4 ), но я не могу заставить его работать: - |

Яполучить эту ошибку:

core.js: 1448 ОШИБКА TypeError: layer.getLayerStatesArray не является функцией

Большое спасибо заранее 

 import { Component, OnInit } from '@angular/core';
 import OlInteraction from 'ol/interaction';
 import OlTileLayer from 'ol/layer/tile';
 import OlMap from 'ol/map';
 import OlOverlay from 'ol/overlay';
 import OlProj from 'ol/proj';
 import OlXYZ from 'ol/source/xyz';
 import OlView from 'ol/view';
 import * as ol from 'openlayers';



export class OpenStreetMapComponent implements OnInit {

map: OlMap;
source: OlXYZ;
layer: OlTileLayer;
view: OlView;
olOverlay: OlOverlay;
olFeature: OlFeature;
markerSource: ol.source.Vector;

constructor() {
}

ngOnInit() {

    this.markerSource = new ol.source.Vector();

    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          opacity: 0.75,
          src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
        }))
      });

  this.source = new OlXYZ({
    // Tiles from Mapbox (Light)
    url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'
  });

  this.view = new OlView({
    center: OlProj.fromLonLat([9.501785, 56.26392]),
    zoom: 7,
  });

  this.map = new OlMap({
    interactions: OlInteraction.defaults({mouseWheelZoom: false}),
    target: 'map',
    layers: [ new ol.layer.Tile({
        source: new ol.source.OSM(),
      }),
      new ol.layer.Vector({
        source: this.markerSource,
        style: markerStyle,
      }), ],
    view: this.view
  });

  this.addMarker(9.501785, 56.26392);
 //this.olOverlay = new OlOverlay();
}

addMarker(lon: number, lat: number) {
    console.log(lat);
    console.log(lon);

    var iconFeatures = [];

    var iconFeature = new ol.Feature({
      geometry: new ol.geom.Point(ol.proj.transform([lon, lat], 'EPSG:4326',
        'EPSG:3857')),
      name: 'Null Island',
      population: 4000,
      rainfall: 500
    });

    iconFeatures.push(iconFeature);
    console.log('iconfrature');
    var vectorSource = new ol.source.Vector({
      features: iconFeatures //add an array of features
    });

    this.markerSource.addFeature(iconFeature);

    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: 'https://openlayers.org/en/v4.6.4/examples/data/icon.png'
      }))
    });

    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle
    });

    this.map.addLayer(vectorLayer);

  }

}

1 Ответ

0 голосов
/ 14 июня 2018

Начните с чего-то более простого, например, без маркера. Создайте слой 

var source = new ol.source.vector({});
var layer = new ol.layer.vector({ source: source});
    map.addLayer(layer );

Создайте маркер 

var marker = new ol.Feature({
    geometry: new ol.geom.Point([0,0]) // dont worry about coordinate type 0,0 will be in west coast of africa
});

Добавьте его к источнику 

source.addFeature(marker);
...