前端开发中如何实现WebGIS数据可视化（四）——鼠标事件

前言

在之前的历史文章中介绍了 leaflet、mapbox、cesium 三种框架下的一些基本操作（点、线、面绘制），除简单的绘制之外，日常基本开发中可能还会用到地图的事件系统（如地图点击），这篇文章先通过点位拾取的功能简单了解下三种框架下不同的事件处理。

通过这篇文章，能够有这些收获：

• 在 leaflet、cesium、mapBox 中如何进行鼠标事件

文章中相关代码均已提交到 github，欢迎 star。

代码地址

预览地址

leaflet

leaflet 框架下对鼠标的操作较为简单，直接对 map 实例进行 addEventListener 事件即可，常用的鼠标事件如下：

type eventType =
    'click'       |
    'dblclick'    |
    'mousedown'   |
    'mouseup'     |
    'mouseover'   |
    'mouseout'    |
    'mousemove'   |
    'contextmenu' |
    'preclick';

简单实现

const addListerEventLeaflet = () => {
      window.leafletMap.on('click', leafletHandler)
}
const removeListerEventLeaflet = () => {
      window.leafletMap.off('click', leafletHandler)


const leafletHandler = (e: LeafletMouseEvent) => {
    // TODO 通过 e 参数可以进行一些操作，诸如打点等, 通过 e.latlng.lat, e.latlng.lng 可拿到点位的经纬度
    // code......
   
}}

cesium

cesium 中对鼠标事件处理稍微复杂些，需要先实例化 ScreenSpaceEventHandler，然后通过 setInputAction 处理相关的逻辑。

简单实现

let handlerCesium = null;
// 监听 cesium 鼠标事件
const addListerEventCesium = () => {
    handlerCesium = new ScreenSpaceEventHandler(window.cesiumMapMap.scene.canvas);
    handlerCesium.setInputAction((click: any) =>  {
        console.log(click);
        cesiumHandler(click)
    }, ScreenSpaceEventType.LEFT_CLICK);
}
const cesiumHandler = (click: any) => {
    // 将鼠标点击的点转换为经纬度
    const pick: {longitude: number; latitude: number; altitude: number } = window.cesiumMapService.getCoordinate(click)
    // TODO 通过拿到的经纬度可以进行其他的业务逻辑
}
const removeListerEventCesium = () => {
    handlerCesium.removeInputAction(ScreenSpaceEventType.LEFT_CLICK)
}

其中 window.cesiumMapService.getCoordinate 方法的具体 实现逻辑 。

mapbox

mapbox 下对鼠标事件的处理同 leaflet 类似，通过对地图实例进行事件监听即可。

简单实现

let handlerCesium = null;
const addListerEventMapbox = () => {
    window.mapboxMap.on('click', mapBoxHandler)
}
const mapBoxHandler = (e: any) => {
    // TODO 通过 e 参数可以进行一些操作，诸如打点等, 通过 e.lngLat.lat, e.latlng.lng 可拿到点位的经纬度
    const latitude = parseFloat(e.lngLat.lat);
    const longitude = parseFloat(e.lngLat.lng);
    
    // TODO .......code
}
/**
 * mapbox 事件监听
 */
const removeListerEventMapbox = () => {
    window.mapboxMap.off('click', mapBoxHandler)
}

最后

这篇文章只是对 leaflet、mapbox、cesium 中鼠标事件的简单入门，日常开发中常见的诸如 空间测量、坐标系转换等功能后续的文章中再更新。

历史文章

1. 前端开发中如何实现WebGIS数据可视化（一）——地图创建、点位绘制
2. 前端开发中如何实现WebGIS数据可视化（二）——线、面绘制

后续规划总结

1. 空间测量
2. 三种框架结合 echarts 做数据可视化
3. cesium、mapbox 各种模型加载、交互
4. 高阶数据可视化，诸如迁徙图、洋流、风场、各种数据模型分析等