<!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> <link href="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', // 容器 id style: '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 = 40 return {
width: size, height: size, data: new Uint8Array(size * size * 4), onAdd: function () {
const canvas = document.createElement('canvas') canvas.width = this.width canvas.height = this.height this.context = canvas.getContext('2d') }, render: function () {
const context = this.context context.clearRect(0, 0, this.width, this.height) const img = new Image() img.src = url context.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).data map.triggerRepaint() return true }, } } </script> </body> </html>
