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

第一步:确定坐标点（以下代码都要在 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)  
    }
})

第二步:创建线标注对象

map.on('loadComplete',function(){
    // 配置线标注样式

    // 创建线标注对象 
    var linemark = new esmap.ESLineMarker({
        id: 1,                  // 设置标注对象的id
        points: [v1, v2];       // 点集合
        style: {
            lineWidth: 6,       // 线宽度
            alpha: 0.8,         // 线透明度
            offsetHeight: 0,    // 向上偏移量(距离地面高度，默认为0)
            lineType: esmap.ESLineType.FULL, // 线样式(可选项参考以下表格)
            pickable: true,     // 是否支持选中
            color: '#FF0000',   // 线条颜色
            smooth: true,       // 曲线是否光滑
            fixedWidth: false,  // 缩放时线宽是否保持不变
            lineWidthMeter: false, // 线宽是否代表真实宽度
            seeThrough: false,  // 线是否穿透显示
        }
    })
})
线标注样式说明
参数 说明 类型 可选值 默认值 是否必填
lineWidth 线宽度 Number || String —— 8 否
alpha 线透明度 Number 0-1 1 否
offsetHeight 线标注整体向上偏移量 Number —— 1 否
lineType 线样式 String DASH
DOTTED
DOT_DASH
DOUBLE_DOT_DASH
ARROW
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 金属度 Number || String 0-1 —— 否
reverseAnimate 是否反转贴图流动方向 Boolean —— false 否
closed 是否自动连接起点终点 Boolean —— false 否
animateSpeed 贴图流动速度 Number || String —— —— 否
arrow 是否绘制箭头 Boolean —— false 否
transparent 开启透明度 Boolean —— false 否

第三步:画线

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

删除线标注

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

map.clearLineMarkById(linemark.id)

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

map.clearAllLineMark()

标注支持手动控制显隐:

linemark.visible = false  // 隐藏标注
linemark.visible = true   // 显示标注

线标注常用属性

linemarker.points  // 线标注的点集
linemark.style     // 线标注的style
linemark.id        // 线标注的id
linemark.visible   // 设置/获取线是否可见
linemark.progress  // 当前显示百分比

线标注常用方法

根据点集数据动态更新线

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); // 根据点集数据动态更新线

动态更新线style

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

更新线颜色

linemark.updateColor('#00ff00')

更新线高度

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

其他方法

// 反转线的点集，并重新绘制
linemark.reverse() 
              
// 设置线的百分比(支持动画)
linemark.setProgress({
    percent: 50,        // 百分比数字
    time: 1.5,          // 动画时间
    arrow: true,        // 是否显示箭头
    onComplete:()=>{    // 动画完成回调函数
        console.log('设置百分比成功')
    }
})

// 设置部分线段透明
linemark.splitAlpha({
    percent: 20,        // 百分比数字
    isFront: true,      // 是否是前半段
    alpha: 0.8          // 透明度
})