愛招飛幫助手冊
目录

製圖控制元件

# FastWeb製圖控制元件

# 1. TUgAppSVG

  此控制元件可用於顯示SVG圖形影象。

  • SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
  • SVG 用來定義用於網路的基於向量的圖形
  • SVG 使用 XML 格式定義圖形
  • SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失
  • SVG 是萬維網聯盟的標準
  • SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

  關於SVG的定義及使用的方法請參考MDN SVG文件 (opens new window)。

  雙擊可以打開SVG瀏覽器，選擇進行瀏覽。

# 1.1. 屬性

屬性 說明
HTML 設定SVG圖形顯示的定義，在此處輸入SVG圖形的內容
Interval 設定SVG圖形變換的時間間隔，以ms為單位
SVGImgList 設定SVG圖形列表控制元件的名稱，如此處為空，則預設顯示HTML中的內容
ThreadEnabled 是否啟用定時器執行緒，如SVGImgList處未指定，則此項可設定為自旋轉

# 2. TUgSVGImgList

  此控制元件用於儲存SVG顯示的系列，雙擊可打開管理器管理顯示的SVG圖形。

# 3. TUgAppAppLeafLetMap

  此控制元件為專業的互動式地圖顯示控制元件。

# 3.1. 屬性

# 3.1.1. MapOptions

property MapOptions: TMapOptions;
1

  設定地圖相關的設定選項。

# 3.1.1.1. AnimationOptions
property AnimationOptions: TAnimationOptions;
1

  動畫效果的相關設定專案。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。

屬性名稱 型別 說明
fadeAnimation Boolean 是否啟用淡出淡出動畫，預設為True。
markerZoomAnimation Boolean Marker 標記是否使用縮放動畫進行縮放，預設為True。
transform3DLimit Integer 定義了 CSS 轉換的最大尺寸。預設值為223，其取值不應發生變化。
zoomAnimation Boolean 是否啟用地圖縮放動畫，預設為True。
zoomAnimationThreshold Integer 如果縮放差異超過此值，則不會為縮放設定動畫，預設取值為4。
# 3.1.1.2. ControlOptions
property ControlOptions: TControlOptions;
1

  控制的相關設定專案。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。

屬性名稱 型別 說明
attrubitionControl Boolean 預設情況下，是否將版權控制元件新增到地圖中。
zoomControl Boolean 預設情況下，是否將縮放控制元件新增至地圖中。
# 3.1.1.3. fullscreenControl
property fullscreenControl: Boolean;
1

  設定是否在地圖上新增全屏顯示的按鈕。此項僅在地圖首次初始化前可設定，初始化后的修改不生效。

# 3.1.1.4. InteractionOptions
property InteractionOptions: TInteractionOptions;
1

  設定互動相關的選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。

屬性名稱 型別 說明
boxZoom Boolean 是否可以在按住 shift 鍵的同時拖動滑鼠將地圖縮放到指定的矩形區域。
closePopupOnClick Boolean 如果不希望使用者點選地圖時彈出視窗自動關閉，則可以將其設定為 false。
doubleClickZoom String 地圖是否可以通過雙擊來放大，以及在按住 shift 的同時雙擊來縮小。如果設定為 'center'，不管滑鼠在哪裡，雙擊縮放都將縮放到檢視的中心。
dragging Boolean 地圖是否可以通過 滑鼠/觸控式螢幕 進行拖動。
zoomDelta Double 控制元件在進行縮放的操作時地圖縮放的級別改變的數值大小，設定為小於1的數值可以允許縮放更精細化與顆粒化
zoomSnap Integer 強制設定地圖的縮放級別為這個值的倍數，預設情況下，縮放級別將是其最接近的整數； 數值為0意味著不進行強制設定
# 3.1.1.5. KeyboardNavigationOptions
property KeyboardNavigationOptions: TKeyboardNavigationOptions;
1

  設定鍵盤導航設定的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。

屬性名稱 型別 說明
keyboard Boolean 地圖是否獲得焦點，並且允許使用者通過鍵盤和 +/- 來進行瀏覽地圖。
keyboardPanDelta Integer 按下方向鍵時，地圖平移的畫素數量。
# 3.1.1.6. MapStateOptions
property MapStateOptions: TMapStateOptions;
1

  設定地圖狀態的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。

屬性名稱 型別 說明
center string 地圖初始化時的中心點位置，以陣列的形式來表示[30,120]
crs string 該地圖使用的座標系。如果你不確定此處表示的座標系是什麼意思，請不要更改它。
maxBounds string 當這個選項被設定后，地圖將被限制在指定的地理邊界內， 當用戶平移將地圖拖動到檢視以外的範圍時會出現彈回的效果， 並且也不允許縮小檢視到指定範圍以外的區域（這取決於地圖的尺寸）
maxZoom Integer 地圖的最大縮放級別。
minZoom Integer 地圖的最小縮放級別。
renderer string 在地圖上繪製向量圖層的預設方法，預設為 L.SVG 或 L.Canvas， 這取決於瀏覽器是否支援。
zoom Integer 設定地圖初始化時的縮放等級。
# 3.1.1.7. MouseWheelOptions
property MouseWheelOptions: TMouseWheelOptions;
1

  設定地圖滑鼠滾輪操作的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。

屬性名稱 型別 說明
scrollWheelZoom string 地圖是否允許通過使用滑鼠滾輪進行縮放。如果設定為'center'，不管滑鼠在哪裡，都將會放大到檢視的中心。
wheelDebounceTime Integer 限制滾輪的觸發速度（以毫秒為單位）。預設情況下，使用者通過滾輪縮放的次數間隔不能小於 40 毫秒。
wheelPxPerZoomLevel Integer 多少滾動畫素意味著一個完整縮放級別的更改。 較小的值將使滾輪變焦更快（反之亦然）。
# 3.1.1.8. PanningInertiaOptions
property PanningInertiaOptions: TPanningInertiaOptions;
1

  設定在修改地圖中心的方法中使用到的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。

屬性名稱 型別 說明
easeLinearity Double 平移動畫緩動的曲率因子（三次貝塞爾曲線的一個參數）。1.0 表示線性動畫，這個數字越小，曲線越彎曲。
inertia Boolean 如果啟用，地圖的平移會有一種慣性效應，即地圖在拖動時形成動力，並在一段時間內繼續向同一方向移動。此項設定可提高在觸控式螢幕設備上的使用體驗。預設情況下是啟用的。
inertiaDeceleration Integer 慣性運動減速的速度，以畫素/秒為單位。
inertiaMaxSpeed Integer 慣性運動的最大速度，以畫素/秒為單位。
maxBoundsViscosity Integer 如果設定了 maxBounds，這個選項將控制拖動地圖時邊界的穩固程度。預設值為 0.0，允許使用者以正常速度在界外拖動，更高的值會減慢地圖在界外的拖動速度，而 1.0 使界外完全穩固，防止使用者在界外拖動。
worldCopyJump Boolean 啟用該選項后，當你平移到世界的另一個 "copy" 時，地圖會跟蹤並無縫跳轉到原來的副本，這樣所有的覆蓋物如 markers（標記）和 vector layers（向量圖層）都仍然可見。
# 3.1.1.9. preferCanvas
property preferCanvas: Boolean;
1

  是否使用 Canvas 來渲染 Path（路徑）。預設情況下，所有 Path 都是使用 SVG 進行渲染。

# 3.1.1.10. TouchInterationOptions
property TouchInterationOptions: TTouchInterationOptions;
1

  設定地圖觸控互動的相關選項。這些設定專案僅在地圖首次初始化前可設定，初始化后的修改不生效。

屬性名稱 型別 說明
bounceAtZoomLimits Boolean 如果您不希望在地圖縮放超過最小/最大縮放範圍時反彈，請將其設定為 false。
tap Boolean 是否啟用 mobile hacks 以支援 taps（在 iOS / Android上 修復 200ms 點選延遲）和 touch（觸發 contextmenu 事件）。
taptolerance Integer 使用者在觸控時，移動手指的畫素數超過此值時被認為是有效的 tap。
touchZoom string 地圖是否允許通過兩根手指的觸控拖動進行縮放。如果通過 'center'，就會放大到檢視的中心，而不管 touch 事件（手指）在哪裡。對具有 touch-capable 功能的網路瀏覽器來說是啟用的。

# 3.2. 事件

事件名稱 觸發條件
OnMarkerClick 當點選地圖中的標記時觸發事件
OnMapClick 當點選地圖上的內容時觸發事件
OnMapLocation 當地圖定位時觸發事件
OnCurrentPosition 設定目前定位時觸發事件

# 3.3. 方法

# 3.3.1. InitMap

procedure InitMap;
1

  呼叫此方法后，地圖控制元件將初始化。

# 3.3.2. GetCenter

procedure GetCenter;
1

  獲取

# 3.3.3. GetCurrentPosition

procedure GetCurrentPosition;
1

  獲取目前地圖的定位資訊。

# 3.3.4. PrintMap

procedure PrintMap;
1

  呼叫地圖的列印功能。

# 3.3.5. AddNavBar

procedure AddNavBar;
1

  在地圖中新增導航欄的元件。

# 3.3.6. AddScale

procedure AddScale;
1

  在地圖中新增比例尺的元件。

# 3.3.7. SetView

procedure SetView(Lat: string; Lng: string; maxZoom: Integer; Options: string);
1

  用指定的動畫選項來設定地圖的檢視。

    //JScript
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgAppLeafLetMap01.setView("39.924317","116.390619",13);
    1
    2
    3
    //PasScript
//將地圖的中心定位至指定的經緯度，並調整其縮放級別。
UgAppLeafLetMap01.setView('39.924317','116.390619',13);
    1
    2
    3
    // Make sure to add code blocks to your code group

    # 3.3.8. SetZoom

    procedure SetZoom(Zoom: Integer; Options: string);
    1

      設定地圖的縮放級別。

      //JScript
//設定放大級別
UgAppLeafLetMap01.SetZoom(18);
      1
      2
      3
      //PasScript
//設定放大級別
UgAppLeafLetMap01.SetZoom(18);
      1
      2
      3
      // Make sure to add code blocks to your code group

      # 3.3.9. ZoomIn

      procedure ZoomIn(Zoom: Integer; Options: string);
      1

        設定放大地圖級別的數量。

        //JScript
//放大
UgAppLeafLetMap01.ZoomIn(1);
        1
        2
        3
        //PasScript
//放大
UgAppLeafLetMap01.ZoomIn(1);
        1
        2
        3
        // Make sure to add code blocks to your code group

        # 3.3.10. ZoomOut

        procedure ZoomOut(Zoom: Integer; Options: string);
        1

          設定縮小地圖級別的數量。

          //JScript
//縮少
UgAppLeafLetMap01.ZoomOut(1);
          1
          2
          3
          //PasScript
//縮少
UgAppLeafLetMap01.ZoomOut(1);
          1
          2
          3
          // Make sure to add code blocks to your code group

          # 3.3.11. SetZoomAround

          procedure SetZoomAround(Lat: string; Lng: string; Zoom: Integer; Options: string)
          1

            設定縮放地圖，同時保持地圖上的指定地理位置不變（功能類似於滾動縮放和雙擊縮放操作）。

          # 3.3.12. FitBounds

          procedure FitBounds(LatLngBounds: string; Options: string);
          1

            將地圖的檢視設定在給定的矩形地理範圍內,地圖會自動計算最大縮放級別和中心點。

          # 3.3.13. FitWorld

          procedure FitWorld(Options: string);
          1

            設定一個包含整個世界的地圖檢視，其縮放級別為最大。

          # 3.3.14. PanTo

          procedure PanTo(Lat: string; Lng: string; Options: string);
          1

            將地圖平移到一個指定的中心點。

          # 3.3.15. SetMinZoom

          procedure SetMinZoom(zoom: Integer);
          1

            設定地圖的最小縮放級別。

          # 3.3.16. SetMaxZoom

          procedure SetMaxZoom(zoom: Integer);
          1

            設定地圖的最大縮放級別。

          # 3.3.17. Locate

          procedure Locate(setView: Boolean; maxZomm: Integer; watch: Boolean; timeout: Integer; maximumAge: Integer; enableHighAccuracy: Boolean);
          1

            獲取目前設備的定位資訊，此方法要求瀏覽器訪問的網站運行在https模式下。

          選項 型別 預設 說明
          watch Boolean false 如果為 true，則開始使用 W3C watchPosition 方法連續觀察位置變化（而不是檢測一次）。之後你可以使用 StopLocate 方法停止觀察。
          setView Boolean false 如果為 true，則根據檢測精度自動將地圖檢視設定為使用者位置，如果地理定位失敗，則自動設定為世界檢視。
          maxZoom Integer Infinity 使用 setView 選項時，自動檢視設定的最大縮放。
          timeout Integer 10000 在觸發 locationerror 事件之前等待來自地理位置響應的毫秒數 。
          maximumAge Integer 0 檢測到的位置的最大時長。如果自上次地理定位響應以來經過的毫秒數少於此毫秒數，locate 則將返回快取的位置。
          enableHighAccuracy Boolean false 啟用高精度

          # 3.3.18. StopLocate

          procedure StopLocate;
          1

            使用此方法后，停止定位。

          # 3.3.19. AddTileLayer

          procedure AddTilelayer(value: TTileLayer);
          1

            使用此方法可在地圖上載入瓦片圖層。

            //JScript
  var TileLayer,TileLayer1;
  //建立圖層配置
  TileLayer= new TTileLayer();
  TileLayer.Id = "1";
  TileLayer.tileLayer = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
  TileLayer.minZoom = 1;
  TileLayer.maxZoom = 18;
  TileLayer.noWrap = true;
  //建立瓦片圖層
  UgAppLeafLetMap01.AddTilelayer(TileLayer);
  
  //建立圖層配置
  TileLayer1= new TTileLayer();
  TileLayer1.Id = "2";
  TileLayer1.tileLayer = "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token={TOKEN}";
  TileLayer1.minZoom = 1;
  TileLayer1.maxZoom = 18;
  TileLayer1.noWrap = true;
  //建立瓦片圖層
  UgAppLeafLetMap01.AddTilelayer(TileLayer1);
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            //PasScript
Var 
  TileLayer,TileLayer1:TTileLayer;
begin
  //建立圖層配置
  TileLayer:=TTileLayer.Create;
  TileLayer.Id := '1';
  TileLayer.tileLayer := 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
  TileLayer.minZoom := 1;
  TileLayer.maxZoom := 18;
  TileLayer.noWrap := true;
  //建立瓦片圖層
  UgAppLeafLetMap01.AddTilelayer(TileLayer);
  
  //建立圖層配置
  TileLayer1:=TTileLayer.Create;
  TileLayer1.Id := '2';
  TileLayer1.tileLayer := 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token={TOKEN}';
  TileLayer1.minZoom := 1;
  TileLayer1.maxZoom := 18;
  TileLayer1.noWrap := true;
  //建立瓦片圖層
  UgAppLeafLetMap01.AddTilelayer(TileLayer1);
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
            // Make sure to add code blocks to your code group

              其中的瓦片圖層使用的URL地址為以下的格式：

            'http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png'
            1

            {s} 是指可用的子域之一（按順序使用，以幫助解決每個域的瀏覽器並行請求限制；子域值在選項中指定;預設為 a, b 或 c , 可以省略), {z} — 縮放級別, {x} 和 {y} — 瓦片座標。 {r} 可以用來在URL中新增 "@2x" 以載入視網膜瓦片。

            # 3.3.20. LayerGroupAddLayer

            procedure LayerGroupAddLayer(Id: string)
            1

              將給定的圖層新增到組中。

              //JScript
  UgAppLeafLetMap01.LayerGroupAddLayer("1");
  UgAppLeafLetMap01.LayerGroupAddLayer("2");
  UgAppLeafLetMap01.MapAddLayerGroup;
  UgAppLeafLetMap01.MapAddControlLayers;
              1
              2
              3
              4
              5
              //PasScript
begin
  UgAppLeafLetMap01.LayerGroupAddLayer('1');
  UgAppLeafLetMap01.LayerGroupAddLayer('2');
  UgAppLeafLetMap01.MapAddLayerGroup;
  UgAppLeafLetMap01.MapAddControlLayers;
end;
              1
              2
              3
              4
              5
              6
              7
              // Make sure to add code blocks to your code group

              # 3.3.21. FeatureGroupAddLayer

              procedure FeatureGroupAddLayer(Id: string);
              1

                將給定的圖層新增至要素組中。

              # 3.3.22. MapAddTileLayer

              procedure MapAddTilelayer(Id: string);
              1

                為地圖新增給定的瓦片圖層。

              # 3.3.23. MapAddLayerGroup

              procedure MapAddLayerGroup;
              1

                為地圖新增特定的組。

              # 3.3.24. MapAddFeatureGroup

              procedure MapAddFeatureGroup;
              1

                為地圖新增特定的要素組。

              # 3.3.25. MapAddControlLayers

              procedure MapAddControlLayers;
              1

                為地圖新增控制層。

              # 3.3.26. SpeedUp

              procedure SpeedUp;
              1

                加快標記的移動速度。

              # 3.3.27. SpeedDown

              procedure SpeedDown;
              1

                減慢標記的移動速度。

              # 3.3.28. Start

              procedure Start;
              1

                設定開始移動標記。

              # 3.3.29. Pause

              procedure Pause;
              1

                設定暫停移動標記。

              # 3.3.30. Stop

              procedure Stop;
              1

                設定停止移動標記。

              # 3.3.31. AddMarker

              procedure AddMarker(value: TMarker);
              1

                在地圖上新增一個標記。

                //JScript
 var Marker,Icon;
 //建立圖示
 Icon = new TBaseIcon();
 Icon.IconUrl = "files/car_red.png";
 //建立Marker 
 Marker = TMarker;
 Marker.Id = "2";
 Marker.Keyboard = true;
 Marker.Title = "";
 Marker.Alt = " ";
 Marker.Lat = "30.675048";
 Marker.Lng = "120.604017";
 Marker.Icon = Icon.ToString;
 UgAppLeafLetMap01.AddMarker(Marker);
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15
                //PasScript
Var
 Marker:TMarker;
 Icon:TBaseIcon;
begin
 //建立圖示
 Icon:= TBaseIcon.Create;
 Icon.IconUrl := 'files/car_red.png';
 //建立Marker 
 Marker := TMarker.Create;
 Marker.Id := '2';
 Marker.Keyboard := true;
 Marker.Title := '';
 Marker.Alt := ' ';
 Marker.Lat := '30.675048';
 Marker.Lng := '120.604017';
 Marker.Icon := Icon.ToString;
 UgAppLeafLetMap01.AddMarker(Marker);
end;
                1
                2
                3
                4
                5
                6
                7
                8
                9
                10
                11
                12
                13
                14
                15
                16
                17
                18
                19
                // Make sure to add code blocks to your code group

                # 3.3.32. DeleteAllMarker

                procedure DeleteAllMarker;
                1

                  刪除地圖上所有的標記資訊。

                # 3.3.33. DeleteMarker

                procedure DeleteMarker(Id: string);
                1

                  刪除指定的地圖示記。

                # 3.3.34. SetMarkerPosition

                procedure SetMarkerPosition(Id: string; Lat: string; Lng: string);
                1

                  設定指定的地圖示記指向的地理位置。

                UgAppLeafLetMap01.SetMarkerPosition('1','30.675048','120.604017');
                1

                # 3.3.35. SetMarkerPopupContent

                procedure SetMarkerPopupContent(Id: string; Content: string);
                1

                  設定地圖示記對應的彈出視窗中顯示的文字內容。

                  //JScript
 var Marker,Circle;
 Marker = new TMarker(); 
 Marker.Id = "location";
 Marker.Lat = lat;
 Marker.Lng = lng;
 UgAppLeafLetMap01.AddMarker(Marker);
 
 Circle= new TCircle();
 Circle.Id = "location";
 Circle.LatLngs = "["+lat+","+lng+"]";
 Circle.Radius = trunc(StrToFloat(radius));
 UgAppLeafLetMap01.AddCircle(circle); 
 UgAppLeafLetMap01.SetMarkerPopupContent("location","You are in " +radius+ " meters radius");
                  1
                  2
                  3
                  4
                  5
                  6
                  7
                  8
                  9
                  10
                  11
                  12
                  13
                  14
                  //PasScript
procedure UgAppLeafLetMap01OnMapLocation(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;
 UgAppLeafLetMap01.AddMarker(Marker);
 
 Circle:=TCircle.Create;
 Circle.Id := 'location';
 Circle.LatLngs := '['+lat+','+lng+']';
 Circle.Radius := trunc(StrToFloat(radius));
 UgAppLeafLetMap01.AddCircle(circle); 
 UgAppLeafLetMap01.SetMarkerPopupContent('location','You are in ' +radius+ ' meters radius');
end;
                  1
                  2
                  3
                  4
                  5
                  6
                  7
                  8
                  9
                  10
                  11
                  12
                  13
                  14
                  15
                  16
                  17
                  18
                  19
                  // Make sure to add code blocks to your code group

                  # 3.3.36. SetMarkerTooltipContent

                  procedure SetMarkerTooltipContent(Id: string; Content: string);
                  1

                    設定與地圖示記繫結的工具提示顯示的內容。

                    //JScript
UgAppLeafLetMap01.SetMarkerTooltipContent("1","I am here~~~");
                    1
                    2
                    //PasScript
UgAppLeafLetMap01.SetMarkerTooltipContent('1','I am here~~~');
                    1
                    2
                    // Make sure to add code blocks to your code group
                    1

                    # 3.3.37. AddPopup

                    procedure AddPopup(value: TPopup);
                    1

                      新增彈出對話方塊元件。

                      //JScript
  var Popup;
  Popup= new TPopup();
  Popup.Id = "1";
  Popup.Lat = "30.675048";
  Popup.Lng = "120.604017";
  Popup.Content = "<p>I am the First Popup<p>This is the Second</br>";
  UgAppLeafLetMap01.AddPopup(Popup);
                      1
                      2
                      3
                      4
                      5
                      6
                      7
                      8
                      //PasScript
Var
 Popup:TPopup;
begin
  Popup:=TPopup.Create;
  Popup.Id := '1';
  Popup.Lat := '30.675048';
  Popup.Lng := '120.604017';
  Popup.Content := '<p>I am the First Popup<p>This is the Second</br>';
  UgAppLeafLetMap01.AddPopup(Popup);
end;
                      1
                      2
                      3
                      4
                      5
                      6
                      7
                      8
                      9
                      10
                      11
                      // Make sure to add code blocks to your code group

                      # 3.3.38. DeleteAllPopup

                      procedure DeleteAllPopup;
                      1

                        刪除所有的彈出對話方塊元件。

                      # 3.3.39. DeletePopup

                      procedure DeletePopup(Id: string);
                      1

                        刪除指定的對話方塊元件。

                      # 3.3.40. SetPopupPosition

                      procedure SetPopupPosition(Id: string; Lat: string; Lng: string);
                      1

                        設定繫結的彈出對話方塊元件顯示的經緯度位置。

                      # 3.3.41. SetPopupContent

                      procedure SetPopupContent(Id: string; Content: string);
                      1

                        設定繫結的彈出對話方塊元件顯示的文字內容。

                      # 3.3.42. AddPolyline

                      procedure AddPolyline(value: TPolyline);
                      1

                        在地圖中新增折線。

                        //JScript
  var Polyline;
  Polyline= new TPolyline();
  Polyline.Id = "1";
  Polyline.LatLngs = "[[31.51, 120.68],[32.77, 122.43]]";
  Polyline.Color = "green"; 
  UgAppLeafLetMap01.AddPolyline(Polyline);
                        1
                        2
                        3
                        4
                        5
                        6
                        7
                        //PasScript
Var 
  Polyline:TPolyline;
begin
  Polyline:=TPolyline.Create;
  Polyline.Id := '1';
  Polyline.LatLngs := '[[31.51, 120.68],[32.77, 122.43]]';
  Polyline.Color := 'green'; 
  UgAppLeafLetMap01.AddPolyline(Polyline);
end;
                        1
                        2
                        3
                        4
                        5
                        6
                        7
                        8
                        9
                        10
                        // Make sure to add code blocks to your code group

                        # 3.3.43. DeleteAllPolyline

                        procedure DeleteAllPolyline;
                        1

                          刪除所有的折線。

                        # 3.3.44. DeletePolyline

                        procedure DeletePolyline(Id: string);
                        1

                          刪除指定的折線。

                        # 3.3.45. AddPolylineLatLng

                        procedure AddPolylineLatLng(Id: string; LatLng: string);
                        1

                          為指定的折線圖形根據目標經緯度的座標點新增折線。

                        # 3.3.46. AddPolygon

                        procedure AddPolygon(value: TPolygon);
                        1

                          在地圖中新增一個多邊形。

                          //JScript
  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"; 
  UgAppLeafLetMap01.AddPolygon(Polygon);
                          1
                          2
                          3
                          4
                          5
                          6
                          7
                          //PasScript
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'; 
  UgAppLeafLetMap01.AddPolygon(Polygon);
end;
                          1
                          2
                          3
                          4
                          5
                          6
                          7
                          8
                          9
                          10
                          // Make sure to add code blocks to your code group

                          # 3.3.47. DeleteAllPolygon

                          procedure DeleteAllPolygon;
                          1

                            刪除地圖上所有的多邊形。

                          # 3.3.48. DeletePolygon

                          procedure DeletePolygon(Id: string);
                          1

                            刪除地圖上指定的多邊形。

                          # 3.3.49. AddPolygonLatLng

                          procedure AddPolygonLatLng(Id: string; LatLng: string);
                          1

                            為指定的多邊形根據目標經緯度的座標點新增折線。

                          # 3.3.50. AddRectangle

                          procedure AddRectangle(value: TRectangle);
                          1

                            為地圖新增矩形。

                            //JScript
  var Rectangle;
  Rectangle= new TRectangle();
  Rectangle.Id = "1";
  //給定矩形指定的邊界，合圍的區域就是矩形
  Rectangle.LatLngs = "[[54.559322, -5.767822], [56.1210604, -3.021240]]";
  Rectangle.Color = "red"; 
  Rectangle.Weight = 1;
  UgAppLeafLetMap01.AddRectangle(Rectangle);
                            1
                            2
                            3
                            4
                            5
                            6
                            7
                            8
                            9
                            //PasScript
Var 
  Rectangle:TRectangle;
begin
  Rectangle:=TRectangle.Create;
  Rectangle.Id := '1';
  //給定矩形指定的邊界，合圍的區域就是矩形
  Rectangle.LatLngs := '[[54.559322, -5.767822], [56.1210604, -3.021240]]';
  Rectangle.Color := 'red'; 
  Rectangle.Weight := 1;
  UgAppLeafLetMap01.AddRectangle(Rectangle);
end;
                            1
                            2
                            3
                            4
                            5
                            6
                            7
                            8
                            9
                            10
                            11
                            12
                            // Make sure to add code blocks to your code group

                            # 3.3.51. DeleteAllRectangle

                            procedure DeleteAllRectangle;
                            1

                              刪除所有的矩形。

                            # 3.3.52. DeleteRectangle

                            procedure DeleteRectangle(Id: string);
                            1

                              刪除矩形。

                            # 3.3.53. AddRectangleLatLng

                            procedure AddRectangleLatLng(Id: string; LatLng: string)
                            1

                              根據給定的經緯度位置新增一個邊。

                            # 3.3.54. AddCircle

                            procedure AddCircle(value: TCircle);
                            1

                              新增一個圓形。

                              //JScript
  var Circle;
  Circle= new TCircle();
  Circle.Id = "1";
  //圓中心點的位置
  Circle.LatLngs = "[30.675048,120.604017]";
  //圓的半徑，以米為單位
  Circle.Radius = 200;
  UgAppLeafLetMap01.AddCircle(Circle);
                              1
                              2
                              3
                              4
                              5
                              6
                              7
                              8
                              9
                              //PasScript
Var 
  Circle:TCircle;
begin
  Circle:=TCircle.Create;
  Circle.Id := '1';
  //圓中心點的位置
  Circle.LatLngs := '[30.675048,120.604017]';
  //圓的半徑，以米為單位
  Circle.Radius := 200;
  UgAppLeafLetMap01.AddCircle(Circle);
end;
                              1
                              2
                              3
                              4
                              5
                              6
                              7
                              8
                              9
                              10
                              11
                              12
                              // Make sure to add code blocks to your code group

                              # 3.3.55. DeleteAllCircle

                              procedure DeleteAllCircle;
                              1

                                刪除所有的圓。

                              # 3.3.56. DeleteCircle

                              procedure DeleteCircle(Id: string);
                              1

                                刪除指定的圓。

                              # 3.3.57. SetCirclePosition

                              procedure SetCirclePosition(Id: string; Lat: string; Lng: string)
                              1

                                重新設定繫結的圓形的位置。

                              # 3.3.58. SetCircleRadius

                              procedure SetCircleRadius(Id: string; Radius: Integer);
                              1

                                重新設定指定的圓的半徑。

                              # 3.3.59. AddCircleMarker

                              procedure AddCircleMarker(value: TCircleMarker);
                              1

                                新增一個帶圓中心點的標記。

                                //JScript
  var CircleMarker;
  CircleMarker= new TCircleMarker();
  CircleMarker.Id = "1";
  CircleMarker.LatLngs = "[30.675048,120.604017]";
  CircleMarker.Radius = 200;
  UgAppLeafLetMap01.AddCircleMarker(CircleMarker);
                                1
                                2
                                3
                                4
                                5
                                6
                                7
                                //PasScript
Var 
  CircleMarker:TCircleMarker;
begin
  CircleMarker:=TCircleMarker.Create;
  CircleMarker.Id := '1';
  CircleMarker.LatLngs := '[30.675048,120.604017]';
  CircleMarker.Radius := 200;
  UgAppLeafLetMap01.AddCircleMarker(CircleMarker);
end;
                                1
                                2
                                3
                                4
                                5
                                6
                                7
                                8
                                9
                                10
                                // Make sure to add code blocks to your code group

                                # 3.3.60. DeleteAllCircleMarker

                                procedure DeleteAllCircleMarker;
                                1

                                  刪除所有的帶標記的圓。

                                # 3.3.61. SetCircleMarkerPosition

                                procedure SetCircleMarkerPosition(Id: string; Lat: string; Lng: string)
                                1

                                  重新設定標記圓標定的位置。

                                # 3.3.62. SetCircleMarkerRadius

                                procedure SetCircleMarkerRadius(Id: string; Radius: Integer)
                                1

                                  重新設定標記圓標定的半徑。

                                # 3.3.63. AddImageOverlay

                                procedure AddImageOverlay(value: TImageOverlay);
                                1

                                  新增圖片的圖層。

                                  //JScript
  var ImageOverlay;
  ImageOverlay= new TImageOverlay(); 
  ImageOverlay.Id = "1";
  ImageOverlay.Url = "files/car_red.png";
  ImageOverlay.Bounds = "[[ 30, 120], [ 31.5, 121.88]]";
  UgAppLeafLetMap01.AddImageOverlay(ImageOverlay);
  UgAppLeafLetMap01.setZoom(8);
                                  1
                                  2
                                  3
                                  4
                                  5
                                  6
                                  7
                                  8
                                  //PasScript
Var
 ImageOverlay:TImageOverlay;
begin
    ImageOverlay:=TImageOverlay.Create; 
    ImageOverlay.Id := '1';
    ImageOverlay.Url := 'files/car_red.png';
    ImageOverlay.Bounds := '[[ 30, 120], [ 31.5, 121.88]]';
    UgAppLeafLetMap01.AddImageOverlay(ImageOverlay);
    UgAppLeafLetMap01.setZoom(8);
end;
                                  1
                                  2
                                  3
                                  4
                                  5
                                  6
                                  7
                                  8
                                  9
                                  10
                                  11
                                  // Make sure to add code blocks to your code group

                                  # 3.3.64. DeleteAllImageOverlay

                                  procedure DeleteAllImageOverlay;
                                  1

                                    刪除所有的圖片圖層。

                                  # 3.3.65. DeleteImageOverlay

                                  procedure DeleteImageOverlay(Id: string);
                                  1

                                    刪除指定的圖片圖層。

                                  # 3.3.66. SetImageOverlayBounds

                                  procedure SetImageOverlayBounds(Id: string; LatLng: string)
                                  1

                                    設定圖片圖層顯示的邊界。

                                  # 3.3.67. AddVideoOverlay

                                  procedure AddVideoOverlay(value: TVideoOverlay);
                                  1

                                    新增視訊的圖層。

                                    //JScript
  var videoOverlay;
  videoOverlay= new TVideoOverlay(); 
  videoOverlay.Id = "1";
  videoOverlay.Url = "https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/6ceb8e64340179614968700929/v.f30.mp4";
  videoOverlay.Bounds = "[[ 30, 120], [ 31.5, 121.88]]";
  UgAppLeafLetMap01.AddVideoOverlay(videoOverlay);
  UgAppLeafLetMap01.setZoom(8);
                                    1
                                    2
                                    3
                                    4
                                    5
                                    6
                                    7
                                    8
                                    //PasScript
Var
 videoOverlay:TVideoOverlay;
begin
    videoOverlay:=TVideoOverlay.Create; 
    videoOverlay.Id := '1';
    videoOverlay.Url := 'https://vod.300hu.com/4c1f7a6atransbjngwcloud1oss/6ceb8e64340179614968700929/v.f30.mp4';
    videoOverlay.Bounds := '[[ 30, 120], [ 31.5, 121.88]]';
    UgAppLeafLetMap01.AddVideoOverlay(videoOverlay);
    UgAppLeafLetMap01.setZoom(8);
end;
                                    1
                                    2
                                    3
                                    4
                                    5
                                    6
                                    7
                                    8
                                    9
                                    10
                                    11
                                    // Make sure to add code blocks to your code group

                                    # 3.3.68. DeleteAllVideoOverlay

                                    procedure DeleteAllVideoOverlay;
                                    1

                                      刪除所有的視訊圖層。

                                    # 3.3.69. DeleteVideoOverlay

                                    procedure DeleteVideoOverlay(Id: string);
                                    1

                                      刪除指定的視訊圖層。

                                    # 3.3.70. SetVideoOverlayBounds

                                    procedure SetVideoOverlayBounds(Id: string; LatLng: string);
                                    1

                                      設定視訊圖層的邊界。

                                    圖表控制元件
                                    儀表控制元件

                                    ← 儀表控制元件→

                                    Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved