使用leaflet来创建风场地图，点标记，绘图，多图层，解析

下面有文件，自取别忘了点赞！！！！！！！！！！

<!--

 * @Author: fanqingchen

 * @Description:

 * 版本：0.1

-->

<!--

leaflet-velocity 是 leaflet 绘制风场的一个插件，其控制参数如下所示

// 以下为控制参数，后面为默认值

    minVelocity: 0,  // 粒子最小速度（ m/s ）

    maxVelocity: 10,  // 粒子最大速度（ m/s ）

    velocityScale: 0.05,  // 风速的比例 ( 粒子的小尾巴长度 )

    particleAge: 90,  // 粒子在再生之前绘制的最大帧数

    lineWidth: 1,  // 绘制粒子的线宽

    particleMultiplier: 1 / 300,  // 粒子计数标量（ 粒子密度 ）

    frameRate: 15,  // 每秒所需的帧数

    colorScale: [],  // 定义自己的 hex / rgb 颜色数组 ( 粒子颜色 )

-->

在main.js中需要添加css：

import "leaflet/dist/leaflet.css";

import "leaflet-velocity/dist/leaflet-velocity.css";

<template>

    <div>

        <div id="map"></div>

    </div>

</template>

<script>

import L from "leaflet";

import "leaflet-velocity/dist/leaflet-velocity";

import "leaflet.chinesetmsproviders";

//windJson文件可下载，此为风场参数

import windJSON from "./wind-global.json";

import axios from "axios";

export default {

    data() {

        return {

            map: null,

            data: null,

            velocityLayer: null,

            marker: null,

        };

    },

    created() {

        // 获取风场数据

        // axios.get("https://sakitam-fdd.github.io/wind-layer/data/wind.json").then((res) => {

        //     this.data = res.data;

        // });

    },

    mounted() {

        this.init();

    },

    methods: {

        init() {

            //生成风场效果实例

            /**

             * 高德地图

             */

            var Gaode = L.tileLayer.chinaProvider("GaoDe.Normal.Map", {

                maxZoom: 18,

                minZoom: 2,

            });

            var Gaodimgem = L.tileLayer.chinaProvider("GaoDe.Satellite.Map", {

                maxZoom: 18,

                minZoom: 2,

            });

            var Gaodimga = L.tileLayer.chinaProvider("GaoDe.Satellite.Annotion", {

                maxZoom: 18,

                minZoom: 2,

            });

            var Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);

            // 风场图层实例

            this.velocityLayer = L.velocityLayer({

                displayValues: true,

                displayOptions: {

                    velocityType: "风向/风速",

                    displayPosition: "bottomleft",

                    displayEmptyString: "No wind data",

                },

                data: windJSON, //风场数据

                minVelocity: 1, //Velocity：速率

                maxVelocity: 10,

                velocityScale: 0.005,

                particleAge: 90,

                particleMultiplier: 1 / 1200, //粒子的数量

                lineWidth: 2, //粒子的粗细

                frameRate: 15, //定义每秒执行的次数

                colorScale: ["#7a8ff8", "#61a5f8"],

            });

            //地图图层样式1（标注：可这样使用）

            // var Esri_DarkGreyCanvas = L.tileLayer("GaoDe.Satellite.Map");

            // var Esri_DarkGreyCanvas = L.tileLayer("http://{s}.sm.mapstack.stamen.com/" + "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" + "{z}/{x}/{y}.png");

            // 生成地图！！！！！！！！！！！！！！！！！！！

            this.map = L.map("map", {

                center: [30.39459, 120.010067], // 地图中心

                zoom: 8, //缩放比列

                minZoom: 2,

                maxZoom: 18,

                zoomControl: false, // + - 按钮

                doubleClickZoom: true, // 禁用双击放大

                // crs: L.CRS.EPSG3857, //地图样式

                attributionControl: true, // 移除右下角leaflet标识

                // layers: [Esri_DarkGreyCanvas], 地图图层样式1（标注：可这样使用）

                layers: [Gaode],

            });

            L.control

                .zoom({

                    zoomInTitle: "放大",

                    zoomOutTitle: "缩小",

                })

                .addTo(this.map);

            //地图图层样式2

            //风场实例添加到地图上

            // L.tileLayer.chinaProvider("GaoDe.Normal.Map.Annotion", { maxZoom: 30, minZoom: 1 }).addTo(this.map);

            this.velocityLayer.addTo(this.map);

            // L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png?{foo}", { foo: "bar" }).addTo(this.map);

            //移除图层

            //   this.map.removeLayer(name)

            //添加icon

            var myIcon = L.icon({

                iconUrl: "https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png",

                iconSize: [19, 33],

                iconAnchor: [22, 94],

                popupAnchor: [-3, -76],

                // shadowUrl: "my-icon-shadow.png",

                // shadowSize: [68, 95],

                // shadowAnchor: [22, 94],

            });

            //添加标记点 官方api

            this.marker = L.marker([30.39459, 120.010067], { icon: myIcon });

            this.marker.addTo(this.map);

            // var marker = L.marker([30.39459, 120.010067]).addTo(this.map);

            // //添加圆形 官方api

            // var circle = L.circle([30.3949, 120.01067], {

            //     color: "red",

            //     fillColor: "#f03",

            //     fillOpacity: 0.5,

            //     radius: 500,

            // }).addTo(this.map);

            // //添加多边形 官方api

            // var polygon = L.polygon([

            //     [38.561954, 128.675429],

            //     [38.561954, 128.475429],

            //     [38.361954, 128.375429],

            // ]).addTo(this.map);

            //你可以为map或者marker之类事件驱动的类上使用on或者off添加或关闭一个事件监听 官方api

            // var popup = L.popup();

            this.marker.on("click", function (e) {

                console.log(e);

                // popup.setLatLng(e.latlng).setContent("你点击了 " + e.latlng.toString());

                // .openOn(this.map);

            });

        },

    },

};

</script>

<style scoped>

#map {

    width: 100%;

    height: 100%;

}

</style>