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 // 记录mapvar 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文件加载顺序，将事件方法移动到地图初始化的文件上方。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>香港三维展示</title><style>.cesium-widget canvas{width: 100%;height: 100%;z-index: 1;}</style>
</head>
<body><div id="mars3dContainer" class="mars3d-container"></div>
</body>
</html>
<script type="text/javascript" src="./lib/Cesium/Cesium.js"></script>
<script type="text/javascript" src="./lib/mars3d/mars3d.js"></script>
<script type="text/javascript" src="./js/config.js"></script>
<script type="text/javascript" src="./js/eventClick.js"></script>
<script type="text/javascript" src="./js/eventTrigger.js"></script>
<script type="text/javascript" src="./js/initial.js"></script>
<script type="text/javascript" src="./js/index.js"></script>

WEBGIS开发2-地图鼠标点击事件与地图标记相关推荐

地图绘制边界。高德。PPMAP。鼠标点击经纬度坐标。地图图标点点击弹窗窗口。地图图标点点击事件。
边界: == 第一种:绘制边界. 通过绘制多边形的API来绘制边界. 高德API:多边形 Polygon. 矢量图形-覆盖物-教程-地图 JS API | 高德地图API 将关键的边界轮廓经纬度坐标 ...
echarts 地图去除点击事件_echarts 地图鼠标移出地图后的事件要怎么写
不需要做鼠标移出地图后的事件监听. echarts 点击一个区域,会选中它.再次点击,就取消选中. 只需要设置地图只能选择一个,然后监听点击事件,鼠标点击时,判断该区域是否选中,如果选中则显示相应区域 ...
echarts 地图 scatter点击事件_React实现高亮可点击地图
目前越来越多的项目中开始使用地图,而对地图的需求也不仅仅是简单的纯展示,更多了各种各样的交互功能.今天这篇文章主要介绍的就react中通过Echarts实现一个高亮可点击的省市地图.接下来先看看效果图 ...
QT之鼠标点击事件学习
最近在学习点击鼠标事件,在这分享给大家 window.h中的配置 #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow& ...
jQuery鼠标点击事件
概念个人理解: jQuery鼠标点击事件是最常用的事件之一,当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件,都属于鼠标点击事件的范围.常见的鼠标操作有:单击.双击.右键等等. click ...
PyQt5重写QComboBox的鼠标点击事件
最近学PyQt5,想要做一个串口调试助手来练练手,之前用了正点原子的串口上位机,觉得点击ComboBox自动检测串口这个功能很棒,之前用QT5写串口调试助手的时候也想加入这个功能,但是一直没有成功,之 ...
css禁用鼠标点击事件
1.css禁用鼠标点击事件 .disabled { pointer-events: none; } 转载于:https://www.cnblogs.com/jiangtuzi/p/5728230.ht ...
百度地图 app 点击事件无效、不触发解决方案
百度地图 app 点击事件无效.不触发解决方案参考文章: (1)百度地图 app 点击事件无效.不触发解决方案 (2)https://www.cnblogs.com/muzhe/articles ...
android 模拟点击localinstrumentation,Android Instrumentation模拟鼠标点击事件
看了几遍网上的博客一直没有模拟出鼠标点击事件和按钮事件,后来抱着试试态度再重试的时候终于有所斩获.下面把具体的情况记录一下: 首先我们必须了解类 Instrumentation: Instrumen ...

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

WEBGIS开发2-地图鼠标点击事件与地图标记相关推荐

最新文章

热门文章