您现在的位置: 首页 > 室内三维可视化SDK开发 > 开发指南

线标注绘制

第一步:确定坐标点（以下代码都要在三维场景加载完成后调用map.on('loadComplete'）

map.on('loadComplete',function(){
	var center = map.center;  //取三维场景的中心墨卡托坐标
	
	//定义两个点
	var v1 = {
	x: center.x + 20,   
	y: center.y + 20,
	fnum: 1,           //楼层
	offset: 10          //偏移量
	}
	var v2 = {
	x: center.x - 10,
	y: center.y - 10,
	fnum: 1,
	offset: 10
	}
})

第二步:创建线标注对象

map.on('loadComplete',function(){
//点集合
var points = [v1, v2];

    //配置线标注样式
var lineStyle = {
    lineWidth: 6,
    alpha: 0.8,
    offsetHeight: 0,
    lineType: esmap.ESLineType.FULL,
    //其他配置选项
    //pickable:true, 是否支持选中
    //color:'#FF0000',  //线的颜色
    //smooth:true,   //曲线是否光滑
    //fixedWidth:false,  //线宽是否保持不变
    //lineWidthMeter:false,  //线宽是否代表真实宽度
    //seeThrough:false,  //线是否穿透显示
    //noAnimate:false,  //不显示贴图动画(仅限有纹理动画的线)
}
	
//创建线标注对象
var linemark = new esmap.ESLineMarker(1, points, lineStyle)

})

第三步:画线

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

删除线标注

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

map.clearLineMarkById(1)

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

map.clearAllLineMark()

线类型定义

//实线
var lineStyle1 = {
    lineWidth: 6,
    alpha: 0.8,
    offsetHeight: 0,
    pickable:true,
    lineType: esmap.ESLineType.FULL
}
//普通箭头线
var lineStyle2 = {
    color: "#00ff00",
    lineWidth: 6,
    alpha: 0.8,
    offsetHeight: 0,
    pickable:true,
    lineType: esmap.ESLineType.ARROW
}
//自定义虚线(调整gap/size)
var lineStyle3 = {
    color: "#FF0000",
    lineWidth: 6,
    alpha: 0.8,
    offsetHeight: 0,
    pickable:true,
    lineType: esmap.ESLineType.DOT_DASH,
    dash: {
        size: 2,
        gap: 1
    }
    // ,noAnimate:true
}
//特殊虚线1
var lineStyle4 = {
    lineWidth: 6,
    alpha: 0.8,
    offsetHeight: 0,
    pickable:true,
    lineType: esmap.ESLineType.DOUBLE_DOT_DASH
}
//特殊虚线2
var lineStyle5 = {
    lineWidth: 6,
    alpha: 0.8,
    offsetHeight: 0,
    pickable:true,
    lineType: esmap.ESLineType.TRI_DOT_DASH
}
//导航线
var lineStyle6 = {
    color: "#33cc61",
    lineWidth: 6,
    alpha: 0.8,
    pickable:true,
    offsetHeight: 1,
    lineType: esmap.ESLineType.ESARROW,
    noAnimate: false  //控制箭头动画
}

//贴图线
var lineStyle7 = {
    url:"./road.png",  //贴图线的图片地址
    lineType: esmap.ESLineType.TEXTURE,
    lineMode: esmap.ESLineMode.PLANE, 
    //esmap.ESLineMode.PLANE:平面 ，esmap.ESLineMode.CIRCLE:管道
    closed:false,  //是否自动连接起点终点
    pickable:true,
    metalness:false,  //材质金属性
    reverseAnimate:false,  //是否反转贴图流动方向
    animateSpeed:false,  //贴图流动速度
    arrow:false,  //是否绘制箭头
}

线标注常用属性

 linemarker.points  //线标注的点集
 linemarker.style   //线标注的lineStyle
 linemarker.id   //线标注的id
 linemarker.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}
    ]
linemarker.updatePoints(array);  //根据点集数据动态更新线

var linestyle = {
    lineWidth: 6,
    alpha: 0.8,
    offsetHeight: 0,
    lineType: esmap.ESLineType.FULL
}
linemarker.updateStyle(linestyle)   //动态更新线style


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


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