【MAPBOX基础功能】19、mapbox修改鼠标在地图上的样式
前言
官网指引，生成accesstoken，下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501](https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501)
本文使用官网accesstoken，请自行生成私人token
mapbox修改鼠标在地图上的样式
效果
代码实现
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>19、修改地图鼠标样式</title><linkhref="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css"rel="stylesheet"/><script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script><style>* {padding: 0;margin: 0;list-style: none;text-decoration: none;}html,body {width: 100%;height: 100%;}#map {width: 100%;height: 100%;}.btn-list {position: fixed;top: 100px;left: 100px;}</style></head><body><div id="map"></div><ul class="btn-list"><li onclick="editCursor('default')"><button>default</button></li><li onclick="editCursor('pointer')"><button>pointer</button></li><li onclick="editCursor('auto')"><button>auto</button></li><li onclick="editCursor('crosshair')"><button>crosshair</button></li><li onclick="editCursor('move')"><button>move</button></li><li onclick="editCursor('text')"><button>text</button></li><li onclick="editCursor('help')"><button>help</button></li><li onclick="editCursor('wait')"><button>wait</button></li><li onclick="editCursor('')"><button>手</button></li></ul><script>mapboxgl.accessToken ='pk.eyJ1Ijoid2FuZ3Rvbmd4dWUiLCJhIjoiY2pzY3E2M2k0MDk3NzN5dDA0Nmtia2h0cCJ9.oP9fEJxOgVzm0dWGvL6tGg'const map = new mapboxgl.Map({container: 'map', // 容器 idstyle: 'mapbox://styles/mapbox/satellite-v9', // mapbox底图center: [108, 35], // 初始化中心点zoom: 4, // 初始化层级})// 修改鼠标样式function editCursor(cursor) {map.getCanvas().style.cursor = cursor}</script></body>
</html>【MAPBOX基础功能】19、mapbox修改鼠标在地图上的样式相关推荐
- 【MAPBOX基础功能】20、mapbox获取当前已上图的所有的图层
前言 官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
- 【MAPBOX基础功能】16、mapbox叠加图片图层到地图上
前言 官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
- 【MAPBOX基础功能】07、mapbox添加跟随地图的自定义面板到地图上
前言 官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
- QGIS二次开发：鼠标在地图上移动时，状态栏显示鼠标所在位置经纬度
主要思路: 当鼠标在地图画布控件上移动时,会发送xyCoordinates信号,该信号参数是墨卡托坐标系表示的地图上的点坐标,然后将墨卡托坐标转为经纬度表示的WSG84坐标,绑定该信号到槽函数,然后发 ...
- 【MAPBOX基础功能】17、mapbox修改已上图图层间的显示层级
前言 官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
- 【MAPBOX基础功能】31、实现mapbox的测面功能
前言 官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
- 【MAPBOX基础功能】32、实现mapbox的测距功能
前言 官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
- 【MAPBOX基础功能】15、mapbox地图事件：点击、移入、移出、解绑
前言 官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
- 【MAPBOX基础功能】25、mapbox地图基础工具 - 缩放
前言 官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
最新文章
- hive 常见面试题
- cron表达式 每天0点10分和30分_“提前2小时下班”：学会这10个函数，办公效率提升了10倍！...
- Python入门100题 | 第077题
- 吴恩达深度学习课程deeplearning.ai课程作业：Class 2 Week 2 Optimization methods
- 90年代谁最强？乔丹不可撼动石佛上榜
- 《构建之法》阅读笔记4
- The Digits String
- python代码规范工具_如何检查python3中的代码规范
- mybatis中的#{value}和${value}的区别
- Windows 程序基础
- python基础--面向对象初始
- 关于信息化的全球进程的思考
- Python和Java哪个更好找工作？
- 七月观荷 - 江湖一剑客
- html5 css3学习资料、教程、实例收集
- APP启动无视频数据-YYC松鼠短视频系统
- UE4 RTXGI插件安装及使用
- Python-random.seed()的作用
- 企业私域运营用企业微信还是个人微信【联客云】
- 网络不通的故障，常见的故障原因及解决方案