爱招飞帮助手册
目录

制图控件

# 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