线标注绘制开发支持-城市三维场景引擎城市导航及制作|易景空间场景ESMap

三维可视化场景绘制线标注

第一步:确定坐标点（以下代码都要在 map.on('loadComplete') 中调用）

    map.on('loadComplete',function(){
  var center = map.center;  // 取场景的中心墨卡托坐标
	
  // 定义两个点
  var v1 = {
    x: center.x + 20,   
    y: center.y + 20,
    fnum: 1,            // 楼层，默认为1
    offset: 10          // 向上偏移量(距离地面高度，默认为0)
  }
  var v2 = {
    x: center.x - 10,
    y: center.y - 10,
    fnum: 1,            // 楼层，默认为1
    offset: 10          // 向上偏移量(距离地面高度，默认为0)  
  }

  // 点集合
  var points = [v1, v2];
})

第二步:创建线标注对象

    map.on('loadComplete',function(){
  // 配置线标注样式
  var lineStyle = {
      lineWidth: 6,                 // 线宽度
      alpha: 0.8,                   // 线透明度
      offsetHeight: 0,              // 向上偏移量(距离地面高度，默认为0) 
      lineType: esmap.ESLineType.FULL, // 线样式(可选项参考以下表格)
      // 其他配置选项(具体属性配置参考以下表格)
      // smooth:true,                // 曲线是否光滑
      // fixedWidth:false,           // 缩放时线宽是否保持不变
      // lineWidthMeter:false,       // 线宽是否代表真实宽度
      // seeThrough:false,           // 线是否穿透显示
  }
  
  // 创建线标注对象
  var linemark = new esmap.ESLineMarker({
      id: 1,  // 线ID
      bid: 0, // 室外标识
      points: points,   // 点集
      style: lineStyle, // 线样式
  })

  // 如果要让线标注支持点击，并在点击时返回一定的信息，请绑定datas对象
  linemark.datas = {
    name: 'myMarker'
  }
})

配置参数说明

lineWidth	线宽度	Number \|\| String	——	8	否
alpha	线透明度	Number	0-1	1	否
offsetHeight	线标注整体向上偏移量	Number	——	1	否
lineType	线样式	String	ARROW DASH DOTTED DOT_DASH DOUBLE_DOT_DASH ESARROW FULL TEXTURE TRI_DOT_DASH	esmap.ESLineType.DASH	否
pickable	是否支持选中	Boolean	——	false	否
color	线的颜色	String	颜色单词 \|\| 十六进制颜色码	#ff0000	否
smooth	曲线是否光滑	Boolean	——	true	否
fixedWidth	缩放时线宽是否保持不变	Boolean	——	false	否
lineWidthMeter	线宽是否代表真实宽度，设置为true时，lineWidth的值为多少则线宽多少米	Boolean	——	false	否
seeThrough	线是否穿透显示	Boolean	——	false	否
noAnimate	不显示贴图动画(仅限有纹理动画的线),类型为esmap.ESLineType.ESARROW也可以设置该属性	Boolean	——	false	否

贴图线额外参数说明

注意:以下属性lineType必须设置为esmap.ESLineType.TEXTURE才可生效

url	贴图线的图片地址	String	——	——	否
lineMode	贴图线模型样式	String	PLANE(平面) CIRCLE(管道)	esmap.ESLineMode.PLANE	否
arrow	是否显示箭头	Boolean	——	false	否
metalness	金属度	String \|\| Number	0-1	——	否
reverseAnimate	是否反转贴图流动方向	Boolean	——	false	否
closed	是否自动连接起点终点	Boolean	——	false	否
animateSpeed	贴图流动速度	String \|\| Number	——	——	否
arrow	是否绘制箭头	Boolean	——	false	否
transparent	开启透明度	Boolean	——	false	否

第三步:画线

    // 调用场景的画线方法
map.drawLineMark(linemark);

删除线标注

您可以根据ID删除某一个线标注:

    map.clearLineMarkById(linemark.id)

也可以直接删除场景所有的线:

    map.clearAllLineMark()

线标注常用属性

     linemarker.points  // 线标注的点集
 linemark.style     // 线标注的lineStyle
 linemark.id        // 线标注的id
 linemark.visible   // 设置/获取线是否可见

线标注常用方法

    var array = [{x: map.center.x, y: map.center.y, fnum: 1, offsetHeight: 5} , 
             {x: map.center.x + 10, y: map.center.y + 10, fnum: 1, offsetHeight: 5}]

linemark.updatePoints(array);     // 根据点集数据动态更新线

var linestyle = {
    lineWidth: 6,     // 线宽度
    alpha: 0.8,       // 透明度
    offsetHeight: 0,  // 向上偏移量
    lineType: esmap.ESLineType.FULL // 线样式
}
linemark.updateStyle(linestyle)  // 动态更新线style

linemark.updateColor('#00ff00')  // 动态更新线颜色

linemark.updateHeight({          // 动态更新线高度
    height: 10,  // 高度
    time: 1      // 动画过渡时间,单位（秒/s）
})