vue+leaflet示例:实现风场图效果(附源码下载)

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
• 运行工具：vscode或者其他工具。
• 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
  （1）下载demo环境依赖包命令：npm i
  （2）启动demo命令：npm run dev
  （3）打包demo命令： npm run build:release

示例效果

leaflet风场图实现效果来自此参考文献：https://github.com/danwild/wind-js-leaflet

• 核心源码

<template>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:风场图</span>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import "./wind-js-leaflet";
import config from "../config";
import { useRouter } from "vue-router";
const router = useRouter();
let map = null;
onMounted(() => {
  initMap();
});
const initMap = () => {
  // 创建地图对象
  const Esri_WorldImagery = L.tileLayer(
    "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
  );

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

  //底图切换设置
  const baseLayers = {
    Satellite: Esri_WorldImagery,
    "Grey Canvas": Esri_DarkGreyCanvas,
  };

  map = L.map("map", {
    attributionControl: false,
    layers: [Esri_WorldImagery],
  });
  const layerControl = L.control.layers(baseLayers);
  layerControl.addTo(map);
  //设置地图初始化中心点和级别
  map.setView([50.00, 14.44], 3);
  //风场图初始化加载
  WindJSLeaflet.init({
    localMode: true, //true，则加载本地风场数据源
    map: map, //地图对象
    layerControl: layerControl, //地图底图切换控件
    useNearest: false,
    timeISO: null,
    nearestDaysLimit: 7,
    displayValues: true,
    displayOptions: {
      displayPosition: "bottomleft",
      displayEmptyString: "No wind data",
    },
    overlayName: "风场图", //叠加风场图图层名称
    errorCallback: handleError,
  });
};
const handleError = async (err) => {
  console.log("handleError...");
  console.log(err);
};
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
.leaflet-canvas-layer {
  opacity: 0.55;
}
.leaflet-control-wind-position {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0 5px;
  margin: 0 !important;
  color: #333;
  font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.wind-overlay {
  position: absolute;
  z-index: 1;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  height: 50px;
  width: 100vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

下载源码：GIS之家的学习交流圈