Tutorial: 添加标注

添加自定义的文字、图片和点到场景中

1. 创建标注集

var markers = new Motor.MarkerCollection({
  viewer:viewer,//Motor.Viewer实例
});

2. 添加点标注

markers.add({
    id:"point1",
    position:{
        cartographicDegrees:[121,31,5]
    },
    point:{
        pixelSize:5, //点的像素大小
        color:{
            rgba:[255,0,0,255]
        },
        outlineWidth:2,
        outlineColor:{
            rgba:[255,255,0,255]
        }
    }
});

坐标的写法有多种：

//可以是经纬度
position:{
    cartographicDegrees:[121,31,5]
}
//可以是弧度制的经纬度
position:{
    cartographicRadians:[2.111848,0.541052,5]
}
//可以是笛卡尔三维世界坐标（ECEF地心地固坐标系）
position:{
    cartesian:[4650397.56551457, -3390535.52275848, -4087729.48877329]
}

2. 添加文字标注

markers.add({
    id:"label1",
    position:{
        cartographicDegrees:[121,31,5]
    },
    //标注文字内容
    label: {
        text: "文字内容",
        font: "12px 微软雅黑",
        style: "FILL_AND_OUTLINE",//文字样式
        fillColor:{
            rgba : [255, 255, 255, 255]
        },
        outlineColor:{
            rgba : [0, 0, 0, 255]
        },
        outlineWidth:2,
        showBackground: true,
        backgroundColor: {
            rgba : [255, 0, 0, 255]
        },
        verticalOrigin: 'CENTER', //垂直原点
        horizontalOrigin: 'CENTER',//水平原点
        pixelOffset:{
            cartesian2:[-10,-30]//左移10个像素，上移30个像素
        },
        disableDepthTestDistance: Number.POSITIVE_INFINITY //始终在前，不被遮挡
    }
});

3. 添加图片标注

markers.add({
    id:"image1",
    position:{
        cartographicDegrees:[121,31,5]
    },
    //添加始终面向用户的图片标注
    billboard:{
        image: 'path/to/image.gif',//图片地址
        verticalOrigin: 'BOTTOM',
        horizontalOrigin: 'LEFT',
        scale:2,//缩放比例
        pixelOffset:{
            cartesian2:[-10,-30]
        },
        rotation: 0.1,//逆时针旋转角度(弧度制)
        disableDepthTestDistance: Number.POSITIVE_INFINITY //始终在前，不被遮挡
    }
});

3. 添加自定义属性

给标注添加自定义属性，如关联构件的guid等；可在点击标注的回调函数中返回

markers.add({
    id:"component1",
    position:{
        cartographicDegrees:[121,31,5]
    },
    //自定义属性，用于点击标注时的返回值
    properties:{
        "名称":"标注1",
        "类型":"图标",
        "关联构建id":"guid",
        "经度":121,
        "纬度":31,
        "高度":5,
    }
});

4. 组合标注

一个标注可以将图片、文字、点要素组合在一起展示

markers.add({
    id:"point",
    position:{
        cartographicDegrees:[121,31,5]
    },
    point:{
        pixelSize:5, 
        color:{
            rgba:[255,0,0,255]
        }
    },
    label: {
        text: "文字内容",
        font: "12px 微软雅黑"
    },
    billboard:{
        image: 'path/to/image.gif'
    },
    //自定义属性，用于点击标注时的返回值
    properties:{
        "名称":"标注1",
        "类型":"图标",
        "关联构建id":"guid",
        "经度":121,
        "纬度":31,
        "高度":5,
    }
});

5. 创建浮动图标集合

首先需要创建一个带有动画效果的标注集合

var markers = new Motor.MarkerCollection({
  viewer:viewer,//Motor.Viewer实例
  animated:true,//是否开启动画
  interval:"2019-08-04T12:00:00Z/2019-08-04T12:00:02Z",//动画时间
  loop:true//循环播放
})

浮动图标的原理是在一段时间内不停的变化图标的位置(position属性)，因此以上初始化过程中需要给定一个时间段(interval)。

若要标注一直处于浮动状态，就需要循环播放这段动画(loop属性设置为true)。

然后添加标注：

markers.add({
    //标注id
    id:"marker1",
    //标注位置
    position: {
        epoch:"2019-08-04T16:00:00Z",//该标注动画的起始时间
        cartographicDegrees : [
            0, 121, 31, 5, //从起始时间开始第0秒的位置
            1, 121, 31, 10, //从起始时间开始第1秒的位置
            2, 121, 31, 5, //从起始时间开始第2秒的位置
        ]
    },
    //标注文字内容
    label: {
        text: "文字内容",
        font: "12px 微软雅黑",
    },
    //添加始终面向用户的图片标注
    billboard:{
        image: 'path/to/image.gif',//图片地址
    },
    //添加点
    point:{
        pixelSize:5, //点的像素大小
        color:{
            rgba:[255,0,0,255]
        }
    },
    //自定义属性，用于点击标注时的返回值
    properties:{
        "名称":"标注1",
        "类型":"图标",
        "关联构建id":"guid",
        "经度":121,
        "纬度":31,
        "高度":5,
    }
});

上述代码中position的值不再是单一的一个经纬度坐标，而是多个时间+坐标的组合。MotorJS会对两个时间点的坐标进行插值，创建平滑的动画效果。epoch属性代表动画的起始时间，该时间一定是在interval时间段之间的。

时间+坐标的格式有多种写法

时间的写法可以是从起始时间(epoch)开始的第几秒（此时一定要写明epoch）:

[0, 121, 31, 0,
1, 121,31, 5,
2, 121, 31, 0]

也可以是遵循ISO 8601时间格式标准的字符串（此时可以不写epoch）：

["2019-08-04T16:00:00Z", 121, 31, 0,
"2019-08-04T16:00:01Z", 121,31, 5,
"2019-08-04T16:00:02Z", 121, 31, 0]