Настройка openlayers на угловой 7 - PullRequest
Новая
       7

Настройка openlayers на угловой 7

0 голосов
/ 27 ноября 2018

Я новичок в angular 7 и пытаюсь настроить openlayers на своем сайте angular 7.Я попробовал несколько примеров, которые видел в Интернете, но он все еще не работает.

Я не получаю сообщение об ошибке на консоли, но карта не отображается, у меня не так многоопыт работы в angular, но мне кажется, что класс MapComponent не запускается, вы можете мне помочь?

это мой код 

import { Component, OnInit } from '@angular/core';
import OlMap from 'ol/Map';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';

import { fromLonLat } from 'ol/proj';
@Component({
  selector: 'app-map',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'protCivil';
}

export class MapComponent implements OnInit {

  map: OlMap;
  source: OlXYZ;
  layer: OlTileLayer;
  view: OlView;

  ngOnInit() {
    console.log('stt');
    this.source = new OlXYZ({
      url: 'http://tile.osm.org/{z}/{x}/{y}.png'
    });

    this.layer = new OlTileLayer({
      source: this.source
    });

    this.view = new OlView({
      center: fromLonLat([6.661594, 50.433237]),
      zoom: 3
    });

    this.map = new OlMap({
      target: 'map',
      layers: [this.layer],
      view: this.view
    });

  }
}

и мой html 

<div id="barraTop">
  <div class="logo">

  </div>
  <div>
    <h1>Protecção Cívil - Dashboard</h1>
  </div>
</div>
<div class="containerAPP">
  <div id="map" class="map">
  </div>
  <div id="ocurrencias" >
    <div class="itemOcorrencias">
      <div>topico</div>
    </div>
  </div>
  <div id="descricao"></div>




  </div>

и css 

.containerAPP
{
    width:100%;
    height:86vh;
    display:flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
    align-content: space-around;

}

.map
{
    width:48.5%;
    height:49%;

}
#ocurrencias
{
    width:48.5%;
    height:49%;

    overflow-y:scroll;
}
.itemOcorrencias
{
    height:10%;display:flex;align-items:center;
    padding-left:3%;
    border-bottom:1px solid black;
}
#descricao
{
    width:98%;
    height:45%;

}
...