浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
 
第55行: 第55行:
 
| rowspan="1" colspan="2" | textures
 
| rowspan="1" colspan="2" | textures
 
| style="width: 236px;" | 纹理折线的纹理图片路径用于纹理绘制(纹理图片宽高必须是2的n次幂),<br/>与colors二者只能选择其一进行传参<br/>
 
| style="width: 236px;" | 纹理折线的纹理图片路径用于纹理绘制(纹理图片宽高必须是2的n次幂),<br/>与colors二者只能选择其一进行传参<br/>
 +
|-
 +
| colspan="2" | dottedLine<br/>
 +
| style="width: 236px;" | 设置折线是否虚线(<span style="color:#FF0000;">Android独有</span>,设置lineDashType时候,必须设置该属性为true)<br/>
 
|-
 
|-
 
| rowspan="1" colspan="2" | lineDashType
 
| rowspan="1" colspan="2" | lineDashType
第97行: 第100行:
 
&nbsp; &nbsp; &nbsp; colors: colors,
 
&nbsp; &nbsp; &nbsp; colors: colors,
 
&nbsp; &nbsp; &nbsp; width: 16,
 
&nbsp; &nbsp; &nbsp; width: 16,
 +
&nbsp; &nbsp; &nbsp; dottedLine: true,
 
&nbsp; &nbsp; &nbsp; lineDashType: BMFLineDashType.LineDashTypeDot,
 
&nbsp; &nbsp; &nbsp; lineDashType: BMFLineDashType.LineDashTypeDot,
 
&nbsp; &nbsp; );
 
&nbsp; &nbsp; );
第171行: 第175行:
 
&nbsp; &nbsp; &nbsp; &nbsp; textures: textures,
 
&nbsp; &nbsp; &nbsp; &nbsp; textures: textures,
 
&nbsp; &nbsp; &nbsp; &nbsp; width: 16,
 
&nbsp; &nbsp; &nbsp; &nbsp; width: 16,
 +
&nbsp; &nbsp; &nbsp; &nbsp; dottedLine: true,
 
&nbsp; &nbsp; &nbsp; &nbsp; lineDashType: BMFLineDashType.LineDashTypeNone,
 
&nbsp; &nbsp; &nbsp; &nbsp; lineDashType: BMFLineDashType.LineDashTypeNone,
 
&nbsp; &nbsp; &nbsp; &nbsp; lineCapType: BMFLineCapType.LineCapButt,
 
&nbsp; &nbsp; &nbsp; &nbsp; lineCapType: BMFLineCapType.LineCapButt,
&nbsp; &nbsp; &nbsp; &nbsp; lineJoinType: BMFLineJoinType.LineJoinRound,
+
&nbsp; &nbsp; &nbsp; &nbsp; lineJoinType: BMFLineJoinType.LineJoinRound);
&nbsp; &nbsp; &nbsp; &nbsp; isKeepScale: true);
+
  
 
/// 添加polyline
 
/// 添加polyline

2020年7月29日 (三) 06:10的最后版本

更新时间:2020-06-23
本章节将对绘制折线、绘制虚线、分段颜色绘制折线、分段纹理绘制折线进行说明。通过这些功能可以绘制各种各样的规划路线或物体轨迹。
绘制折线

通过BMFPolyline类来设置折线的属性,绘制折线的示例代码如下:

/// 坐标点
List<BMFCoordinate> coordinates = List(5);
coordinates[0] = BMFCoordinate(39.865, 116.304);
coordinates[1] = BMFCoordinate(39.825, 116.354);
coordinates[2] = BMFCoordinate(39.855, 116.394);
coordinates[3] = BMFCoordinate(39.805, 116.454);
coordinates[4] = BMFCoordinate(39.865, 116.504);

/// 颜色索引,索引的值都是0,表示所有线段的颜色都取颜色集colors的第一个值
List<int> indexs = [0, 0, 0, 0];    
 
/// 颜色
List<Color> colors = List(4);     
colors[0] = Colors.blue;     
colors[1] = Colors.orange;
colors[2] = Colors.red;
colors[3] = Colors.green;

/// 创建polyline
BMFPolyline colorsPolyline = BMFPolyline(
        id: polylineOptions.hashCode.toString(),
        coordinates: coordinates,
        indexs: indexs,
        colors: colors,
        width: 16,
        lineDashType: BMFLineDashType.LineDashTypeNone,
        lineCapType: BMFLineCapType.LineCapButt,
        lineJoinType: BMFLineJoinType.LineJoinRound);

/// 添加polyline
myMapController?.addPolyline(colorsPolyline);
显示效果如图:
 

polyline.jpg


BMFPolyline包含多种可供设置的属性。常用属性如下:
名称
说明
coordinates
经纬度数组
indexs
分段索引(多纹理,多颜色折线请赋值)
width 线宽
colors 颜色折线的colors 用于颜色绘制,
与textures二者子只能选择其一进行传参
textures 纹理折线的纹理图片路径用于纹理绘制(纹理图片宽高必须是2的n次幂),
与colors二者只能选择其一进行传参
dottedLine
设置折线是否虚线(Android独有,设置lineDashType时候,必须设置该属性为true)
lineDashType 虚线绘制样式 默认实折线
lineCapType line头尾处理方式(不支持虚线) 默认普通头(iOS独有)
clickable 是否可点击(Android独有)
visible 是否可见(Android独有)
zIndex
元素的堆叠顺序(Android独有)
绘制虚线

 示例代码如下:

/// 坐标点
List<BMFCoordinate> coordinates = List(5);
coordinates[0] = BMFCoordinate(39.865, 116.304);
coordinates[1] = BMFCoordinate(39.825, 116.354);
coordinates[2] = BMFCoordinate(39.855, 116.394);
coordinates[3] = BMFCoordinate(39.805, 116.454);
coordinates[4] = BMFCoordinate(39.865, 116.504);

/// 颜色索引
List<int> indexs = [2, 3, 2, 3];

/// 颜色集
List<Color> colors = List(4);
colors[0] = Colors.blue;
colors[1] = Colors.orange;
colors[2] = Colors.red;
colors[3] = Colors.green;

BMFPolyline colorsPolyline = BMFPolyline(
        id: polylineOptions.hashCode.toString(),
        coordinates: coordinates,
        indexs: indexs,
      colors: colors,
      width: 16,
      dottedLine: true,
      lineDashType: BMFLineDashType.LineDashTypeDot,
    );

/// 添加polyline
myMapController?.addPolyline(_colorsPolyline);


 显示效果如图:

polyline2.jpg


分段颜色绘制折线

 示例代码如下:
/// 坐标点
List<BMFCoordinate> coordinates = List(5);
coordinates[0] = BMFCoordinate(39.865, 116.304);
coordinates[1] = BMFCoordinate(39.825, 116.354);
coordinates[2] = BMFCoordinate(39.855, 116.394);
coordinates[3] = BMFCoordinate(39.805, 116.454);
coordinates[4] = BMFCoordinate(39.865, 116.504);

/// 颜色索引
List<int> indexs = [2, 3, 2, 3];

/// 颜色集
List<Color> colors = List(4);
colors[0] = Colors.blue;
colors[1] = Colors.orange;
colors[2] = Colors.red;
colors[3] = Colors.green;

/// 创建polyline
BMFPolyline colorsPolyline = BMFPolyline(
        id: polylineOptions.hashCode.toString(),
        coordinates: coordinates,
        indexs: indexs,
        colors: colors,
        width: 16,
        lineDashType: BMFLineDashType.LineDashTypeNone,
        lineCapType: BMFLineCapType.LineCapButt,
        lineJoinType: BMFLineJoinType.LineJoinRound);
myMapController?.addPolyline(colorsPolyline);

显示效果如图:

polyline3.jpg

分段纹理绘制折线
纹理素材格式:纹理图片宽高须是2的整数幂,如16*64,否则绘制可能有问题;若设置了纹理图片,折线颜色将无效。分段纹理绘制折线时建议开启绘制虚线。
注意:目前仅支持对折线设置纹理,其余覆盖物目前暂不支持设置纹理。

示例代码如下:

/// 坐标点
List<BMFCoordinate> coordinates = List(5);
coordinates[0] = BMFCoordinate(39.965, 116.304);
coordinates[1] = BMFCoordinate(39.925, 116.354);
coordinates[2] = BMFCoordinate(39.955, 116.394);
coordinates[3] = BMFCoordinate(39.905, 116.454);
coordinates[4] = BMFCoordinate(39.965, 116.504);

/// 纹理索引
List<int> indexs = [2, 3, 2, 3];

/// 纹理集合
List<String> textures = List(4);
textures[0] = 'resoures/traffic_texture_smooth.png';
textures[1] = 'resoures/traffic_texture_slow.png';
textures[2] = 'resoures/traffic_texture_unknown.png';
textures[3] = 'resoures/traffic_texture_smooth.png';


/// 创建polyline
BMFPolyline texturesPolyline = BMFPolyline(
        id: polylineOptions.hashCode.toString(),
        coordinates: coordinates,
        indexs: indexs,
        textures: textures,
        width: 16,
        dottedLine: true,
        lineDashType: BMFLineDashType.LineDashTypeNone,
        lineCapType: BMFLineCapType.LineCapButt,
        lineJoinType: BMFLineJoinType.LineJoinRound);

/// 添加polyline
myMapController?.addPolyline(texturesPolyline);
显示效果如图:
     

polyline4.jpg

Polyline的点击事件

点击polyline会回调setMapOnClickedOverlayCallback接口设置的回调方法。

示例代码如下:

myMapController?.setMapOnClickedOverlayCallback(
        callback: (BMFPolyline polyline) {
      print('地图点击覆盖物回调,只支持polyline=${polyline.toMap()}');
    });
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消