【CesiumJS入门】（8）自定义鼠标指针图标——地球范围内实现

原创

已于 2023-08-01 09:09:56 修改 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #cesium

于 2023-08-01 09:08:57 首次发布

前言

要做一个鼠标打点的功能，那么对鼠标指针的样式就有了可变的需求。效果如下图，当鼠标进入到地球范围内时，就修改自定义的样式。离开地球后就恢复默认样式。

示例指针图标来自SuperMap GIS产品彩色系功能图标库，十分感谢公开。

在这里插入图片描述

代码

/*
 * @Date: 2023-07-30 21:16:14
 * @LastEditors: ReBeX  420659880@qq.com
 * @LastEditTime: 2023-08-01 09:00:00
 * @FilePath: \cesium-tyro-blog\src\utils\Event\cursorEvent.js
 * @Description: 鼠标指针相关事件
 * import { pickCursor } from '@/utils/Event/cursorEvent.js'
 */
import {
   
    viewer } from '@/utils/createCesium.js' // 引入地图对象
import * as Cesium from 'cesium'

let handleInstance // 指针实例
const svgIcon = `<svg t="1690723682852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13680" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><defs><style type="text/css"></style></defs><path d="M400 400m48 0l160 0q48 0 48 48l0 160q0 48-48 48l-160 0q-48 0-48-48l0-160q0-48 48-48Z" fill="#FFFFFF00" p-id="13681"></path>&

最低0.47元/天解锁文章