Web Components オープンストリートマップ画像の表示

Web Components IgcOpenStreetMapImagery は、世界中の OpenStreetMap© のコントリビューターが共同で作成した無料の地理的画像マッピングサービスです。これは、構成オプションなしで、道路地図スタイル限定で世界の地理的画像を提供します。この地理的画像サービスは、www.OpenStreetMap.org に直接アクセスして利用できます。デフォルトでは、Ignite UI for Web Components マップコンポーネントには、Open Street Maps の地理的画像が既に表示されています。したがって、Open Street Maps から地理的画像を表示するように、コントロールを構成する必要はありません。

Web Components オープンストリートマップ画像の表示の例

import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcOpenStreetMapImagery } from 'igniteui-webcomponents-maps';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartInteractivityModule,
    IgcGeographicMapModule
);

export class MapDisplayImageryOSM {

    private geoMap: IgcGeographicMapComponent;

    constructor() {

        this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;

        const mapImagery = new IgcOpenStreetMapImagery();
        this.geoMap.backgroundContent = mapImagery;
        const geoRect = { left: -150.0, top: -60.0, width: 315.0, height: 140.0 };
        this.geoMap.zoomToGeographic(geoRect);
    }

}

new MapDisplayImageryOSM();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>MapDisplayImageryOSM</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <igc-geographic-map id="geoMap" width="100%" height="100%">

    </igc-geographic-map>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

コードスニペット

このコード例では、マップコンポーネントの BackgroundContent を OpenStreetMap© コントリビューターの地理画像を提供する IgcOpenStreetMapImagery オブジェクトに明示的に設定します。

<igc-geographic-map id="geoMap" width="100%" height="100%">

</igc-geographic-map>
html

import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
import { IgcOpenStreetMapImagery } from 'igniteui-webcomponents-maps';
// ...

let geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent

const mapImagery = new OpenStreetMapImagery();
this.geoMap.backgroundContent = mapImagery;
ts

API リファレンス

BackgroundContent
IgcOpenStreetMapImagery

Web Components オープン ストリート マップ画像の表示

Web Components オープン ストリート マップ画像の表示の例

コード スニペット

API リファレンス

Web Components オープンストリートマップ画像の表示

Web Components オープンストリートマップ画像の表示の例

コードスニペット