leaflet地图中显示无人机的实时位置和方向

需求：将正在巡游的无人机的实时位置和方向显示在地图上。

刚开始的想法是将无人机以marker的方式添加到地图，后面发现marker的位置好改变，但方向不好做。后面转换思路，就好做了。

一、不以标记的形式添加到leaflet地图中，而是以普通的div形式，将这个div水平垂直居中于地图。

二、当它的坐标改了后，通过setView将地图的中心改成它的坐标。

三、它的方向就通过transform:rotate()去改变。

以下是模拟的代码：

<template>
    <div class="mark">
        <div id="map"></div>
        <div class="leaflet-img" :style="{transform:`rotate(${rotateDeg}deg)`}"></div>
        <div class="tip" @click="onClick">点击此处更换摄像头坐标和方向</div>
    </div>
</template>
<script>
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet/dist/leaflet.js";
export default {
    data(){
        return{
            map:null,
            /**
             * 地图选项
             */
            opti