您现在的位置: 首页 > SDK开发 > 开发指南


线标注绘制 lineMarker.gif

第一步:确定坐标点(以下代码都要在地图加载完成后调用map.on('loadComplete')


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
}

第二步:创建线标注对象


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

//配置线标注样式
var lineStyle = {
lineWidth: 6,
alpha: 0.8,
offsetHeight: 0,
lineType: esmap.ESLineType.FULL
}

//创建线标注对象
var linemark = new esmap.ESLineMarker(1, points, lineStyle)

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

第三步:画线


//调用地图的画线方法
map.drawLineMark(linemark)

删除线标注

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

    map.clearLineMarkById(1)
也可以直接删除地图所有的线

    map.clearAllLineMark()

线类型定义


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