WEBGIS开发2-地图鼠标点击事件与地图标记

完成后的展示界面截图：

一、修改初始化JS文件，增加点击事件方法及增加地图矢量图层变量（initial.js）。

// mars3d.Map三维地图对象
var map;
// 事件对象，用于抛出事件到面板中
var eventTarget = new mars3d.BaseClass();
//
var mapOptions = {
    basemaps: [{ name: "香港九龙半岛", type: "tdt", layer: "img_d", show: true }],
    scene: {
        center: { lat: 22.299042, lng: 114.173246, alt: 1000, heading: 360, pitch: -44 }
    }
}
map = new mars3d.Map("mars3dContainer", mapOptions);
onMounted(map)
var tiles3dLayer;
var tilesetFlood;
var graphicLayer; // 矢量图层对象

/**
 * 初始化地图业务，生命周期钩子函数（必须）
 * 框架在地图初始化完成后自动调用该函数
 * @param {mars3d.Map} mapInstance 地图对象
 * @returns {void} 无
 */
function onMounted(mapInstance) {
    map = mapInstance // 记录map
    var point = map.getCenter()
    point.format()
    map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
    graphicLayer = new mars3d.layer.GraphicLayer({
        allowDrillPick: true // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
    })
    map.addLayer(graphicLayer)
    showTehDemo()
}

/**
 * 释放当前地图业务的生命周期函数
 * @returns {void} 无
 */
function onUnmounted() {
    map = null
}

function showTehDemo() {
    // 加模型,
    tiles3dLayer = new mars3d.layer.TilesetLayer({
        name: "香港九龙半岛", // 模型名称
        url: "http://map.yaoxwei.com/mapResources/tileset.json",  // 模型加载路径
        position: { lng: 114.172277, lat: 22.326775, alt: 0},
        maximumScreenSpaceError: 1,     // 模型细节级别，越大越模糊
        maximumMemoryUsage: 1500,       // 内存建议显存大小的50%左右，内存分配变小有利于倾斜摄影数据回收，提升性能体验
        dynamicScreenSpaceError: true,  // 减少远离摄像头的贴图的屏幕空间误差
        cullWithChildrenBounds: false,  // 是否使用子绑定卷的并集来筛选贴图
        skipLevelOfDetail: true,        // 确定在遍历过程中是否应应用跳过详细信息的级别
        preferLeaves: true,             // 先加载上叶子节点数据（需要配合skipLevelOfDetail: true使用）
        flyTo: true,                    // 加载完成数据后是否自动飞行定位到数据所在的区域
        //clampToGround: true,            // 是否贴地
    })
    map.addLayer(tiles3dLayer)
}

二、增加2个事件处理JS文件（eventClick.js、eventTrigger.js）对地图事件进行处理。

eventClick.js

/********** 事件点击触发  **********/

/**
 * 鼠标单机事件
 * @param event 地图对象
 */
function map_clickHandler(event) {
    clearTimeout(clickTimeId)
    clickTimeId = setTimeout(function () {
        console.log("鼠标单击", event)
        // 获取当前鼠标点击位置坐标信息
        coordinate(event);
    }, 250)
}

/**
 * 鼠标双击事件
 * @param event
 */
function map_dblClickHandler(event) {
    clearTimeout(clickTimeId)
    console.log("鼠标双击地图", event)
}

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 对象备注信息
 * @param text 显示文字
 * @param fontSize 显示文字大小
 * @param fontColor 显示文字颜色
 */
function addMarkPoint(graphicLayer, lng, lat, alt, images, remark, text, fontSize = 18, fontColor = "ffffff") {
    var graphic = new mars3d.graphic.BillboardEntity({
        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: 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", "消防栓", "消防栓");

四、主要HTML代码文件调整（index.html）。

调整JS文件加载顺序，将事件方法移动到地图初始化的文件上方。