地圖展示
# FastWeb之地圖展示
# 1. 說明
採用地圖控制元件，實現地圖的基本功能展示以及繪圖等相關功能。通過地圖展示的示例，可瞭解TUgLeafletMap控制元件的使用方式，並利用地圖進行標註與圖形繪製。
# 2. 設計明細
開啟FastWeb設計器，分別加入下插圖之控制元件。或者點選左上角的[匯入]選擇模板檔案來打開對應模板。
1：TUgLeafLetMap元件，控制元件名稱為UgLeafLetMap01。
2：TUgPageControl元件，控制元件名稱為 UgPageControl01。需建立5個 TabSheet，並分別設定其 Caption 為上述的內容。
3：TUgFSButton元件，控制元件名稱為 btnAddScale。
4：TUgFSButton元件，控制元件名稱為 btnNav。
5：TUgFSButton元件，控制元件名稱為 btnZoomIn。
6：TUgFSButton元件，控制元件名稱為 btnZoomOut。
7：TUgFSButton元件，控制元件名稱為 btnFitWorld。
8：TUgFSButton元件，控制元件名稱為 btnPrintMap。
9：TUgFSButton元件，控制元件名稱為 btnPan。
10：TUgTrackBar元件，控制元件名稱為 tbZoom。
11：TUgTimer元件，控制元件名稱為 UgTimer01。
第二個標籤頁中有如下控制元件。
1：TUgFSButton元件，控制元件名稱為 btnAddMarker。
2：TUgFSButton元件，控制元件名稱為 btnAddCustomMarker。
3：TUgFSButton元件，控制元件名稱為 btnSetMarkerPosition。
4：TUgFSButton元件，控制元件名稱為 btnSetMarkerPopupContent。
5：TUgFSButton元件，控制元件名稱為 btnSetMarkerTooltipContent。
6：TUgFSButton元件，控制元件名稱為 btnDeleteAllMarker。
第三個標籤頁中有如下控制元件。
1：TUgFSButton元件，控制元件名稱為 btnAddPolyLine。
2：TUgFSButton元件，控制元件名稱為 btnAddPolyLineLatLng。
3：TUgFSButton元件，控制元件名稱為 btnDeleteAllPolyline。
4：TUgFSButton元件，控制元件名稱為 btnAddPolygon。
5：TUgFSButton元件，控制元件名稱為 btnAddPolygonLatLng。
6：TUgFSButton元件，控制元件名稱為 btnDeleteAllPolygon。
7：TUgFSButton元件，控制元件名稱為 btnAddRectangle。
8：TUgFSButton元件，控制元件名稱為 btnAddRectangleLatLng。
9：TUgFSButton元件，控制元件名稱為 btnDeleteAllRectangle。
10：TUgFSButton元件，控制元件名稱為 btnAddCircle。
11：TUgFSButton元件，控制元件名稱為 btnSetCircle。
12：TUgFSButton元件，控制元件名稱為 btnDeleteAllCircle。
第四個標籤頁中有如下控制元件。
1：TUgFSButton元件，控制元件名稱為 btnAddCircleMarker。
2：TUgFSButton元件，控制元件名稱為 btnSetCircleMarker。
3：TUgFSButton元件，控制元件名稱為 btnDeleteAllCircleMarker。
4：TUgFSButton元件，控制元件名稱為 btnAddImageOverlay。
5：TUgFSButton元件，控制元件名稱為 btnSetImageOverlayBounds。
6：TUgFSButton元件，控制元件名稱為 btnDeleteAllImageOverlay。
7：TUgFSButton元件，控制元件名稱為 btnAddVideoOverlay。
8：TUgFSButton元件，控制元件名稱為 btnSetVideoOverlayBounds。
9：TUgFSButton元件，控制元件名稱為 btnDeleteAllVideoOverlay。
第五個標籤頁中有如下控制元件。
1：TUgFSButton元件，控制元件名稱為 btnInit。
2：TUgFSButton元件，控制元件名稱為 btnStart。
3：TUgFSButton元件，控制元件名稱為 btnPause。
4：TUgFSButton元件，控制元件名稱為 btnUp。
5：TUgFSButton元件，控制元件名稱為 btnDown。
6：TUgFSButton元件，控制元件名稱為 btnStop。
7：TUgFSButton元件，控制元件名稱為 btnGetCurrentPosition。
8：TUgFSButton元件，控制元件名稱為 btnLocate。
UgWebRunFrame屬性設定
Height：設定頁面高度=768。Width：設定頁面寬度=1024。
UgPageControl01屬性設定
Align：設定頁面的對齊方式，設定為alBottom。Height：設定顯示的高度，設定為128。
點選窗體結構與檢視器中的當前控制元件，點選左上角的 新增按鈕為控制元件新增5個TabSheet，分別將其
Caption設定為地圖控制元件、地圖示記、圖形標註、更多標註、動態標記。
地圖控制元件中放置的控制元件設定如下。
btnAddScale屬性設定
Caption：設定顯示的文字，設定為比例尺。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlue3Round。
btnNav屬性設定
Caption：設定顯示的文字，設定為導航欄。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlue3Round。
btnZoomIn屬性設定
Caption：設定顯示的文字，設定為地圖放大。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlue3Round。
btnZoomOut屬性設定
Caption：設定顯示的文字，設定為地圖縮小。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlue3Round。
btnFitWorld屬性設定
Caption：設定顯示的文字，設定為世界地圖。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlue3Round。
btnPrintMap屬性設定
Caption：設定顯示的文字，設定為列印地圖。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlue3Round。
btnPan屬性設定
Caption：設定顯示的文字，設定為移動地圖。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlue3Round。
tbZoom屬性設定
Max：設定滑塊允許滑動的最大位置，設定為18。Min：設定滑塊允許滑動的最小位置，設定為1。
地圖示記中放置的控制元件設定如下。
btnAddMarker屬性設定
Caption：設定顯示的文字，設定為新增標記。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlueRound。
btnAddCustomMarker屬性設定
Caption：設定顯示的文字，設定為新增標記(自定義圖示)。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlueRound。
btnSetMarkerPosition屬性設定
Caption：設定顯示的文字，設定為移動標記。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlueRound。
btnSetMarkerPopupContent屬性設定
Caption：設定顯示的文字，設定為設定彈出式標記。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlueRound。
btnSetMarkerTooltipContent屬性設定
Caption：設定顯示的文字，設定為設定工具提示標記。StyleButton：設定按鈕顯示的樣式，設定為GoogleBlueRound。
btnDeleteAllMarker屬性設定
Caption：設定顯示的文字，設定為刪除所有標記。StyleButton：設定按鈕顯示的樣式，設定為GoogleDangerRound。
圖形標註中放置的控制元件設定如下。
btnAddPolyLine屬性設定
Caption：設定顯示的文字，設定為新增折線。
btnAddPolyLienLatLng屬性設定
Caption：設定顯示的文字，設定為折線加邊。
btnDeleteAllPolyLine屬性設定
Caption：設定顯示的文字，設定為刪除所有折線。
btnAddPolygon屬性設定
Caption：設定顯示的文字，設定為新增多邊形。
btnAddPolygonLatLng屬性設定
Caption：設定顯示的文字，設定為多邊形加邊。
btnDeleteAllPolygon屬性設定
Caption：設定顯示的文字，設定為刪除所有多邊形。
btnAddRectangle屬性設定
Caption：設定顯示的文字，設定為新增矩形。
btnAddRectangleLatLng屬性設定
Caption：設定顯示的文字，設定為矩形加邊。
btnDeleteAllRectangle屬性設定
Caption：設定顯示的文字，設定為刪除所有矩形。
btnAddCircle屬性設定
Caption：設定顯示的文字，設定為新增圓圈。
btnSetCircle屬性設定
Caption：設定顯示的文字，設定為設定圓圈。
btnDeleteAllCircle屬性設定
Caption：設定顯示的文字，設定為刪除所有圓圈。
更多標註中放置的控制元件設定如下。
btnAddCircleMarker屬性設定
Caption：設定顯示的文字，設定為新增帶圓標記。
btnSetCircleMarker屬性設定
Caption：設定顯示的文字，設定為設定帶圓標記。
btnDeleteAllCircleMarker屬性設定
Caption：設定顯示的文字，設定為刪除帶圓標記。
btnAddImageOverlay屬性設定
Caption：設定顯示的文字，設定為新增圖片圖層。
btnSetImageOverlayBounds屬性設定
Caption：設定顯示的文字，設定為設定圖片邊界。
btnDeleteAllImageOverlay屬性設定
Caption：設定顯示的文字，設定為刪除圖片圖層。
btnAddVideoOverlay屬性設定
Caption：設定顯示的文字，設定為新增視訊圖層。
btnSetVideoOverlayBounds屬性設定
Caption：設定顯示的文字，設定為設定視訊邊界。
btnDeleteAllVideoOverlay屬性設定
Caption：設定顯示的文字，設定為刪除視訊圖層。
動態標記中放置的控制元件設定如下。
btnInit屬性設定
Caption：設定顯示的文字，設定為初始化。StyleButton：設定按鈕顯示的樣式，設定為GoogleGreenRound。
btnStart屬性設定
Caption：設定顯示的文字，設定為開始。StyleButton：設定按鈕顯示的樣式，設定為GoogleGreenRound。
btnPause屬性設定
Caption：設定顯示的文字，設定為暫停。StyleButton：設定按鈕顯示的樣式，設定為GoogleGreenRound。
btnUp屬性設定
Caption：設定顯示的文字，設定為加速。StyleButton：設定按鈕顯示的樣式，設定為GoogleGreenRound。
btnDown屬性設定
Caption：設定顯示的文字，設定為減速。StyleButton：設定按鈕顯示的樣式，設定為GoogleGreenRound。
btnStop屬性設定
Caption：設定顯示的文字，設定為停止。StyleButton：設定按鈕顯示的樣式，設定為GoogleGreenRound。
btnGetCurrentPosition屬性設定
Caption：設定顯示的文字，設定為獲取位置資訊。StyleButton：設定按鈕顯示的樣式，設定為GoogleGreenRound。
btnLocate屬性設定
Caption：設定顯示的文字，設定為定位。StyleButton：設定按鈕顯示的樣式，設定為GoogleGreenRound。
# 3. 程式設計
點選程式設計界面右側的單元列表，勾選需要使用的單元。該程式的程式不需要引用單元。
# 3.1. 指令碼初始設定
初始化圖層的相關設定。
//JScript
//初始化圖層
function InitTileLayer()
{
var TileLayer1,TileLayer2;
//建立圖層配置
TileLayer1= new TTileLayer();
TileLayer1.Id = "1";
TileLayer1.tileLayer = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png";
TileLayer1.minZoom = 1;
TileLayer1.maxZoom = 18;
TileLayer1.noWrap = true;
//建立瓦片圖層
UgLeafletMap01.AddTilelayer(TileLayer1);
//建立圖層配置
TileLayer2= new TTileLayer();
TileLayer2.Id = "2";
TileLayer2.tileLayer = "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGVhbmplYW5zIiwiYSI6ImNreTZsY2kycDB2d3Eyd3FldGRldDJ6aWsifQ.FHp7fWEYrmVBUsjTwU7xSQ";
TileLayer2.minZoom = 1;
TileLayer2.maxZoom = 18;
TileLayer2.noWrap = true;
//建立瓦片圖層
UgLeafletMap01.AddTilelayer(TileLayer2);
UgLeafletMap01.LayerGroupAddLayer("2");
UgLeafletMap01.LayerGroupAddLayer("1");
UgLeafletMap01.MapAddLayerGroup;
UgLeafletMap01.MapAddControlLayers;
//設定放大級別
tbZoom.Position = UgLeafletMap01.MapOptions.MapStateOptions.zoom;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//PasScript
//初始化圖層
procedure InitTileLayer;
var
TileLayer2,TileLayer1:TTileLayer;
begin
//建立圖層配置
TileLayer1:=TTileLayer.Create;
TileLayer1.Id := UGMM.LT('1');
TileLayer1.tileLayer := 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png';
TileLayer1.minZoom := 1;
TileLayer1.maxZoom := 18;
TileLayer1.noWrap := true;
//建立瓦片圖層
UgLeafletMap01.AddTilelayer(TileLayer1);
//建立圖層配置
TileLayer2:=TTileLayer.Create;
TileLayer2.Id := UGMM.LT('2');
TileLayer2.tileLayer := 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiZGVhbmplYW5zIiwiYSI6ImNreTZsY2kycDB2d3Eyd3FldGRldDJ6aWsifQ.FHp7fWEYrmVBUsjTwU7xSQ';
TileLayer2.minZoom := 1;
TileLayer2.maxZoom := 18;
TileLayer2.noWrap := true;
//建立瓦片圖層
UgLeafletMap01.AddTilelayer(TileLayer2);
UgLeafletMap01.LayerGroupAddLayer('2');
UgLeafletMap01.LayerGroupAddLayer('1');
UgLeafletMap01.MapAddLayerGroup;
UgLeafletMap01.MapAddControlLayers;
//設定放大級別
tbZoom.Position := UgLeafletMap01.MapOptions.MapStateOptions.zoom;
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Make sure to add code blocks to your code group
# 3.2. 事件設定
- UgWebRunFrame-OnAfterRunScript事件
初始化地圖。
//JScript
function UgWebRunFrameOnAfterRunScript(sender)
{
UGMM.LC(Self);
//初始化地圖
UgLeafletMap01.MapOptions.MapStateOptions.center = "30.741835717889792,120.76446533203126";
UgLeafletMap01.InitMap;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure UgWebRunFrameOnAfterRunScript(const sender: tobject);
begin
UGMM.LC(Self);
//初始化地圖
UgLeafletMap01.MapOptions.MapStateOptions.center := '30.741835717889792,120.76446533203126';
UgLeafletMap01.InitMap;
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
- UgTimer01-OnTimer事件
延遲載入圖層。
//JScript
function UgTimer01OnTimer(sender)
{
InitTileLayer;
UgTimer01.Enabled = False;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgTimer01OnTimer(sender: tobject);
begin
InitTileLayer;
UgTimer01.Enabled := False;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnAddScale-OnClick事件
增加比例尺。
//JScript
function btnAddScaleOnClick(sender)
{
//比例尺
UgLeafletMap01.AddScale;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnAddScaleOnClick(sender: tobject);
begin
//比例尺
UgLeafletMap01.AddScale;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnNav-OnClick事件
新增導航欄。
//JScript
function btnNavOnClick(sender)
{
//導航欄
UgLeafletMap01.AddNavBar;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnNavOnClick(sender: tobject);
begin
//導航欄
UgLeafletMap01.AddNavBar;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnZoomIn-OnClick事件
設定放大地圖。
//JScript
function btnZoomInOnClick(sender)
{
//放大
UgLeafletMap01.ZoomIn(1);
if (UgLeafletMap01.MapOptions.MapStateOptions.zoom < UgLeafletMap01.MapOptions.MapStateOptions.maxZoom)
UgLeafletMap01.MapOptions.MapStateOptions.zoom = UgLeafletMap01.MapOptions.MapStateOptions.zoom + 1;
tbZoom.Position = UgLeafletMap01.MapOptions.MapStateOptions.zoom;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//PasScript
procedure btnZoomInOnClick(sender: tobject);
begin
//放大
UgLeafletMap01.ZoomIn(1);
if UgLeafletMap01.MapOptions.MapStateOptions.zoom < UgLeafletMap01.MapOptions.MapStateOptions.maxZoom then
UgLeafletMap01.MapOptions.MapStateOptions.zoom := UgLeafletMap01.MapOptions.MapStateOptions.zoom + 1;
tbZoom.Position := UgLeafletMap01.MapOptions.MapStateOptions.zoom;
end;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// Make sure to add code blocks to your code group
- btnZoomOut-OnClick事件
設定縮小地圖。
//JScript
function btnZoomOutOnClick(sender)
{
//縮小
UgLeafletMap01.ZoomOut(1);
if (UgLeafletMap01.MapOptions.MapStateOptions.zoom > UgLeafletMap01.MapOptions.MapStateOptions.minZoom)
UgLeafletMap01.MapOptions.MapStateOptions.zoom = UgLeafletMap01.MapOptions.MapStateOptions.zoom - 1;
tbZoom.Position = UgLeafletMap01.MapOptions.MapStateOptions.zoom;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
//PasScript
procedure btnZoomOutOnClick(sender: tobject);
begin
//縮小
UgLeafletMap01.ZoomOut(1);
if UgLeafletMap01.MapOptions.MapStateOptions.zoom > UgLeafletMap01.MapOptions.MapStateOptions.minZoom then
UgLeafletMap01.MapOptions.MapStateOptions.zoom := UgLeafletMap01.MapOptions.MapStateOptions.zoom - 1;
tbZoom.Position := UgLeafletMap01.MapOptions.MapStateOptions.zoom;
end;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// Make sure to add code blocks to your code group
- tbZoom-OnChange事件
設定當改變滑塊的位置時，調整地圖的縮放。
//JScript
function tbZoomOnChange(sender)
{
//設定放大級別
UgLeafletMap01.SetZoom(tbZoom.Position);
UgLeafletMap01.MapOptions.MapStateOptions.zoom = tbZoom.Position;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure tbZoomOnChange(sender: tobject);
begin
//設定放大級別
UgLeafletMap01.SetZoom(tbZoom.Position);
UgLeafletMap01.MapOptions.MapStateOptions.zoom := tbZoom.Position;
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- btnFitWorld-OnClick事件
設定當點選按鈕時，地圖縮放至世界地圖模式。
//JScript
function btnFitWorldOnClick(sender)
{
//縮放至世界地圖模式
UgLeafletMap01.FitWorld();
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnFitWorldOnClick(sender: tobject);
begin
//縮放至世界地圖模式
UgLeafletMap01.FitWorld();
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnPrintMap-OnClick事件
設定當點選列印地圖的按鈕時，執行列印地圖的操作。
//JScript
function btnPrintMapOnClick(sender)
{
//列印地圖
UgLeafletMap01.PrintMap;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnPrintMapOnClick(sender: tobject);
begin
//列印地圖
UgLeafletMap01.PrintMap;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnPan-OnClick事件
設定當點選按鈕時，將地圖移動至指定的位置。
//JScript
function btnPanOnClick(sender)
{
UgLeafletMap01.PanTo("39.924317","116.390619");
}
1
2
3
4
5
2
3
4
5
//PasScript
procedure btnPanOnClick(sender: tobject);
begin
UgLeafletMap01.PanTo('39.924317','116.390619');
end;
1
2
3
4
5
2
3
4
5
// Make sure to add code blocks to your code group
- btnAddMarker-OnClick事件
設定當點選按鈕時，建立地圖示記。
//JScript
function btnAddMarkerOnClick(sender)
//新增地圖示記
{
var Marker;
//建立Marker
Marker = new TMarker();
Marker.Id = "1";
Marker.Keyboard = true;
Marker.Title = "";
Marker.Alt = " ";
Marker.Lat = "30.675048";
Marker.Lng = "120.804017";
UgLeafletMap01.AddMarker(Marker);
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.SetView("30.675048","120.804017",13);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//PasScript
procedure btnAddMarkerOnClick(sender: tobject);
//新增地圖示記
var
Marker:TMarker;
begin
//建立Marker
Marker := TMarker.Create;
Marker.Id := '1';
Marker.Keyboard := true;
Marker.Title := '';
Marker.Alt := ' ';
Marker.Lat := '30.675048';
Marker.Lng := '120.804017';
UgLeafletMap01.AddMarker(Marker);
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.SetView('30.675048','120.804017',13);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Make sure to add code blocks to your code group
- btnAddCustomMarker-OnClick事件
點選按鈕時，使用自定義圖示建立地圖示記。
//JScript
function btnAddCustomMarkerOnClick(sender)
//自定義圖示
{
var Icon;
//建立圖示
Icon= new TBaseIcon();
Icon.IconUrl = "files/img/car_red.png";
//建立Marker
Marker = new TMarker();
Marker.Id = "2";
Marker.Keyboard = true;
Marker.Title = "";
Marker.Alt = " ";
Marker.Lat = "30.735048";
Marker.Lng = "120.804017";
Marker.Icon = Icon.ToString;
UgLeafletMap01.AddMarker(Marker);
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.SetView("30.735048","120.804017",13);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//PasScript
procedure btnAddCustomMarkerOnClick(sender: tobject);
//自定義圖示
var
Marker:TMarker;
Icon:TBaseIcon;
begin
//建立圖示
Icon:= TBaseIcon.Create;
Icon.IconUrl := 'files/img/car_red.png';
//建立Marker
Marker := TMarker.Create;
Marker.Id := '2';
Marker.Keyboard := true;
Marker.Title := '';
Marker.Alt := ' ';
Marker.Lat := '30.735048';
Marker.Lng := '120.804017';
Marker.Icon := Icon.ToString;
UgLeafletMap01.AddMarker(Marker);
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.SetView('30.735048','120.804017',13);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Make sure to add code blocks to your code group
- btnSetMarkerPosition-OnClick事件
移動標記的位置。
//JScript
function btnSetMarkerPositionOnClick(sender)
{
UgLeafletMap01.SetMarkerPosition("2","30.735048","120.814017");
UgLeafletMap01.SetMarkerTooltipContent("2",UGMM.LT("汽車移動至此處"));
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.SetView("30.735048","120.814017",13);
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
//PasScript
procedure btnSetMarkerPositionOnClick(sender: tobject);
begin
UgLeafletMap01.SetMarkerPosition('2','30.735048','120.814017');
UgLeafletMap01.SetMarkerTooltipContent('2',UGMM.LT('汽車移動至此處'));
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.SetView('30.735048','120.814017',13);
end;
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
// Make sure to add code blocks to your code group
- btnSetMarkerPopupContent-OnClick事件
設定地圖示記彈出的內容。
//JScript
function btnSetMarkerPopupContentOnClick(sender)
//設定彈出式標記
{
var Popup;
Popup= new TPopup();
Popup.Id = "1";
Popup.Lat = "30.735048";
Popup.Lng = "120.824017";
Popup.Content = UGMM.LT("<p>園區在這裡<p>請駕車前往</br>");
UgLeafletMap01.AddPopup(Popup);
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.SetView("30.735048","120.824017",15);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
//PasScript
procedure btnSetMarkerPopupContentOnClick(sender: tobject);
//設定彈出式標記
var
Popup:TPopup;
begin
Popup:=TPopup.Create;
Popup.Id := '1';
Popup.Lat := '30.735048';
Popup.Lng := '120.824017';
Popup.Content := UGMM.LT('<p>園區在這裡<p>請駕車前往</br>');
UgLeafletMap01.AddPopup(Popup);
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgLeafletMap01.SetView('30.735048','120.824017',15);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Make sure to add code blocks to your code group
- btnDeleteAllMarker-OnClick事件
設定刪除所有的地圖示記。
//JScript
function btnDeleteAllMarkerOnClick(sender)
//刪除所有的標記以及彈出式標註資訊
{
UgLeafletMap01.DeleteAllMarker;
UgLeafletMap01.DeleteAllPopup;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure btnDeleteAllMarkerOnClick(sender: tobject);
//刪除所有的標記以及彈出式標註資訊
begin
UgLeafletMap01.DeleteAllMarker;
UgLeafletMap01.DeleteAllPopup;
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- btnSetMarkerTooltipContent-OnClick事件
設定新增工具提示資訊。
//JScript
function btnSetMarkerTooltipContentOnClick(sender)
//新增工具提示
{
UgLeafletMap01.SetMarkerTooltipContent("1",UGMM.LT("雨雪天氣注意路上安全"));
UgLeafletMap01.ZoomOut(3);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure btnSetMarkerTooltipContentOnClick(sender: tobject);
//新增工具提示
begin
UgLeafletMap01.SetMarkerTooltipContent('1',UGMM.LT('雨雪天氣注意路上安全'));
UgLeafletMap01.ZoomOut(3);
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- btnAddPolyLine-OnClick事件
設定新增折線。
//JScript
function btnAddPolyLineOnClick(sender)
//新增折線
{
var Polyline;
Polyline= new TPolyline();
Polyline.Id = "1";
Polyline.LatLngs = "[[30.735048, 120.824017],[30.77, 120.90]]";
Polyline.Color = "red";
UgLeafletMap01.AddPolyline(Polyline);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//PasScript
procedure btnAddPolyLineOnClick(sender: tobject);
//新增折線
var
Polyline:TPolyline;
begin
Polyline:=TPolyline.Create;
Polyline.Id := '1';
Polyline.LatLngs := '[[30.735048, 120.824017],[30.77, 120.90]]';
Polyline.Color := 'red';
UgLeafletMap01.AddPolyline(Polyline);
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
- btnAddPolyLineLatLng-OnClick事件
設定給折線加一條邊。
//JScript
function btnAddPolylineLatLngOnClick(sender)
//折線加邊
{
UgLeafletMap01.AddPolylineLatLng("1","[30.72, 120.83]");
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure btnAddPolylineLatLngOnClick(sender: tobject);
//折線加邊
begin
UgLeafletMap01.AddPolylineLatLng('1','[30.72, 120.83]');
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnDeleteAllPolyline-OnClick事件
點選以刪除所有的折線。
//JScript
function btnDeleteAllPolylineOnClick(sender)
//刪除所有折線
{
UgLeafletMap01.DeleteAllPolyline;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnDeleteAllPolylineOnClick(sender: tobject);
//刪除所有折線
begin
UgLeafletMap01.DeleteAllPolyline;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnAddPolygon-OnClick事件
設定新增多邊形。
//JScript
function btnAddPolygonOnClick(sender)
//新增多邊形
{
var Polygon;
Polygon= new TPolygon();
Polygon.Id = "1";
Polygon.LatLngs = "[[30.51, 120.68],[37.77, 122.43],[34.04, 118.2]]";
Polygon.Color = "red";
UgLeafletMap01.AddPolygon(Polygon);
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//PasScript
procedure btnAddPolygonOnClick(sender: tobject);
//新增多邊形
var
Polygon:TPolygon;
begin
Polygon:=TPolygon.Create;
Polygon.Id := '1';
Polygon.LatLngs := '[[30.51, 120.68],[37.77, 122.43],[34.04, 118.2]]';
Polygon.Color := 'red';
UgLeafletMap01.AddPolygon(Polygon);
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
- btnAddPolygonLatLng-OnClick事件
設定為多邊形新增一條邊。
//JScript
function btnAddPolygonLatLngOnClick(sender)
//多邊形加邊
{
UgLeafletMap01.AddPolygonLatLng("1","[31.02,116.3]");
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnAddPolygonLatLngOnClick(sender: tobject);
//多邊形加邊
begin
UgLeafletMap01.AddPolygonLatLng('1','[31.02,116.3]');
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnDeleteAllPolygon-OnClick事件
刪除所有的多邊形。
//JScript
function btnDeleteAllPolygonOnClick(sender)
//刪除所有多邊形
{
UgLeafletMap01.DeleteAllPolygon;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnDeleteAllPolygonOnClick(sender: tobject);
//刪除所有多邊形
begin
UgLeafletMap01.DeleteAllPolygon;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnAddRectangle-OnClick事件
新增矩形。
//JScript
function btnAddRectangleOnClick(sender)
//新增矩形
{
var Rectangle;
Rectangle= new TRectangle();
Rectangle.Id = "1";
Rectangle.LatLngs = "[[34.559322, 116.767822], [34.1210604, 116.021240]]";
Rectangle.Color = "red";
Rectangle.Weight = 1;
UgLeafletMap01.AddRectangle(Rectangle);
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//PasScript
procedure btnAddRectangleOnClick(sender: tobject);
//新增矩形
var
Rectangle:TRectangle;
begin
Rectangle:=TRectangle.Create;
Rectangle.Id := '1';
Rectangle.LatLngs := '[[34.559322, 116.767822], [34.1210604, 116.021240]]';
Rectangle.Color := 'red';
Rectangle.Weight := 1;
UgLeafletMap01.AddRectangle(Rectangle);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// Make sure to add code blocks to your code group
- btnAddRectangleLatLng-OnClick事件
設定為矩形增加邊線。
//JScript
function btnAddRectangleLatLngOnClick(sender)
//矩形加邊
{
UgLeafletMap01.AddRectangleLatLng("1","[34.331221,116.532738]");
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnAddRectangleLatLngOnClick(sender: tobject);
//矩形加邊
begin
UgLeafletMap01.AddRectangleLatLng('1','[34.331221,116.532738]');
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnDeleteAllRectangle-OnClick事件
設定刪除所有的矩形。
//JScript
function btnDeleteAllRectangleOnClick(sender)
//刪除所有矩形
{
UgLeafletMap01.DeleteAllRectangle;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnDeleteAllRectangleOnClick(sender: tobject);
//刪除所有矩形
begin
UgLeafletMap01.DeleteAllRectangle;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnAddCircle-OnClick事件
點選以新增圓圈。
//JScript
function btnAddCircleOnClick(sender)
//新增圓圈
{
var Circle;
Circle= new TCircle();
Circle.Id = "1";
Circle.LatLngs = "[30.675048,120.604017]";
Circle.Radius = 200;
UgLeafletMap01.AddCircle(Circle);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//PasScript
procedure btnAddCircleOnClick(sender: tobject);
//新增圓圈
var
Circle:TCircle;
begin
Circle:=TCircle.Create;
Circle.Id := '1';
Circle.LatLngs := '[30.675048,120.604017]';
Circle.Radius := 200;
UgLeafletMap01.AddCircle(Circle);
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
- btnSetCircle-OnClick事件
設定圓圈的參數，如半徑，位置等。
//JScript
function btnSetCircleOnClick(sender)
//設定圓圈
{
UgLeafletMap01.SetCirclePosition("1","30.676048","120.604017");
UgLeafletMap01.SetCircleRadius("1",150);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure btnSetCircleOnClick(sender: tobject);
//設定圓圈
begin
UgLeafletMap01.SetCirclePosition('1','30.676048','120.604017');
UgLeafletMap01.SetCircleRadius('1',150);
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- btnDeleteAllCircle-OnClick事件
設定刪除所有的圓圈。
//JScript
function btnDeleteAllCircleOnClick(sender)
//刪除所有圓圈
{
UgLeafletMap01.DeleteAllCircle;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnDeleteAllCircleOnClick(sender: tobject);
//刪除所有圓圈
begin
UgLeafletMap01.DeleteAllCircle;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnAddCircleMarker-OnClick事件
設定新增帶圓的標記。
//JScript
function btnAddCircleMarkerOnClick(sender)
//新增帶圓標記
{
var CircleMarker;
CircleMarker= new TCircleMarker();
CircleMarker.Id = "1";
CircleMarker.LatLngs = "[30.675048,120.604017]";
CircleMarker.Radius = 200;
UgLeafletMap01.AddCircleMarker(CircleMarker);
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
//PasScript
procedure btnAddCircleMarkerOnClick(sender: tobject);
//新增帶圓標記
var
CircleMarker:TCircleMarker;
begin
CircleMarker:=TCircleMarker.Create;
CircleMarker.Id := '1';
CircleMarker.LatLngs := '[30.675048,120.604017]';
CircleMarker.Radius := 200;
UgLeafletMap01.AddCircleMarker(CircleMarker);
end;
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Make sure to add code blocks to your code group
- btnSetCircleMarker-OnClick事件
設定帶圓的標記，比如標記的位置以及半徑等。
//JScript
function btnSetCircleMarkerOnClick(sender)
//設定帶圓標記
{
UgLeafletMap01.SetCircleMarkerPosition("1","30.676048","120.604017");
UgLeafletMap01.SetCircleMarkerRadius("1",150);
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure btnSetCircleMarkerOnClick(sender: tobject);
//設定帶圓標記
begin
UgLeafletMap01.SetCircleMarkerPosition('1','30.676048','120.604017');
UgLeafletMap01.SetCircleMarkerRadius('1',150);
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- btnDeleteAllCircleMarker-OnClick事件
設定刪除所有的帶圓標記。
//JScript
function btnDeleteAllCircleMarkerOnClick(sender)
//刪除帶圓標記
{
UgLeafletMap01.DeleteAllCircleMarker;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnDeleteAllCircleMarkerOnClick(sender: tobject);
//刪除帶圓標記
begin
UgLeafletMap01.DeleteAllCircleMarker;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnAddImageOverlay-OnClick事件
點選以新增圖片圖層。
//JScript
function btnAddImageOverlayOnClick(sender)
//新增圖片圖層
{
var ImageOverlay;
ImageOverlay= new TImageOverlay();
ImageOverlay.Id = "1";
ImageOverlay.Url = "files/img/car_red.png";
ImageOverlay.Bounds = "[[30, 120], [31.5, 121.88]]";
UgLeafletMap01.AddImageOverlay(ImageOverlay);
UgLeafletMap01.setZoom(8);
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//PasScript
procedure btnAddImageOverlayOnClick(sender: tobject);
//新增圖片圖層
var
ImageOverlay:TImageOverlay;
begin
ImageOverlay:=TImageOverlay.Create;
ImageOverlay.Id := '1';
ImageOverlay.Url := 'files/img/car_red.png';
ImageOverlay.Bounds := '[[30, 120], [31.5, 121.88]]';
UgLeafletMap01.AddImageOverlay(ImageOverlay);
UgLeafletMap01.setZoom(8);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// Make sure to add code blocks to your code group
- btnSetImageOverlayBounds-OnClick事件
設定圖片圖層，主要用於設定邊界的大小。
//JScript
function btnSetImageOverlayBoundsOnClick(sender)
//設定圖片圖層
{
UgLeafletMap01.SetImageOverlayBounds("1","[[30, 120], [31, 121]]");
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnSetImageOverlayBoundsOnClick(sender: tobject);
//設定圖片圖層
begin
UgLeafletMap01.SetImageOverlayBounds('1','[[30, 120], [31, 121]]');
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnDeleteAllImageOverlay-OnClick事件
刪除所有的圖片圖層。
//JScript
function btnDeleteAllImageOverlayOnClick(sender)
//刪除圖片圖層
{
UgLeafletMap01.DeleteAllImageOverlay;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnDeleteAllImageOverlayOnClick(sender: tobject);
//刪除圖片圖層
begin
UgLeafletMap01.DeleteAllImageOverlay;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnAddVideoOverlay-OnClick事件
設定新增視訊圖層。
//JScript
function btnAddVideoOverlayOnClick(sender)
//新增視訊圖層
{
var videoOverlay;
videoOverlay= new TVideoOverlay();
videoOverlay.Id = "1";
videoOverlay.Url = "files/video/rabbit320.mp4";
videoOverlay.Bounds = "[[ 30, 120], [ 31.5, 121.88]]";
UgLeafletMap01.AddVideoOverlay(videoOverlay);
UgLeafletMap01.setZoom(8);
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
//PasScript
procedure btnAddVideoOverlayOnClick(sender: tobject);
//新增視訊圖層
var
videoOverlay:TVideoOverlay;
begin
videoOverlay:=TVideoOverlay.Create;
videoOverlay.Id := '1';
videoOverlay.Url := 'files/video/rabbit320.mp4';
videoOverlay.Bounds := '[[ 30, 120], [ 31.5, 121.88]]';
UgLeafletMap01.AddVideoOverlay(videoOverlay);
UgLeafletMap01.setZoom(8);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
// Make sure to add code blocks to your code group
- btnSetVideoOverlayBounds-OnClick事件
設定視訊圖層，主要為設定其邊界資訊。
//JScript
function btnSetVideoOverlayBoundsOnClick(sender)
//設定視訊圖層
{
UgLeafletMap01.SetVideoOverlayBounds("1","[[30, 120], [31, 121]]");
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnSetVideoOverlayBoundsOnClick(sender: tobject);
//設定視訊圖層
begin
UgLeafletMap01.SetVideoOverlayBounds('1','[[30, 120], [31, 121]]');
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnDeleteAllVideoOverlay-OnClick事件
刪除所有的視訊圖層。
//JScript
function btnDeleteAllVideoOverlayOnClick(sender)
//刪除所有視訊圖層
{
UgLeafletMap01.DeleteAllVideoOverlay;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnDeleteAllVideoOverlayOnClick(sender: tobject);
//刪除所有視訊圖層
begin
UgLeafletMap01.DeleteAllVideoOverlay;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnInit-OnClick事件
設定運動軌跡模式的初始化。
//JScript
function btnInitOnClick(sender)
//初始化
{
var latlngs,speedList,routeLine,RealRouteLine,carIcon,AnimatedMarker;
latlngs = "["
+"[39.898457, 116.391844],"
+"[39.898595, 116.377947],"
+"[39.898341, 116.368001],"
+"[39.898063, 116.357144],"
+"[39.899095, 116.351934],"
+"[39.905871, 116.350670],"
+"[39.922329, 116.349800],"
+"[39.931017, 116.349671],"
+"[39.939104, 116.349225],"
+"[39.942233, 116.349910],"
+"[39.947263, 116.366892],"
+"[39.947568, 116.387537],"
+"[39.947764, 116.401988],"
+"[39.947929, 116.410824],"
+"[39.947558, 116.426740],"
+"[39.939700, 116.427338],"
+"[39.932404, 116.427919],"
+"[39.923109, 116.428377],"
+"[39.907094, 116.429583],"
+"[39.906858, 116.414040],"
+"[39.906622, 116.405321],"
+"[39.906324, 116.394954],"
+"[39.906308, 116.391264],"
+"[39.916611, 116.390748]]";
speedList = "[1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 5, 5, 4, 4, 4, 3, 2, 2, 1, 1, 1]";
// 軌跡線
routeLine = new TPolyline();
routeLine.Weight = 8;
// 實時軌跡線
realRouteLine = new TPolyline();
realRouteLine.Weight = 8;
realRouteLine.Color = "#FF9900";
//小車圖示
carIcon= new TBaseIcon();
carIcon.IconSize = "[37, 26]";
carIcon.IconAnchor = "[19,13]";
carIcon.IconUrl = "files/img/car.png";
AnimatedMarker = new TAnimatedMarker();
AnimatedMarker.MapName = "fs_map"+UgLeafletMap01.JSName;
AnimatedMarker.Latlngs = LatLngs;
AnimatedMarker.SpeedList = speedList;
AnimatedMarker.Speed = 1;
AnimatedMarker.Interval = 200;
AnimatedMarker.RouteLine = routeLine.ToString;
AnimatedMarker.RealRouteLine = realRouteLine.ToString;
AnimatedMarker.Icon = carIcon.ToString;
AnimatedMarker.InitMarker;
UgLeafletMap01.setView("39.924317","116.390619",13);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
//PasScript
procedure btnInitOnClick(sender: tobject);
//初始化
var
latlngs :String;
speedList:String;
routeLine :TPolyline;
realRouteLine:TPolyline;
carIcon:TBaseIcon;
AnimatedMarker:TAnimatedMarker;
begin
latlngs := '['
+'[39.898457, 116.391844],'
+'[39.898595, 116.377947],'
+'[39.898341, 116.368001],'
+'[39.898063, 116.357144],'
+'[39.899095, 116.351934],'
+'[39.905871, 116.350670],'
+'[39.922329, 116.349800],'
+'[39.931017, 116.349671],'
+'[39.939104, 116.349225],'
+'[39.942233, 116.349910],'
+'[39.947263, 116.366892],'
+'[39.947568, 116.387537],'
+'[39.947764, 116.401988],'
+'[39.947929, 116.410824],'
+'[39.947558, 116.426740],'
+'[39.939700, 116.427338],'
+'[39.932404, 116.427919],'
+'[39.923109, 116.428377],'
+'[39.907094, 116.429583],'
+'[39.906858, 116.414040],'
+'[39.906622, 116.405321],'
+'[39.906324, 116.394954],'
+'[39.906308, 116.391264],'
+'[39.916611, 116.390748]]';
speedList := '[1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 5, 5, 4, 4, 4, 3, 2, 2, 1, 1, 1]';
// 軌跡線
routeLine :=TPolyline.Create;
routeLine.Weight := 8;
// 實時軌跡線
realRouteLine :=TPolyline.Create;
realRouteLine.Weight := 8;
realRouteLine.Color := '#FF9900';
//小車圖示
carIcon:=TBaseIcon.Create;
carIcon.IconSize := '[37, 26]';
carIcon.IconAnchor := '[19,13]';
carIcon.IconUrl := 'files/img/car.png';
AnimatedMarker :=TAnimatedMarker.Create;
AnimatedMarker.MapName := 'fs_map'+UgLeafletMap01.JSName;
AnimatedMarker.Latlngs := LatLngs;
AnimatedMarker.SpeedList := speedList;
AnimatedMarker.Speed := 1;
AnimatedMarker.Interval := 200;
AnimatedMarker.RouteLine := routeLine.ToString;
AnimatedMarker.RealRouteLine := realRouteLine.ToString;
AnimatedMarker.Icon := carIcon.ToString;
AnimatedMarker.InitMarker;
UgLeafletMap01.setView('39.924317','116.390619',13);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// Make sure to add code blocks to your code group
- btnStart-OnClick事件
標記沿軌跡開始移動。
//JScript
function btnStartOnClick(sender)
//開始移動
{
UgLeafletMap01.Start;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnStartOnClick(sender: tobject);
//開始移動
begin
UgLeafletMap01.Start;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnPause-OnClick事件
點選以暫停標記的移動。
//JScript
function btnPauseOnClick(sender)
//暫停移動
{
UgLeafletMap01.Pause;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
//PasScript
procedure btnPauseOnClick(sender: tobject);
//暫停移動
begin
UgLeafletMap01.Pause;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnUp-OnClick事件
設定加速標記的移動。
//JScript
function btnUpOnClick(sender)
//加速
{
UgLeafletMap01.SpeedUp;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnUpOnClick(sender: tobject);
//加速
begin
UgLeafletMap01.SpeedUp;
end;
1
2
3
4
5
6
7
2
3
4
5
6
7
// Make sure to add code blocks to your code group
- btnDown-OnClick事件
設定標記減速移動。
//JScript
function btnDownOnClick(sender)
//減速
{
UgLeafletMap01.SpeedDown;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnDownOnClick(sender: tobject);
//減速
begin
UgLeafletMap01.SpeedDown;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnStop-OnClick事件
設定標記停止移動。
//JScript
function btnStopOnClick(sender)
//停止移動
{
UgLeafletMap01.Stop;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnStopOnClick(sender: tobject);
//停止移動
begin
UgLeafletMap01.Stop;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- btnGetCurrentPosition-OnClick事件
設定獲取目前的位置資訊。
//JScript
function btnGetCurrentPositionOnClick(sender)
//獲取目前位置資訊
{
UgLeafletMap01.GetCurrentPosition;
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnGetCurrentPositionOnClick(sender: tobject);
//獲取目前位置資訊
begin
UgLeafletMap01.GetCurrentPosition;
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- UgLeafletMap01-OnCurrentPosition事件
設定將定位獲取到的資訊輸出。
//JScript
function UgLeafletMap01OnCurrentPosition(sender,lat,lng,accuracy,altitude,altitudeacuracy,heading,speed,timestamp,status)
//輸出獲取到的定位資訊
{
var s;
s = UGMM.LT("經度:") + lng
+ UGMM.LT("緯度:") + lat
+ UGMM.LT("準確度:") + accuracy
+ UGMM.LT("海拔") + altitude
+ UGMM.LT("海拔準確度:") + altitudeacuracy
+ UGMM.LT("行進方向:") + heading
+ UGMM.LT("地面速度:") + speed
+ UGMM.LT("請求的時間:") + timestamp;
if (status != "enabled"){
showmessage(status);
}
else{
showmessage(s);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//PasScript
procedure UgLeafletMap01OnCurrentPosition(sender: tobject;lat: string;lng: string;accuracy: string;altitude: string;altitudeacuracy: string;heading: string;speed: string;timestamp: string;status: string);
//輸出獲取到的定位資訊
var
s:string;
begin
s := UGMM.LT('經度:') + lng
+ UGMM.LT('緯度:') + lat
+ UGMM.LT('準確度:') + accuracy
+ UGMM.LT('海拔') + altitude
+ UGMM.LT('海拔準確度:') + altitudeacuracy
+ UGMM.LT('行進方向:') + heading
+ UGMM.LT('地面速度:') + speed
+ UGMM.LT('請求的時間:') + timestamp;
if status <> 'enabled' then
showmessage(status)
Else
showmessage(s);
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Make sure to add code blocks to your code group
- btnLocate-OnClick事件
設定定位。
//JScript
function btnLocateOnClick(sender)
//設定定位
{
UgLeafletMap01.Locate();
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure btnLocateOnClick(sender: tobject);
//設定定位
begin
UgLeafletMap01.Locate();
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
- UgLeafletMap01-OnMapLocation事件
設定顯示定位結果資訊。
//JScript
function UgLeafletMap01OnMapLocation(sender,lat,lng,radius)
//顯示定位結果資訊
{
var Marker,Circle;
Marker = new TMarker();
Marker.Id = "location";
Marker.Lat = lat;
Marker.Lng = lng;
UgLeafletMap01.AddMarker(Marker);
Circle= new TCircle();
Circle.Id = "location";
Circle.LatLngs = "["+lat+","+lng+"]";
Circle.Radius = trunc(StrToFloat(radius));
UgLeafletMap01.AddCircle(circle);
UgLeafletMap01.SetMarkerPopupContent("location",UGMM.LT("您在距此點") +radius+ UGMM.LT("米範圍內"));
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//PasScript
procedure UgLeafletMap01OnMapLocation(sender: tobject;lat: string;lng: string;radius: string);
//顯示定位結果資訊
var
Marker:TMarker;
Circle:TCircle;
begin
Marker := TMarker.Create;
Marker.Id := 'location';
Marker.Lat := lat;
Marker.Lng := lng;
UgLeafletMap01.AddMarker(Marker);
Circle:=TCircle.Create;
Circle.Id := 'location';
Circle.LatLngs := '['+lat+','+lng+']';
Circle.Radius := trunc(StrToFloat(radius));
UgLeafletMap01.AddCircle(circle);
UgLeafletMap01.SetMarkerPopupContent('location',UGMM.LT('您在距此點') +radius+ UGMM.LT('米範圍內'));
end;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Make sure to add code blocks to your code group
- UgLeafletMap01-OnMarkerClick事件
當點選標記時，彈出對話方塊顯示資訊。
//JScript
function UgLeafletMap01OnMarkerClick(sender,id,lat,lng)
//點選標記，彈出對話方塊顯示資訊
{
ShowMessage(UGMM.LT("你點選了Id為：")+id+UGMM.LT(" 的Marker,緯度：")+lat+ UGMM.LT(",經度：")+lng);
}
1
2
3
4
5
6
2
3
4
5
6
//PasScript
procedure UgLeafletMap01OnMarkerClick(sender: tobject;id: string;lat: string;lng: string);
//點選標記，彈出對話方塊顯示資訊
begin
ShowMessage(UGMM.LT('你點選了Id為：')+id+UGMM.LT(' 的Marker,緯度：')+lat+ UGMM.LT(',經度：')+lng);
end;
1
2
3
4
5
6
2
3
4
5
6
// Make sure to add code blocks to your code group
# 4. 運行結果
使用滑鼠在FastWeb功能表，點選[儲存至資料庫]按鈕，將其儲存至資料庫，點選[除錯運行]確認能夠正常打開。
可點選按鈕進行地圖相關功能的測試。