TransWikia.com

Angular - How to visualize GeoJSON on Google Maps

Geographic Information Systems Asked by Andrejka on March 18, 2021

I am using @agm/core for visualization GeoJSON on Google Maps.

But I can’t display my buildings on Google Maps.
I think the problem is the geometry that is represented as multiple аrrays.

I used FME to validate GeoJSON, and it’s ok.

My data in browser:
enter image description here

class:

    export interface Feature {

  geometry: Geometry;

}

export interface Geometry {

  type: String;
  coordinates: number;

}

export class Building {

  features: Feature;
  id: number;
  nameOfBuilding: string;
  nameOfCity: string;
  streetName: string;
  legalStatus: string;
  nameOfUsage: string;
}

service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Building } from '../classes/building';
import { map } from 'rxjs/operators';

@Injectable()
export class buildingApiService {

  constructor(private httpClient: HttpClient) { }

  getBuildings(): Observable<any> {
    return this.httpClient.get("http://localhost:8080/api/buildings")
  };
}

app.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { buildingApiService } from './services/building.api.service';
import { Building } from './classes/building';
import { extend } from 'webdriver-js-extender';
import { AgmCoreModule, AgmDataLayer } from '@agm/core';
import { reduce } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  lat: number = 45.2461012;
  lng: number = 19.8495081;
  zoom: number = 15;



  constructor(private _buildingApiService: buildingApiService) { }

  buildings: any = [];

  ngOnInit() {

    this._buildingApiService.getBuildings()
      .subscribe
      (
        data => {
          this.buildings = data;
          console.log(data);
          })
  }

}

app.component.html

<agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">

  <agm-data-layer [geoJson]="buildings">

  </agm-data-layer>

</agm-map>

How to solve it?

One Answer

Paragraph 4 of the geojson specification documents say that:

4.  Coordinate Reference System

   The coordinate reference system for all GeoJSON coordinates is a
   geographic coordinate reference system, using the World Geodetic
   System 1984 (WGS 84) [WGS84] datum, with longitude and latitude units
   of decimal degrees.  This is equivalent to the coordinate reference
   system identified by the Open Geospatial Consortium (OGC) URN
   urn:ogc:def:crs:OGC::CRS84.  An OPTIONAL third-position element SHALL
   be the height in meters above or below the WGS 84 reference
   ellipsoid.  In the absence of elevation values, applications
   sensitive to height or depth SHOULD interpret positions as being at
   local ground or sea level.

Your geojson seem to be correct, but you're not using the correct coordinate system.

The coordinates of that feature seem to be for a local projected coordinate system. You should reproject your data to agree for the WGS84 datum (EPSG:4326)

Answered by nickves on March 18, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP