WEBGIS开发3-地图面标记

完成后的展示界面截图：

优化调整：在地图效果处理事件中增加了地图对象的唯一标识信息（ID），用于后续地图事件的处理。

一、调整事件处理JS文件并增加面标记（eventTrigger.js）。

/********** 事件触发事件 **********/

/**
 * 获取地图经纬度信息
 * @param event 地图对象
 */
function coordinate(event) {
    var cartesian = event.cartesian;
    var point = mars3d.LngLatPoint.fromCartesian(cartesian);
    point.format(); //经度、纬度、高度
    console.log("---------- 当前坐标位置信息 ----------");
    console.log("当前经度：" + point.lng);
    console.log("当前纬度：" + point.lat);
    console.log("当前高度：" + point.alt);
}

/**
 * 地图标记信息(点)
 * @param graphicLayer 矢量对象信息
 * @param lng 对象所在经度
 * @param lat 对象所在纬度
 * @param alt 对象所在高度
 * @param images 对象展示图片信息
 * @param remark 对象备注信息（Object格式）
 * @param id 对象唯一标识信息
 * @param text 显示文字
 * @param fontSize 显示文字大小
 * @param fontColor 显示文字颜色
 */
function addMarkPoint(graphicLayer, lng, lat, alt, images, remark, id, text, fontSize = 18, fontColor = "ffffff") {
    var graphic = new mars3d.graphic.BillboardEntity({
        id: id,
        position: new mars3d.LngLatPoint(lng, lat, alt),
        style: {
            image: images,
            scale: 1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            label: {
                text: text,
                font_size: fontSize,
                color: fontColor,
                pixelOffsetY: -50,
                distanceDisplayCondition: true,
                distanceDisplayCondition_far: 500000,
                distanceDisplayCondition_near: 0
            }
        },
        attr: remark
    })
    graphicLayer.addGraphic(graphic)
}

/**
 * 地图标记信息(面)
 * @param graphicLayer 矢量对象信息
 * @param positions 点位数据信息 格式：[[经度,纬度,高度],[经度,纬度,高度],......]
 * @param surfaceColor 面的展示颜色（十六进制）
 * @param id 对象唯一标识信息
 * @param text 对象展示名称
 * @param fontSize 显示文字大小
 * @param fontColor 显示文字颜色
 * @param remark 对象备注信息（Object格式）
 */
function addMarkSurface(graphicLayer, positions, surfaceColor, id, text, fontSize = 18, fontColor = "ffffff", remark) {
    var graphic = new mars3d.graphic.PolygonEntity({
        id: id,
        positions: positions,
        style: {
            color: surfaceColor,
            opacity: 0.5,
            outline: true,
            outlineWidth: 3,
            outlineColor: "#ffffff",
            label: {
                text: text,
                font_size: fontSize,
                color: fontColor,
                distanceDisplayCondition: true,
                distanceDisplayCondition_far: 500000,
                distanceDisplayCondition_near: 0
            }
        },
        attr: remark
    });
    graphicLayer.addGraphic(graphic)
}

二、测试面标记效果（index.js）。

// on绑定事件
map.on(mars3d.EventType.click, this.map_clickHandler, this)
map.on(mars3d.EventType.dblClick, this.map_dblClickHandler, this)
var clickTimeId; // 双击会触发两次单击事件的解决

/********** 测试方法 **********/
// 测试标记信息（点）
addMarkPoint(graphicLayer,114.172397,22.295,4.1, "../images/icon/icon-1.png", "消防栓", "point_1","消防栓");

// 测试标记信息（面）
var surfacePositions = [[114.172293, 22.29494, 5.8],[114.172291, 22.294818, 5.8],[114.172579, 22.29485, 5.8],[114.172553, 22.294976, 5.8]];
addMarkSurface(graphicLayer, surfacePositions,"#0C904C",1, "面标记");