【MAPBOX基础功能】21、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>21、绘制自动旋转的图标</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><script>mapboxgl.accessToken ='pk.eyJ1Ijoid2FuZ3Rvbmd4dWUiLCJhIjoiY2pzY3E2M2k0MDk3NzN5dDA0Nmtia2h0cCJ9.oP9fEJxOgVzm0dWGvL6tGg'const map = new mapboxgl.Map({container: 'map', // 容器 idstyle: 'mapbox://styles/mapbox/streets-v11', // mapbox底图center: [108, 35], // 初始化中心点zoom: 4, // 初始化层级})map.on('load', () => {addRotateIcon()})function addRotateIcon() {map.addImage('rotate-img',this.createRotateIconByStaticDiagram('./img/typhoon.png'))map.addSource('rotate', {type: 'geojson',data: {type: 'FeatureCollection',features: [{type: 'Feature',geometry: { type: 'Point', coordinates: [114, 35] },},],},})map.addLayer({id: 'rotate',type: 'symbol',source: 'rotate',layout: {'icon-image': 'rotate-img','icon-size': 1,'icon-offset': [0, 0],'icon-rotation-alignment': 'map','icon-allow-overlap': true,'icon-ignore-placement': true,},})}// 传入一个png图片 创建一个动态图标function createRotateIconByStaticDiagram(url) {const size = 40return {width: size,height: size,data: new Uint8Array(size * size * 4),onAdd: function () {const canvas = document.createElement('canvas')canvas.width = this.widthcanvas.height = this.heightthis.context = canvas.getContext('2d')},render: function () {const context = this.contextcontext.clearRect(0, 0, this.width, this.height)const img = new Image()img.src = urlcontext.drawImage(img, 0, 0)img.onload = function () {context.clearRect(0, 0, 40, 40)context.translate(20, 20)context.rotate(Math.PI / 45)context.translate(-20, -20)context.drawImage(img, 0, 0)}this.data = context.getImageData(0, 0, this.width, this.height).datamap.triggerRepaint()return true},}}</script></body>
</html>

【MAPBOX基础功能】21、mapbox绘制自动旋转的图标相关推荐

【MAPBOX基础功能】23、mapbox通过marker的方式绘制波纹点位
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】09、mapbox绘制线图层并进行添加、删除、更新、显隐等操作
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】24、mapbox通过canvas方式绘制波纹点位
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】11、mapbox绘制symbol icon图层并进行添加、删除、更新、显隐等操作
前言官网指引,生成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基础功能】25、mapbox地图基础工具 - 缩放
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】29、mapbox地图基础工具 - 获取当前地图层级
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】26、mapbox地图基础工具 -定位到指定的位置
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
【MAPBOX基础功能】28、mapbox地图基础工具 -获取当前地图中心点
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...

【MAPBOX基础功能】21、mapbox绘制自动旋转的图标

前言

前置图片

效果

代码实现

【MAPBOX基础功能】21、mapbox绘制自动旋转的图标相关推荐

最新文章

热门文章