Map

TsgcHTMLComponent_Map — Delphi、C++ Builder、.NET で、OpenStreetMap または CartoDB のタイルと、独自のマーカー、ポップアップ、ツールチップを備えた、インタラクティブな Leaflet.js マップをレンダリングします。

概要

TsgcHTMLComponent_Map

Leaflet.js マップのコンテナと、それを初期化するスクリプトを出力するマッピングコンポーネントです。中心、ズーム、タイルプロバイダーを設定し、マーカーを追加してから、HTML プロパティを読み取ります。

コンポーネントクラス

TsgcHTMLComponent_Map

レンダリング内容

Leaflet.js マップ + タイルレイヤー

ファミリー

チャート & 可視化

言語

Delphi, C++ Builder, .NET

クイックスタート

中心を設定し、マーカーを置き、レンダリングする

CenterLatitude、CenterLongitude、Zoom を設定し、TileProvider を選択し、各地点について AddMarker を呼び出してから、HTML を読み取ります。

uses
  sgcHTML_Enums, sgcHTML_Component_Map;

var
  oMap: TsgcHTMLComponent_Map;
begin
  oMap := TsgcHTMLComponent_Map.Create(nil);
  try
    oMap.CenterLatitude := 40.4168;
    oMap.CenterLongitude := -3.7038;
    oMap.Zoom := 12;
    oMap.Height := '420px';
    oMap.TileProvider := mtCartoDB;

    oMap.AddMarker(40.4168, -3.7038, 'Madrid', 'Head office');
    oMap.AddMarker(41.3851, 2.1734, 'Barcelona');

    WebModule.Response := oMap.HTML;   // Leaflet map + markers
  finally
    oMap.Free;
  end;
end;

// includes: sgcHTML_Enums.hpp, sgcHTML_Component_Map.hpp

TsgcHTMLComponent_Map *oMap = new TsgcHTMLComponent_Map(NULL);
try
{
  oMap->CenterLatitude = 40.4168;
  oMap->CenterLongitude = -3.7038;
  oMap->Zoom = 12;
  oMap->Height = "420px";
  oMap->TileProvider = mtCartoDB;

  oMap->AddMarker(40.4168, -3.7038, "Madrid", "Head office");
  oMap->AddMarker(41.3851, 2.1734, "Barcelona");

  String html = oMap->HTML;   // Leaflet map + markers
}
__finally
{
  delete oMap;
}

using esegece.sgcWebSockets;

var map = new TsgcHTMLComponent_Map();
map.CenterLatitude = 40.4168;
map.CenterLongitude = -3.7038;
map.Zoom = 12;
map.Height = "420px";
map.TileProvider = TsgcHTMLMapTileProvider.mtCartoDB;

map.AddMarker(40.4168, -3.7038, "Madrid", "Head office");
map.AddMarker(41.3851, 2.1734, "Barcelona");

string html = map.HTML;   // Leaflet map + markers

リファレンス

主なプロパティとメソッド

最もよく使うメンバーです。

Centre & zoom

CenterLatitude と CenterLongitude（Double）は初期表示を設定します。Zoom（既定値 13）はズームレベルを設定します。

Tiles

TileProvider（TsgcHTMLMapTileProvider）は、mtOpenStreetMap、mtCartoDB（ライト）、または mtCartoDBDark を選択します。

Markers

Markers（TsgcHTMLMapMarkers）はピンを保持します。各 TsgcHTMLMapMarker は Latitude、Longitude、PopupText、TooltipText、Color を持ちます。

Add a marker

AddMarker(aLat, aLng, aPopup, aTooltip) はピンを置きます。ポップアップはクリックで開き、ツールチップはホバー時に表示されます。

Sizing

Height（'420px' などの CSS 長さ）はマップの高さを制御します。MapID はコンテナの要素 id を設定します。

Output

HTML は、Leaflet のスタイルシートリンク、マップの <div>、初期化スクリプトを返します — そのまま配信するか、ページテンプレートの BodyContent に割り当てます。

リソース

さらに詳しく

	すべての sgcHTML コンポーネント60 以上のコンポーネントの全機能マトリックスを閲覧できます。	開く
	無料体験版のダウンロード30 日間の体験版には 60.HTML デモプロジェクトが付属します。	開く
	価格完全なソースコード付きの Single、Team、Site ライセンス。	開く

Map