完成后的展示界面截图:
一、修改初始化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文件加载顺序,将事件方法移动到地图初始化的文件上方。
香港三维展示