绘制形状 Fengmap JavaScript SDK 支持自定义绘制图形，包括自定义绘制线、多边形、圆等图形。

绘制线

Fengmap JavaScript SDK 支持绘制线操作。用户可根据坐标点集绘制折线。注：线是针对整个地图的，线段的点可以是不同楼层的点。示例代码如下：

//添加线坐标点
var naviResults=[{
    groupId:1,
    points:[{x: 12961602.000000,y: 4861851.500000,z: 56},
            {x: 12961625.000000,y: 4861850.500000,z: 56},
            {x: 12961625.000000,y: 4861825.000000,z: 56}]
}];

var naviLines = []; //当前的路线

//绘制线图层
function drawLines(results) {
    //绘制部分
    var line = new fengmap.FMLineMarker();
    for (var i = 0; i < results.length; i++) {
        var result = results[i];
        var gid = result.groupId;
        var points = result.points;
        var seg = new fengmap.FMSegment();
        seg.groupId = gid;
        seg.points = points;

        line.addSegment(seg);

        //配置线型，颜色、线宽、透明度等
        var lineStyle = {
            color:'#FF0000',  //设置线的颜色
            lineWidth: 8,   //设置线的宽度
            alpha: 0.8,     //设置线的透明度
            lineType:fengmap.FMLineType.dotDash,
            dash: {
                size: 5,  //设置线的大小
                gap: 0,  //0为实线，大于0为虚线
            }
        };

        var lineObject = map.drawLineMark(line, lineStyle);
        naviLines.push(lineObject);
    }
};

//清除所有路径线
map.clearLineMark();
// 清除第一条路径线
// map.clearLineMark(naviLines[0]);

绘制多边形

Fengmap JavaScript SDK 支持绘制多边形操作。用户可根据坐标点集绘制多边形，注：多边形是针对楼层的，每一楼层可包含多个多边形。绘制多边形步骤如下：

• • 添加模拟点坐标。

  //创建自定义多边形形状PolygonMarker所需的顶点数组
  var coords=[ {x: 12961583, y: 4861865, z: 56},
      {x: 12961644, y: 4861874, z: 56},
      {x: 12961680, y: 4861854, z: 56},
      {x: 12961637, y: 4861819, z: 56},
      {x: 12961590, y: 4861835, z: 56}
  ];

• • 创建多边形图层并添加到指定楼层上面。

  var groupLayer=map.getFMGroup(1);
  //创建PolygonMarkerLayer
  var layer =new fengmap.FMPolygonMarkerLayer();
  groupLayer.addLayer(layer);

• • 在多边形图层上面添加多边形标注。

  var polygonMarker = new fengmap.FMPolygonMarker({
      alpha: .5,             //设置透明度
      lineWidth: 1,      //设置边框线的宽度
      height: 6,    //设置高度*/
      points: coords //多边形坐标点
  });
  
  layer.addMarker(polygonMarker);  //文本标注层添加文本Marker
  

绘制圆形

Fengmap JavaScript SDK 支持绘制圆形操作。用户可根据中心点坐标和半径绘制圆形，注：多边形是针对楼层的，每一楼层可包含多个多边形。绘制圆形步骤如下：

• • 添加模拟点坐标和半径。

  //创建自定义圆形PolygonMarker所需的中心点坐标和半径
  var centerPnt = {x: 1.2961644E7, y: 4861874.0};
  var radius = 40;

• • 创建多边形图层并添加到指定楼层上面。

  var groupLayer=map.getFMGroup(1);
  //创建PolygonMarkerLayer
  var layer =new fengmap.FMPolygonMarkerLayer();
  groupLayer.addLayer(layer);

• • 在多边形图层上面添加圆形标注。

  var circleMarker = new fengmap.FMPolygonMarker({
      color: '#3CF9DF',  //设置颜色
      alpha: .3,             //设置透明度
      lineWidth: 3,      //设置边框线的宽度
      height: 6,  //设置高度
      //设置为圆形
      points:{
          type:'circle', //设置为圆形
          center: {x: 1.2961644E7, y: 4861874.0}, //设置此形状的中心坐标
          radius: 30,//设置半径
          segments: 40,//设置段数，默认为40段
      }
  });
  
  layer.addMarker(circleMarker);  //多边形图层上面添加圆形标注

绘制矩形

Fengmap JavaScript SDK 支持绘制矩形操作。用户可根据中心点坐标和矩形高、宽绘制矩形，注：矩形是针对楼层的，每一楼层可包含多个矩形。绘制矩形步骤如下：

• • 添加模拟中心点坐标和高宽。

  //创建自定义矩形PolygonMarker所需的中心点坐标和半径
  var centerPnt = {x:1.2961583E7,y:4861865.0};
  var w = 30,h = 30;

• • 创建矩形图层并添加到指定楼层上面。

  var groupLayer=map.getFMGroup(1);
  //创建PolygonMarkerLayer
  var layer =new fengmap.FMPolygonMarkerLayer();
  groupLayer.addLayer(layer);

• • 在矩形图层上面添加矩形标注。

  var rectangleMarker = new fengmap.FMPolygonMarker({
      color: '#9F35FF',  //设置颜色
      alpha: .3,             //设置透明度
      lineWidth: 1,      //设置边框线的宽度
      height: 6,  //设置高度
      points:{
          type: 'rectangle', //设置为矩形
          center: centerPnt,  //设置此形状的中心坐标
          width: w,
          height: h
      }
  });
  
  layer.addMarker(rectangleMarker);  //多边形图层上面添加矩形标注

添加多边形、圆形、矩形的结果如下：