结合使用

结合使用

关注
发信
关注(28)粉丝(399)

将 OpenLayers 4 与 Angular 5 结合使用

本文介绍了将 OpenLayers 4 与 Angular 5 结合使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在 Angular 5 中使用 OpenLayers 4.

基本上我只想实现来自官方 OpenLayers 站点的 QuickStart 示例.

到目前为止我做了什么:

  1. npm install ol --save 下载ol包
  2. angular-cli.json 将这些行添加到 angular-cli.json.看到这必须在 Stackoverflow 上的另一个示例中完成.ol.css 文件存在.ol.js 文件没有.所以我不知道这是对还是错，但它显然行不通.

我的 Angular 项目由 3 个组件组成:

 -app- 安慰- 地图--侧边栏应用组件.cssapp.component.htmlapp.component.spec.tsapp.component.tsapp.module.ts

map.component.html

import { Component, OnInit } from '@angular/core';import * as ol from '../../../node_modules/ol';@成分({选择器:应用地图"，templateUrl: './map.component.html',styleUrls: ['./map.component.css']})导出类 MapComponent 实现 OnInit {mapId:字符串；地图:ol.Map = 未定义；构造函数(){}ngOnInit() {this.map = new ol.Map({目标:this.mapId，层数:[新的 ol.layer.Tile({来源:新 ol.source.OSM(),}),],视图:新 ol.View({中心:ol.proj.fromLonLat([6.661594, 50.433237]),缩放:3，})});}}

谁能告诉我如何让它正常工作?

解决方案

更新到 Angular 8.x 和 OpenLayers 6.x:

安装 ol 并进行以下更改:

1.) 在 html.index 中添加一致的 CSS(确保 CSS 的版本与安装的 ol 版本匹配):

另一种方法是在 angular.json 中的 styles 对象中引用 CSS:

样式":["./node_modules/ol/ol.css",src/styles.scss"],

2.) 在 app.component.ts 中创建地图:

import { AfterViewInit, Component } from '@angular/core';import { defaults as defaultControls } from 'ol/control';从 'ol/Map' 导入地图；从 'ol/View' 导入视图；从 'ol/layer/Tile' 导入 TileLayer；从 'ol/source/XYZ' 导入 XYZ；从'ol/control/ZoomToExtent'导入ZoomToExtent；@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})导出类 AppComponent 实现 AfterViewInit {地图:地图；ngAfterViewInit() {this.map = 新地图({目标:'地图'，层数:[新的瓷砖层({来源:新 XYZ({网址:'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'})})],视图:新视图({中心:[813079.7791264898、5929220.284081122]、变焦:7}),控件:defaultControls().extend([新的 ZoomToExtent({程度: [813079.7791264898, 5929220.284081122,848966.9639063801、5936863.986909639]})])});}}

3.) app.component.css 中的一些样式:

.map {宽度:100%；高度:100vh；}

4.) 最后是 app.component.html 中的标记:

也可以随意查看我的 GitHub 存储库.

如Bhalchandra Bhosale所述，在ngAfterViewInit:

导出类 MapComponent 实现 OnInit、AfterViewInit {...ngAfterViewInit() {this.map.setTarget('地图');}}

ol 5.2 版的旧答案:

ol 是适合 OpenLayers 的包.但是，您不需要在 angular-cli.json 中添加任何内容.

随着最近的更新("ol": "^5.2.0")OpenLayers的类和函数的导入方式略有变化.

map.component.ts:

import { Component, OnInit } from '@angular/core';从 'ol/Map' 导入 OlMap；从 'ol/source/XYZ' 导入 OlXYZ；从 'ol/layer/Tile' 导入 OlTileLayer；从 'ol/View' 导入 OlView；从'ol/proj'导入{ fromLonLat };@成分({选择器:应用地图"，templateUrl: './map.component.html',styleUrls: ['./map.component.css']})导出类 MapComponent 实现 OnInit {地图:OlMap；来源:OlXYZ；图层:OlTileLayer；视图:OlView；ngOnInit() {this.source = new OlXYZ({网址:'http://tile.osm.org/{z}/{x}/{y}.png'});this.layer = new OlTileLayer({来源:this.source});this.view = new OlView({中心:fromLonLat([6.661594, 50.433237]),变焦:3});this.map = new OlMap({目标:'地图'，层:[this.layer]，视图:this.view});}}

map.component.html:

map.component.css:

.map {宽度:100%；高度:100vh；}

在index.html的header标签中添加OpenLayers的CSS:

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" 类型="文本/css"><style>html, body { margin: 0;}</风格>

更古老的答案:

您的组件可能如下所示:

import {Component, OnInit} from '@angular/core';从 'ol/map' 导入 OlMap；从 'ol/source/xyz' 导入 OlXYZ；从 'ol/layer/tile' 导入 OlTileLayer；从 'ol/view' 导入 OlView；从 'ol/proj' 导入 OlProj；@成分({选择器:应用地图"，templateUrl: './map.component.html',styleUrls: ['./map.component.css']})导出类 MapComponent 实现 OnInit {地图:OlMap；来源:OlXYZ；图层:OlTileLayer；视图:OlView；构造函数(){}ngOnInit() {this.source = new OlXYZ({网址:'http://tile.osm.org/{z}/{x}/{y}.png'});this.layer = new OlTileLayer({来源:this.source});this.view = new OlView({中心:OlProj.fromLonLat([6.661594, 50.433237]),变焦:3});this.map = new OlMap({目标:'地图'，层:[this.layer]，视图:this.view});}}

CSS:

.map {宽度:100%；高度:100vh；}

HTML:

让我知道此解决方案是否适合您.

I'm trying to use OpenLayers 4 in Angular 5.

Basically I just want to implement the QuickStart example from the official OpenLayers Site.

What I have done so far:

  1. npm install ol --save to download the ol package
  2. angular-cli.json added those lines to the angular-cli.json. Saw that this has to be done on another example on Stackoverflow. The ol.css file exists. The ol.js file doesnt. So I don't know if this is the right or the wrong way but it can clearly not work.

My angular project consists of 3 components:

 -app
 --console
 --map
 --sidebar

 app.component.css
 app.compinent.html
 app.component.spec.ts
 app.component.ts
 app.module.ts

map.component.html

import { Component, OnInit } from '@angular/core';
import * as ol from '../../../node_modules/ol';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  mapId: string;
  map: ol.Map = undefined;

  constructor() { }

  ngOnInit() {
    this.map = new ol.Map({
      target: this.mapId,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
        }),
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([6.661594, 50.433237]),
        zoom: 3,
      })
    });
  }
}

Can anyone tell how to get this working correctly?

解决方案

Updated to Angular 8.x and OpenLayers 6.x:

Install ol and do the following changes:

1.) Add the accordant CSS in the html.index (make sure that the version of the CSS matches the installed version of ol) :

<link rel="stylesheet" href="https://openlayers.org/en/v6.1.1/css/ol.css" type="text/css">

Another way is to reference the CSS in the styles object within the angular.json:

"styles": [
  "./node_modules/ol/ol.css",
  "src/styles.scss"
],

2.) Create a map in app.component.ts:

import { AfterViewInit, Component } from '@angular/core';
import { defaults as defaultControls } from 'ol/control';

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import ZoomToExtent from 'ol/control/ZoomToExtent';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements AfterViewInit {

  map: Map;

  ngAfterViewInit() {
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        })
      ],
      view: new View({
        center: [813079.7791264898, 5929220.284081122],
        zoom: 7
      }),
      controls: defaultControls().extend([
        new ZoomToExtent({
          extent: [
            813079.7791264898, 5929220.284081122,
            848966.9639063801, 5936863.986909639
          ]
        })
      ])
    });
  }
}

3.) Some style in app.component.css:

.map {
  width: 100%;
  height: 100vh;
}

4.) And finally the markup in app.component.html:

<div id="map" class="map"></div>

Feel also free to take a look at my GitHub repo.

Edit:

As stated by Bhalchandra Bhosale it might be even better to set the target of the map within ngAfterViewInit:

export class MapComponent implements OnInit, AfterViewInit {

  ...

  ngAfterViewInit() {
    this.map.setTarget('map');
  }
}

Old answer for version 5.2 of ol:

ol is the right package for OpenLayers. However, you do not need to add anything in the angular-cli.json.

With the recent update ("ol": "^5.2.0") the way of importing classes and functions of OpenLayers changed a bit.

map.component.ts:

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: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent implements OnInit {

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

  ngOnInit() {
    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
    });
  }
}

map.component.html:

<div id="map" class="map"></div>

map.component.css:

.map {
  width: 100%;
  height: 100vh;
}

Add the CSS of OpenLayers within the header-tag of index.html:

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css" type="text/css">
<style>html, body { margin: 0; }</style>

Even older answer:

Your component might look like the following:

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 OlProj from 'ol/proj';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent implements OnInit {

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

  constructor() {
  }

  ngOnInit() {
    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: OlProj.fromLonLat([6.661594, 50.433237]),
      zoom: 3
    });

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

CSS:

.map {
  width: 100%;
  height: 100vh;
}

HTML:

<div id="map" class="map"></div>

Let me know if this solution works for you.

这篇关于将 OpenLayers 4 与 Angular 5 结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-03 23:26
Powered by LMLPHP ©2024 结合使用 0.040869